/* ===== 全站主题：浅色 / 深色 / 自定义背景 ===== */

:root,
[data-theme="light"] {
  --user-bg-overlay: transparent;
}

[data-theme="dark"] {
  color-scheme: dark;
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: #1e3a5f;
  --accent: #fbbf24;
  --accent-light: #422006;
  --success: #34d399;
  --danger: #f87171;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --bg: #0f172a;
  --bg-card: #1e293b;
  --border: #334155;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.3);
  --user-bg-overlay: rgb(15 23 42 / 0.82);
  --mm-feed-bg: #0f172a;
  --mm-accent-light: #312e81;
  --chat-sidebar-bg: #1a1f2e;
  --chat-panel-bg: #0f1419;
  --chat-bubble-bg: #243044;
  --chat-bubble-mine: #1e4d36;
  --chat-input-bg: #1e293b;
  --chat-border: #334155;
}

html.has-user-bg-image {
  --user-bg-overlay: rgb(248 250 252 / 0.88);
}

html[data-theme="dark"].has-user-bg-image {
  --user-bg-overlay: rgb(15 23 42 / 0.88);
}

body {
  background-color: var(--user-bg-color, var(--bg));
  background-image:
    linear-gradient(var(--user-bg-overlay), var(--user-bg-overlay)),
    var(--user-bg-image, none),
    linear-gradient(var(--user-bg-color, var(--bg)), var(--user-bg-color, var(--bg)));
  background-size: cover, cover, auto;
  background-position: center, center, center;
  background-attachment: fixed, fixed, scroll;
  background-repeat: no-repeat;
}

.moments-page {
  background-color: var(--user-bg-color, var(--mm-feed-bg));
  background-image:
    linear-gradient(var(--user-bg-overlay), var(--user-bg-overlay)),
    var(--user-bg-image, none),
    linear-gradient(var(--user-bg-color, var(--mm-feed-bg)), var(--user-bg-color, var(--mm-feed-bg)));
  background-size: cover, cover, auto;
  background-position: center, center, center;
  background-attachment: fixed, fixed, scroll;
}

[data-theme="dark"] .header,
[data-theme="dark"] .mm-header,
[data-theme="dark"] .jm-header,
[data-theme="dark"] .pg-header {
  background: rgb(30 41 59 / 0.92);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .moments-page .mm-side-rail {
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #134e4a 100%);
  border-right-color: var(--border);
  color: #c4b5fd;
}

[data-theme="dark"] .moments-page .mm-side-btn[data-mode].active {
  background: linear-gradient(135deg, rgb(124 58 237 / 0.35), rgb(255 45 138 / 0.2));
  color: #f9a8d4;
}

[data-theme="dark"] .moments-page .mm-post {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .moments-page .mm-interact {
  background: rgb(99 102 241 / 0.08);
  border-color: var(--border);
}

[data-theme="dark"] .card,
[data-theme="dark"] .day-card,
[data-theme="dark"] .checklist-card,
[data-theme="dark"] .tip-card,
[data-theme="dark"] .weather-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .mm-post,
[data-theme="dark"] .mm-guest-card,
[data-theme="dark"] .jm-card,
[data-theme="dark"] .pg-card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #0f172a;
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .btn-outline:hover {
  background: rgb(51 65 85 / 0.5);
}

[data-theme="dark"] .mm-chat-sidebar,
[data-theme="dark"] .mm-chat-my-id,
[data-theme="dark"] .mm-chat-add-friend,
[data-theme="dark"] .mm-chat-friends-panel,
[data-theme="dark"] .mm-chat-room-list {
  background: var(--chat-sidebar-bg);
  border-color: var(--chat-border);
}

[data-theme="dark"] .mm-chat-room-item {
  background: var(--bg-card);
  border-bottom-color: var(--chat-border);
}

[data-theme="dark"] .mm-chat-room-item.active {
  background: rgb(30 58 95 / 0.55);
}

[data-theme="dark"] .mm-chat-main,
[data-theme="dark"] .mm-chat-messages {
  background: var(--chat-panel-bg);
}

[data-theme="dark"] .mm-chat-bubble {
  background: var(--bubble-other-bg, var(--chat-bubble-bg));
  color: var(--bubble-other-color, var(--text));
}

[data-theme="dark"] .mm-chat-msg.mine .mm-chat-bubble {
  background: var(--bubble-mine-bg, var(--chat-bubble-mine));
  color: var(--bubble-mine-color, inherit);
}

[data-theme="dark"] .mm-chat-compose,
[data-theme="dark"] .mm-chat-text,
[data-theme="dark"] .mm-chat-add-friend-input,
[data-theme="dark"] .mm-chat-invite-search-input {
  background: var(--chat-input-bg);
  color: var(--text);
  border-color: var(--chat-border);
}

[data-theme="dark"] .mm-chat-friend-item,
[data-theme="dark"] .mm-chat-member-row,
[data-theme="dark"] .mm-chat-room-invite-item,
[data-theme="dark"] .mm-chat-panel-head {
  background: var(--bg-card);
  border-color: var(--chat-border);
}

[data-theme="dark"] .modal-overlay {
  background: rgb(0 0 0 / 0.65);
}

.theme-settings-modal .modal-content {
  max-width: 440px;
}

.theme-mode-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-mode-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.theme-mode-btn:hover {
  border-color: var(--primary);
}

.theme-mode-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

[data-theme="dark"] .theme-mode-btn.active {
  color: var(--primary);
}

.theme-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-color-row input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg-card);
}

