/* ======================================================== */
/* 聊天专属美化中枢 (全屏独立舞台 + 经典/晕染两大母版体系)   */
/* ======================================================== */

.wx-cr-beautify-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fbfbfc !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.wx-cr-beautify-page.show {
  transform: translateX(0) !important;
}

/* 顶部全屏导航条 */
.btf-page-header {
  height: calc(56px + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 14px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  box-sizing: border-box;
}

.btf-page-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  cursor: pointer;
  padding: 0;
}
.btf-page-back-btn:active {
  opacity: 0.4;
}
.btf-page-back-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btf-page-title-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.btf-page-main-title {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.8px;
}

.btf-page-sub-title {
  font-size: 9.5px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-weight: 700;
  color: #888888;
  letter-spacing: 1.5px;
}

.btf-page-right-space {
  width: 36px;
  height: 36px;
}

/* 滚动内容区 */
.btf-page-scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px calc(24px + var(--safe-bottom)) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.btf-page-scroll-body::-webkit-scrollbar { display: none; }

/* ======================================================== */
/* 折叠卡片基础架构                                         */
/* ======================================================== */
.btf-card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px;
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.btf-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.btf-card:not(.is-open) .btf-head-row {
  border-bottom: none !important;
  padding-bottom: 0px !important;
}

.btf-card.is-open .btf-head-row {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.btf-sec-title {
  font-size: 15px !important;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.5px;
}

.btf-sec-en {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #888888;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.btf-card-collapse-content {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

.btf-card.is-open .btf-card-collapse-content {
  display: flex !important;
}

/* ======================================================== */
/* § 01. 壁纸管理                                           */
/* ======================================================== */
.btf-preview-box {
  width: 100%;
  height: 170px !important;
  border-radius: 14px;
  background: #f7f7f9;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.btf-preview-tip {
  font-size: 13px;
  color: #777777;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btf-btn-row {
  display: flex;
  gap: 10px;
}

.btf-btn {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f8f8fa;
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btf-btn:active {
  background: #111111;
  color: #ffffff;
}

.btf-color-palette-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.btf-color-mode-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 10px;
  gap: 3px;
}

.btf-color-tab-btn {
  flex: 1;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #666666;
  cursor: pointer;
}
.btf-color-tab-btn.active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.btf-color-inputs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 4px 0;
}

.btf-color-picker-box {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 2px solid #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btf-color-picker-box input[type="color"] {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0;
  cursor: pointer;
}

.btf-color-dot-preview {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btf-angle-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.btf-angle-slider-wrap .gothic-range { flex: 1; }
.btf-angle-val {
  font-size: 12px;
  font-family: monospace;
  font-weight: 700;
  color: #555555;
  min-width: 36px;
  text-align: right;
}

/* ======================================================== */
/* § 02. 角色与显示控件                                     */
/* ======================================================== */
.btf-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.btf-row-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #222222;
}

.btf-text-input {
  flex: 1;
  max-width: 200px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 10px;
  font-size: 13px;
  color: #111111;
  outline: none;
  text-align: right;
}

.btf-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.btf-switch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.btf-row-desc {
  font-size: 11px;
  color: #888888;
}

/* ======================================================== */
/* § 03. 头像定制                                           */
/* ======================================================== */
.btf-avatar-dual-deck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btf-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #f8f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 10px 10px;
}

.btf-col-header {
  font-size: 12px;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.5px;
}

.btf-avatar-thumb {
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #64748b;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-radius 0.2s ease, border 0.2s ease;
}
.btf-avatar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btf-avatar-thumb.shape-round {
  border-radius: 50% !important;
}
.btf-avatar-thumb.shape-squircle {
  border-radius: 12px !important;
}
.btf-avatar-thumb.shape-square {
  border-radius: 0px !important;
}
.btf-avatar-thumb.no-border {
  border: none !important;
  box-shadow: none !important;
}

