/*
 * Glimmer OS · 送礼卡片美化模板 (韩系高级买手店风 · 日夜双模)
 * 来源: beta/送礼(1).html
 * 我送出 (.msg-row.me)    → 燕麦石灰
 * 收到的 (.msg-row.other) → 纯净白
 * 铁律: 夜间走 body.dark-mode / body.night 覆盖变量, 绝不写死色值
 *       变量作用域收在 .gift-bubble 自身(向子元素继承), 不污染全局
 */

/* ══════════ 变量 · 日间 ══════════ */
.gift-bubble {
    --gme-bg:#F0EFEB;   --gme-border:#E3E1DC;   --gme-text-main:#1A1A1A; --gme-text-sub:#666666;
    --gme-icon-bg:#1A1A1A; --gme-icon-color:#FFFFFF; --gme-barcode:#1A1A1A; --gme-divider:#DCDAD5;
    --goth-bg:#FFFFFF;  --goth-border:#E8E8E8;  --goth-text-main:#1A1A1A; --goth-text-sub:#666666;
    --goth-icon-bg:#1A1A1A; --goth-icon-color:#FFFFFF; --goth-barcode:#1A1A1A; --goth-divider:#EEEEEE;
}

/* ══════════ 变量 · 夜间(高优先级压过 apps-styles 全局反色块) ══════════ */
body.dark-mode .gift-bubble, body.night .gift-bubble {
    --gme-bg:#2A2927;   --gme-border:#383734;   --gme-text-main:#EAEAEA; --gme-text-sub:#999999;
    --gme-icon-bg:#EAEAEA; --gme-icon-color:#1A1A1A; --gme-barcode:#EAEAEA; --gme-divider:#383734;
    --goth-bg:#1E1E1E;  --goth-border:#2C2C2C;  --goth-text-main:#EAEAEA; --goth-text-sub:#999999;
    --goth-icon-bg:#EAEAEA; --goth-icon-color:#1A1A1A; --goth-barcode:#EAEAEA; --goth-divider:#2C2C2C;
}

/* ══════════ 卡片主体 · 纯实体无毛玻璃 ══════════ */
.gift-bubble {
    position: relative !important;
    width: 230px !important;
    max-width: 230px !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: left !important;
    overflow: visible !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.3s ease !important;
}

/* 我送的(靠右) */
.msg-row.me .gift-bubble {
    background: var(--gme-bg) !important;
    border: 1px solid var(--gme-border) !important;
    border-bottom-right-radius: 2px !important;
    box-shadow: none !important;
}

/* 收到的(靠左) */
.msg-row.other .gift-bubble {
    background: var(--goth-bg) !important;
    border: 1px solid var(--goth-border) !important;
    border-bottom-left-radius: 2px !important;
    box-shadow: none !important;
}

/* ══════════ 右上角装饰 · 买手店条形码 ══════════ */
.gift-deco {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    width: 32px !important;
    height: 10px !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    background: none !important;
}
.msg-row.me .gift-deco {
    background: repeating-linear-gradient(to right,
        var(--gme-barcode) 0, var(--gme-barcode) 1px, transparent 1px, transparent 3px,
        var(--gme-barcode) 3px, var(--gme-barcode) 4px, transparent 4px, transparent 5px,
        var(--gme-barcode) 5px, var(--gme-barcode) 7px, transparent 7px, transparent 9px,
        var(--gme-barcode) 9px, var(--gme-barcode) 12px) !important;
}
.msg-row.other .gift-deco {
    background: repeating-linear-gradient(to right,
        var(--goth-barcode) 0, var(--goth-barcode) 1px, transparent 1px, transparent 3px,
        var(--goth-barcode) 3px, var(--goth-barcode) 4px, transparent 4px, transparent 5px,
        var(--goth-barcode) 5px, var(--goth-barcode) 7px, transparent 7px, transparent 9px,
        var(--goth-barcode) 9px, var(--goth-barcode) 12px) !important;
}

/* ══════════ 顶部信息区 ══════════ */
.gift-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

/* 图标: 极简黑白块(覆盖原 display:none, 让 emoji/字母可见) */
.gift-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 14px !important;
    font-style: italic !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    filter: none !important;
    transition: all 0.3s ease !important;
}
.msg-row.me .gift-icon    { background: var(--gme-icon-bg) !important;  color: var(--gme-icon-color) !important; }
.msg-row.other .gift-icon { background: var(--goth-icon-bg) !important; color: var(--goth-icon-color) !important; }