.theme-color-row input[type="text"] {
  flex: 1;
}

.theme-bg-preview {
  margin-top: 10px;
  height: 88px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--user-bg-color, var(--bg));
  background-image:
    linear-gradient(var(--user-bg-overlay), var(--user-bg-overlay)),
    var(--user-bg-image, none);
  background-size: cover;
  background-position: center;
}

.theme-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.theme-opacity-row input[type="range"] {
  flex: 1;
}

.theme-settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.theme-open-btn {
  min-width: 36px;
}

/* ===== 聊天气泡样式（个人偏好，data-chat-bubble 在 html 上） ===== */

:root,
[data-chat-bubble="wechat"] {
  --bubble-other-bg: #fff;
  --bubble-mine-bg: #95ec69;
  --bubble-other-color: inherit;
  --bubble-mine-color: inherit;
  --bubble-other-radius: 4px;
  --bubble-mine-radius: 4px;
  --bubble-other-border: none;
  --bubble-mine-border: none;
  --bubble-shadow: 0 1px 1px rgb(0 0 0 / 0.04);
  --bubble-mine-shadow: 0 1px 1px rgb(0 0 0 / 0.04);
  --bubble-padding: 9px 12px;
}

[data-chat-bubble="imessage"] {
  --bubble-other-bg: #e9e9eb;
  --bubble-mine-bg: #007aff;
  --bubble-mine-color: #fff;
  --bubble-other-radius: 18px 18px 18px 4px;
  --bubble-mine-radius: 18px 18px 4px 18px;
  --bubble-shadow: none;
  --bubble-mine-shadow: none;
}

[data-chat-bubble="telegram"] {
  --bubble-other-bg: #fff;
  --bubble-mine-bg: #effdde;
  --bubble-other-radius: 12px 12px 12px 4px;
  --bubble-mine-radius: 12px 12px 4px 12px;
  --bubble-other-border: 1px solid rgb(0 0 0 / 0.06);
  --bubble-mine-border: 1px solid #c8e6b4;
  --bubble-shadow: none;
  --bubble-mine-shadow: none;
}

