/* ===== 聊天气泡样式预设（会员功能）=====
 * 逻辑在 js/chat-bubble-styles.js：选择存 localStorage（mindpalace_bubble_style），
 * 加载时把预设 id 写到 body[data-bubble]，这里按属性覆盖 .mine 气泡（私聊 #chatMessages 与
 * 群聊 #groupChatMessages 共用 .chat-msg.mine .chat-msg-bubble，一处规则两区生效）。
 * 「默认」不写规则——沿用 friends.css 现状（品牌紫底白字）。
 * 贴纸气泡（.sticker 透明底）规则特异性更高，不受预设影响。
 */

/* 清新绿：微信绿底深字 */
body[data-bubble="green"] .chat-msg.mine .chat-msg-bubble { background: #95ec69; color: #1a202c; }
body[data-bubble="green"] .chat-msg.mine .chat-msg-bubble .chat-msg-meta { color: rgba(0,0,0,.45); }

/* 淡雅紫：品牌紫渐变（与全站渐变背景同色系） */
body[data-bubble="purple"] .chat-msg.mine .chat-msg-bubble { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }

/* 描边白：白底品牌紫描边 */
body[data-bubble="outline"] .chat-msg.mine .chat-msg-bubble { background: #fff; color: #2d3748; border: 1.5px solid #5a67d8; box-shadow: none; }
body[data-bubble="outline"] .chat-msg.mine .chat-msg-bubble .chat-msg-meta { color: #a0aec0; }

/* ---- 选择器：居中弹层（遮罩 + 圆点卡片），入口在 ➕ 面板「气泡样式」 ---- */
.mp-bubble-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000; /* 高于动作面板 1001，低于通话 UI 4000 */
    background: rgba(0,0,0,.35);
    align-items: center;
    justify-content: center;
}
.mp-bubble-mask.open { display: flex; }
.mp-bubble-picker {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    padding: 14px 18px 16px;
}
.mp-bubble-title { font-size: 12px; color: #718096; margin-bottom: 8px; white-space: nowrap; }
.mp-bubble-row { display: flex; gap: 14px; }
.mp-bubble-dot {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 2px;
    position: relative;
    font-family: inherit;
}
.mp-bubble-swatch { width: 26px; height: 26px; border-radius: 50%; display: block; }
/* 选中高亮：白环 + 品牌紫外环 */
.mp-bubble-dot.sel .mp-bubble-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5a67d8; }
/* 会员专属 💎 角标 */
.mp-bubble-vip { position: absolute; top: -5px; right: -4px; font-size: 10px; line-height: 1; }
.mp-bubble-name { font-size: 10px; color: #718096; white-space: nowrap; }

/* 非会员点会员款的提示 toast（固定顶部，自动消失） */
.mp-bubble-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}