/* ===== 聊天设置（js/chat-settings.js）：聊天背景 + 音效设置 =====
 * 背景预设按 body[data-chatbg] 覆盖 .chat-messages 背景（私聊/群聊共用此类，一处规则两区生效）；
 * 「默认」不写规则——沿用 friends.css 现状（#f0f2f5）。
 * 弹层为遮罩 + 居中卡片，z-index 3000（高于动作面板 1001，低于通话 UI 4000）。
 */

body[data-chatbg="rice"] .chat-messages { background: #faf5ea; }
body[data-chatbg="green"] .chat-messages { background: #e7f6ec; }
body[data-chatbg="blue"] .chat-messages { background: #e9f1fd; }
body[data-chatbg="pink"] .chat-messages { background: #fdeef2; }

.mp-cset-mask {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-cset-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    padding: 16px 18px;
    min-width: 260px;
    max-width: 92vw;
}
.mp-cset-title { font-size: 14px; font-weight: 600; color: #2d3748; margin-bottom: 12px; }
.mp-cset-sub { font-size: 12px; color: #718096; margin: 12px 0 8px; }
.mp-cset-hint { font-size: 12px; color: #a0aec0; margin-top: 12px; }

/* 背景色块圆点（选中高亮外环，同气泡样式手感） */
.mp-cset-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mp-cset-dot {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 2px;
    font-family: inherit;
}
.mp-cset-swatch { width: 30px; height: 30px; border-radius: 50%; display: block; border: 1px solid #e2e8f0; }
.mp-cset-dot.sel .mp-cset-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5a67d8; }
.mp-cset-name { font-size: 11px; color: #718096; white-space: nowrap; }

/* 音效设置：开关 + 音色 */
.mp-cset-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: #2d3748; }
.mp-cset-toggle {
    border: none;
    border-radius: 14px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    background: #edf2f7;
    color: #718096;
}
.mp-cset-toggle.on { background: #5a67d8; color: #fff; }
.mp-cset-tone {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: #4a5568;
    cursor: pointer;
}
.mp-cset-tone.sel { border-color: #5a67d8; color: #5a67d8; font-weight: 600; }
.mp-cset-tone:disabled { opacity: .5; cursor: not-allowed; }