[data-chat-bubble="soft"] {
  --bubble-other-bg: #fff;
  --bubble-mine-bg: linear-gradient(135deg, #7dd3fc, #38bdf8);
  --bubble-mine-color: #fff;
  --bubble-other-radius: 16px;
  --bubble-mine-radius: 16px;
  --bubble-other-border: 1px solid rgb(0 0 0 / 0.05);
  --bubble-mine-border: none;
  --bubble-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
  --bubble-mine-shadow: 0 2px 10px rgb(56 189 248 / 0.35);
}

[data-chat-bubble="outline"] {
  --bubble-other-bg: transparent;
  --bubble-mine-bg: transparent;
  --bubble-other-radius: 10px;
  --bubble-mine-radius: 10px;
  --bubble-other-border: 1px solid #d1d5db;
  --bubble-mine-border: 1px solid #22c55e;
  --bubble-shadow: none;
  --bubble-mine-shadow: none;
}

[data-theme="dark"][data-chat-bubble="wechat"] {
  --bubble-other-bg: #243044;
  --bubble-mine-bg: #1e4d36;
  --bubble-other-color: var(--text);
}

[data-theme="dark"][data-chat-bubble="imessage"] {
  --bubble-other-bg: #3a3a3c;
  --bubble-mine-bg: #0a84ff;
  --bubble-mine-color: #fff;
  --bubble-other-color: var(--text);
}

[data-theme="dark"][data-chat-bubble="telegram"] {
  --bubble-other-bg: #182533;
  --bubble-mine-bg: #2b5278;
  --bubble-mine-color: #fff;
  --bubble-other-color: var(--text);
  --bubble-other-border: 1px solid #334155;
  --bubble-mine-border: 1px solid #3b6ea5;
}

[data-theme="dark"][data-chat-bubble="soft"] {
  --bubble-other-bg: #1e293b;
  --bubble-mine-bg: linear-gradient(135deg, #2563eb, #7c3aed);
  --bubble-mine-color: #fff;
  --bubble-other-color: var(--text);
  --bubble-other-border: 1px solid #334155;
}

[data-theme="dark"][data-chat-bubble="outline"] {
  --bubble-other-bg: transparent;
  --bubble-mine-bg: transparent;
  --bubble-other-border: 1px solid #475569;
  --bubble-mine-border: 1px solid #34d399;
  --bubble-other-color: var(--text);
  --bubble-mine-color: var(--text);
}

.theme-bubble-section {
  margin-top: 4px;
}

.theme-bubble-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.theme-bubble-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  font-family: inherit;
}

.theme-bubble-btn:hover {
  border-color: var(--primary);
}

.theme-bubble-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.theme-bubble-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 4px 0;
}

.theme-bubble-chip {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.theme-bubble-chip.other {
  width: 72%;
  align-self: flex-start;
  background: #e5e7eb;
}

.theme-bubble-chip.mine {
  width: 58%;
  align-self: flex-end;
  background: #95ec69;
}

.theme-bubble-preview.is-imessage .theme-bubble-chip.other { background: #e9e9eb; border-radius: 8px 8px 8px 2px; }
.theme-bubble-preview.is-imessage .theme-bubble-chip.mine { background: #007aff; border-radius: 8px 8px 2px 8px; }
.theme-bubble-preview.is-telegram .theme-bubble-chip.other { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px 8px 8px 2px; }
.theme-bubble-preview.is-telegram .theme-bubble-chip.mine { background: #effdde; border: 1px solid #c8e6b4; border-radius: 8px 8px 2px 8px; }
.theme-bubble-preview.is-soft .theme-bubble-chip.other { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.theme-bubble-preview.is-soft .theme-bubble-chip.mine { background: linear-gradient(135deg, #7dd3fc, #38bdf8); border-radius: 8px; }
.theme-bubble-preview.is-outline .theme-bubble-chip.other { background: transparent; border: 1px solid #d1d5db; border-radius: 6px; }
.theme-bubble-preview.is-outline .theme-bubble-chip.mine { background: transparent; border: 1px solid #22c55e; border-radius: 6px; }

.theme-bubble-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
  text-align: center;
}

.theme-bubble-btn.active .theme-bubble-label {
  color: var(--primary-dark);
  font-weight: 600;
}

[data-theme="dark"] .theme-bubble-btn.active .theme-bubble-label {
  color: var(--primary);
}

.mm-chat-room-bubble-note {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  background: rgb(0 0 0 / 0.03);
  border-radius: 8px;
}

[data-theme="dark"] .mm-chat-room-bubble-note {
  background: rgb(255 255 255 / 0.05);
}

.theme-bubble-group.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}