/* ===================================================================
 * 千问聊天核心页面样式
 * 设计理念：还原微信/iOS 风格的聊天界面 + 营销奖品卡片
 * 颜色变量集中在 :root，方便主题维护
 * ================================================================ */

:root {
    /* 主题色：千问绿系 */
    --keling-green: #74FF52;
    --keling-green-soft: rgba(116, 255, 82, 0.9);
    --keling-green-shadow: rgba(116, 255, 82, 0.2);

    /* 聊天气泡色 */
    --bubble-left-bg: #f6f6f8;
    --bubble-right-bg: #ecf4fc;
    --text-primary: #000;
    --text-secondary: #999;
    --text-tertiary: #c8c8c8;

    /* 奖品卡片色：暖橙系，营造"领取福利"的紧迫感 */
    --prize-name-color: #61291f;
    --prize-desc-color: #6e4a42;
    --prize-footer-color: #8e645d;
    --prize-action-bg: #f9e6c3;
    --prize-action-color: #b36e37;
}

/* ==================== 基础重置 ==================== */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 隐藏横向溢出，避免弹窗动画引发页面抖动 */
    overflow: hidden;
    background: #fff;
}

/* ==================== 千问主页容器 ==================== */
.keling-home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 250;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff;
}

.keling-home.show {
    display: flex;
}

/* 顶部/底部固定图片：宽度撑满，避免图片变形 */
.keling-fixed-image {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.keling-bottom-fixed {
    width: 100%;
    flex: 0 0 auto;
    background: #fff;
    z-index: 20;
}

/* ==================== 左上角配置区 + 右上角重启按钮 ==================== */
/* config 是透明热区，覆盖在顶部图片左上角，用于触发奖品配置弹窗 */
.keling-home .config {
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    height: 50px;
    z-index: 1001;
    background-color: transparent;
    cursor: pointer;
}

.keling-home.chat-mode .config {
    position: fixed;
}

.restart-btn {
    position: absolute;
    top: 0;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    font-size: 16px;
}

.keling-home.chat-mode .restart-btn {
    position: fixed;
}

.restart-btn:active {
    transform: rotate(180deg);
    transition: transform 0.4s ease;
}

/* ==================== 聊天消息区 ==================== */
.chat-messages {
    position: relative;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    /* 独立滚动容器，避免整页滚动影响顶部图片 */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    background-color: #fff;
}

/* 单条消息：默认占满宽度，由 left/right 控制对齐方向 */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    animation: fadeInUp 0.3s ease;
}

/* 进入动画：模仿微信消息出现的轻微上滑效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左侧（AI）消息：灰底气泡，左下角圆角较小形成"指向" */
.chat-message.left {
    align-self: flex-start;
    background-color: var(--bubble-left-bg);
    padding: 0 12px;
    border-radius: 12px;
    max-width: 90%;
}

/* 右侧（用户）消息：靠右对齐，蓝底气泡 */
.chat-message.right {
    align-self: flex-end;
}

/* 气泡内容样式 */
.chat-message .bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

/* 左侧气泡：去除内边距，由父级 .left 提供 */
.chat-message.left .bubble {
    padding: 12px 0;
    border-bottom-left-radius: 4px;
}

/* 奶茶2气泡：上下增加间距，左右贴合卡片内容 */
.chat-message.left .bubble--milktea2 {
    padding: 12px 0;
}

/* 右侧气泡：浅蓝底 */
.chat-message.right .bubble {
    background: var(--bubble-right-bg);
    border-bottom-right-radius: 4px;
}

/* ==================== 奖品卡片（叠加券样式） ==================== */
/* 卡片整体：放在 AI 气泡内，营造"AI 推送优惠券"的对话感 */
.prize-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    gap: 10px;
}

.prize-card--stackable {
    display: block;
    padding: 14px 12px 10px;
    background: #fff;
}

