/* 移动端适配样式 */
@media (max-width: 768px) {
    body {
        background: white;
    }
    
    .container {
        height: 100vh;
        height: 100dvh; /* 支持动态视口高度 */
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }


    .chat-messages {
        padding: 0.75rem;
        /* 确保底部有足够空间 */
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .message-content {
        gap: 0.5rem;
    }

    .avatar {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .text {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        max-width: calc(100% - 50px);
    }

    .input-container {
        padding: 0.75rem;
        /* 适配安全区域 */
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .input-wrapper {
        padding: 0.4rem;
    }

    #messageInput {
        padding: 0.6rem 0.8rem;
        font-size: 16px; /* 防止iOS自动缩放 */
    }

    .send-button {
        width: 36px;
        height: 36px;
    }

    .modal-content {
        width: 95%;
        margin: 0 auto;
    }

    /* 触摸优化 */
    .send-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 键盘弹出时的优化 */
    @supports (-webkit-touch-callout: none) {
        .input-container {
            position: relative;
            z-index: 10;
        }
    }
}

@media (max-width: 480px) {

    .chat-messages {
        padding: 0.5rem;
    }

    .text {
        font-size: 0.9rem;
        max-width: calc(100% - 45px);
    }

    .avatar {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .input-container {
        padding: 0.5rem;
    }

    .send-button {
        width: 32px;
        height: 32px;
    }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .chat-messages {
        padding: 0.5rem 1rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 320px) {
    .chat-messages {
        padding: 0.4rem;
    }
    
    .text {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
    
    .input-container {
        padding: 0.4rem;
    }
    
    #messageInput {
        font-size: 16px;
        padding: 0.5rem 0.7rem;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
    }
    
    .container {
        background: #2d2d2d;
        color: #e0e0e0;
    }
    
    .bot-message .text {
        background: #3a3a3a;
        border-color: #4a4a4a;
        color: #e0e0e0;
    }
    
    .input-wrapper {
        background: #3a3a3a;
        border-color: #4a4a4a;
    }
    
    #messageInput {
        color: #e0e0e0;
    }
    
    #messageInput::placeholder {
        color: #999;
    }
    
    .modal-content {
        background: #2d2d2d;
        color: #e0e0e0;
    }
    
    .modal-header,
    .modal-footer {
        background: #3a3a3a;
        border-color: #4a4a4a;
    }
}