* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Arial', 'Helvetica', sans-serif;background-color: #f9f9f9;color: #333;line-height: 1.6;}
/* Wrapper */
.rich_media_wrp {max-width: 600px;margin: 0 auto;padding: 20px 10px;background-color: #fff;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
/* Title */
.rich_media_title {font-size: 22px !important;font-weight: 600;line-height: 1.4;margin: 20px 0;padding: 10px 20px; /* 移除左侧过大的内边距，使左右对称 */
background: linear-gradient(120deg, rgba(23, 152, 252, 0.1),rgba(255, 255, 255, 0.2),rgba(23, 152, 252, 0.15),rgba(0, 86, 179, 0.1));background-size: 300% 100%;animation: gradientMove 6s ease infinite;border-radius: 10px;box-shadow: 0 4px 20px rgba(23, 152, 252, 0.1),inset 0 0 20px rgba(23, 152, 252, 0.05);position: relative;border: 1px solid rgba(23, 152, 252, 0.2);display: flex;align-items: center;justify-content: center; /* 确保水平居中 */
overflow: hidden;backdrop-filter: blur(10px);text-align: center; /* 添加文本居中对齐 */
}
/* 修改流动背景动画 */
@keyframes gradientMove {0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/* 增强光效动画 */
.rich_media_title::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle,rgba(23, 152, 252, 0.1),transparent 30%);animation: rotate 10s linear infinite;}
@keyframes rotate {from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* 添加额外的光效 */
.rich_media_title::after {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.4),transparent);transform: skewX(-25deg);animation: shine 6s ease-in-out infinite;}
@keyframes shine {0% {left: -100%;}
20% {left: 200%;}
100% {left: 200%;}
}
/* 修改标题文本样式 */
.rich_media_title span {position: relative;background: linear-gradient(45deg, #1798fc, #0056b3);-webkit-background-clip: text;background-clip: text;color: transparent;font-size: 19px; /* 稍微减小字体大小 */
white-space: nowrap; /* 防止文字换行 */
margin: 0 auto; /* 确保span元素居中 */
}
/* Developer Note */
.developer-note {background: linear-gradient(135deg, rgba(23, 152, 252, 0.02), rgba(23, 152, 252, 0.05));border: 1px solid rgba(23, 152, 252, 0.1);border-radius: 25px;padding: 15px 20px;margin: 15px auto 0;backdrop-filter: blur(2px);box-shadow: 0 2px 10px rgba(23, 152, 252, 0.05);}
.developer-note-header {display: flex;align-items: center;gap: 12px;margin-bottom: 12px;}
.developer-icon {width: 28px;height: 28px;background: linear-gradient(135deg, #1798fc, #0056b3);border-radius: 8px;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 8px rgba(23, 152, 252, 0.15);}
.developer-title {font-size: 16px;color: #1798fc;font-weight: 600;}
.developer-content {font-size: 14px;color: #333;line-height: 1.6;letter-spacing: 0.3px;}
/* Center Text Section */
.center-text {text-align: center;margin: 20px 0;}
/* Simulator Label */
.simulator-label {background: linear-gradient(135deg, rgba(23, 152, 252, 0.03), rgba(23, 152, 252, 0.08));border: 1px solid rgba(23, 152, 252, 0.15);border-radius: 20px;padding: 8px 15px;margin: 12px auto 0;display: inline-flex;align-items: center;gap: 6px;}
.simulator-label span {font-size: 13px;color: #1798fc;font-weight: 500;letter-spacing: 0.5px;}
/* Slideshow Styles */
.slideshow-container {position: relative;max-width: 100%;margin: auto;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.slideshow-slide {display: none;width: 100%;}
.slideshow-slide.active {display: block;}
.slideshow-slide img {width: 100%;max-height: 360px;cursor: pointer;vertical-align: middle;}
.slideshow-prev, .slideshow-next {position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;color: white;font-weight: bold;font-size: 18px;transition: 0.3s ease;border-radius: 50%;user-select: none;background-color: rgba(0,0,0,0.4);cursor: pointer;text-decoration: none;z-index: 10;}
.slideshow-prev {left: 15px;}
.slideshow-next {right: 15px;}
.slideshow-prev:hover, .slideshow-next:hover {background-color: rgba(0,0,0,0.7);transform: translateY(-50%) scale(1.1);}
.slideshow-dots {text-align: center;margin-top: 10px;}
.slideshow-dot {cursor: pointer;height: 20px;width: 20px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;line-height: 20px;text-align: center;font-size: 12px;color: #fff;}
.slideshow-dot.active, .slideshow-dot:hover {background-color: #1798fc;}
/* Steps Container */
.steps-container {padding: 0;background: linear-gradient(145deg, #fff, #f8f9fa);border-radius: 15px;box-shadow: 0 5px 20px rgba(0,0,0,0.05);margin: 20px 0;width: 100%;}
/* Step Card */
.step-card {background: white;padding: 15px;border-radius: 12px;margin-bottom: 10px;border: 1px solid rgba(23, 152, 252, 0.1);box-shadow: 0 2px 10px rgba(0,0,0,0.02);}
.step-header {display: flex;align-items: center;gap: 10px;margin-bottom: 12px;}
.step-number {width: 24px;height: 24px;background: #1798fc;color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 500;}
.step-card h3 {margin: 0;font-size: 16px;color: #333;}
.step-instruction {margin: 8px 0;font-size: 14px;color: #666;}
/* Search Keywords */
.search-keywords {background: #f8f9fa;padding: 12px;border-radius: 8px;margin-top: 10px;}
.search-keywords p {margin: 0;font-size: 14px;color: #666;}
.keyword-buttons {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 8px;}
 /* 弹窗样式 */
#copy-popup {position: fixed;bottom: 90px;left: 50%;transform: translateX(-50%);background-color: white; /* 背景颜色设置为白色 */
color: black; /* 文字颜色设置为黑色 */
padding: 10px 20px;border-radius: 5px;opacity: 0;transition: opacity 0.3s ease-in-out;z-index: 1000;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
#copy-popup.show {opacity: 1;}
.keyword-btn {background: rgba(23, 152, 252, 0.1);color: #1798fc;padding: 4px 12px;border-radius: 15px;font-size: 13px;cursor: pointer;transition: transform 0.2s;}
.keyword-btnn {background: rgba(23, 152, 252, 0.1);color: #1798fc;padding: 4px 12px;border-radius: 15px;font-size: 13px;cursor: pointer;transition: transform 0.2s;}
/* Image Container */
.image-container {position: relative;width: 100%;}
.downloadable-image {width: 100%;border-radius: 8px;margin: 0;box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: relative;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;user-select: none;display: block;}
.downloadable-image:hover {transform: scale(1.02);box-shadow: 0 5px 15px rgba(0,0,0,0.15);}
/* Comment Instructions */
.comment-instructions {background: #f8f9fa;padding: 12px;border-radius: 8px;}
.comment-instructions p {margin: 0;font-size: 14px;color: #666;line-height: 1.6;}
.highlight {color: #1798fc;}
.warning-text {color: #ff4757;}
.example-image {width: 100%;border-radius: 8px;margin-top: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
/* Final Step */
.final-step {background: #fff9f9;border: 1px solid rgb(174, 222, 191);padding: 12px;border-radius: 8px;margin-top: 10px;}
.final-step-header {display: flex;align-items: center;gap: 8px;margin-bottom: 8px;}
.final-step-header span {color: #36ab60;font-weight: 520;}
.final-step p {margin: 0;font-size: 14px;color: #666;line-height: 1.6;}
/* Reward Slideshow */
.reward-slideshow-container {width: 100%;position: relative;margin-top: 15px;border-radius: 8px;overflow: hidden;}
.reward-slideshow {display: flex;transition: transform 0.3s ease-in-out;transform: translateX(0%);}
.reward-slide {width: 100%;flex-shrink: 0;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.reward-prev, .reward-next {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);background: rgba(0,0,0,0.5);color: white;border: none;border-radius: 50%;width: 30px;height: 30px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 16px;}
.reward-next {left: auto;right: 10px;}
.reward-dots {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;}
.reward-dot {width: 8px;height: 8px;background: rgba(255, 255, 255, 0.5);border-radius: 50%;cursor: pointer;}
.reward-dot.active {background: rgba(255, 255, 255, 0.9);}
/* Custom Toast Notification */
.custom-toast {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%) translateY(100px);background: white;min-width: 250px;max-width: 80%;padding: 14px 20px;border-radius: 12px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);display: flex;align-items: center;gap: 12px;z-index: 9999;opacity: 0;transition: all 0.3s ease;border-left: 4px solid transparent;}
.custom-toast.success {border-left-color: #36B37E;}
.custom-toast.error {border-left-color: #FF5630;}
.custom-toast.show {transform: translateX(-50%) translateY(0);opacity: 1;}
.custom-toast.hide {transform: translateX(-50%) translateY(-20px);opacity: 0;}
.toast-icon {display: flex;align-items: center;justify-content: center;}
.custom-toast.success .toast-icon {color: #36B37E;}
.custom-toast.error .toast-icon {color: #FF5630;}
.toast-message {font-size: 15px;color: #333;font-weight: 500;flex-grow: 1;}
/* 手机样式适配 */
@media (max-width: 576px) {.custom-toast {min-width: 200px;max-width: 90%;padding: 12px 16px;}
.toast-message {font-size: 14px;}
/* 移动端标题适配 */
.rich_media_title {padding: 8px 15px;margin: 15px 0;}
.rich_media_title span {font-size: 17px;}
/* 移动端轮播图适配 */
.slideshow-prev, .slideshow-next {width: 30px;height: 30px;font-size: 14px;}
.slideshow-prev {left: 5px;}
.slideshow-next {right: 5px;}
.slideshow-dot {height: 16px;width: 16px;font-size: 10px;line-height: 16px;}
/* 移动端步骤卡片适配 */
.step-card {padding: 12px 10px;}
.step-number {width: 20px;height: 20px;font-size: 12px;}
.step-card h3 {font-size: 15px;}
.search-keywords p,.step-instruction,.comment-instructions p,.final-step p {font-size: 13px;}
.keyword-btn {font-size: 12px;padding: 3px 10px;}
.keyword-btnn {font-size: 12px;padding: 3px 10px;}
/* 移动端底部轮播适配 */
.reward-prev, .reward-next {width: 25px;height: 25px;font-size: 12px;}
}
/* 超小屏幕适配 */
@media (max-width: 360px) {.rich_media_wrp {padding: 10px 8px;}
.rich_media_title {padding: 6px 10px;}
.rich_media_title span {font-size: 15px;}
.slideshow-dots {display: flex;flex-wrap: wrap;justify-content: center;gap: 4px;}
.slideshow-dot {margin: 0;height: 14px;width: 14px;font-size: 8px;line-height: 14px;}
.developer-content,.search-keywords p,.step-instruction,.comment-instructions p,.final-step p {font-size: 12px;}
}
/* 设备方向适配 */
@media (orientation: landscape) and (max-height: 500px) {.rich_media_title {margin: 10px 0;padding: 6px 15px;}
.slideshow-container {max-height: 180px;}
.step-card {margin-bottom: 8px;}
}
/* AI机器人浮动按钮样式 */
.mini-btn {display: block;position: fixed;bottom: 20px;right: 20px;width: 220px;height: 40px;background: #2196F3;border-radius: 6px;cursor: pointer;z-index: 9999;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);transition: all 0.3s;}
.mini-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);}
.mini-btn-content {display: flex;align-items: center;justify-content: space-between;height: 100%;padding: 0 12px;color: white;}
.monitor-icon {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;margin-right: 8px;}
.monitor-icon svg {width: 100%;height: 100%;}
.ai-text {flex: 1;font-size: 15px;font-weight: 500;text-align: center;color: white;}
.arrow-icon {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;margin-left: 8px;}
.arrow-icon svg {width: 100%;height: 100%;}
/* 聊天窗口标题栏样式 */
.pc-visitor-header {cursor: move;user-select: none;}
.pc-title-btn {transition: background-color 0.3s;}
.pc-title-btn:hover {background-color: rgba(255,255,255,0.1);}
/* 聊天消息气泡样式 */
.user-message {margin: 10px 0;display: flex;flex-direction: row-reverse;}
.user-message-content {background: #1798fc;color: white;padding: 10px 12px;border-radius: 12px 4px 12px 12px;box-shadow: 0 1px 2px rgba(0,0,0,0.1);max-width: 70%;word-break: break-word;float: right;}
.bot-message {margin: 10px 0;}
.bot-message-content {max-width: 98%;margin-left: 0;padding: 10px 12px;border-radius: 4px 12px 12px 12px;box-shadow: 0 1px 2px rgba(0,0,0,0.1);background: #fff;word-break: break-word;}
/* 在线状态标签 */
.online-status {font-size: 12px;color: #4CAF50;background: rgba(76, 175, 80, 0.1);padding: 2px 6px;border-radius: 10px;}
/* 底部按钮样式 */
.send-btn {padding: 8px 20px;background: #1798fc;color: white;border: none;border-radius: 4px;cursor: pointer;height: 36px;font-size: 14px;transition: background 0.3s;}
.send-btn:hover {background: #1483e0;}
/* 游戏链接容器样式 */
.game-links-container {margin-top: 10px;display: flex;flex-direction: column;gap: 10px;}
.game-link {display: flex;align-items: center;padding: 12px;background: linear-gradient(135deg, #f8f9fa, #e9ecef);border-radius: 8px;text-decoration: none;color: #333;box-shadow: 0 2px 4px rgba(0,0,0,0.1);transition: all 0.3s ease;}
.game-link:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.15);background: linear-gradient(135deg, #e9ecef, #dee2e6);}
.game-icon {font-size: 24px;margin-right: 12px;}
.game-title {flex: 1;font-weight: 500;}
.game-arrow {font-size: 18px;margin-left: 8px;}
/* 编辑个人信息弹窗样式 */

#editProfileModal .modal-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;padding: 20px;border-radius: 8px;width: 300px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
/* 媒体查询 */
@media (max-width: 576px) {.mini-btn {width: 180px;height: 36px;}
.ai-text {font-size: 14px;}
}
@media (max-width: 360px) {.mini-btn {width: 150px;height: 32px;}
.monitor-icon {width: 20px;height: 20px;}
.ai-text {font-size: 13px;}
.arrow-icon {width: 20px;height: 20px;}
}
@media (orientation: landscape) and (max-height: 500px) {.mini-btn {bottom: 20px;}
}
/* 减少消息内容的左侧空白 */
#chat_content > div > div {gap: 4px; /* 减少头像和消息内容之间的间距 */
}
/* 使消息显示更宽 */
#chat_content > div > div > div:nth-child(2) {flex: 1;width: calc(100% - 44px); /* 考虑头像宽度和少量间距 */
}
/* 头像占用更少的空间 */
#chat_content img {width: 36px;height: 36px;}