/* 移动端样式 */
@media (max-width: 768px) {
    /* 导航样式 */
    .nav {
        flex-wrap: wrap;
    }
    
    .nav li a {
        padding: 0 10px;
        font-size: 13px;
    }
    
    /* 布局样式 */
    main {
        padding: 10px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    /* 表单样式 */
    .form-control,
    .form-select {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* 搜索框样式 */
    .search-box {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .search-type-select {
        min-width: 100%;
    }
    
    /* 排序框样式 */
    .sort-box {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .sort-select {
        min-width: 100%;
    }
    
    /* 聊天列表样式 */
    .chat-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        gap: 10px;
    }
    
    .chat-avatar {
        margin-bottom: 0;
        margin-right: 0;
    }
    
    .chat-info {
        width: 100%;
        margin-bottom: 0;
        padding-right: 0;
    }
    
    .chat-action {
        margin-left: 0;
        align-self: flex-end;
    }
    
    /* 表格样式 */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .table th,
    .table td {
        padding: 8px 5px;
        font-size: 13px;
    }
    
    /* 长文本处理 */
    .long-text {
        max-width: 120px;
    }
    
    .message-content {
        max-width: 200px;
    }
    
    .message-content .text-sm {
        max-width: 100%;
        max-height: 100px;
    }
    
    /* 卡片样式 */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .card-body {
        padding: 12px;
    }
    
    /* 分页样式 */
    .pagination {
        gap: 10px;
        padding: 10px 0;
    }
    
    .pagination a,
    .pagination > div > a {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }
    
    /* 批量操作 */
    .batch-operations {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    /* 按钮样式 */
    .btn {
        padding: 10px 16px;
        font-size: 14px;
        text-align: center;
    }
    
    /* 按钮组样式 */
    .btn-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .btn-group .btn {
        flex: 1;
        min-width: 80px;
    }
    
    .btn-sm {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* 弹性布局 */
    .d-flex {
        flex-wrap: wrap;
    }
    
    .gap-3 {
        gap: 10px;
    }
    
    /* 消息页面 */
    .message-page .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    /* 登录页面 */
    .login-box {
        margin: 50px auto;
        padding: 20px;
    }
    
    /* 模板消息页面 */
    .template-grid {
        grid-template-columns: 1fr;
    }
    
    .template-card {
        padding: 12px;
    }
    
    /* 素材管理页面 */
    .material-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .material-item {
        padding: 15px;
    }
    
    .material-thumb {
        height: 100px;
    }
    
    /* 步骤指示器 */
    .steps {
        flex-wrap: wrap;
    }
    
    .step {
        margin: 0 10px;
    }
    
    .step-arrow {
        margin: 0 10px;
        font-size: 16px;
    }
    
    /* 表单步骤 */
    .form-step h3 {
        font-size: 18px;
    }
    
    /* 确认区域 */
    .confirm-section {
        padding: 20px;
    }
    
    /* 步骤按钮 */
    .step-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-prev,
    .btn-success.btn-lg {
        width: 100%;
        text-align: center;
    }
    
    /* 发送消息页面 */
    .send-message-container {
        padding: 20px;
    }
    
    /* 用户搜索 */
    .user-search-section {
        margin-bottom: 20px;
    }
    
    /* 已选用户 */
    .selected-user {
        padding: 15px;
    }
    
    /* 参数输入 */
    .param-input-group input {
        padding: 12px 15px;
    }
    
    /* 确认区域 */
    .confirm-block {
        margin-bottom: 15px;
    }
    
    /* 确认用户 */
    .confirm-user {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    /* 消息预览 */
    .message-preview-box {
        padding: 12px;
    }
    
    /* 确认URL */
    .confirm-url {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    /* 发送按钮 */
    .btn-success.btn-lg {
        width: 100%;
        text-align: center;
    }
    
    /* 聊天页面 */
    #chat-messages {
        max-height: 400px;
        padding: 15px;
    }
    
    .message {
        max-width: 85%;
        padding: 10px 14px;
    }
    
    /* 消息类型按钮 */
    .msg-type-buttons {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .msg-type-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* 消息输入区域 */
    #message-form {
        padding: 15px;
    }
    
    #message-content {
        padding: 10px;
        font-size: 14px;
    }
    
    /* 表单输入样式 */
    #image-file, #voice-file, #video-file, #news-image {
        padding: 6px;
    }
    
    #news-title, #news-description, #news-url {
        padding: 8px;
    }
    
    /* 响应式网格 */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* 设置页面 */
    .settings {
        grid-template-columns: 1fr;
    }
    
    /* 素材选择 */
    .material-select-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        padding: 12px;
    }
    
    .material-select-card {
        border-radius: 6px;
    }
    
    .material-select-card-thumb {
        height: 50px;
    }
    
    .material-select-card-info {
        padding: 8px;
    }
    
    .material-select-card-title {
        font-size: 12px;
    }
    
    .material-select-card-meta {
        font-size: 10px;
    }
    
    .material-select-card-id {
        font-size: 9px;
    }
    
    /* 文章列表 */
    .article-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .article-thumb {
        width: 100%;
        height: 120px;
    }
    
    .article-details {
        width: 100%;
    }
    
    /* 封面预览 */
    .cover-preview {
        width: 150px;
        height: 90px;
    }
    
    /* 加载状态 */
    .loading-indicator {
        padding: 15px;
    }
    
    .loading-spinner {
        width: 25px;
        height: 25px;
    }
    
    /* 空状态 */
    .empty-state {
        padding: 40px 15px;
    }
    
    .empty-state-icon {
        font-size: 50px;
    }
    
    /* 获取模板区域 */
    .fetch-section {
        padding: 40px 15px;
    }
    
    .fetch-icon {
        font-size: 60px;
    }
    
    /* 模板列表 */
    .template-list {
        max-height: 400px;
    }
    
    .template-item {
        padding: 15px;
    }
    
    /* 模板搜索 */
    .template-search input {
        padding: 10px 12px;
    }
    
    /* 模板搜索框 */
    .template-search-box input {
        padding: 10px 12px;
    }
    
    /* 模板预览 */
    .template-preview-box {
        padding: 12px;
    }
    
    /* 页脚 */
    footer {
        padding: 12px;
        font-size: 11px;
    }
}