/**
 * 响应式与动画样式模块
 * 包含：移动端适配、媒体查询
 */

/* ==================== 响应式设计：移动端适配 ==================== */

@media screen and (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    
    .left-panel {
        width: 100%;
        min-width: 0;
        height: auto;
    }
    
    .center-panel {
        width: 100%;
        height: 50vh;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .shortcuts-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}