/* 心动AI - 主聊天页内容 | v202607062030 */

/* ===== 购买心动币呼吸闪烁特效 ===== */
@keyframes payPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,104,238,0.4); }
  50%      { box-shadow: 0 0 14px 4px rgba(123,104,238,0.55); }
}
.pay-pulse-btn {
  animation: payPulse 2s ease-in-out infinite;
}

/* ===== 欢迎语行动按钮（AI消息行内，白底边框风格）===== */
.welcome-actions-wrapper {
  display: flex;
  gap: 7px;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}
.welcome-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 22px;
  background: #F7F3FF;
  color: #6b5e8e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #ECE6F8;
  box-shadow: 0 4px 12px rgba(123,104,238,0.10);
  transition: all 0.2s;
  white-space: nowrap;
}
.welcome-action-btn:hover { border-color: #b8aed8; background: #faf8ff; }
.welcome-action-btn:active {
  transform: scale(0.96);
}
.wa-icon { font-size: 15px; flex-shrink: 0; }
.wa-text { font-size: 13px; font-weight: 600; }

/* 欢迎语功能描述 */
.welcome-desc {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}
.wc-desc-item {
  display: block;
}

/* ===== 底部快捷话题（v1.0 暂时隐藏，后期上线）===== */
.quick-tags {
  display: none !important;
}

/* ===== 竖版嘉宾卡片区 ===== */
/* 嘉宾卡片行：覆盖 msg-bubble 的 max-width/padding，让卡片贴满屏幕宽度 */
.msg-row.guest-cards-row .msg-bubble {
  max-width: 100%;
  width: 100%;
  padding: 4px 4px 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  box-sizing: border-box;
}
.guest-cards-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
}

.guest-card-inline {
  width: 100%;
  box-sizing: border-box;
  background: var(--lavender);
  border-radius: 22px;
  padding: 18px;
  border: 2.5px solid #333;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(123,104,238,0.15);
}
.guest-card-inline:active {
  transform: scale(0.98);
}
.guest-card-inline::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-soft), var(--purple));
}

.guest-card-header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.guest-card-avatar-wrap {
  flex-shrink: 0;
  position: relative;
}
.guest-avatar-blur {
  width: 108px; height: 108px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 2.5px solid #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.guest-avatar-blur img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.guest-avatar-blur .blur-overlay {
  display: none;
}

.guest-avatar-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 2;
  line-height: 1.4;
}
.guest-avatar-badge.real {
  background: #EAF3DE;
  color: #3B6D11;
  border: 1px solid #97C459;
}
.guest-avatar-badge.ai {
  background: #EEEDFE;
  color: #534AB7;
  border: 1px solid #AFA9EC;
}

