/**
 * 代付卡片与礼物气泡样式
 * Pay Card & Gift Bubble Styles
 */

/* === 亮色系主题变量 === */
:root {
    --card-bg: #ffffff;
    --text-main-pay: #333333;
    --text-sub-pay: #888888;
    
    /* 渐变色 - 我 (蓝) */
    --accent-blue-start: #4facfe;
    --accent-blue-end: #00f2fe;
    
    /* 渐变色 - 对方 (粉橙) */
    --accent-orange-start: #ff758c;
    --accent-orange-end: #ff7eb3;

    /* 弥散阴影 */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
}

/* === 核心：代付卡片样式 === */
.pay-card {
    width: 250px; 
    background: var(--card-bg); 
    border-radius: 18px; 
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

/* 头部渐变区分 */
/* 发送方 (右侧) - 蓝色 */
.msg-right .pay-card .pc-header { 
    background: linear-gradient(135deg, var(--accent-blue-start), var(--accent-blue-end)); 
}
/* 接收方 (左侧) - 粉橙色 */
.msg-left .pay-card .pc-header { 
    background: linear-gradient(135deg, var(--accent-orange-start), var(--accent-orange-end)); 
}

.pc-header {
    padding: 15px; 
    color: #fff; 
    font-size: 13px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.pc-body { 
    padding: 20px 16px; 
    text-align: center; 
}

.pc-title { 
    font-size: 14px; 
    color: var(--text-sub-pay); 
    margin-bottom: 4px; 
}

.pc-amount { 
    font-size: 32px; 
    font-weight: 700; 
    color: var(--text-main-pay); 
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; 
    letter-spacing: -0.5px;
}

.pc-desc { 
    font-size: 12px; 
    color: #999; 
    margin-top: 8px; 
    background: #f7f7f7; 
    padding: 4px 10px; 
    border-radius: 20px; 
    display: inline-block;
}

/* 底部按钮 */
.pc-footer {
    padding: 14px; 
    text-align: center; 
    font-weight: 600; 
    font-size: 14px;
    border-top: 1px solid #f0f0f0; 
    cursor: pointer; 
    transition: 0.2s;
}

/* 接收方按钮强调色 */
.msg-left .pay-card .pc-footer { 
    color: #ff758c; 
}
.msg-left .pay-card .pc-footer:hover { 
    background: #fff5f7; 
}

/* 发送方按钮置灰 */
.msg-right .pay-card .pc-footer { 
    color: #ccc; 
    cursor: default; 
}

/* === 状态：已支付 (Paid) === */
.pay-card.paid {
    filter: grayscale(100%); 
    opacity: 0.7;
    box-shadow: none; 
    border: 1px solid #eee;
}

.pay-card.paid .pc-footer { 
    text-decoration: line-through; 
    pointer-events: none; 
}

/* 盖章动画 */
.stamp-paid {
    position: absolute; 
    right: 10px; 
    bottom: 50px;
    width: 90px; 
    height: 90px;
    border: 4px solid #333; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px; 
    font-weight: 900; 
    color: #333;
    transform: rotate(-25deg) scale(2); 
    opacity: 0;
    pointer-events: none; 
    mix-blend-mode: multiply;
}

.pay-card.paid .stamp-paid {
    animation: stampAnim 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes stampAnim { 
    to { 
        transform: rotate(-25deg) scale(1); 
        opacity: 0.6; 
    } 
}

/* === 礼物气泡样式 === */
.gift-bubble {
    padding: 10px 14px; 
    border-radius: 16px;
    display: flex; 
    align-items: center; 
    gap: 10px;
    box-shadow: var(--shadow-soft); 
    max-width: 220px;
    background: #fff;
}

.msg-right .gift-bubble { 
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); 
    color: #fff; 
}

.gift-icon { 
    font-size: 32px; 
}

.gift-info div:first-child { 
    font-size: 12px; 
    opacity: 0.8; 
}

.gift-info div:last-child { 
    font-size: 15px; 
    font-weight: 600; 
}