/*
================================================================
响应式样式 — 移动端适配
================================================================
当屏幕宽度小于 768px 时触发移动端布局：
- 侧栏变为可滑出的覆盖层
- 消息气泡占满宽度
- 输入区域固定在底部
*/

@media (max-width: 768px) {
    /* ========== 侧栏变为覆盖层 ========== */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 100;
        transform: translateX(-100%);  /* 默认隐藏 */
        box-shadow: var(--shadow-md);
    }

    /* 侧栏展开状态 */
    #sidebar.open {
        transform: translateX(0);
    }

    /* 展开侧栏时的遮罩层 */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    #sidebar-overlay.visible {
        display: block;
    }

    /* 显示汉堡菜单按钮 */
    #btn-toggle-sidebar {
        display: block;
    }

    /* ========== 消息气泡占满宽度 ========== */
    .message {
        max-width: 95%;
    }

    /* ========== 聊天头部缩小 ========== */
    #chat-header h1 {
        font-size: 1rem;
    }

    /* ========== 输入区域适配 ========== */
    #message-input {
        font-size: 16px;  /* 防止 iOS 缩放 */
    }
}