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

.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: 1fr 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;
}

/* 经典气泡彻底抹去星云与阴影 */
.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 {
  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: #f8f8fa !important;
  border: 1px solid #e5e5ea !important;
}