.btf-avatar-ops {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.btf-avatar-btn {
  width: 100%;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btf-avatar-btn:active {
  opacity: 0.7;
}

.btf-avatar-btn-sub {
  width: 100%;
  height: 22px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.btf-avatar-btn-sub:active {
  color: #111111;
}

.btf-shape-mini-tabs {
  display: flex;
  width: 100%;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px;
  border-radius: 8px;
  gap: 2px;
}
.btf-shape-mini-tabs .btf-shape-btn {
  flex: 1;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btf-shape-mini-tabs .btf-shape-btn.active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ======================================================== */
/* § 04. 气泡工坊 (🌟 精准 100px 固定高度微缩视口 + 平分 Tab) */
/* ======================================================== */
.btf-bubble-live-stage {
  width: 100%;
  height: 100px !important; /* 🌟 按照墨墨要求固定为 100px */
  min-height: 100px !important;
  max-height: 100px !important;
  background-color: #f8f8fa;
  background-size: cover;
  background-position: center;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden !important;
}

.live-bubble-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}

.live-bubble-row.user-row {
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.live-avatar-dot {
  width: 28px;
  height: 28px;
  background: #cbd5e1;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: #475569;
}
.live-avatar-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-avatar-dot.shape-round {
  border-radius: 50% !important;
}
.live-avatar-dot.shape-squircle {
  border-radius: 8px !important;
}
.live-avatar-dot.shape-square {
  border-radius: 0px !important;
}
.live-avatar-dot.no-border {
  border: none !important;
  box-shadow: none !important;
}

.live-bubble-outer {
  position: relative;
  max-width: 75%;
}

.live-bubble-box {
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
  box-sizing: border-box !important;
  transition: all 0.15s ease;
  box-shadow: none !important;
  position: relative;
}

/* 预览视口内三大气泡表现 */
.live-bubble-box.bt-gradient {
  border-radius: 12px !important;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(195, 204, 216, 0.85) 0%, rgba(222, 228, 236, 0.45) 45%, #ffffff 85%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.live-bubble-row.user-row .live-bubble-box.bt-gradient {
  background-image: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(175, 210, 242, 0.72) 0%, rgba(212, 232, 252, 0.35) 45%, #ffffff 85%) !important;
}

/* 经典：尖角向上 */
.live-bubble-row.char-row .live-bubble-box.bt-classic-up {
  border-radius: 2px 12px 12px 12px !important;
}
.live-bubble-row.user-row .live-bubble-box.bt-classic-up {
  border-radius: 12px 2px 12px 12px !important;
}

/* 经典：尖角向下 */
.live-bubble-row.char-row .live-bubble-box.bt-classic-down {
  border-radius: 12px 12px 12px 2px !important;
}
.live-bubble-row.user-row .live-bubble-box.bt-classic-down {
  border-radius: 12px 12px 2px 12px !important;
}

/* 经典：尖角中间 */
.live-bubble-box.bt-classic-middle {
  border-radius: 6px !important;
}
.live-bubble-row.char-row .live-bubble-box.bt-classic-middle::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 5px solid var(--bubble-bg, #ffffff);
}
.live-bubble-row.user-row .live-bubble-box.bt-classic-middle::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--bubble-bg, #ffffff);
}

/* 选项卡控件 */
.btf-bubble-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 10px;
}

.btf-bubble-tab {
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #666666;
  cursor: pointer;
}
.btf-bubble-tab.active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.btf-classic-corner-deck {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btf-corner-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 10px;
}
.btf-corner-btn {
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
}
.btf-corner-btn.active {
  background: #111111;
  color: #ffffff;
}

/* 🌟 用户在左、角色在右的 Tab 切换控件（50% 绝对平分） */
.btf-bubble-target-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 3px !important;
  border-radius: 10px !important;
  margin-top: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.btf-target-tab-btn {
  flex: 1 !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btf-target-tab-btn.active {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* 子面板高定卡片 */
.btf-sub-panel-card {
  background: #f8f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* ======================================================== */
/* § 05. 字体大小专属预览视口 (#f8f8fa 背景)               */
/* ======================================================== */
.btf-font-preview-stage {
  width: 100%;
  height: 64px;
  background: #f8f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.btf-font-preview-bubble {
  background: #ffffff;
  color: #111111;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-weight: 500;
  white-space: nowrap;
  transition: font-size 0.15s ease;
}

/* ======================================================== */
/* 🌟 核心气泡渲染体系：正式聊天区四大形态与晕染母版       */
/* ======================================================== */

/* 头像三态形状 */
.wx-msg-avatar.shape-round {
  border-radius: 50% !important;
}
.wx-msg-avatar.shape-squircle {
  border-radius: 12px !important;
}
.wx-msg-avatar.shape-square {
  border-radius: 0px !important;
}
.wx-msg-avatar.no-border {
  border: none !important;
  box-shadow: none !important;
}

/* 1. 晕染气泡 (原版专属冰蓝/灰银柔光与微阴影) */
.wx-msg-bubble-item.bt-gradient {
  border-radius: 18px !important;
  color: #1e242c;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(195, 204, 216, 0.85) 0%, rgba(222, 228, 236, 0.45) 45%, #ffffff 85%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.wx-msg-group.user-side .wx-msg-bubble-item.bt-gradient {
  color: #1a2b3c;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(175, 210, 242, 0.72) 0%, rgba(212, 232, 252, 0.35) 45%, #ffffff 85%) !important;
  box-shadow: 0 2px 8px rgba(70, 120, 180, 0.08) !important;
}

/* 经典气泡与特制气泡彻底抹去原版 rz8 星云 */
.wx-bubble-outer:has(.bt-classic-up) .rz8-dc,
.wx-bubble-outer:has(.bt-classic-down) .rz8-dc,
.wx-bubble-outer:has(.bt-classic-middle) .rz8-dc,
.wx-bubble-outer:has(.bt-classic-custom) .rz8-dc,
.wx-bubble-outer:has(.bt-rz4) .rz8-dc {
  display: none !important;
}

/* 只有选中特制气泡时才显示 rz4 四角像素挂件与像素小尾巴 */
.wx-bubble-outer:not(:has(.bt-rz4)) .rz4-dc,
.wx-bubble-outer:not(:has(.bt-rz4)) .rz4-tail,
.live-bubble-outer:not(:has(.bt-rz4)) .rz4-dc,
.live-bubble-outer:not(:has(.bt-rz4)) .rz4-tail {
  display: none !important;
}

.wx-msg-bubble-item.bt-classic-up,
.wx-msg-bubble-item.bt-classic-down,
.wx-msg-bubble-item.bt-classic-middle,
.wx-msg-bubble-item.bt-classic-custom {
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-radius 0.2s ease !important;
  position: relative !important;
}

/* 2. 经典气泡 - 尖角向上 */
.wx-msg-group:not(.user-side) .wx-msg-bubble-item.bt-classic-up {
  border-radius: 2px 18px 18px 18px !important;
}
.wx-msg-group.user-side .wx-msg-bubble-item.bt-classic-up {
  border-radius: 18px 2px 18px 18px !important;
}

/* 3. 经典气泡 - 尖角向下 */
.wx-msg-group:not(.user-side) .wx-msg-bubble-item.bt-classic-down {
  border-radius: 18px 18px 18px 2px !important;
}
.wx-msg-group.user-side .wx-msg-bubble-item.bt-classic-down {
  border-radius: 18px 18px 2px 18px !important;
}

/* 4. 经典气泡 - 尖角中间 */
.wx-msg-bubble-item.bt-classic-middle {
  border-radius: 8px !important;
}
.wx-msg-group:not(.user-side) .wx-msg-bubble-item.bt-classic-middle::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid var(--bubble-bg, #ffffff);
}
.wx-msg-group.user-side .wx-msg-bubble-item.bt-classic-middle::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--bubble-bg, #ffffff);
}

/* 输入框支持自定义渐变、透明度、毛玻璃与插图 */
.wx-chat-room-stage .input-capsule-glass {
  background-color: #f8f8fa;
  border: 1px solid #e5e5ea;
  background-size: cover;
  background-position: center;
}

/* ======================================================== */
/* § 06. 导航器风格选择                                     */
/* ======================================================== */
.btf-nav-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btf-nav-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 10px;
  background: #f8f8fa;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btf-nav-style-card.active {
  border-color: #111111;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.btf-nav-style-card:active {
  transform: scale(0.97);
}

.btf-nav-preview-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nav-dot-demo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.nav-dot-demo.mist {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(160, 160, 165, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-dot-demo.ice {
  background: linear-gradient(180deg, rgba(136, 171, 218, 0.25), rgba(106, 138, 168, 0.65), rgba(136, 171, 218, 0.25));
  border: none;
}

.btf-nav-style-name {
  font-size: 12px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.5px;
}

/* ======================================================== */
/* 🌟 特制气泡 (bt-rz4 实心像素甜心版 · 预览与正式区通用)   */
/* ======================================================== */
@keyframes rz4-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}
@keyframes rz4-dot-pulse {
  0%,100% { opacity:.4; }
  50% { opacity:1; }
}
@keyframes rz4-cloud-drift {
  0%,100% { transform:translateX(0) translateY(0); }
  50% { transform:translateX(2px) translateY(-1px); }
}
@keyframes rz4-cloud-drift2 {
  0%,100% { transform:translateX(0) translateY(0); }
  50% { transform:translateX(-2px) translateY(-1px); }
}

.wx-msg-bubble-item.bt-rz4,
.live-bubble-box.bt-rz4 {
  position: relative !important;
  padding: 6px 12px !important; /* 💡 严格还原原版的紧凑上下左右间距 */
  line-height: 1.6 !important;
  color: #5c4a4e !important;
  font-weight: 700 !important;
  background-color: rgba(246, 238, 233, 0.72) !important; /* 💡 清透半透明暖米色，省去昂贵的实时毛玻璃模糊 */
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #ebbec9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: polygon(
    0px 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0px,
    calc(100% - 4px) 0px, calc(100% - 4px) 2px,
    calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%, 4px 100%,
    4px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 4px), 0px calc(100% - 4px)
  ) !important;
}

.wx-msg-bubble-item.bt-rz4::before,
.live-bubble-box.bt-rz4::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important; /* 💡 还原内圈半透明白边 */
  clip-path: polygon(
    0px 3px, 2px 3px, 2px 2px, 3px 2px, 3px 0px,
    calc(100% - 3px) 0px, calc(100% - 3px) 2px,
    calc(100% - 2px) 2px, calc(100% - 2px) 3px, 100% 3px,
    100% calc(100% - 3px), calc(100% - 2px) calc(100% - 3px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 3px) calc(100% - 2px),
    calc(100% - 3px) 100%, 3px 100%,
    3px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 3px), 0px calc(100% - 3px)
  ) !important;
  pointer-events: none !important;
}