.guest-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guest-name-sm { font-size: 21px; font-weight: 700; color: #333; display: flex; align-items: center; gap: 7px; }
.guest-name-sm .age-tag { font-size: 16px; color: #888; font-weight: 500; }
.guest-card-subtitle {
  font-size: 17px;
  color: #666;
  line-height: 1.4;
}

.guest-card-match {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.guest-card-match-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #EEEDFE;
  overflow: hidden;
}
.guest-card-match-fill {
  height: 100%;
  border-radius: 3px;
  background: #7F77DD;
}
.guest-card-match-text {
  font-size: 16px;
  font-weight: 700;
  color: #534AB7;
  white-space: nowrap;
}

.guest-card-intro {
  font-size: 14.5px;
  color: #777;
  line-height: 1.55;
  padding: 10px 0;
  border-top: 1px solid #f0eef8;
}

.guest-card-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.guest-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1.5px solid #c8c8c8;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
  color: #666;
}
.guest-btn:active {
  background: #f0f0f0;
}
.guest-btn.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.guest-btn.primary:active {
  background: #000;
}
.guest-btn.report {
  flex: 0 0 auto;
  padding: 9px 10px;
  border: 1px solid #D3D1C7;
  color: #B4B2A9;
  font-size: 12px;
  background: transparent;
}
.guest-btn.report:active {
  background: #f5f5f5;
}

.guest-card-inline.ai-card {
  border-color: var(--purple);
  background: linear-gradient(135deg, #FBF9FF 0%, #F1ECFD 100%);
  box-shadow: 0 4px 16px rgba(123,104,238,0.18);
}
.guest-card-inline.ai-card::before {
  background: linear-gradient(90deg, var(--purple), #A084FF);
}
.guest-card-inline.ai-card .guest-avatar-blur {
  border-color: #C0A0F4;
  box-shadow: 0 1px 6px rgba(123,104,238,0.15);
}
.guest-card-inline.ai-card .guest-card-match-fill {
  background: #9B8AF0;
}
.guest-card-inline.ai-card .guest-card-match-text {
  color: #7B68EE;
}
/* 紫色呼吸光环（AI 区别于真人） */
/* 紫色呼吸光环（AI 区别于真人）——增强版 */
.ai-card-halo {
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border-radius: 22px;
  border: 2.5px solid rgba(123,104,238,0.6);
  pointer-events: none;
  animation: aiHaloBreath 2.6s ease-in-out infinite;
}
@keyframes aiHaloBreath {
  0%,100% { box-shadow: 0 0 0 0 rgba(123,104,238,0.45); opacity: 0.88; }
  50% { box-shadow: 0 0 18px 5px rgba(160,132,255,0.6); opacity: 1; }
}
/* 图4 AI卡：放大头像 + 在线呼吸点（让卡片更聚焦、有"活人感"） */
.guest-card-inline.ai-card .ai-card-avatar {
  width: 108px; height: 108px; font-size: 50px; border-radius: 22px;
  box-shadow: 0 4px 16px rgba(123,104,238,0.3);
}
.guest-card-inline.ai-card .ai-card-halo {
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border-width: 3px;
}
.ai-card-online-dot {
  position: absolute; top: -3px; right: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #4BE08A; border: 2.5px solid #fff;
  box-shadow: 0 0 8px rgba(75,224,138,0.85);
  animation: aiOnlinePulse 1.7s ease-in-out infinite;
  z-index: 4;
}
@keyframes aiOnlinePulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 6px rgba(75,224,138,0.7); }
  50%     { transform: scale(1.28); box-shadow: 0 0 15px rgba(75,224,138,1); }
}
/* 情感状态指示器（右下角） */
.ai-emotion-status {
  position: absolute;
  right: -2px; bottom: -12px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(123,104,238,0.2);
}
.ai-emotion-status.online { color: #C2185B; border: 1px solid #F3B6CE; }
.ai-emotion-status.new { color: #6A4CDB; border: 1px solid #C3B6F5; }
.ai-emotion-status.rest { color: #7A6FA8; border: 1px solid #D9D2EF; }
/* 人设标签 chips */
.ai-persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
}
.ai-chip {
  font-size: 14px;
  font-weight: 600;
  color: #6A4CDB;
  background: #EFEBFD;
  border: 1px solid #D9CFF7;
  padding: 3px 11px;
  border-radius: 10px;
  white-space: nowrap;
}
/* 开场白 Hook */
.ai-card-hook {
  font-size: 15.5px;
  color: #8A7BB8;
  line-height: 1.55;
  padding: 10px 0 0;
  font-style: italic;
}
/* 唤醒按钮（AI 主按钮改为紫色渐变） */
.guest-card-inline.ai-card .guest-btn.primary.ai-wake {
  background: linear-gradient(135deg, #7B68EE, #A084FF);
  color: #fff;
  border-color: transparent;
  font-size: 17px;
  padding: 12px 16px;
}
.guest-card-inline.ai-card .guest-btn.primary.ai-wake:active {
  background: linear-gradient(135deg, #6A57D8, #8F73E8);
}

.guest-cards-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 0;
}
.guest-cards-pager span {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid #AFA9EC;
  background: transparent;
}
.guest-cards-pager span.active {
  background: #7F77DD;
  border-color: #7F77DD;
  width: 16px;
  border-radius: 4px;
}

.guest-card-top { display: none; }
.guest-card-btns { display: none; }


/* AI思考动画 */
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7B68EE;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* 大行动按钮缩小版 */
.action-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.action-choice-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 14px;
  border: 1.5px solid #333; background: #fff;
  font-size: 14px; color: #333; cursor: pointer;
  transition: all 0.2s; text-align: left; line-height: 1.4;
}
.action-choice-btn:hover { border-color: var(--ink-900); background: #f5f5f5; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.action-choice-btn:active { transform: scale(0.98); }
.action-choice-btn .ac-icon { font-size: 16px; flex-shrink: 0; }
.action-choice-btn .ac-text { flex: 1; }
.action-choice-btn .ac-title { font-weight: 600; font-size: 14px; margin-bottom: 1px; }
.action-choice-btn .ac-sub { font-size: 11px; color: #aaa; }
.action-choice-btn.clone-btn { border-color: var(--purple); background: linear-gradient(135deg, var(--lavender) 0%, #f3f0ff 100%); }
.action-choice-btn.clone-btn .ac-title { color: var(--purple); }
.action-choice-btn.refine-btn { border-color: #e0d8f0; }
.action-choice-btn.refine-btn .ac-title { color: #555; }

/* 横向圆角胶囊按钮（匹配后3选项） */
.action-pills { display: flex; gap: 7px; margin-top: 8px; }
.action-pill {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px; border-radius: 20px;
  border: 1.5px solid #d0c8e8; background: #fff;
  font-size: 13px; color: #555; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.action-pill:hover { border-color: #b8aed8; background: #faf8ff; }
.action-pill:active { transform: scale(0.95); }
.action-pill .ap-icon { font-size: 16px; }

/* 快捷指令按钮 */
.quick-btns { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.quick-btn {
  padding: 6px 14px; border-radius: 16px; border: 1.5px solid #e8e4f5;
  background: #fff; font-size: 13px; color: #888; cursor: pointer; transition: all 0.15s;
}
.quick-btn:active { background: #f5f0ff; border-color: var(--purple); color: var(--purple); }

/* 资料填写步骤胶囊选择器 */
.profile-capsules {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.profile-capsule {
  padding: 8px 16px; border-radius: 20px; border: 1.5px solid #ddd;
background: #fff; font-size: 13px; color: #555; cursor: pointer; transition: all 0.15s;
}
.profile-capsule:active, .profile-capsule.selected {
  background: var(--bone); border-color: var(--ink-900); color: #fff;
  box-shadow: var(--glow-purple);
}

/* ===== 视图容器 ===== */
.view-container {
  position: absolute;
  top: 88px; top: calc(88px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  bottom: 130px;
  overflow-y: auto;
  padding: 8px 16px;
  display: none;
  -webkit-overflow-scrolling: touch;
}
.view-container::-webkit-scrollbar { display: none; }
.view-container.active { display: block; }

/* 聊天室视图 */
/* ===== 聊天室（三类分组：心动嘉宾/AI伴侣/已结束）===== */
.chatroom-section { margin-bottom: 22px; }
.chatroom-section:first-of-type { margin-top: 20px; }
.chatroom-section-header {
  font-size: 18px; font-weight: 700; color: #1A1A26;
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 14px; letter-spacing: 0.3px;
}
.chatroom-section-header .sec-icon { font-size: 20px; line-height: 1; }
.chatroom-section-header .sec-fold {
  margin-left: auto; font-size: 14px; color: #b3a9d0; cursor: pointer;
  transition: transform .25s var(--ease-smooth, ease);
}
.chatroom-section.collapsed .sec-fold { transform: rotate(180deg); }
.chatroom-section.collapsed .chatroom-list-crush,
.chatroom-section.collapsed .chatroom-list-ai,
.chatroom-section.collapsed .chatroom-list-ended { display: none; }
.chatroom-empty-state {
  background: #FAFAFA;
  border: 1px solid rgba(26,26,38,0.14); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 28px 20px 24px; text-align: center;
}
.chatroom-empty-icon { font-size: 36px; margin-bottom: 8px; }
.chatroom-empty-text { font-size: 13px; color: #786E90; line-height: 1.6; margin-bottom: 12px; }
.chatroom-empty-btn {
  display: inline-block; padding: 10px 24px; border-radius: 24px;
  background: linear-gradient(135deg, #7B68EE, #9B77EA);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; max-width: 220px;
  box-shadow: 0 6px 16px rgba(123,104,238,0.22), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .15s var(--ease-smooth, ease), filter .15s, box-shadow .15s;
}
.chatroom-empty-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 20px rgba(123,104,238,0.28), inset 0 1px 0 rgba(255,255,255,0.25); }
.chatroom-empty-btn:active { transform: scale(0.97); }

.chatroom-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; background: transparent;
  border: none; border-bottom: 1px solid rgba(26,20,38,0.06);
  border-radius: 0; margin-bottom: 0; cursor: pointer; transition: background 0.15s;
}
.chatroom-item:active { background: #f5f0ff; }
.chatroom-item:last-child { border-bottom: none; }
.chatroom-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #EDE7F6, #D5C9F0);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; position: relative; flex-shrink: 0;
  overflow: visible; margin-right: 6px;
}
.chatroom-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.chatroom-ai-tag {
  position: absolute; bottom: -4px; right: -6px;
  padding: 1px 6px; border-radius: 6px; background: var(--purple);
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
}
/* 未读消息红点（金色调，区别于系统红色）*/
.chatroom-unread-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #FFC93C; color: #3a2a00; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.chatroom-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.chatroom-name {
  font-size: 16.5px; font-weight: 600; color: #1A1A26;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.chatroom-last {
  font-size: 13px; color: #888; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.chatroom-last.empty { color: #BBB; font-style: italic; }
.chatroom-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; flex-shrink: 0;
  max-width: 90px;
}
.chatroom-time { font-size: 11px; color: #b3b3b3; }
.chatroom-countdown {
  font-size: 12px; padding: 2px 8px; border-radius: 8px;
  background: #EEF0FB; color: #6B7FD0; font-weight: 600;
  white-space: nowrap;
}
.chatroom-countdown.urgent { background: #F5E6EE; color: #C2547A; animation: cdBreath 2.4s ease-in-out infinite; }
@keyframes cdBreath { 0%,100% { opacity:.75; } 50% { opacity:1; } }

/* 容器也要改：去掉背景，让 item 之间分隔更细 */
.chatroom-list-crush,
.chatroom-list-ai,
.chatroom-list-ended {
  background: transparent;
}

/* 聊天室微动效（P1） */
@keyframes crIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
.chatroom-item, .chatroom-empty-state { animation: crIn .28s var(--ease-smooth, ease) both; }
.chatroom-list-crush .chatroom-item:nth-child(2) { animation-delay: .05s; }
.chatroom-list-crush .chatroom-item:nth-child(3) { animation-delay: .10s; }
.chatroom-list-ai .chatroom-item:nth-child(2) { animation-delay: .05s; }
.chatroom-list-ended .chatroom-item:nth-child(2) { animation-delay: .05s; }
@keyframes iconBreath { 0%,100% { opacity:.82; filter: brightness(1); } 50% { opacity:1; filter: brightness(1.12); } }
.chatroom-empty-icon { animation: iconBreath 4s ease-in-out infinite; }
.sec-icon { animation: iconBreath 4.5s ease-in-out infinite; }

/* 聊天室图片消息 */
.sub-msg-img-wrap { cursor: pointer; border-radius: 12px; overflow: hidden; position: relative; }
.sub-msg-img-wrap img { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: 12px; transition: opacity 0.2s; }
.sub-msg-img-wrap:active img { opacity: 0.85; }
.sub-msg-img-label { font-size: 11px; color: #999; margin-top: 4px; text-align: center; }

/* 图片全屏放大 */
.img-fullscreen-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.92); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s;
}
.img-fullscreen-overlay.active { opacity: 1; visibility: visible; }
.img-fullscreen-overlay img {
  max-width: 90vw; max-height: 80vh; border-radius: 12px;
  object-fit: contain; transform: scale(0.8); transition: transform 0.3s;
}
.img-fullscreen-overlay.active img { transform: scale(1); }
.img-fullscreen-close {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; background: rgba(255,255,255,0.2);
  border: none; border-radius: 50%; color: #fff; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.img-fullscreen-download {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  padding: 8px 24px; background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; font-size: 13px;
  cursor: pointer;
}

/* 收费引导遮罩 */
.pricing-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.88); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s;
}
.pricing-overlay.active { opacity: 1; visibility: visible; }
.pricing-card {
  background: linear-gradient(160deg, #F9F4FC 0%, #F3EEFF 100%);
  border-radius: 24px; padding: 26px 22px 18px;
  width: 92vw; max-width: 420px; text-align: center;
  box-shadow: 0 20px 60px rgba(26,16,40,0.35), 0 0 0 1px rgba(255,255,255,0.6) inset;
  transform: translateY(24px); opacity: 0; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.4s;
}
.pricing-overlay.active .pricing-card { transform: translateY(0); opacity: 1; }
.pricing-card .pc-gem { margin-bottom: 8px; animation: gemBreath 2.6s ease-in-out infinite; }
@keyframes gemBreath {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(123,104,238,0.35)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(123,104,238,0.6)); }
}
.pricing-card .pc-title { font-size: 20px; font-weight: 800; color: #2D1E40; margin-bottom: 6px; letter-spacing: 0.3px; }
.pricing-card .pc-desc { font-size: 13px; color: #888299; margin-bottom: 10px; line-height: 1.5; }
.pricing-card .pc-hook {
  font-size: 12.5px; color: #9268E9; font-weight: 600; line-height: 1.4;
  background: rgba(146,104,233,0.08); border-radius: 10px; padding: 8px 10px; margin-bottom: 16px;
}
.pricing-card .pc-tiers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pricing-card .pc-tier {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 13px 16px 13px 18px; border-radius: 16px; text-align: left;
  border: 2px solid #e8e4f5; background: #fff; cursor: pointer; transition: all 0.25s;
  overflow: hidden;
}
.pricing-card .pc-tier::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: transparent; transition: background 0.25s;
}
.pricing-card .pc-tier:hover { border-color: var(--purple); }
.pricing-card .pc-tier.selected { border-color: var(--purple); background: #f8f5ff; box-shadow: 0 4px 16px rgba(123,104,238,0.18); }
.pricing-card .pc-tier.selected::before { background: var(--purple); }
.pricing-card .pc-tier-main { display: flex; flex-direction: column; }
.pricing-card .pc-tier-name { font-size: 15px; font-weight: 700; color: #2D1E40; margin-bottom: 3px; }
.pricing-card .pc-tier-benefit { font-size: 12px; color: #888299; line-height: 1.4; }
.pricing-card .pc-tier-price { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.pricing-card .pc-now { font-size: 22px; font-weight: 800; color: var(--purple); }
.pricing-card .pc-unit { font-size: 12px; font-weight: 400; color: #999; }
.pricing-card .pc-old { font-size: 12px; color: #bbb; text-decoration: line-through; margin-left: 4px; }
.pricing-card .pc-tier-foot { font-size: 11px; color: #B0A0C8; margin-top: 6px; }
/* 首月特惠：粗粉紫渐变边框 + 角标 + 淡粉柔光底 */
.pricing-card .pc-tier-first {
  border: 2.5px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg, #F2A7D0, #7B68EE) border-box;
  box-shadow: 0 6px 20px rgba(242,167,208,0.25);
}
.pricing-card .pc-tier-first.selected { box-shadow: 0 8px 26px rgba(242,167,208,0.4); }
.pricing-card .pc-corner {
  position: absolute; top: 0; right: 0; transform: translateY(-1px);
  background: linear-gradient(135deg, #F2A7D0, #7B68EE); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-bottom-left-radius: 12px;
}
.pricing-card .pc-corner-hot {
  background: linear-gradient(135deg, #FF9A5A, #F2854B);
}
/* 年卡：浅橙边框 + 省钱条 + 微弱呼吸 */
.pricing-card .pc-tier-yearly {
  border: 2px solid #F5C9A8;
  animation: yearlyPulse 3s ease-in-out infinite;
}
/* 首月/年卡选中时保留专属边框（不被 .selected 紫边覆盖） */
.pricing-card .pc-tier-first.selected { border-color: transparent; }
.pricing-card .pc-tier-yearly.selected { border-color: #F5C9A8; }
@keyframes yearlyPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(242,133,75,0.0); }
  50% { box-shadow: 0 2px 18px rgba(242,133,75,0.22); }
}
.pricing-card .pc-save {
  font-size: 11.5px; font-weight: 700; color: #E08A3C; line-height: 1.3;
  background: rgba(242,133,75,0.1); border-radius: 8px; padding: 5px 8px; margin-bottom: 8px; width: 100%;
}
.pricing-card .pc-pay-btn {
  width: 100%; padding: 15px; border: none; border-radius: 20px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer; margin-bottom: 8px; transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(123,104,238,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pricing-card .pc-pay-btn:active { transform: scale(0.97); opacity: 0.9; }
.pricing-card .pc-trust { font-size: 11px; color: #B0A0C8; margin-bottom: 10px; }
.pricing-card .pc-skip-btn {
  font-size: 13px; color: #9B89B3; cursor: pointer; background: none; border: none;
  text-decoration: underline; padding: 4px;
}

.chatroom-ended {
  padding: 8px 14px; background: #faf9ff; border: 1px solid #edeaf5;
  border-radius: 12px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.chatroom-ended-info { font-size: 12px; color: #999; }
.unlock-btn {
  padding: 5px 14px; border-radius: 14px; border: 1px solid var(--purple);
  background: #fff; color: var(--purple); font-size: 12px; cursor: pointer;
}
.unlock-btn:active { background: #7B68EE; color: #fff; }

/* 分身视图 */
.clone-status {
  background: #faf9ff; border: 2.5px solid #1A1A26;
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
}
.clone-status-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.clone-status-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
}
.clone-status-label {
  font-size: 18px; font-weight: 600; color: #333;
  display: flex; align-items: center; gap: 6px;
}
.online-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple); animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.clone-stats {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  padding: 12px 0; border-top: 1px solid #edeaf5; border-bottom: 1px solid #edeaf5;
  justify-content: space-around;
}
.clone-stat {
  text-align: center; flex-shrink: 0;
  min-width: 48px; padding: 3px 8px;
  border-radius: 10px; transition: all 0.2s;
  cursor: pointer;
}
.clone-stat:hover { background: #f5f0ff; }
.clone-stat.active { background: #f5f0ff; }
.clone-stat-num { font-size: 15px; font-weight: 700; color: var(--purple); line-height: 1.2; }
.clone-stat-sub { font-size: 12px; color: #999; font-weight: 400; }
.clone-stat-label { font-size: 15px; color: #888; margin-top: 0; line-height: 1.2; }
.clone-stat-arrow { font-size: 12px; color: #ccc; margin: 0 2px; display: inline-block; }

.clone-guest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; background: #faf9ff; border: 1px solid #edeaf5;
  border-radius: 12px; margin-bottom: 8px; cursor: pointer;
}
.clone-guest-item:active { background: #f5f0ff; }
.clone-guest-item.ended { opacity: 0.65; background: #f8f8f8; border-color: #eee; }
.clone-guest-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid #e8e4f5;
  background: #f0edff;
}
.clone-guest-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.clone-guest-avatar.pink { border-color: #F4C0D1; }
.clone-guest-avatar.gold { border-color: #D4A017; }
.clone-guest-avatar.green { border-color: #4CAF50; }
.clone-guest-avatar.purple { border-color: #A594F9; }
.clone-guest-avatar.gray { border-color: #ccc; }
.clone-guest-info { flex: 1; min-width: 0; }
.clone-guest-name { font-size: 14px; font-weight: 500; color: #333; }
.clone-guest-status { font-size: 13px; padding: 2px 8px; border-radius: 8px; display: inline-block; margin-top: 2px; font-weight: 500; }
.clone-guest-status.purple { background: #f0edff; color: var(--purple); }
.clone-guest-status.yellow { background: #fef9ee; color: #d4a017; }
.clone-guest-status.green { background: #ecfdf5; color: #059669; }
.clone-guest-status.pink { background: #FFF0F5; color: #D4537E; }
.clone-guest-status.gold { background: #FFF8E1; color: #B8860B; }
.clone-guest-status.gray { background: #f5f5f5; color: #999; }
.clone-guest-arrow { color: #ccc; font-size: 14px; }
.clone-guest-event {
font-size: 13px; color: #999; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}

/* 关系分组标题 */
.clone-section-title {
font-size: 13px; font-weight: 700; color: #666;
  margin: 14px 0 8px; display: flex; align-items: center; gap: 5px;
}
.clone-section-title .count { font-weight: 400; color: #999; font-size: 12px; }

/* 分身列表为空时的提示 */
.clone-empty-tip {
  text-align: center;
  color: #bbb;
  font-size: 13px;
  padding: 20px 0;
}

/* 付费解锁按钮 */
.clone-unlock-btn {
  padding: 5px 10px; border-radius: 14px;
  border: 1.5px solid var(--pink);
  background: #fff; color: var(--pink);
font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: all 0.15s;
}
.clone-unlock-btn:active { background: var(--pink); color: #fff; }
.clone-unlock-btn.gold { border-color: #B8860B; color: #B8860B; }

/* 我的视图 */
.profile-card {
  background: #faf9ff; border: 1px solid #edeaf5;
  border-radius: 14px; padding: 20px; text-align: center; margin-bottom: 12px;
}
/* ===== 新版极简个人卡片 (v3) ===== */
.profile-card-v3 {
  background: linear-gradient(135deg, #faf8ff 0%, #fdf4ff 50%, #faf8ff 100%);
  border: 1px solid #edeaf5;
  border-radius: 16px; padding: 28px 20px 20px;
  text-align: center; margin-bottom: 18px;
}
.profile-avatar-v3 {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), #A78BFA);
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
}
.profile-name-v3 {
  font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px;
}
.profile-tier-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 2px;
}
.profile-tier-badge {
  font-size: 13px; color: #666;
  background: #f5f3ff; border: 1px solid #e8e4f5;
  padding: 4px 14px; border-radius: 14px;
}
.profile-tier-upgrade {
  font-size: 12px; color: var(--purple); font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  transition: all 0.15s;
}
.profile-tier-upgrade:active { background: #f0ebff; }
/* 菜单分组标签 */
.menu-section-label {
  font-size: 12px; color: #999; font-weight: 600;
  padding: 10px 4px 6px;
}
.menu-section-label:first-of-type { padding-top: 0; }
/* 新功能标签 */
.menu-new-badge {
  font-size: 10px; color: #fff; background: linear-gradient(135deg, var(--purple), #A78BFA);
  padding: 2px 7px; border-radius: 8px; font-weight: 700;
  margin-right: 6px; flex-shrink: 0;
}
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--purple-soft)); margin: 0 auto 10px; }
.profile-name { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.member-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.member-pill.vip { background: var(--purple); color: #fff; }
.member-pill.premium { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; }
.profile-completion { margin-top: 12px; }
.profile-completion-label { display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-bottom: 6px; }
.profile-bar { height: 6px; border-radius: 3px; background: #edeaf5; overflow: hidden; }
.profile-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--purple), var(--purple-soft)); width: 75%; }

.menu-item {
  display: flex; align-items: center; padding: 14px;
  background: #faf9ff; border: 1px solid #edeaf5;
  border-radius: 12px; margin-bottom: 6px; cursor: pointer;
}
.menu-item:active { background: #f5f0ff; }
/* 危险操作项（注销账号等） */
.menu-item-danger {
  background: linear-gradient(135deg, #fff5f5, #fff0f0);
  border: 1.5px solid #f5c2c7;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.06);
}
.menu-item-danger:active { background: #ffeaea; }
.menu-text-danger { flex: 1; }
.menu-icon { font-size: 14px; width: 36px; }
.menu-text { flex: 1; font-size: 16px; color: #333; }
.menu-arrow { color: #ccc; font-size: 12px; }

/* ===== 第3层：底部AI能力滑动条 ===== */
.bottom-area {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 20;
  /* 第4层：底部区域背景改为主题色，消除白底泄露 */
  background: #f5f3ff;
  border-top: 1px solid #f0edff;
}

.ai-skills { padding: 8px 16px 4px; }
.ai-skills-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ai-skills-scroll::-webkit-scrollbar { display: none; }

.skill-pill {
  padding: 6px 14px; border-radius: 20px; border: 1px solid #e8e4f5;
  background: #fff; font-size: 14px; color: #666; white-space: nowrap;
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 4px 12px rgba(123,104,238,0.10);
}
.skill-pill:active { background: #f5f0ff; border-color: var(--purple); color: var(--purple); }
.skill-pill:hover { background: #faf8ff; }
.skill-pill.purple { color: var(--purple); border-color: #d4ccf0; }
.skill-pill.pink { color: var(--pink); border-color: #f5c6d8; }
.skill-pill.amber { color: #d4a017; border-color: #f0d88a; }
.skill-pill.teal { color: #0d9488; border-color: #99e2d9; }

/* ===== 第4层：底部输入框 ===== */
.input-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 24px; }
.input-field {
  flex: 1; height: 44px; border-radius: 22px; border: 1px solid #e0e0e0;
  background: #f8f8f8; padding: 0 18px; font-size: 15px; color: #333;
  outline: none; transition: border-color 0.2s;
}
.input-field::placeholder { color: #bbb; }
.input-field:focus { border-color: #7B68EE; box-shadow: 0 0 0 3px rgba(123,104,238,0.10); }
.input-send {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bone);
border: none; color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  box-shadow: var(--glow-purple);
}
.input-send:active { transform: scale(0.9); }
.input-plus {
  width: 38px; height: 38px; border-radius: 50%; background: #F3EEFF;
  border: 1.5px solid #ECE6F8; font-size: 17px; color: #7B68EE; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(123,104,238,0.10);
}

/* AI介入提示横幅 */
.ai-intervene-banner {
  background: linear-gradient(90deg, #FFF0F5, #f5f0ff);
  margin: 6px 12px; padding: 8px 12px; border-radius: 10px;
  font-size: 11px; color: var(--pink); text-align: center;
  border: 1px dashed #f5c6d8;
  animation: bannerPulse 2s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== 新输入框改版 ===== */

/* 快捷话题标签 */
.quick-tags {
  padding: 6px 16px 2px;
  background: #fff;
  border-top: 1px solid #f0edff;
}
.quick-tags-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.quick-tags-scroll::-webkit-scrollbar { display: none; }
.quick-tag {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid #e8e4f5;
  background: #faf9ff;
  font-size: 13px;
  color: var(--purple);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.quick-tag:active {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

/* 新输入框容器（豆包风：整条胶囊化 + 立体阴影） */
.input-bar-new {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
  margin: 0 8px;
  /* 第4层：输入栏背景改为浅白（接近白色但不是纯白），融入主题 */
  background: #fafaff;
  border-radius: 22px;
  border: 1px solid #e8e8ec;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 桌面版：手机壳预览时输入栏贴底、贴两边（手机壳 390px 同样命中此规则） */
@media (min-width: 421px) {
  .input-bar-new {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e8e8ec;
    box-shadow: none;
  }
  .chat-area { bottom: 50px; }
  .bottom-area { padding-bottom: 0; }
}

/* 子页面聊天输入栏（豆包风格：外框包住 + / 语音 / 发送） */
.sub-input-bar-new {
  display: flex;
  align-items: center;
  padding: 6px 14px 16px;
  background: #fff;
  flex-shrink: 0;
}
/* AI伴侣试爱聊天室输入框紫色主题（与AI空间一致） */
#subChatDetail.ai-mode .sub-input-bar-new {
  background: #1A1428;
  padding-top: 8px;
}
#subChatDetail.ai-mode .input-shell {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.18), 0 2px 8px rgba(123,104,238,0.18);
}
#subChatDetail.ai-mode .input-field-new { color: #fff; }
#subChatDetail.ai-mode .input-field-new::placeholder { color: rgba(255,255,255,0.5); }
#subChatDetail.ai-mode .input-plus-new,
#subChatDetail.ai-mode .input-voice-btn,
#subChatDetail.ai-mode .input-send-new {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: none;
}
#subChatDetail.ai-mode .input-plus-new:active,
#subChatDetail.ai-mode .input-voice-btn:active,
#subChatDetail.ai-mode .input-send-new:active {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.55);
}
#subChatDetail.ai-mode .input-send-new {
  background: linear-gradient(135deg, #A855F7, #4B0082);
  border-color: transparent;
}
.input-shell {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e8e8ec;
  background: #fff;
  /* 立体悬浮阴影：下方主阴影 + 弥散环境影，让输入框整体浮起来 */
  box-shadow:
    0 14px 38px rgba(0,0,0,0.13),
    0 6px 16px rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* AI伴侣「确定恋爱关系」常驻按钮 — 紧凑悬浮条（半高，悬停输入框上方） */
.companion-confirm-bar {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0 14px 6px;
  padding: 9px 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #D4537E, #7B68EE);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(212,83,126,0.35), 0 2px 4px rgba(123,104,238,0.2);
  -webkit-tap-highlight-color: rgba(212,83,126,0.15);
  animation: ccb-breathe 2.8s ease-in-out infinite;   /* 心跳呼吸 */
}
/* 流光高光层（顶部微反光，增加质感） */
.companion-confirm-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  z-index: 0;
  border-radius: inherit;
}
.companion-confirm-bar .ccb-inner {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
}
.companion-confirm-bar .ccb-heart { font-size: 16px; }
/* 点击反馈 */
.sub-page .companion-confirm-bar:active { transform: scale(0.97); }
@keyframes ccb-breathe {
  0%, 100% { box-shadow: 0 4px 14px rgba(212,83,126,0.35), 0 2px 4px rgba(123,104,238,0.2); }
  50%      { box-shadow: 0 6px 20px rgba(212,83,126,0.48), 0 3px 8px rgba(123,104,238,0.28); }
}

/* 右上角「专属红娘」轻浮雕标签（加大版） */
.sub-redman-tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 50px; line-height: 1.35;
  padding: 7px 13px; border: none; cursor: pointer;
  border-radius: 11px;
  background: linear-gradient(135deg, #FADADD, #FBCFE8);
  color: #C2185B; font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.sub-redman-tag:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
}

/* 【v20260717·聊天室优化】头部第二行：渐变粉倒计时条（左=进度条+剩余时间，竖线，右=解锁按钮） */
.sub-header-cd {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #D98BAF, #BFA8E8);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.sub-cd-progress {
  flex: 1; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.28); overflow: hidden;
  position: relative;
}
.sub-cd-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC2D1, #FF9ECF);
  transition: width 0.6s ease;
}
.sub-cd-text {
  position: absolute; left: 14px; top: 0; height: 100%;
  display: flex; align-items: center;
  font-size: 12px; font-weight: 700; color: #7A1F4A;
  letter-spacing: 0.2px;
  z-index: 2; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  padding-left: 2px;
}
.sub-cd-text::before {
  content: '♥';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 10px;
  color: #D4537E;
  opacity: 0.85;
}
.sub-cd-divider {
  width: 1px; height: 20px; background: rgba(255,255,255,0.45); flex-shrink: 0;
}
.sub-cd-unlock {
  flex-shrink: 0; padding: 10px 16px; border: none; cursor: pointer;
  border-radius: 999px; background: #fff; color: #D4537E;
  font-size: 15.5px; font-weight: 900; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: transform 0.16s ease; -webkit-tap-highlight-color: transparent;
  animation: unlockPulse 2.2s ease-in-out infinite;
}
.sub-cd-unlock:active { transform: scale(0.94); animation: none; }
@keyframes unlockPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
  55% { transform: scale(1.04); box-shadow: 0 4px 16px rgba(212,83,126,0.35), 0 0 0 3px rgba(212,83,126,0.18); }
}
.sub-header-cd.urgent {
  background: linear-gradient(135deg, #C74B80, #D98BAF);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
.sub-header-cd.urgent .sub-cd-unlock {
  background: #fff; color: #C2185B;
  animation: unlockPulseUrgent 1.6s ease-in-out infinite;
}
@keyframes unlockPulseUrgent {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
  50% { transform: scale(1.06); box-shadow: 0 5px 20px rgba(255,255,255,0.45), 0 0 0 4px rgba(255,255,255,0.2); }
}
@keyframes urgentPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }
.sub-header-cd.ended {
  background: rgba(120,120,120,0.15);
  border-bottom-color: rgba(120,120,120,0.3);
}
.sub-header-cd.ended .sub-cd-fill { display: none; }
.sub-header-cd.ended .sub-cd-text { display: none; }
.sub-header-cd.ended .sub-cd-divider { background: rgba(120,120,120,0.4); }
.sub-header-cd.ended .sub-cd-unlock { background: #ccc; color: #666; animation: none; }

/* "+"按钮（白底黑色加粗圆环，小一圈，带浮起阴影） */
.input-plus-new {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  color: #000;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}
.input-plus-new svg { width: 14px; height: 14px; }
.input-plus-new:active {
  transform: scale(0.9);
  background: #f2f2f2;
  color: #000;
  border-color: #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.input-plus-new.active {
  background: #000;
  color: #fff;
  border-color: #000;
  transform: rotate(45deg);
}
.input-plus-new.active svg path { stroke: #fff; }

/* 输入框包裹层 */
.input-field-wrap {
  flex: 1;
  position: relative;
}

/* 新输入框（无边框，由外框包裹） */
.input-field-new {
  width: 100%;
  height: 36px;
  border: none;
  background: transparent;
  padding: 0 4px;
  font-size: 14px;
  color: #333;
  outline: none;
  box-sizing: border-box;
}
.input-field-new::placeholder { color: #aaa; }

/* 语音按钮（白底黑色加粗圆环+声波图标，小一圈，带浮起阴影） */
.input-voice-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  color: #000;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}
.input-voice-btn svg { width: 14px; height: 14px; }
.input-voice-btn:active {
  transform: scale(0.9);
  background: #f2f2f2;
  color: #000;
  border-color: #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.input-voice-btn.recording {
  background: linear-gradient(135deg, #D4537E, #f07fab);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  animation: voicePulse 1s ease-in-out infinite;
}

/* 发送按钮（白底黑色加粗圆环+箭头，小一圈，带浮起阴影） */
.input-send-new {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  color: #000;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}
.input-send-new svg { width: 14px; height: 14px; }
.input-send-new:active { transform: scale(0.9); background: #f2f2f2; color: #000; border-color: #000; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.input-send-new.active { background: #000; color: #fff; border-color: #000; }
.input-send-new.active svg path { stroke: #fff; }

/* 分身聊天面板输入栏（与豆包风一致：胶囊 + 立体阴影） */
.chat-panel-input-bar-new {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin: 0 10px 10px; flex-shrink: 0;
  background: #fff; border-radius: 26px; border: 1px solid #e8e8ec;
  box-shadow: 0 14px 38px rgba(0,0,0,0.13), 0 6px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* 展开菜单 */
.input-menu {
  display: none;
  background: #fff;
  border-top: 1px solid #f0edff;
  padding: 14px 16px 20px;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-around;
}
.input-menu.active { display: flex; }
.input-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #F7F3FF;
  border: 1.5px solid #ECE6F8;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 68px;
  box-shadow: 0 4px 12px rgba(123,104,238,0.08);
}
.input-menu-item:active {
  background: #f5f0ff;
  border-color: var(--purple);
  color: var(--purple);
}
.input-menu-item-icon {
  font-size: 24px;
}

/* 语音录制浮层 */
.voice-overlay {
  display: none;
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  border-radius: 20px;
  padding: 20px 32px;
  text-align: center;
  z-index: 9998;
  min-width: 180px;
}
.voice-overlay.active { display: block; }
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  margin-bottom: 10px;
}
.voice-wave-bar {
  width: 4px;
  border-radius: 2px;
  background: #7B68EE;
  animation: voiceWave 0.8s ease-in-out infinite alternate;
}
.voice-wave-bar:nth-child(1) { height: 12px; animation-delay: 0s; }
.voice-wave-bar:nth-child(2) { height: 20px; animation-delay: 0.15s; }
.voice-wave-bar:nth-child(3) { height: 28px; animation-delay: 0.3s; }
.voice-wave-bar:nth-child(4) { height: 18px; animation-delay: 0.1s; }
.voice-wave-bar:nth-child(5) { height: 24px; animation-delay: 0.2s; }

@keyframes voiceWave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,83,126,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(212,83,126,0); }
}

/* 语音按钮提示文字 */
.voice-tip {
  font-size: 12px;
  opacity: 0.85;
}

/* 图片消息气泡 */
.msg-img-bubble {
  max-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.msg-img-bubble img {
  width: 100%;
  display: block;
}
.user .msg-img-bubble {
  margin-left: auto;
}

/* 语音消息气泡 */
.msg-voice-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(212,83,126,0.35);
  cursor: pointer;
  min-width: 100px;
  max-width: 200px;
}
.user .msg-voice-bubble {
  background: var(--bone);
  color: #fff;
}
.msg-voice-icon { font-size: 18px; }
.msg-voice-dur { font-size: 13px; }
.msg-voice-wave-sm {
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.msg-voice-wave-sm span {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.7;
  animation: voiceBubbleWave 1s ease-in-out infinite alternate;
}
.msg-voice-wave-sm span:nth-child(1) { height: 6px; animation-delay: 0s; }
.msg-voice-wave-sm span:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.msg-voice-wave-sm span:nth-child(3) { height: 9px; animation-delay: 0.1s; }
.msg-voice-wave-sm span:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.msg-voice-wave-sm span:nth-child(5) { height: 7px; animation-delay: 0.15s; }
@keyframes voiceBubbleWave {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* 录音中按钮变红 */
.input-voice-btn.recording {
  background: #ff4444;
  color: #fff;
  border-color: #ff4444;
  animation: recordPulse 1s infinite;
}
@keyframes recordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,68,68,0); }
}

/* ===== 聊天室优化（v20260717）：须知 / 功能条 / 付费弹窗 / 结束锁定 ===== */

/* 沟通&解锁须知（规则说明重构） */
.system-notice-card {
  margin: 4px 12px 12px; padding: 16px 18px; border-radius: 14px;
  background: #F7F4FF; border: 1px solid #ECE6F8;
  font-size: 15.5px; line-height: 1.8; color: #444;
}
.sys-notice-title { font-size: 18px; font-weight: 800; color: #1a0b4a; margin-bottom: 6px; }
.sys-notice-welcome { font-size: 15.5px; font-weight: 600; color: #333; line-height: 1.7; margin-bottom: 10px; }
.sys-notice-subtitle { font-size: 16px; font-weight: 800; color: #333; margin-bottom: 4px; }
.notice-rules { margin: 8px 0 2px; font-size: 14.5px; line-height: 1.8; color: #333; }
.notice-rules.collapsed { display: none; }
.notice-rule { margin-bottom: 5px; color: #333; }
.notice-rule b { color: #333; }
.notice-rule.hl, .notice-rule .notice-hl, .notice-hl { color: #D4537E; font-weight: 700; }
.notice-rule.hl b, .notice-rule .notice-hl b, .notice-hl b { color: #D4537E; }
.notice-collapse { text-align: right; font-size: 14px; font-weight: 800; color: #333; cursor: pointer; margin-top: 6px; user-select: none; letter-spacing: 0.3px; padding: 4px 0; }

/* 输入区上方窄功能条：就近解锁 / 找红娘 */
.sub-quick-bar {
  display: flex; gap: 8px; padding: 6px 12px 2px; background: #fff;
  border-top: 1px solid #f0edff;
}
.sub-quick-entry {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 8px; border: 1.5px solid #E6DEFB; border-radius: 12px; cursor: pointer;
  background: #F8F5FF; color: #6B5E8E; font-size: 13.5px; font-weight: 700;
  transition: transform 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.sub-quick-entry.alt { background: #FFF4F8; border-color: #F6D9E4; color: #C2185B; }
.sub-quick-entry:active { transform: scale(0.97); background: #EFE9FF; }

/* 解锁付费确认弹窗 */
.unlock-confirm-overlay {
  position: fixed; inset: 0; z-index: 10010; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); padding: 24px;
}
.unlock-confirm-overlay.active { display: flex; }
.unlock-confirm-dialog {
  width: 100%; max-width: 320px; background: #fff; border-radius: 20px;
  padding: 26px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.uc-title { font-size: 18px; font-weight: 800; color: #333; margin-bottom: 10px; }
.uc-amount { font-size: 15px; color: #444; margin-bottom: 14px; }
.uc-amount b { color: #8046E8; font-size: 22px; font-weight: 900; }
.uc-desc {
  font-size: 13px; color: #777; line-height: 1.7; margin-bottom: 22px;
  text-align: left; background: #F9F6FF; border-radius: 12px; padding: 12px 14px;
}
.uc-desc b { color: #8046E8; }
.uc-btns { display: flex; gap: 12px; }
.uc-cancel, .uc-confirm { flex: 1; padding: 13px 0; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.uc-cancel { background: #F0EDF7; color: #666; }
.uc-confirm { background: linear-gradient(135deg, #8046E8, #9F6BFF); color: #fff; box-shadow: 0 4px 14px rgba(128,70,232,0.4); }
.uc-cancel:active, .uc-confirm:active { transform: scale(0.97); }

/* 聊天结束 · 锁定引导弹窗 */
.chat-lock-overlay {
  position: fixed; inset: 0; z-index: 10012; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.66); padding: 24px;
}
.chat-lock-overlay.active { display: flex; }
.chat-lock-dialog { width: 100%; max-width: 320px; background: #fff; border-radius: 20px; padding: 28px 22px; text-align: center; }
.cl-icon { font-size: 44px; margin-bottom: 8px; }
.cl-title { font-size: 18px; font-weight: 800; color: #333; margin-bottom: 10px; }
.cl-desc { font-size: 13px; color: #777; line-height: 1.7; margin-bottom: 20px; }
.cl-btns { display: flex; flex-direction: column; gap: 10px; }
.cl-btn { padding: 13px 0; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.cl-btn.primary { background: linear-gradient(135deg, #8046E8, #9F6BFF); color: #fff; box-shadow: 0 4px 14px rgba(128,70,232,0.4); }
.cl-btn.secondary { background: #F0EDF7; color: #6B5E8E; }
.cl-btn:active { transform: scale(0.97); }

/* ================================================================
   解锁联系方式 · 横向三卡支付弹窗（v20260717_2219）
   ================================================================ */
.unlock-slider-dialog {
  width: 92%; max-width: 360px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #2a1a4a 0%, #1a1030 100%);
  border-radius: 24px; padding: 22px 16px 18px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}
.uc-slider-head { margin-bottom: 18px; }
.uc-slider-title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.uc-slider-sub { font-size: 13px; color: #b8a9d9; }
.uc-slider {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 18px; margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
}
.uc-slider::-webkit-scrollbar { height: 4px; }
.uc-slider::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.uc-card {
  flex: 0 0 78%; min-width: 220px; max-width: 260px;
  background: linear-gradient(180deg, #3a2363 0%, #271640 100%);
  border-radius: 20px; padding: 18px 16px 28px;
  border: 1.5px solid rgba(255,255,255,0.08);
  scroll-snap-align: center; text-align: left; position: relative;
  display: flex; flex-direction: column; transition: transform 0.18s, border-color 0.18s;
}
.uc-card.hot { border-color: #D4537E; background: linear-gradient(180deg, #4a2750 0%, #2d1538 100%); }
.uc-card:active { transform: scale(0.97); }
.uc-card.selected {
  border: 2.5px solid #FFD66B;
  box-shadow: 0 0 0 4px rgba(255, 214, 107, 0.25), 0 8px 24px rgba(0,0,0,0.25);
  transform: scale(1.02);
}
.uc-card.hot.selected {
  border-color: #FFD66B;
  box-shadow: 0 0 0 4px rgba(255, 214, 107, 0.3), 0 8px 24px rgba(212,83,126,0.25);
}
.uc-card-badge {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(135deg, #D4537E, #9F6BFF);
  color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px;
  border-radius: 0 18px 0 12px;
}
.uc-card-name { font-size: 16px; font-weight: 700; color: #fff; margin-top: 18px; margin-bottom: 12px; }
.uc-card-price { color: #D4537E; font-weight: 900; margin-bottom: 12px; position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-bottom: 12px; }
.uc-price-group { display: flex; align-items: baseline; }
.uc-card-price::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.15);
}
.uc-card-recover { font-size: 12px; color: #9e8db8; font-weight: 500; margin-left: 8px; align-self: center; }
.uc-card.hot .uc-card-price { color: #ff6ba8; }
.uc-cur { font-size: 20px; }
.uc-num { font-size: 48px; line-height: 1; }
.uc-card-origin { font-size: 12px; color: #9e8db8; text-decoration: line-through; margin-bottom: 8px; }
.uc-card-coins-base { font-size: 14px; color: #fff; font-weight: 700; margin-bottom: 2px; margin-top: 6px; }
.uc-card-coins-base b { color: #FFD66B; font-size: 18px; }
.uc-card-coins-extra { font-size: 12px; color: #b8a9d9; font-weight: 500; margin-bottom: 8px; }
.uc-card-coins-extra b { color: #FFD66B; font-size: 14px; }
.uc-card-coins { font-size: 14px; color: #fff; font-weight: 700; margin-bottom: 8px; }
.uc-card-coins b { color: #FFD66B; font-size: 18px; }
.uc-card-desc { font-size: 12px; color: #c9bddb; line-height: 1.5; margin-bottom: 4px; flex: 1; }
.uc-card-save { font-size: 11px; color: #b8a9d9; margin-bottom: 14px; }
.uc-card-btn {
  width: 100%; padding: 12px 0; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #8046E8, #D4537E); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: auto;
  box-shadow: 0 4px 14px rgba(128,70,232,0.4);
}
.uc-card-btn:active { transform: scale(0.97); }
.uc-direct-unlock {
  width: 100%; padding: 13px 0; border: none; border-radius: 14px; margin-top: 4px;
  background: #fff; color: #8046E8; font-size: 15px; font-weight: 700; cursor: pointer;
}
.uc-direct-unlock:active { background: #f0edff; }
.uc-cancel-slider {
  width: 100%; margin-top: 10px; padding: 12px 0; border: none; background: transparent;
  color: #9e8db8; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* 匹配余额不足 · 单卡收费引导弹窗（大版 v20260721_0015：再拉长+标题数字留空+强脉冲） */
.match-no-coin-overlay {
  position: fixed; inset: 0; z-index: 1002; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72); padding: 22px;
}
.match-no-coin-overlay.active { display: flex; }
/* 整体再拉大：dialog max-width 370→410，卡片更修长 */
.match-no-coin-dialog { width: 100%; max-width: 410px; padding: 0 6px; }
.match-no-coin-head { text-align: center; margin-bottom: 24px; }
.match-no-coin-title { font-size: 25px; font-weight: 800; color: #fff; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.match-no-coin-sub { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.55; padding: 0 4px; }
/* 付费卡片加长：更多内边距、标题与价格拉开 */
.match-no-coin-dialog .uc-card {
  max-width: 100%;
  padding: 26px 22px 32px;
  margin: 0 auto 22px;
  border-radius: 24px;
}
.match-no-coin-dialog .uc-card-name {
  font-size: 18px;
  margin-top: 22px;
  margin-bottom: 18px;
}
.match-no-coin-dialog .uc-card-price {
  min-height: 60px;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.match-no-coin-dialog .uc-num { font-size: 54px; }
.match-no-coin-dialog .uc-card-desc { font-size: 13.5px; margin-bottom: 10px; }
.match-no-coin-dialog .uc-card-btn {
  padding: 15px 0;
  font-size: 16px;
  border-radius: 16px;
}

/* 强脉冲引诱特效：多层紫色光晕交替扩散 + 按钮自身微呼吸 */
@keyframes matchPayPulse {
  0% {
    box-shadow: 0 4px 18px rgba(128,70,232,0.55),
                0 0 0 0 rgba(168,85,247,0.55),
                0 0 0 0 rgba(199,83,126,0.35);
    transform: scale(1);
  }
  45% {
    box-shadow: 0 6px 24px rgba(128,70,232,0.7),
                0 0 0 18px rgba(168,85,247,0),
                0 0 0 8px rgba(199,83,126,0.15);
    transform: scale(1.015);
  }
  70% {
    box-shadow: 0 6px 24px rgba(128,70,232,0.6),
                0 0 0 28px rgba(168,85,247,0),
                0 0 0 14px rgba(199,83,126,0);
    transform: scale(1.01);
  }
  100% {
    box-shadow: 0 4px 18px rgba(128,70,232,0.55),
                0 0 0 0 rgba(168,85,247,0.55),
                0 0 0 0 rgba(199,83,126,0.35);
    transform: scale(1);
  }
}
.match-no-coin-dialog .uc-card-btn {
  animation: matchPayPulse 2.4s ease-in-out infinite;
  position: relative;
}

/* 分身打招呼回复通知 */
.greeting-reply-overlay {
  position: fixed; inset: 0; z-index: 10013; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); padding: 24px;
}
.greeting-reply-overlay.active { display: flex; }
.greeting-reply-dialog {
  width: 100%; max-width: 300px; background: #fff; border-radius: 20px;
  padding: 26px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.gr-icon { font-size: 42px; margin-bottom: 8px; }
.gr-title { font-size: 17px; font-weight: 800; color: #333; margin-bottom: 10px; }
.gr-guest-reply {
  background: #F7F3FF; border-radius: 12px; padding: 12px 14px;
  font-size: 14px; color: #4a3a6b; line-height: 1.6; margin-bottom: 12px;
  text-align: left; font-weight: 600;
}
.gr-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 18px; }
.gr-btns { display: flex; gap: 12px; }
.gr-btn { flex: 1; padding: 12px 0; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.gr-btn.primary { background: linear-gradient(135deg, #8046E8, #9F6BFF); color: #fff; }
.gr-btn.secondary { background: #F0EDF7; color: #6B5E8E; }
.gr-btn:active { transform: scale(0.97); }

/* ===== 分身托管 · 限额配置大卡片 ===== */
.clone-host-config-overlay {
  position: fixed; inset: 0; z-index: 10014; display: none;
  align-items: center; justify-content: center;
  background: rgba(40,30,70,0.6); padding: 20px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.clone-host-config-overlay.active { display: flex; }
.clone-host-config-card {
  width: 100%; max-width: 380px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg,#2a1640,#1a0f2e);
  color: #fff;
  color-scheme: dark;
  border: 1px solid rgba(123,104,238,0.25);
  border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  padding: 20px 16px 18px;
}
/* 模块1：顶部科普区 */
.chc-science {
  background: linear-gradient(135deg, rgba(155,107,239,0.14), rgba(212,83,126,0.10));
  border: 1px solid rgba(155,107,239,0.25);
  border-radius: 14px; padding: 14px 14px; margin-bottom: 16px;
}
.chc-science-title { font-size: 17px; font-weight: 900; color: #f0e9ff; line-height: 1.35; margin-bottom: 8px; }
.chc-science-body { font-size: 13.5px; color: #b9addb; line-height: 1.7; text-align: left; }
/* 模块2：核心配置区 */
.chc-config { display: flex; flex-direction: column; gap: 18px; }
.chc-opt { text-align: left; }
.chc-opt-head { margin-bottom: 10px; }
.chc-opt-name { font-size: 15.5px; font-weight: 900; color: #f0e9ff; margin-bottom: 4px; }
.chc-opt-tip { font-size: 12.5px; color: #9a8ec8; line-height: 1.6; }
.chc-cap-row { display: flex; align-items: center; gap: 10px; }
.chc-cap-input-wrap {
  flex: 0 0 96px; display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(155,107,239,0.40); border-radius: 12px; padding: 9px 12px;
}
.chc-cap-input-wrap:focus-within { border-color: #8046E8; }
.chc-cap-unit { font-size: 13px; color: #c8b8ef; font-weight: 700; }
.chc-cap-input { width: 56px; border: none; outline: none; font-size: 16px; font-weight: 700; color: #f0e9ff; background: transparent; }
.chc-cap-input::-webkit-outer-spin-button, .chc-cap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chc-cap-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chc-chip {
  padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.08); color: #b9addb; cursor: pointer; border: 1px solid transparent;
}
.chc-chip.active { background: linear-gradient(135deg, #8046E8, #9F6BFF); color: #fff; }
.chc-opt-note { font-size: 12px; color: #9a8ec8; margin-top: 8px; line-height: 1.5; }
.chc-select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #ece6fb;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(155,107,239,0.35); outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23c8b8ef' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.chc-select-large { padding: 13px 14px; font-size: 14px; }
.chc-select:focus { border-color: #8046E8; }
/* 模块3：底部提示 + 按钮 */
.chc-footer { margin-top: 18px; }
.chc-footer-note { font-size: 12.5px; color: #9a8ec8; line-height: 1.65; text-align: left; margin-bottom: 14px; font-weight: 500; }
.chc-footer-btns { display: flex; gap: 12px; }
.chc-btn { flex: 1; padding: 13px 0; border: none; border-radius: 14px; font-size: 14px; font-weight: 800; cursor: pointer; }
.chc-btn:active { transform: scale(0.97); }
.chc-btn-later { background: rgba(255,255,255,0.08); color: #b9addb; }
.chc-btn-confirm { background: linear-gradient(135deg, #8046E8, #9F6BFF); color: #fff; box-shadow: 0 6px 16px rgba(123,104,238,0.35); }

.host-field-tip { font-size: 11px; color: #999; margin-top: 4px; line-height: 1.4; }

/* 退币申请页 */
.refund-tip { background: linear-gradient(135deg,#f8f4ff,#fff5f8); border: 1px solid #efe9fb; border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #6b5b95; line-height: 1.6; margin-bottom: 14px; }
.refund-tip b { color: #d4537e; }
.refund-empty { text-align: center; color: #999; font-size: 13px; padding: 40px 0; }
.refund-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(123,104,238,0.06); }
.refund-row-main { flex: 1; min-width: 0; }
.refund-desc { font-size: 13px; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refund-time { font-size: 11px; color: #aaa; margin-top: 3px; }
.refund-row-right { display: flex; align-items: center; gap: 10px; margin-left: 10px; flex-shrink: 0; }
.refund-amt { font-size: 15px; font-weight: 700; }
.refund-apply-btn { border: none; background: linear-gradient(135deg, #7B68EE, #D4537E); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: rgba(168,120,226,0.2); }
.refund-tag { font-size: 11px; color: #bbb; }

/* 聊天室对方正在输入提示（AI回复延迟≥3秒，模拟真人） */
.typing-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 52px;
  min-height: 24px;
}
.typing-bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a8ec8;
  animation: typingPulse 1.4s infinite ease-in-out;
}
.typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
.typing-row .sub-msg-bubble {
  background: linear-gradient(135deg, #f8f6ff, #f4efff);
  color: #6b5b95;
}