/* 响应式设计样式 */

/* 超小屏幕 (手机竖屏) */
@media screen and (max-width: 480px) {
    /* 基础调整 */
    :root {
        --font-size-sm: 11px;
        --font-size-md: 13px;
        --font-size-lg: 15px;
        --spacing-xs: 2px;
        --spacing-sm: 6px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
    }

    /* 聊天容器调整 */
    .chat-list {
        padding: var(--spacing-sm) var(--spacing-xs);
        padding-bottom: 100px;
    }

    .message {
        margin-bottom: var(--spacing-md);
        padding: 0 var(--spacing-xs);
    }

    /* 头像缩小 */
    .avatar {
        width: 32px;
        height: 32px;
    }

    /* 气泡调整 */
    .bubble {
        max-width: 90%;
        padding: 8px 12px;
        font-size: var(--font-size-md);
    }

    /* 输入面板调整 */
    .input-panel {
        min-height: 48px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .text-input,
    .voice-btn {
        height: 32px;
        font-size: var(--font-size-md);
    }

    .text-input {
        margin: 0 var(--spacing-xs);
        padding: 0 8px;
    }

    .voice-btn {
        margin: 0 var(--spacing-sm);
    }

    /* 按钮缩小 */
    .mode-switch,
    .more-btn {
        width: 32px;
        height: 32px;
    }

    .icon {
        width: 18px;
        height: 18px;
    }

    /* 语音气泡调整 */
    .voice-bubble {
        min-width: 80px;
        max-width: 250px;
        min-height: 32px;
        padding: 0 12px;
        gap: var(--spacing-xs);
    }

    .voice-icon {
        width: 14px;
        height: 14px;
    }

    /* 推荐问题调整 */
    .recommend-text-list {
        margin-right: 48px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .recommend-item-text {
        font-size: var(--font-size-sm);
        margin-left: var(--spacing-xs);
    }

    /* 上传选项调整 */
    .upload-option {
        width: 60px;
    }

    .option-icon {
        width: 32px;
        height: 32px;
    }

    .upload-option span {
        font-size: var(--font-size-sm);
    }

    /* 模态框调整 */
    .modal-content {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }

    .modal-content textarea {
        min-height: 80px;
        padding: var(--spacing-xs);
    }

    /* 取消按钮调整 */
    .cancel-request-btn {
        right: var(--spacing-md);
        bottom: 120px;
        width: 40px;
        height: 40px;
        font-size: var(--font-size-sm);
    }

    /* Toast调整 */
    .toast-content {
        font-size: var(--font-size-sm);
    }

    /* 错误提示调整 */
    .error-message {
        font-size: var(--font-size-sm);
        max-width: 90%;
    }
}

/* 小屏幕 (手机横屏) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* 聊天调整 */
    .chat-list {
        padding: var(--spacing-md) var(--spacing-sm);
        padding-bottom: 110px;
    }

    /* 气泡调整 */
    .bubble {
        max-width: 80%;
    }

    /* 推荐问题 */
    .recommend-text-list {
        margin-right: 60px;
    }

    /* 上传选项 */
    .upload-options {
        padding: var(--spacing-sm);
    }

    .upload-option {
        width: 70px;
    }
}

/* 中等屏幕 (平板) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 布局调整 */
    .chat-container {
        max-width: 768px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    /* 聊天列表调整 */
    .chat-list {
        padding: var(--spacing-lg) var(--spacing-md);
        padding-bottom: 120px;
    }

    /* 气泡调整 */
    .bubble {
        max-width: 70%;
    }

    /* 输入面板调整 */
    .input-panel {
        max-width: 768px;
        margin: 0 auto;
    }

    /* 推荐问题 */
    .recommend-text-list {
        margin-right: 80px;
    }

    /* 上传选项调整 */
    .upload-options {
        justify-content: center;
        gap: var(--spacing-xl);
    }

    /* 模态框调整 */
    .modal-content {
        max-width: 500px;
    }
}

/* 大屏幕 (桌面) */
@media screen and (min-width: 1025px) {
    /* 布局调整 */
    .chat-container {
        max-width: 900px;
        margin: 0 auto;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
        border-radius: var(--border-radius-large);
        margin: 20px auto;
        height: calc(100vh - 40px);
        overflow: hidden;
    }

    /* 气泡调整 */
    .bubble {
        max-width: 60%;
        font-size: var(--font-size-lg);
        padding: 14px 18px;
    }

    /* 头像调整 */
    .avatar {
        width: 48px;
        height: 48px;
    }

    /* 输入面板调整 */
    .input-panel {
        max-width: 900px;
        margin: 0 auto;
        border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    }

    .text-input,
    .voice-btn {
        height: 44px;
        font-size: var(--font-size-lg);
    }

    .text-input {
        padding: 0 16px;
    }

    /* 按钮调整 */
    .mode-switch,
    .more-btn {
        width: 44px;
        height: 44px;
    }

    .icon {
        width: 24px;
        height: 24px;
    }

    /* 语音气泡调整 */
    .voice-bubble {
        min-width: 120px;
        max-width: 350px;
        min-height: 48px;
        padding: 0 18px;
    }

    .voice-icon {
        width: 20px;
        height: 20px;
    }

    /* 推荐问题 */
    .recommend-text-list {
        margin-right: 100px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .recommend-title-text {
        font-size: var(--font-size-md);
    }

    .recommend-item-text {
        font-size: var(--font-size-md);
        margin-left: var(--spacing-md);
    }

    /* 上传选项 */
    .upload-options {
        gap: var(--spacing-xl);
        padding: var(--spacing-lg);
    }

    .upload-option {
        width: 100px;
    }

    .option-icon {
        width: 48px;
        height: 48px;
    }

    .upload-option span {
        font-size: var(--font-size-md);
    }

    /* 模态框调整 */
    .modal-content {
        max-width: 600px;
        padding: var(--spacing-xl);
    }

    .modal-content h3 {
        font-size: var(--font-size-xl);
    }

    .modal-content textarea {
        font-size: var(--font-size-lg);
        padding: var(--spacing-md);
    }

    /* 取消按钮调整 */
    .cancel-request-btn {
        right: var(--spacing-xl);
        bottom: 180px;
        width: 56px;
        height: 56px;
        font-size: var(--font-size-md);
    }

    /* Toast调整 */
    .toast-content {
        font-size: var(--font-size-md);
    }

    /* 错误提示调整 */
    .error-message {
        font-size: var(--font-size-md);
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* 消息图片调整 */
    .message-image img {
        max-width: 300px;
        max-height: 300px;
    }
}

/* 超大屏幕 (4K显示器) */
@media screen and (min-width: 1440px) {
    :root {
        --font-size-sm: 14px;
        --font-size-md: 16px;
        --font-size-lg: 18px;
        --font-size-xl: 20px;
        --spacing-xs: 6px;
        --spacing-sm: 10px;
        --spacing-md: 20px;
        --spacing-lg: 30px;
        --spacing-xl: 40px;
    }

    .chat-container {
        max-width: 1200px;
        height: calc(100vh - 60px);
        margin: 30px auto;
    }

    .bubble {
        font-size: var(--font-size-lg);
        padding: 16px 20px;
    }

    .avatar {
        width: 56px;
        height: 56px;
    }

    .text-input,
    .voice-btn {
        height: 48px;
        font-size: var(--font-size-lg);
    }

    .mode-switch,
    .more-btn {
        width: 48px;
        height: 48px;
    }

    .icon {
        width: 28px;
        height: 28px;
    }

    .voice-bubble {
        min-height: 52px;
        padding: 0 20px;
    }

    .voice-icon {
        width: 24px;
        height: 24px;
    }
}

/* 横屏优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
    /* 减少垂直间距 */
    .chat-list {
        padding: var(--spacing-sm) var(--spacing-md);
        padding-bottom: 80px;
    }

    .message {
        margin-bottom: var(--spacing-sm);
    }

    /* 输入面板调整 */
    .input-panel {
        min-height: 44px;
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .text-input,
    .voice-btn {
        height: 32px;
        font-size: var(--font-size-sm);
    }

    /* 头像调整 */
    .avatar {
        width: 36px;
        height: 36px;
    }

    /* 气泡调整 */
    .bubble {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }

    /* 取消按钮调整 */
    .cancel-request-btn {
        bottom: 100px;
    }

    /* 推荐问题调整 */
    .recommend-text-list {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* 高DPI屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
    .avatar img,
    .icon,
    .option-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增加点击区域 */
    .mode-switch,
    .more-btn,
    .voice-btn,
    .upload-option {
        min-height: 44px;
        min-width: 44px;
    }

    /* 移除悬停效果 */
    .mode-switch:hover,
    .more-btn:hover,
    .voice-btn:hover,
    .upload-option:hover {
        background: transparent;
        transform: none;
    }

    /* 强制显示点击反馈 */
    .mode-switch:active,
    .more-btn:active,
    .voice-btn:active,
    .upload-option:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }
}

/* 打印样式 */
@media print {
    .input-panel,
    .more-panel,
    .mask,
    .cancel-request-btn,
    .loading-overlay {
        display: none !important;
    }

    .chat-container {
        position: static;
        height: auto;
        overflow: visible;
        box-shadow: none;
    }

    .chat-list {
        overflow: visible;
        height: auto;
        padding: 20px;
    }

    .message {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .bubble {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}