/* CSS 变量默认值 */
:root {
  --bubble-opacity-l: 0.85;
  --bubble-opacity-r: 0.85;
  --narrative-blur-intensity: 12px;
}

/**
 * 简约模式（Narrative Mode）专用样式
 * 固定状态卡片 + 可滚动纯文本对话
 */

/* ==================== 固定状态卡片 ==================== */
.narrative-fixed-card {
  position: sticky;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 90;
  /* 背景=对方气泡背景色+对方透明度 */
  background: rgba(var(--left-bubble-bg, 255, 255, 255), var(--bubble-opacity-l, 0.85));
  backdrop-filter: blur(var(--narrative-blur-intensity, 12px));
  -webkit-backdrop-filter: blur(var(--narrative-blur-intensity, 12px));
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.nfc-container {
  padding: 12px;
  max-width: 100%;
}

.nfc-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.nfc-avatar {
  width: 95px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(240, 184, 200, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nfc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nfc-info {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

.nfc-status-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 6px;
}

.nfc-status-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nfc-item-top {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfc-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

.nfc-label {
  color: var(--left-bubble-text-color, #999);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.7;
}

.nfc-value {
  color: var(--left-bubble-text-color, #333);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 情欲指数进度条 */
.nfc-desire-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 100, 100, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(255, 100, 100, 0.15);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.nfc-desire-row:active {
  background: rgba(255, 100, 100, 0.15);
}

.nfc-desire-icon {
  font-size: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #ff4757;
}

.nfc-desire-icon svg {
  width: 16px;
  height: 16px;
  stroke: #ff4757;
}

.nfc-desire-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.nfc-progress-track {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.nfc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b 0%, #ff4757 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.nfc-desire-pct {
  font-size: 13px;
  font-weight: 700;
  color: #ff4757;
  min-width: 36px;
  text-align: right;
}

.nfc-desire-arrow {
  font-size: 10px;
  color: #999;
  margin-left: 2px;
  transition: transform 0.2s;
}

/* 生理状态展开区域 */
.nfc-physiological {
  margin-top: 6px;
  padding: 6px 12px;
}

.nfc-phys-text {
  font-size: 12px;
  color: var(--left-bubble-text-color, #888);
  line-height: 1.6;
  font-style: italic;
}


/* ==================== 消息样式（无气泡） ==================== */
.narrative-msg {
  padding: 12px 16px;
  margin-bottom: 4px;
  line-height: 1.7;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
}

/* 左侧消息（AI）：使用对方气泡文字颜色 */
.narrative-msg-left {
  text-align: left;
  color: var(--left-bubble-text-color, #333);
}

/* 右侧消息（用户）：使用用户气泡文字颜色，靠右对齐 */
.narrative-msg-right {
  text-align: right;
  color: var(--right-bubble-text-color, #333);
  font-style: normal;
  background: transparent;
}

/* 发送者名称 */
.narrative-sender {
  font-size: 12px;
  font-weight: 600;
  color: #f0b8c8;
  margin-bottom: 4px;
}

/* 引用样式 */
.narrative-quote {
  padding: 6px 10px;
  margin-bottom: 6px;
  border-left: 3px solid #f0b8c8;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  font-style: italic;
}

/* 图片消息 */
.narrative-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin: 4px 0;
}

/* 红包消息 */
.narrative-red-packet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* 转账消息 */
.narrative-transfer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* ==================== 线下满屏排版 ==================== */
body.narrative-mode-active.offline-mode .narrative-msg {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* ==================== 隐藏原有气泡和杂项 ==================== */
body.narrative-mode-active .msg-item.left.blue-offline-mode,
body.narrative-mode-active .msg-blue-card {
  display: none;
}

body.narrative-mode-active #chatContent .msg-item .msg-avatar,
body.narrative-mode-active #chatContent .msg-item .check-icon,
body.narrative-mode-active #statusCard {
  display: none !important;
}

/* ==================== 钻戒头像框（jymstxk 镂空相框，仅简约模式状态卡片） ==================== */
/* 双重作用域：必须 narrative 模式 active + 命中 .nfc-avatar（只存在于状态卡）。
   不会影响列表的 .contact-avatar.ring-avatar-frame 和消息的 .msg-avatar.ring-avatar-frame。 */
body.narrative-mode-active .nfc-avatar.ring-avatar-frame,
.narrative-fixed-card .nfc-avatar.ring-avatar-frame {
  position: relative !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 12px;
  /* 暴露 4 个偏移量；默认稍微外扩 4px 让黑边露出来，外扩还是内收都能直接改这四个数 */
  --jymstxk-top: -4px;
  --jymstxk-right: -4px;
  --jymstxk-bottom: -4px;
  --jymstxk-left: -4px;
}

body.narrative-mode-active .nfc-avatar.ring-avatar-frame::before,
.narrative-fixed-card .nfc-avatar.ring-avatar-frame::before {
  content: '' !important;
  position: absolute !important;
  top: var(--jymstxk-top) !important;
  right: var(--jymstxk-right) !important;
  bottom: var(--jymstxk-bottom) !important;
  left: var(--jymstxk-left) !important;
  /* 中央透明镂空相框，强制铺满 */
  background: url('../image/jymstxk.png?v=2') no-repeat center / 100% 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  /* 旧规则没设宽高，这里显式声明确保盒子撑开 */
  display: block !important;
}

/* 关键修复：状态卡片头像在简约模式下，隐藏默认 IMG_2708 钻戒框（::after），只保留 jymstxk（::before）。
   仅作用于 .nfc-avatar（状态卡片专用类），不影响：
   - 联系人列表 .contact-avatar.ring-avatar-frame::after
   - 聊天消息 .msg-avatar.ring-avatar-frame::after */
body.narrative-mode-active .nfc-avatar.ring-avatar-frame::after,
.narrative-fixed-card .nfc-avatar.ring-avatar-frame::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* ========== 线上简约模式：气泡装饰图重新定位 ========== */

/* 线上简约模式下，每条消息需要 relative 定位来承载装饰 */
body.narrative-mode-active:not(.offline-mode) .narrative-msg {
  position: relative;
  overflow: visible;
  display: inline-block;  /* 容器宽度自适应内容 */
  max-width: 80%;  /* 限制最大宽度，避免太宽 */
}

/* 左侧消息的容器，默认左对齐，添加左边距（给装饰图+文字整体留空间） */
body.narrative-mode-active:not(.offline-mode) .narrative-msg-left {
  text-align: left;
  margin-left: 20px;  /* 向右移动20px，为装饰图和文字整体留出距离 */
}

/* 右侧消息的容器，使用 margin-left: auto 实现靠右 */
body.narrative-mode-active:not(.offline-mode) .narrative-msg-right {
  display: block;  /* 改为block以使用margin */
  margin-left: auto;  /* 自动推到右边 */
  margin-right: 30px;  /* 留出右侧空间给装饰图 */
  text-align: right;
  width: fit-content;  /* 宽度适应内容 */
  max-width: 75%;
}

/* 左侧消息的装饰 → 距离内容左侧5px */
body.narrative-mode-active:not(.offline-mode) .narrative-msg-left .bubble-decor-img {
  position: absolute !important;
  right: 100% !important;  /* 从内容左边开始 */
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin-right: -10px !important;  /* 距离内容5px */
  transform: translateY(-50%) !important;
}

/* 右侧消息的装饰 → 紧贴内容右侧 */
body.narrative-mode-active:not(.offline-mode) .narrative-msg-right .bubble-decor-img {
  position: absolute !important;
  left: 100% !important;  /* 从内容右边开始 */
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin-left: 2px !important;  /* 紧贴文字右侧，只留2px间距 */
  transform: translateY(-50%) !important;
}

/* 线下模式：隐藏所有装饰图（覆盖所有可能的元素结构） */
body.narrative-mode-active.offline-mode .bubble-decor-img,
body.offline-mode .bubble-decor-img,
body.narrative-mode-active.offline-mode .msg-item .bubble-decor-img,
body.narrative-mode-active.offline-mode .narrative-msg .bubble-decor-img,
body.narrative-mode-active.offline-mode .msg-bubble .bubble-decor-img,
body.narrative-mode-active.offline-mode .msg-item .msg-bubble .bubble-decor-img,
body.offline-mode .msg-item .bubble-decor-img,
body.offline-mode .narrative-msg .bubble-decor-img,
body.offline-mode .msg-bubble .bubble-decor-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* 线下模式：每条消息后添加可爱的分界线（覆盖 msg-item 和 narrative-msg 结构） */
body.narrative-mode-active.offline-mode .msg-item::after,
body.narrative-mode-active.offline-mode .narrative-msg::after {
  content: var(--narrative-separator, "꒰ঌ( ˶·ᵕ·˶)ঌ꒱ ꒰ঌ( ˶·ᵕ·˶)ঌ꒱ ꒰ঌ( ˶·ᵕ·˶)ঌ꒱") !important;
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  margin: 12px 0 !important;
  color: var(--left-bubble-text-color, #333) !important;
  opacity: 0.4 !important;
  letter-spacing: 2px !important;
  font-weight: var(--narrative-separator-weight, normal) !important;
  user-select: none !important;
  clear: both;
}

/* 深色主题下的分界线颜色 */
body.narrative-mode-active.offline-mode.theme-dark .msg-item::after,
body.narrative-mode-active.offline-mode[data-theme="dark"] .msg-item::after,
body.narrative-mode-active.offline-mode.theme-dark .narrative-msg::after,
body.narrative-mode-active.offline-mode[data-theme="dark"] .narrative-msg::after {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ========== 移动端响应式适配 ========== */

/* 屏幕宽度 ≤ 768px：手机和小平板 */
@media screen and (max-width: 768px) {
  /* 移动端消息容器稍微放宽 */
  body.narrative-mode-active:not(.offline-mode) .narrative-msg {
    max-width: 85%;
  }
  
  /* 移动端左侧消息减少左边距，但仍为装饰图留空间 */
  body.narrative-mode-active:not(.offline-mode) .narrative-msg-left {
    margin-left: 10px;
  }
  
  /* 移动端右侧消息 */
  body.narrative-mode-active:not(.offline-mode) .narrative-msg-right {
    max-width: 85%;
  }
  
  /* 装饰图在移动端限制大小，避免过大 */
  body.narrative-mode-active:not(.offline-mode) .bubble-decor-img {
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

/* 屏幕宽度 ≤ 480px：小手机 */
@media screen and (max-width: 480px) {
  /* 小屏幕进一步放宽 */
  body.narrative-mode-active:not(.offline-mode) .narrative-msg {
    max-width: 90%;
  }
  
  /* 小屏幕左边距进一步减少，但仍保持整体留白 */
  body.narrative-mode-active:not(.offline-mode) .narrative-msg-left {
    margin-left: 5px;
  }
  
  body.narrative-mode-active:not(.offline-mode) .narrative-msg-right {
    max-width: 90%;
  }
  
  /* 小屏幕装饰图更小 */
  body.narrative-mode-active:not(.offline-mode) .bubble-decor-img {
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

/* ========== 简约模式通用：整个聊天区变成磨砂大卡片，跟随气泡设置 ========== */

/* 所有简约模式下，聊天区都有磨砂毛玻璃背景（气泡拉宽效果） */
body.narrative-mode-active #chatContent {
  padding-top: 12px;
  background: rgba(var(--left-bubble-bg, 255, 255, 255), var(--bubble-opacity-l, 0.85)) !important;
  backdrop-filter: blur(var(--narrative-blur-intensity, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--narrative-blur-intensity, 12px)) !important;
  border-radius: 0;
}

/* ========== 线下简约模式：无气泡但保留所有功能 ========== */

/* ---------- 左侧（对方）消息 ---------- */
body.narrative-mode-active.offline-mode .msg-item.left .msg-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0;
  color: var(--left-bubble-text-color, #333);
  font-size: 15px;
  line-height: 1.7;
  border-radius: 0;
  max-width: 100%;
  word-break: break-word;
}

/* ---------- 右侧（用户）消息 ---------- */
body.narrative-mode-active.offline-mode .msg-item.right .msg-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0;
  color: var(--right-bubble-text-color, #333);  /* 兜底改为黑色 */
  font-size: 15px;
  line-height: 1.7;
  border-radius: 0;
  max-width: 100%;
  word-break: break-word;
}

/* 隐藏头像 */
body.narrative-mode-active.offline-mode .msg-item .msg-avatar {
  display: none !important;
}

/* ========== 修复简约模式状态卡片合成层残影 ========== */
.msg-blue-card,
.blue-card-status,
.blue-card-status * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 如果还闪，直接禁用卡片内所有动效（安全） */
.msg-blue-card * {
  transition: none !important;
  animation: none !important;
}