.wx-msg-group.user-side .wx-msg-bubble-item.bt-rz4,
.live-bubble-row.user-row .live-bubble-box.bt-rz4 {
  background-color: rgba(235, 190, 201, 0.35) !important; /* 💡 还原用户原版 0.35 清透甜粉色 */
  background-image: none !important;
  box-shadow: none !important;
  border-color: #e0adb8 !important;
  color: #5c4a4e !important;
}

/* 💡 特制气泡专属呼吸间距：拉开与头像的距离，拉开上下气泡的距离，防止四角云朵与爱心拥挤相撞 */
.wx-msg-group:has(.bt-rz4) {
  gap: 14px !important;
}
.wx-msg-bubbles-col:has(.bt-rz4) {
  gap: 14px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.live-bubble-row:has(.bt-rz4) {
  gap: 14px !important;
}

/* 像素小尾巴（支持跟随用户与角色的单独颜色/边框调整） */
.rz4-tail {
  position: absolute !important;
  bottom: 8px !important;
  width: 2px !important;
  height: 2px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 12 !important;
}
.wx-msg-group.user-side .rz4-tail,
.live-bubble-row.user-row .rz4-tail {
  right: -5px !important;
  box-shadow:
    0px 0px 0 var(--rz4-user-border, #e0adb8), 2px 2px 0 var(--rz4-user-border, #e0adb8), 4px 4px 0 var(--rz4-user-border, #e0adb8),
    0px 2px 0 var(--rz4-user-bg, rgba(235, 190, 201, 0.35)), 0px 4px 0 var(--rz4-user-bg, rgba(235, 190, 201, 0.35)),
    2px 4px 0 var(--rz4-user-bg, rgba(235, 190, 201, 0.35)) !important;
}
.wx-msg-group:not(.user-side) .rz4-tail,
.live-bubble-row.char-row .rz4-tail {
  left: -5px !important;
  box-shadow:
    0px 0px 0 var(--rz4-char-border, #ebbec9), -2px 2px 0 var(--rz4-char-border, #ebbec9), -4px 4px 0 var(--rz4-char-border, #ebbec9),
    0px 2px 0 var(--rz4-char-bg, rgba(246, 238, 233, 0.6)), 0px 4px 0 var(--rz4-char-bg, rgba(246, 238, 233, 0.6)),
    -2px 4px 0 var(--rz4-char-bg, rgba(246, 238, 233, 0.6)) !important;
}

/* 💡 关闭「特制气泡动态效果」开关时，一键暂停所有四角像素挂件动画 */
.rz4-static .rz4-dc,
.rz4-static .rz4-dc * {
  animation: none !important;
}

.rz4-dc {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 22 !important;
  image-rendering: pixelated !important;
}

/* 左上：云朵＋贴近双星（默认静止，进入视口 .in-view 时才灵动飘浮） */
.rz4-dc.rz4-tl {
  top: -6px !important; left: -10px !important;
  width: 22px !important; height: 18px !important;
}
.wx-bubble-outer.in-view .rz4-dc.rz4-tl,
.live-bubble-outer .rz4-dc.rz4-tl {
  animation: rz4-cloud-drift 4s ease-in-out infinite !important;
}
.rz4-cloud {
  position: absolute !important;
  top: 4px !important; left: 2px !important;
  width: 2px !important; height: 2px !important;
  background: transparent !important;
  box-shadow:
    4px 0px 0 #f2d5dc, 6px 0px 0 #f9eae9, 8px 0px 0 #f2d5dc,
    2px 2px 0 #e8c0ca, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #f2d5dc,
    0px 4px 0 #e0b0bc, 2px 4px 0 #f9eae9, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #f9eae9, 12px 4px 0 #e8c0ca,
    0px 6px 0 #e0b0bc, 2px 6px 0 #edccd4, 4px 6px 0 #f9eae9, 6px 6px 0 #fff,
    8px 6px 0 #f9eae9, 10px 6px 0 #edccd4, 12px 6px 0 #e0b0bc,
    2px 8px 0 #e0b0bc, 4px 8px 0 #e8c0ca, 6px 8px 0 #edccd4,
    8px 8px 0 #e8c0ca, 10px 8px 0 #e0b0bc !important;
}
.rz4-star-tl {
  position: absolute !important;
  top: 1px !important; left: 1px !important;
  width: 2px !important; height: 2px !important;
  background: #ebbec9 !important;
  box-shadow:
    0px -2px 0 #f2d5dc, 0px 2px 0 #f2d5dc,
    -2px 0px 0 #f2d5dc, 2px 0px 0 #f2d5dc !important;
}
.wx-bubble-outer.in-view .rz4-star-tl,
.live-bubble-outer .rz4-star-tl {
  animation: rz4-float 2s ease-in-out infinite !important;
}
.rz4-star-br {
  position: absolute !important;
  bottom: 3px !important; right: 3px !important;
  width: 2px !important; height: 2px !important;
  background: #ebbec9 !important;
  box-shadow:
    0px -2px 0 #f2d5dc, 0px 2px 0 #f2d5dc,
    -2px 0px 0 #f2d5dc, 2px 0px 0 #f2d5dc !important;
}
.wx-bubble-outer.in-view .rz4-star-br,
.live-bubble-outer .rz4-star-br {
  animation: rz4-float 2s ease-in-out infinite !important;
  animation-delay: 0.6s !important;
}

/* 右上：缩小三点框 */
.rz4-dc.rz4-tr {
  top: -3px !important; right: -6px !important;
  width: 14px !important; height: 10px !important;
}
.wx-bubble-outer.in-view .rz4-dc.rz4-tr,
.live-bubble-outer .rz4-dc.rz4-tr {
  animation: rz4-float 3s ease-in-out infinite !important;
  animation-delay: 0.5s !important;
}
.rz4-dots {
  position: absolute !important;
  width: 2px !important; height: 2px !important;
  background: transparent !important;
  box-shadow:
    2px 0px 0 #d4a0ad, 4px 0px 0 #d4a0ad, 6px 0px 0 #d4a0ad, 8px 0px 0 #d4a0ad, 10px 0px 0 #d4a0ad,
    0px 2px 0 #d4a0ad, 12px 2px 0 #d4a0ad,
    0px 4px 0 #d4a0ad, 12px 4px 0 #d4a0ad,
    0px 6px 0 #d4a0ad, 12px 6px 0 #d4a0ad,
    2px 8px 0 #d4a0ad, 4px 8px 0 #d4a0ad, 6px 8px 0 #d4a0ad, 8px 8px 0 #d4a0ad, 10px 8px 0 #d4a0ad,
    2px 2px 0 #fff, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #fff,
    2px 4px 0 #fff, 4px 4px 0 #fff, 6px 4px 0 #fff, 8px 4px 0 #fff, 10px 4px 0 #fff,
    2px 6px 0 #fff, 4px 6px 0 #fff, 6px 6px 0 #fff, 8px 6px 0 #fff, 10px 6px 0 #fff !important;
}
.rz4-d1, .rz4-d2, .rz4-d3 {
  position: absolute !important;
  width: 2px !important; height: 2px !important;
  background: #c48a96 !important;
}
.wx-bubble-outer.in-view .rz4-d1,
.wx-bubble-outer.in-view .rz4-d2,
.wx-bubble-outer.in-view .rz4-d3,
.live-bubble-outer .rz4-d1,
.live-bubble-outer .rz4-d2,
.live-bubble-outer .rz4-d3 {
  animation: rz4-dot-pulse 1.5s ease-in-out infinite !important;
}
.rz4-d1 { left: 3px !important; top: 4px !important; animation-delay: 0s !important; }
.rz4-d2 { left: 6px !important; top: 4px !important; animation-delay: 0.3s !important; }
.rz4-d3 { left: 9px !important; top: 4px !important; animation-delay: 0.6s !important; }

/* 左下：双爱心 */
.rz4-dc.rz4-bl {
  bottom: -8px !important; left: -8px !important;
  width: 22px !important; height: 18px !important;
}
.wx-bubble-outer.in-view .rz4-dc.rz4-bl,
.live-bubble-outer .rz4-dc.rz4-bl {
  animation: rz4-float 3s ease-in-out infinite !important;
  animation-delay: 0.3s !important;
}
.rz4-hb {
  position: absolute !important;
  top: 0 !important; left: 5px !important;
  width: 2px !important; height: 2px !important;
  background: transparent !important;
  box-shadow:
    2px 0px 0 #d4a0ad, 4px 0px 0 #d4a0ad,
    8px 0px 0 #d4a0ad, 10px 0px 0 #d4a0ad,
    0px 2px 0 #d4a0ad, 2px 2px 0 #e0b0bc, 4px 2px 0 #ecc4cd, 6px 2px 0 #ecc4cd,
    8px 2px 0 #e0b0bc, 10px 2px 0 #d4a0ad, 12px 2px 0 #d4a0ad,
    0px 4px 0 #d4a0ad, 2px 4px 0 #e0b0bc, 4px 4px 0 #ecc4cd, 6px 4px 0 #ecc4cd,
    8px 4px 0 #ecc4cd, 10px 4px 0 #e0b0bc, 12px 4px 0 #d4a0ad,
    2px 6px 0 #d4a0ad, 4px 6px 0 #e0b0bc, 6px 6px 0 #e0b0bc,
    8px 6px 0 #e0b0bc, 10px 6px 0 #d4a0ad,
    4px 8px 0 #d4a0ad, 6px 8px 0 #d4a0ad, 8px 8px 0 #d4a0ad,
    6px 10px 0 #d4a0ad !important;
}
.rz4-hf {
  position: absolute !important;
  top: 4px !important; left: 0 !important;
  width: 2px !important; height: 2px !important;
  background: transparent !important;
  box-shadow:
    2px 0px 0 #d4a0ad, 4px 0px 0 #ecc4cd,
    8px 0px 0 #ecc4cd, 10px 0px 0 #d4a0ad,
    0px 2px 0 #d4a0ad, 2px 2px 0 #f5dce2, 4px 2px 0 #fff, 6px 2px 0 #fff,
    8px 2px 0 #f5dce2, 10px 2px 0 #ecc4cd, 12px 2px 0 #d4a0ad,
    0px 4px 0 #d4a0ad, 2px 4px 0 #f8e4e8, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #f8e4e8, 12px 4px 0 #d4a0ad,
    2px 6px 0 #d4a0ad, 4px 6px 0 #ecc4cd, 6px 6px 0 #f8e4e8,
    8px 6px 0 #ecc4cd, 10px 6px 0 #d4a0ad,
    4px 8px 0 #d4a0ad, 6px 8px 0 #ecc4cd, 8px 8px 0 #d4a0ad,
    6px 10px 0 #d4a0ad !important;
}

/* 右下：小云朵＋星星 */
.rz4-dc.rz4-br {
  bottom: -9px !important; right: -8px !important;
  width: 22px !important; height: 18px !important;
}
.wx-bubble-outer.in-view .rz4-dc.rz4-br,
.live-bubble-outer .rz4-dc.rz4-br {
  animation: rz4-cloud-drift2 4s ease-in-out infinite !important;
  animation-delay: 1s !important;
}
.rz4-cloud2 {
  position: absolute !important;
  top: 4px !important; left: 2px !important;
  width: 2px !important; height: 2px !important;
  background: transparent !important;
  box-shadow:
    4px 0px 0 #e8c0ca, 6px 0px 0 #f2d5dc, 8px 0px 0 #e8c0ca,
    2px 2px 0 #ddb0bc, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #e8c0ca,
    0px 4px 0 #d4a0ad, 2px 4px 0 #f2d5dc, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #f2d5dc, 12px 4px 0 #ddb0bc,
    0px 6px 0 #d4a0ad, 2px 6px 0 #e8c0ca, 4px 6px 0 #f2d5dc, 6px 6px 0 #fff,
    8px 6px 0 #f2d5dc, 10px 6px 0 #e8c0ca, 12px 6px 0 #d4a0ad,
    2px 8px 0 #d4a0ad, 4px 8px 0 #ddb0bc, 6px 8px 0 #e8c0ca,
    8px 8px 0 #ddb0bc, 10px 8px 0 #d4a0ad !important;
}
.rz4-star-br2 {
  position: absolute !important;
  top: 1px !important; right: 3px !important;
  width: 2px !important; height: 2px !important;
  background: #ebbec9 !important;
  box-shadow:
    0px -2px 0 #f2d5dc, 0px 2px 0 #f2d5dc,
    -2px 0px 0 #f2d5dc, 2px 0px 0 #f2d5dc !important;
}
.wx-bubble-outer.in-view .rz4-star-br2,
.live-bubble-outer .rz4-star-br2 {
  animation: rz4-float 2s ease-in-out infinite !important;
  animation-delay: 0.8s !important;
}
.rz4-star-bl2 {
  position: absolute !important;
  bottom: 3px !important; left: 1px !important;
  width: 2px !important; height: 2px !important;
  background: #ebbec9 !important;
  box-shadow:
    0px -2px 0 #f2d5dc, 0px 2px 0 #f2d5dc,
    -2px 0px 0 #f2d5dc, 2px 0px 0 #f2d5dc !important;
}
.wx-bubble-outer.in-view .rz4-star-bl2,
.live-bubble-outer .rz4-star-bl2 {
  animation: rz4-float 2s ease-in-out infinite !important;
  animation-delay: 1.4s !important;
}

.wx-bubble-outer.in-view .rz4-star-bl2,
.live-bubble-outer .rz4-star-bl2 {
  animation: rz4-float 2s ease-in-out infinite !important;
  animation-delay: 1.4s !important;
}

/* ======================================================== */
/* ❄️ 特制气泡 · 晴空冰蓝主题 (.rz4-blue)                    */
/* ======================================================== */
.rz4-blue .wx-msg-bubble-item.bt-rz4,
.rz4-blue .live-bubble-box.bt-rz4 {
  color: #435b75 !important;
  background-color: rgba(245, 246, 250, 0.75) !important;
  border-color: #bbd3ef !important;
}
.wx-msg-group.user-side .rz4-blue .wx-msg-bubble-item.bt-rz4,
.live-bubble-row.user-row .rz4-blue .live-bubble-box.bt-rz4 {
  color: #435b75 !important;
  background-color: rgba(187, 211, 239, 0.38) !important;
  border-color: #a4c2e6 !important;
}
.wx-msg-group.user-side .rz4-blue .rz4-tail,
.live-bubble-row.user-row .rz4-blue .rz4-tail {
  box-shadow:
    0px 0px 0 var(--rz4-user-border, #a4c2e6), 2px 2px 0 var(--rz4-user-border, #a4c2e6), 4px 4px 0 var(--rz4-user-border, #a4c2e6),
    0px 2px 0 var(--rz4-user-bg, rgba(187, 211, 239, 0.38)), 0px 4px 0 var(--rz4-user-bg, rgba(187, 211, 239, 0.38)),
    2px 4px 0 var(--rz4-user-bg, rgba(187, 211, 239, 0.38)) !important;
}
.wx-msg-group:not(.user-side) .rz4-blue .rz4-tail,
.live-bubble-row.char-row .rz4-blue .rz4-tail {
  box-shadow:
    0px 0px 0 var(--rz4-char-border, #bbd3ef), -2px 2px 0 var(--rz4-char-border, #bbd3ef), -4px 4px 0 var(--rz4-char-border, #bbd3ef),
    0px 2px 0 var(--rz4-char-bg, rgba(245, 246, 250, 0.75)), 0px 4px 0 var(--rz4-char-bg, rgba(245, 246, 250, 0.75)),
    -2px 4px 0 var(--rz4-char-bg, rgba(245, 246, 250, 0.75)) !important;
}
.rz4-blue .rz4-cloud {
  box-shadow:
    4px 0px 0 #d7e6f8, 6px 0px 0 #f5f6fa, 8px 0px 0 #d7e6f8,
    2px 2px 0 #bbd3ef, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #d7e6f8,
    0px 4px 0 #a4c2e6, 2px 4px 0 #f5f6fa, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #f5f6fa, 12px 4px 0 #bbd3ef,
    0px 6px 0 #a4c2e6, 2px 6px 0 #cde0f5, 4px 6px 0 #f5f6fa, 6px 6px 0 #fff,
    8px 6px 0 #f5f6fa, 10px 6px 0 #cde0f5, 12px 6px 0 #a4c2e6,
    2px 8px 0 #a4c2e6, 4px 8px 0 #bbd3ef, 6px 8px 0 #cde0f5,
    8px 8px 0 #bbd3ef, 10px 8px 0 #a4c2e6 !important;
}
.rz4-blue .rz4-star-tl,
.rz4-blue .rz4-star-br,
.rz4-blue .rz4-star-br2,
.rz4-blue .rz4-star-bl2 {
  background: #bbd3ef !important;
  box-shadow:
    0px -2px 0 #d7e6f8, 0px 2px 0 #d7e6f8,
    -2px 0px 0 #d7e6f8, 2px 0px 0 #d7e6f8 !important;
}
.rz4-blue .rz4-dots {
  box-shadow:
    2px 0px 0 #8baed4, 4px 0px 0 #8baed4, 6px 0px 0 #8baed4, 8px 0px 0 #8baed4, 10px 0px 0 #8baed4,
    0px 2px 0 #8baed4, 12px 2px 0 #8baed4,
    0px 4px 0 #8baed4, 12px 4px 0 #8baed4,
    0px 6px 0 #8baed4, 12px 6px 0 #8baed4,
    2px 8px 0 #8baed4, 4px 8px 0 #8baed4, 6px 8px 0 #8baed4, 8px 8px 0 #8baed4, 10px 8px 0 #8baed4,
    2px 2px 0 #fff, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #fff,
    2px 4px 0 #fff, 4px 4px 0 #fff, 6px 4px 0 #fff, 8px 4px 0 #fff, 10px 4px 0 #fff,
    2px 6px 0 #fff, 4px 6px 0 #fff, 6px 6px 0 #fff, 8px 6px 0 #fff, 10px 6px 0 #fff !important;
}
.rz4-blue .rz4-d1,
.rz4-blue .rz4-d2,
.rz4-blue .rz4-d3 {
  background: #769cc6 !important;
}
.rz4-blue .rz4-hb {
  box-shadow:
    2px 0px 0 #8baed4, 4px 0px 0 #8baed4,
    8px 0px 0 #8baed4, 10px 0px 0 #8baed4,
    0px 2px 0 #8baed4, 2px 2px 0 #a4c2e6, 4px 2px 0 #cde0f5, 6px 2px 0 #cde0f5,
    8px 2px 0 #a4c2e6, 10px 2px 0 #8baed4, 12px 2px 0 #8baed4,
    0px 4px 0 #8baed4, 2px 4px 0 #a4c2e6, 4px 4px 0 #cde0f5, 6px 4px 0 #cde0f5,
    8px 4px 0 #cde0f5, 10px 4px 0 #a4c2e6, 12px 4px 0 #8baed4,
    2px 6px 0 #8baed4, 4px 6px 0 #a4c2e6, 6px 6px 0 #a4c2e6,
    8px 6px 0 #a4c2e6, 10px 6px 0 #8baed4,
    4px 8px 0 #8baed4, 6px 8px 0 #8baed4, 8px 8px 0 #8baed4,
    6px 10px 0 #8baed4 !important;
}
.rz4-blue .rz4-hf {
  box-shadow:
    2px 0px 0 #8baed4, 4px 0px 0 #cde0f5,
    8px 0px 0 #cde0f5, 10px 0px 0 #8baed4,
    0px 2px 0 #8baed4, 2px 2px 0 #dbe9f9, 4px 2px 0 #fff, 6px 2px 0 #fff,
    8px 2px 0 #dbe9f9, 10px 2px 0 #cde0f5, 12px 2px 0 #8baed4,
    0px 4px 0 #8baed4, 2px 4px 0 #ebf2fb, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #ebf2fb, 12px 4px 0 #8baed4,
    2px 6px 0 #8baed4, 4px 6px 0 #cde0f5, 6px 6px 0 #ebf2fb,
    8px 6px 0 #cde0f5, 10px 6px 0 #8baed4,
    4px 8px 0 #8baed4, 6px 8px 0 #cde0f5, 8px 8px 0 #8baed4,
    6px 10px 0 #8baed4 !important;
}
.rz4-blue .rz4-cloud2 {
  box-shadow:
    4px 0px 0 #bbd3ef, 6px 0px 0 #d7e6f8, 8px 0px 0 #bbd3ef,
    2px 2px 0 #a4c2e6, 4px 2px 0 #fff, 6px 2px 0 #fff, 8px 2px 0 #fff, 10px 2px 0 #bbd3ef,
    0px 4px 0 #8baed4, 2px 4px 0 #d7e6f8, 4px 4px 0 #fff, 6px 4px 0 #fff,
    8px 4px 0 #fff, 10px 4px 0 #d7e6f8, 12px 4px 0 #a4c2e6,
    0px 6px 0 #8baed4, 2px 6px 0 #bbd3ef, 4px 6px 0 #d7e6f8, 6px 6px 0 #fff,
    8px 6px 0 #d7e6f8, 10px 6px 0 #bbd3ef, 12px 6px 0 #8baed4,
    2px 8px 0 #8baed4, 4px 8px 0 #a4c2e6, 6px 8px 0 #bbd3ef,
    8px 8px 0 #a4c2e6, 10px 8px 0 #8baed4 !important;
}

/* ======================================================== */
/* 🌙 页面显示：昼夜模式、一键改色、名称/签名与暗夜心声卡片  */
/* ======================================================== */
.btf-inline-color-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btf-color-picker-box.mini {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.btf-mini-dark-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  border: none;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.btf-mini-dark-btn:active {
  opacity: 0.7;
}

/* 顶栏名称与签名独立颜色绑定 */
.wx-chat-room-stage .char-glitch-name-dark {
  color: var(--cr-name-color, var(--cr-ui-color, #111111)) !important;
}
.wx-chat-room-stage .char-signature-sub,
.wx-chat-room-stage .typing-status-bar {
  color: var(--cr-sig-color, #777777) !important;
}
.wx-chat-room-stage .typing-dots span {
  background: var(--cr-sig-color, #777777) !important;
}

/* 顶栏返回键、右侧美化与设置双图标、底部表情包/加号/纸飞机/话筒、气泡旁小爱心统一跟随一键改色/昼夜模式 */
.wx-chat-room-stage .wx-cr-back-btn,
.wx-chat-room-stage .cr-header-icon-btn,
.wx-chat-room-stage .pure-icon-btn,
.wx-chat-room-stage .pure-plus-trigger,
.wx-chat-room-stage .input-voice-btn:not(.is-recording-now) {
  color: var(--cr-ui-color, #111111) !important;
}
.wx-chat-room-stage #wxCrAiImgBtn svg path,
.wx-chat-room-stage #wxCrMoreBtn svg path,
.wx-chat-room-stage .pure-emoji-outer svg ellipse,
.wx-chat-room-stage .voice-heart-trigger svg {
  fill: var(--cr-ui-color, #111111) !important;
}
.wx-chat-room-stage #wxCrMoreBtn svg circle,
.wx-chat-room-stage .pure-emoji-outer svg circle,
.wx-chat-room-stage .pure-emoji-outer svg path,
.wx-chat-room-stage .pure-emoji-outer svg line,
.wx-chat-room-stage .pure-send-balloon-btn svg path,
.wx-chat-room-stage .pure-send-balloon-btn.is-stop-mode svg circle {
  stroke: var(--cr-ui-color, #111111) !important;
}
.wx-chat-room-stage .pure-send-balloon-btn.is-stop-mode svg rect {
  fill: var(--cr-ui-color, #111111) !important;
}
.wx-chat-room-stage.btf-night-mode .pure-send-balloon-btn svg path:first-child {
  fill: rgba(255, 255, 255, 0.15) !important;
}

/* 输入框默认提示词颜色 100% 纯色直出（破除苹果 Safari 默认半透明压暗） */
.wx-chat-room-stage .input-field-inner::placeholder,
.wx-chat-room-stage .input-field-inner::-webkit-input-placeholder {
  color: var(--cr-input-ph-color, #8e8e93) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--cr-input-ph-color, #8e8e93) !important;
}

/* 底部输入框 1:1 实时预览舞台 */
.btf-input-live-stage {
  width: 100%;
  height: 62px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #f2f3f7;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.btf-live-footer-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btf-live-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btf-live-icon svg {
  width: 22px;
  height: 22px;
}
.btf-live-capsule {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #e5e5ea;
  background-color: #f8f8fa;
  background-size: cover;
  background-position: center;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  box-sizing: border-box;
}
.btf-live-ph-text {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.btf-live-mic {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btf-live-mic svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 🌙 黑夜模式：心声手账卡片切换为高定暗夜黑底白字，楼层时间切换为浅白 */
.wx-chat-room-stage.btf-night-mode .bubble-tail-timestamp,
.wx-chat-room-stage.btf-night-mode .bubble-tail-floor-num,
.wx-chat-room-stage.btf-night-mode .bubble-tail-real-time {
  color: rgba(255, 255, 255, 0.65) !important;
}
.wx-chat-room-stage.btf-night-mode .voice-dossier-card {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65) !important;
}
.wx-chat-room-stage.btf-night-mode .card-tape-deco {
  background: rgba(40, 40, 46, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.wx-chat-room-stage.btf-night-mode .card-header-line,
.wx-chat-room-stage.btf-night-mode .col-action {
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.wx-chat-room-stage.btf-night-mode .card-page-arrow,
.wx-chat-room-stage.btf-night-mode .card-serial-code,
.wx-chat-room-stage.btf-night-mode .voice-quote-text,
.wx-chat-room-stage.btf-night-mode .action-detail-text,
.wx-chat-room-stage.btf-night-mode .card-motto-sub {
  color: #ffffff !important;
}
.wx-chat-room-stage.btf-night-mode .col-title,
.wx-chat-room-stage.btf-night-mode .card-timestamp-sub,
.wx-chat-room-stage.btf-night-mode .card-close-btn {
  color: rgba(255, 255, 255, 0.68) !important;
}
.wx-chat-room-stage.btf-night-mode .col-title::before {
  background: #ffffff !important;
}
.wx-chat-room-stage.btf-night-mode .voice-heart-pulse-bar .line {
  background: rgba(255, 255, 255, 0.18) !important;
}
.wx-chat-room-stage.btf-night-mode .voice-heart-pulse-bar svg {
  fill: #ffffff !important;
}