.gift-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-top: -2px !important;
    width: auto !important;
    flex: 1 !important;
}

/* 标题: 极小字号大写无衬线 */
.gift-title {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0 !important;
    transition: color 0.3s ease !important;
}
.msg-row.me .gift-title    { color: var(--gme-text-sub) !important; }
.msg-row.other .gift-title { color: var(--goth-text-sub) !important; }

/* 对象: 优雅斜体 */
.gift-target {
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 14px !important;
    font-style: italic !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
}
.msg-row.me .gift-target    { color: var(--gme-text-main) !important; }
.msg-row.other .gift-target { color: var(--goth-text-main) !important; }

/* ══════════ 图片区 ══════════ */
.gift-bubble img {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    margin: 14px 0 0 0 !important;
    box-shadow: none !important;
    filter: contrast(0.95) saturate(0.85) !important;
}

/* ══════════ 底部礼物名 ══════════ */
.gift-name {
    margin-top: 12px !important;
    padding: 12px 0 0 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    background: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}
.msg-row.me .gift-name    { color: var(--gme-text-main) !important;  border-top: 1px solid var(--gme-divider) !important; }
.msg-row.other .gift-name { color: var(--goth-text-main) !important; border-top: 1px solid var(--goth-divider) !important; }

/* ══════════════════════════════════════
   💌 同居邀请卡片 (与君同行 → 回响聊天)
   样式来自用户 beta/聊天界面邀约.html 的 .invite-msg-card。
   铁律：无 backdrop-filter；夜间走 body.dark-mode 覆盖。
   ══════════════════════════════════════ */
.invite-msg-card {
    background: #fff;
    width: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(138, 120, 110, 0.08);
    border: 1px solid #EAE5DD;
    transition: 0.4s ease;
}
.invite-msg-card:active { transform: scale(0.98); }
.invite-msg-card .imc-img { width: 100%; height: 130px; object-fit: cover; border-bottom: 1px solid #EAE5DD; transition: 0.4s ease; display: block; }
.invite-msg-card.accepted .imc-img { filter: sepia(0.1) contrast(1.05); }
.invite-msg-card .imc-content { padding: 16px; transition: 0.4s ease; }
.invite-msg-card .imc-title {
    font-size: 16px; font-weight: 600; color: #3A352F;
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.invite-msg-card .imc-desc {
    font-size: 12px; color: #968F85; line-height: 1.4; margin-bottom: 12px;
}
.invite-msg-card .imc-action {
    font-size: 12px; font-weight: bold; text-align: center;
    padding-top: 12px; border-top: 1px dashed #EAE5DD; transition: 0.4s ease;
}
/* 我发出的 (右侧, .msg-row.me) */
.msg-row.me .invite-msg-card { border: 1px solid rgba(194, 140, 140, 0.3); opacity: 0.92; }
.msg-row.me .invite-msg-card .imc-action { color: #968F85; font-weight: normal; }
/* 对方发来的 (左侧, .msg-row.other) */
.msg-row.other .invite-msg-card .imc-action { color: #C28C8C; }

/* 高甜接受态 */
.invite-msg-card.accepted {
    border-color: #C28C8C;
    background: #FFFBFB;
    box-shadow: 0 4px 20px rgba(194, 140, 140, 0.15);
}
.invite-msg-card.accepted:active { transform: none; }
.invite-msg-card .imc-action.accepted {
    color: #C28C8C !important;
    font-weight: bold;
    background: rgba(194, 140, 140, 0.08);
    margin: 0 -16px -16px;
    padding: 12px 16px;
    border-top: 1px solid rgba(194, 140, 140, 0.2);
}

/* 夜间模式 */
body.dark-mode .invite-msg-card {
    background: #1f1f1f;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
body.dark-mode .invite-msg-card .imc-title { color: #e2e8f0; }
body.dark-mode .invite-msg-card .imc-desc { color: #9ca3af; }
body.dark-mode .invite-msg-card .imc-action { border-top-color: rgba(255,255,255,0.12); }
body.dark-mode .invite-msg-card.accepted {
    background: rgba(120, 80, 90, 0.18);
    border-color: rgba(194, 140, 140, 0.5);
}
body.dark-mode .invite-msg-card .imc-action.accepted {
    background: rgba(194, 140, 140, 0.15);
    border-top-color: rgba(194, 140, 140, 0.3);
}