/* 卡片主体：左侧优惠券图标 + 中间信息 + 右侧领取按钮 */
.stackable-prize-main {
    display: flex;
    align-items: center;
    min-height: 54px;
    gap: 16px;
}

/* 优惠券图标：纯 CSS 绘制，避免额外图片请求 */
.stackable-coupon-icon {
    position: relative;
    width: 36px;
    height: 44px;
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 3px;
    /* 红色渐变模拟优惠券主体 */
    background: linear-gradient(180deg, #ff372c 0%, #ff1f16 100%);
    box-shadow: inset 0 -4px 10px rgba(194, 0, 0, 0.12);
}

/* 优惠券中部的"虚线撕口" */
.stackable-coupon-icon::before {
    content: '';
    position: absolute;
    top: 24px;
    left: -7px;
    width: 50px;
    height: 16px;
    border-top: 2px solid #fff;
    border-radius: 50%;
}

/* 优惠券中部的小圆点装饰 */
.stackable-coupon-icon span {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffe27e;
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* 中部信息区 */
.prize-card--stackable .prize-info {
    min-width: 0;
    padding-left: 0;
    flex: 1;
}

.prize-card--stackable .prize-name {
    color: var(--prize-name-color);
    font-size: 17px;
    font-weight: bold;
}

.prize-card--stackable .prize-desc {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--prize-desc-color);
    font-size: 11px;
    white-space: nowrap;
    margin-top: 2px;
}

/* "可叠加"标签图片：高度对齐文字 */
.stackable-tag {
    display: block;
    width: auto;
    height: 17px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* 文字版标签（1分钱奶茶用）：替代图片标签，视觉对齐一致 */
.stackable-tag--text {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 5px;
    border-radius: 3px;
    background: #ff372c;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    box-sizing: border-box;
}

/* ==================== 奶茶奖品：订单卡片样式 ==================== */
/* 奶茶卡片不再用"叠加券"视觉，而是模仿截图的外卖下单成功卡片 */

/* 去掉叠加券的内边距，用 order-card 自身控制 */
.prize-card--milktea {
    display: block;
    padding: 0;
    margin-top: 12px;
    background: transparent;
}

/* 订单卡片主体：圆角白底，类似外卖订单 */
.order-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: #333;
}

/* 订单头：左侧"下单成功"高亮，右侧品牌店铺 */
.order-header {
    display: flex;
    align-items: center;
    /* 让下单成功和店铺名贴在一起左对齐，去掉两端分离 */
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #eee;
}

.order-status {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* 下单成功前的 dd.png 图标 */
.order-status-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.order-brand {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* 店铺图标：统一用 img（默认 dp.jpg） */
.order-brand-img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* 自定义奶茶商品图：覆盖默认 CSS 绘制样式 */
.order-product-img--custom {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 商品行：左图 + 中间信息 + 右侧价格/数量 */
.order-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed #eee;
}

/* 左侧商品图：粉色底 + 贴纸 + 奶茶杯（纯CSS绘制） */
.order-product-img {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff8fb4 0%, #ff6b9a 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -6px 14px rgba(255, 107, 154, 0.4);
}



/* 中间：商品名 + 规格 */
.order-product-info {
    flex: 1;
    min-width: 0;
}

.order-product-name {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.order-product-spec {
    margin-top: 8px;
    font-size: 13px;
    color: #999;
    line-height: 1.3;
}

/* 右侧：价格 + 数量 */
.order-product-right {
    flex: 0 0 auto;
    text-align: right;
}

.order-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.order-product-qty {
    margin-top: 8px;
    font-size: 13px;
    color: #999;
}

/* 键值信息区：送达时间/配送至/备注/活动前 等多行 */
.order-info {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-info-row {
    display: flex;
    gap: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.order-info-row dt {
    flex: 0 0 56px;
    color: #666;
    margin: 0;
}

.order-info-row dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #333;
    word-break: break-all;
}

.order-info-row--muted dt,
.order-info-row--muted dd {
    color: #bbb;
}

.order-info-row--muted del {
    color: #bbb;
}

/* 优惠行：千问免单卡标签 + 优惠金额 */
.order-discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px dashed #eee;
    font-size: 14px;
}

/* 千问免单卡：本地图片，在胶囊形外框中居中裁剪 */
.free-card-tag {
    display: inline-block;
    flex: 0 0 auto;
    /* 控制在订单行中的高度和宽度，与周围文字对齐 */
    height: 26px;
    width: 108px;
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
    border-radius: 6px;
}

.order-discount-amount {
    color: #e74c3c;
    font-weight: 700;
}

/* 实付行 */
.order-pay {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    padding: 2px 0 14px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px dashed #eee;
    margin-bottom: 14px;
}

.order-pay-amount {
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

/* 底部订单详情大按钮 */
.order-detail-btn {
    width: 100%;
    display: block;
    padding: 14px 12px;
    background: linear-gradient(180deg, #fff3d1 0%, #ffe3a0 100%);
    color: #a0671d;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.order-detail-btn:active {
    transform: scale(0.97);
}

/* "立即领取"按钮：暖色背景，引导点击 */
.prize-action-btn {
    padding: 8px 14px;
    border-radius: 18px;
    color: var(--prize-action-color);
    font-size: 13px;
    white-space: nowrap;
    background-color: var(--prize-action-bg);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.prize-action-btn:active {
    transform: scale(0.95);
}

/* 卡片底部：倒计时 + 限时提示 */
.stackable-prize-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px dashed #e8e8e8;
    color: var(--prize-footer-color);
    font-size: 11px;
}

/* 倒计时：定宽数字，避免抖动 */
.stackable-prize-countdown {
    width: 54px;
    flex: 0 0 54px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==================== 底部输入框组合 ==================== */
.chat-composer {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
}

.composer-box {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #dedede;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    transition: border-radius 0.2s ease, min-height 0.2s ease;
}

/* 输入框：无边框，自适应宽度 */
#chatInput {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 22px;
    padding: 2px 0;
    border: 0;
    outline: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: #222;
    font: inherit;
    font-size: 15px;
    line-height: 20px;
    box-sizing: border-box;
}

#chatInput::placeholder {
    color: var(--text-secondary);
}

/* 操作按钮组：默认 display:contents 让子按钮直接参与 flex 布局 */
.composer-actions {
    display: contents;
}

/* 语音按钮：未输入时排在输入框左侧 */
.chat-composer:not(.expanded) .composer-voice {
    order: -1;
}

/* 按钮图标：定宽，保持视觉对齐 */
.composer-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.composer-icon:active {
    transform: scale(0.9);
}

.composer-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 默认状态下间隔撑开为 none，避免占位 */
.composer-spacer {
    display: none;
}

/* 发送按钮：默认隐藏，有输入内容时显示 */
.composer-send {
    display: none;
}

/* 有文字时：隐藏相机，显示发送 */
.chat-composer.has-text .composer-camera {
    display: none;
}

.chat-composer.has-text .composer-send {
    display: block;
}

/* AI 内容免责声明 */
.composer-disclaimer {
    padding-top: 8px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

/* ==================== Toast 轻提示 ==================== */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ==================== 奖品选择页 ==================== */
/* 全屏覆盖层：进入聊天页前让用户选择奖品类型 */
.prize-select {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 500;
    /* 千问绿渐变背景，营造品牌氛围 */
    background: linear-gradient(180deg, #74FF52 0%, #4dd62f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

/* 选择完成后淡出，避免突兀消失 */
.prize-select.hide {
    opacity: 0;
    pointer-events: none;
}

.prize-select-inner {
    width: 100%;
    max-width: 400px;
}

.prize-select-title {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prize-select-subtitle {
    margin: 8px 0 32px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.prize-select-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 单个选项卡片：白底圆角，点击有缩放反馈 */
.prize-select-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.prize-select-option:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* 选项图标：圆角方块背景 + Font Awesome 图标 */
.option-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    font-size: 26px;
}

/* 奶茶图标：暖橙渐变 */
.option-icon--milktea {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e67e22;
}

/* 叠加券图标：粉红渐变 */
.option-icon--coupon {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #e74c3c;
}

/* 奶茶2推荐图标：蓝紫渐变 */
.option-icon--milktea2 {
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: #5c6bc0;
}

.option-info {
    flex: 1;
    min-width: 0;
}

.option-name {
    font-size: 17px;
    font-weight: bold;
    color: #333;
}

.option-desc {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}

.option-arrow {
    color: #ccc;
    font-size: 14px;
    flex: 0 0 auto;
}

/* ==================== 奶茶活动编辑弹窗 ==================== */
/* 全屏遮罩：覆盖在页面上方，点击空白不关闭避免误触丢失输入 */
.edit-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    /* 垫底动画：从底部滑入 */
    animation: editMaskIn 0.2s ease;
}

@keyframes editMaskIn {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.5); }
}

.edit-mask.show {
    display: flex;
}

/* 弹窗主体：底部弹出式，移动端友好 */
.edit-dialog {
    width: 100%;
    max-width: 500px;
    max-height: 88vh;
    background: #f7f7f9;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    animation: editDialogIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes editDialogIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* 头部：标题 + 关闭按钮 */
.edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #eee;
}

.edit-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.edit-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-close:active {
    background: #f2f2f2;
}

/* 滚动表单区 */
.edit-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px;
}

/* 表单分组 */
.edit-section {
    background: #fff;
    border-radius: 10px;
    padding: 14px 14px 6px;
    margin-bottom: 12px;
}

.edit-section-title {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 600;
}

/* 字段：label + 输入框纵向排列 */
.edit-field {
    margin-bottom: 12px;
}

.edit-field label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
}

.edit-field input,
.edit-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    color: #222;
    background: #fafafa;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.edit-field input:focus,
.edit-field textarea:focus {
    outline: 0;
    border-color: var(--keling-green-soft, #4dd62f);
    background: #fff;
}

.edit-field textarea {
    resize: vertical;
    min-height: 60px;
}

/* 横向字段组：价格 + 数量 */
.edit-field-row {
    display: flex;
    gap: 10px;
}

.edit-field-row .edit-field {
    flex: 1;
}

/* 费用预览区：键值对展示 */
.edit-preview {
    background: #fafafa;
    border-radius: 8px;
    padding: 10px 12px;
}

.edit-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #666;
    border-bottom: 1px dashed #eee;
}

.edit-preview-row:last-child {
    border-bottom: 0;
}

.edit-preview-row--strong {
    color: #222;
    font-weight: 600;
}

.edit-preview-row--pay {
    color: #e74c3c;
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
}

/* 底部按钮组 */
.edit-footer {
    display: flex;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #eee;
}

.edit-btn {
    flex: 1;
    padding: 13px 0;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.edit-btn:active {
    transform: scale(0.97);
}

.edit-btn--cancel {
    background: #f2f2f2;
    color: #666;
}

.edit-btn--save {
    background: linear-gradient(180deg, #74FF52 0%, #4dd62f 100%);
    color: #fff;
}

/* ==================== 图片上传区 ==================== */
/* 排列：左侧缩略图 + 右侧按钮/清除 */
.image-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px dashed #d2d2d2;
    border-radius: 10px;
    background: #fafafa;
}

/* 奶茶图使用更大的预览尺寸 */
.image-upload--large .image-upload-preview {
    width: 96px;
    height: 96px;
}

.image-upload-preview {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eee;
    background-size: cover;
    background-position: center;
    border: 1px solid #e2e2e2;
    /* 无图时显示"图片"占位图标 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 20px;
}

.image-upload-preview:empty::before {
    content: '\f03e';
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    opacity: 0.7;
}

.image-upload-preview.has-image::before {
    content: none;
}

/* 选择图片按钮：作为 label 用原生文件选择 */
.image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #74FF52 0%, #4dd62f 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.image-upload-btn:active {
    transform: scale(0.97);
}

.image-upload-btn i {
    font-size: 14px;
}

/* 清除图片按钮：低调样式 */
.image-upload-clear {
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #999;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease, border-color 0.15s ease;
    flex: 0 0 auto;
}

.image-upload-clear:active {
    color: #e74c3c;
    border-color: #f5b7b1;
}

/* ==================== 奶茶2推荐卡片样式 ==================== */

/* 外层容器：去除默认卡片内边距和外边距，让引导文字紧贴气泡顶/底部 */
.prize-card--milktea2 {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* 顶部引导文字 */
.m2-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 12px;
}

.m2-address {
    color: #1677ff;
    cursor: pointer;
}

/* 卡片容器：单行横向排列，可左右滑动 */
.m2-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    /* 左右 padding 由 .chat-message.left 统一提供，此处不再额外加 */
    padding: 0;
    /* 隐藏滚动条，保持视觉干净 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 让触摸滑动更跟手 */
    -webkit-overflow-scrolling: touch;
}

.m2-grid::-webkit-scrollbar {
    display: none;
}

/* 单个推荐卡片：固定宽度，不伸缩，白底圆角，点击有缩放反馈 */
.m2-card {
    flex: 0 0 200px;
    width: 200px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
}

.m2-card:active {
    transform: scale(0.97);
}

/* 店铺信息行：店铺图 + 店铺名/箭头/评分 */
.m2-shop {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.m2-shop-img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* 店铺名 + 箭头同行：箭头紧贴店铺名右侧 */
.m2-shop-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.m2-shop-name {
    font-size: 13px;
    color: #333;
    /* 单行省略 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 箭头圆形灰色背景，紧贴店铺名 */
.m2-shop-arrow-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #eee;
    flex: 0 0 auto;
}

.m2-shop-arrow-wrap i {
    font-size: 8px;
    color: #999;
}

/* 评分·起送·配送时长（在 m2-shop 下方独立行） */
.m2-shop-meta {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 奶茶名称 */
.m2-product-name {
    font-size: 16px;
    /*font-weight: 700;*/
    color: #222;
    margin-bottom: 8px;
}

/* 奶茶图片容器：固定宽高比，relative 用于承载悬浮规格 */
.m2-product-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #f5f5f5;
}

.m2-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 奶茶规格：悬浮在图片底部，独立圆角深色条，与图片边缘留间距 */
.m2-spec {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    font-size: 12px;
    color: #fff;
    line-height: 1.4;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    /* flex 让文字省略 + 箭头固定右侧 */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 规格文字：单行省略，占据剩余空间 */
.m2-spec-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 规格右侧箭头 */
.m2-spec-arrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    flex: 0 0 auto;
}

/* 奶茶描述 */
.m2-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 价格行：预估价红色大字 + 实际价灰色划线 */
.m2-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.m2-estimate {
    color: #e74c3c;
    font-size: 18px;
    font-weight: 700;
}

.m2-estimate small {
    font-size: 11px;
    font-weight: 400;
    margin-left: 2px;
}

.m2-actual {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
}

/* 选这个按钮：浅蓝底蓝字 */
.m2-choose-btn {
    width: 100%;
    padding: 9px 0;
    border: 0;
    border-radius: 8px;
    background: #e6f0ff;
    color: #1677ff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
}

.m2-choose-btn:active {
    background: #d4e4ff;
}

/* 底部引导文字 */
.m2-footer-text {
    font-size: 14px;
    color: #555;
    margin-top: 12px;
    line-height: 1.6;
}