* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f8f9fa; color: #333; line-height: 1.6; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.title { text-align: center; margin: 20px 0; color: #e02e2d; }
/* 轮播图 */
.slideshow { position: relative; max-width: 500px; margin: 20px auto; }
.slideshow-slide { display: none; text-align: center; }
.slideshow-slide img { width: 100%; border-radius: 8px; }
.slideshow-prev, .slideshow-next {
    cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 24px; color: white; background: rgba(0,0,0,0.5);
    padding: 8px 12px; border-radius: 50%; user-select: none;
}
.slideshow-prev { left: 10px; }
.slideshow-next { right: 10px; }
.slideshow-dots { text-align: center; margin-top: 10px; }
.slideshow-dots span {
    cursor: pointer; height: 12px; width: 12px; margin: 0 4px;
    background-color: #bbb; border-radius: 50%; display: inline-block;
}
.slideshow-dots span.active { background-color: #1798fc; }
/* 步骤 */
.step { background: white; border-radius: 12px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.step-number {
    display: inline-block; width: 30px; height: 30px; line-height: 30px;
    text-align: center; background: #1798fc; color: white; border-radius: 50%;
    font-weight: bold; margin-right: 10px;
}
.step h3 { display: inline-block; margin-bottom: 15px; }
/* 聊天窗口 - 已适配全屏幕/移动端 */
.chat-btn {
    position: fixed; bottom: 20px; right: 20px; background: #1798fc; color: white;
    padding: 12px 20px; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 999;
}
.chat-window {
    display: none; position: fixed; bottom: 20px; right: 20px;
    /* 自适应宽度：大屏默认350px，小屏自动适配屏幕宽度，保留边距 */
    width: calc(100vw - 40px);
    max-width: 350px;
    background: white; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 1000; overflow: hidden;
}
.chat-header {
    background: #1798fc; color: white; padding: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.chat-messages { 
    /* 自适应高度：大屏最大300px，小屏自动适配屏幕高度的50%，避免占满屏幕 */
    height: calc(50vh);
    max-height: 300px;
    overflow-y: auto; padding: 10px; background: #f9f9f9; 
}
.message { margin: 8px 0; }
.message.bot { text-align: left; }
.message.user { text-align: right; }
.message-content {
    display: inline-block; padding: 8px 12px; border-radius: 10px;
    max-width: 80%;
}
.message.bot .message-content { background: #e0e0e0; color: #333; }
.message.user .message-content { background: #1798fc; color: white; }
.chat-input { display: flex; padding: 10px; border-top: 1px solid #eee; }
.chat-input input { 
    flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin: 0 5px;
    font-size: 16px; /* 修复iOS Safari点击输入框自动缩放页面的问题 */
}
.chat-input button { padding: 8px 12px; background: #1798fc; color: white; border: none; border-radius: 4px; cursor: pointer; }
/* 超小屏幕适配（如320px宽度的老旧手机） */
@media (max-width: 360px) {
    .chat-window {
        bottom: 10px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: none;
    }
    .chat-btn {
        bottom: 10px;
        right: 10px;
        padding: 10px 16px;
        font-size: 14px;
    }
    .chat-messages {
        height: calc(45vh);
        max-height: 250px;
    }
}