/**
 * 移动端响应式样式
 * 针对平板和手机屏幕优化
 */

/* ============ 平板适配 (768px以下) ============ */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-sm);
    }

    .chat-container {
        min-height: 300px;
        max-height: calc(100vh - 350px);
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 50px;
    }

    .message.ai .message-bubble,
    .message.user .message-bubble {
        max-width: 85%;
    }

    .welfare-module {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }

    .qrcode-image {
        width: 60px;
        height: 60px;
    }

    .welfare-main {
        font-size: 15px;
    }

    .welfare-benefit {
        font-size: 13px;
    }

    .input-container {
        padding: var(--spacing-sm);
    }

    .user-input {
        font-size: 15px;
        min-height: 44px;
        max-height: 120px;
        line-height: 1.5;
    }

    .btn-send {
        padding: 10px 16px;
        font-size: 15px;
    }
}

/* ============ 手机适配 (480px以下) ============ */
@media (max-width: 480px) {
    .container {
        padding: var(--spacing-xs);
    }

    .toolbar {
        flex-direction: row; /* 改为左右布局 */
        gap: var(--spacing-xs);
        justify-content: space-between; /* 左右分布 */
    }

    .toolbar button {
        flex: 1; /* 平均分配宽度 */
        padding: 6px 8px; /* 缩小按钮尺寸 */
        font-size: 12px; /* 缩小字体 */
    }
    
    .toolbar button span {
        font-size: 14px; /* 缩小图标 */
    }

    .chat-container {
        min-height: 250px;
        max-height: calc(100vh - 300px);
        padding: var(--spacing-xs) var(--spacing-xs); /* 去掉左侧padding，因为去掉了灯泡 */
    }

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

    .message.ai .message-bubble,
    .message.user .message-bubble {
        max-width: 90%;
        padding: 10px 12px;
        font-size: 15px;
    }

    /* 手机端隐藏AI消息的灯泡图标 */
    .message.ai .message-bubble::before {
        display: none;
    }
    
    /* 调整手机端AI消息的padding，因为去掉了灯泡 */
    .message.ai .message-bubble {
        padding-left: 12px;
    }

    .message-timestamp {
        font-size: 11px;
    }

    .welfare-module {
        padding: var(--spacing-xs); /* 缩小padding */
        gap: var(--spacing-xs); /* 缩小间距 */
        margin-bottom: var(--spacing-xs); /* 缩小底部间距 */
    }

    .qrcode-image {
        width: 40px; /* 缩小二维码尺寸 */
        height: 40px;
    }
    
    .welfare-text {
        flex: 1;
    }
    
    .welfare-main {
        font-size: 12px; /* 缩小字体 */
        margin-bottom: 2px;
    }
    
    .welfare-benefit {
        font-size: 11px;
        margin-bottom: 2px;
    }
    
    .welfare-guide {
        font-size: 10px;
    }

    .input-container {
        flex-direction: row;
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .user-input {
        padding: 12px;
        font-size: 14px;
        min-height: 44px;
        max-height: 150px;
        line-height: 1.5;
    }

    .btn-send {
        padding: 10px 14px;
        font-size: 14px;
    }

    .loading-indicator {
        padding: var(--spacing-sm);
    }

    .loading-spinner {
        width: 24px;
        height: 24px;
    }

    .loading-text {
        font-size: 13px;
    }

    .modal-content {
        padding: var(--spacing-lg);
        max-width: 90%;
    }

    .modal-content h3 {
        font-size: 18px;
    }

    .modal-content p {
        font-size: 14px;
    }
}

/* ============ 超小屏幕适配 (360px以下) ============ */
@media (max-width: 360px) {
    .message.ai .message-bubble,
    .message.user .message-bubble {
        max-width: 95%;
        padding: 8px 10px;
        font-size: 14px;
    }

    /* 超小屏幕也隐藏灯泡 */
    .message.ai .message-bubble::before {
        display: none;
    }
    
    .message.ai .message-bubble {
        padding-left: 10px;
    }

    .btn-send span {
        display: none; /* 隐藏图标，只显示文字 */
    }
}

/* ============ 横屏适配 ============ */
@media (max-height: 600px) and (orientation: landscape) {
    .chat-container {
        max-height: calc(100vh - 250px);
    }

    .welfare-module {
        padding: var(--spacing-sm);
    }

    .qrcode-image {
        width: 50px;
        height: 50px;
    }
}

/* ============ 触摸设备优化 ============ */
@media (hover: none) and (pointer: coarse) {
    /* 增大点击区域 */
    .toolbar button,
    .btn-send,
    .qrcode-image {
        min-height: 44px; /* iOS推荐的最小触摸区域 */
    }

    /* 移除hover效果，使用active */
    .toolbar button:active,
    .btn-send:active {
        transform: scale(0.95);
    }

    .qrcode-image:active {
        transform: scale(1.05);
    }
}