:root {
  --bg: #14142b;
  --bg-soft: #1b1b38;
  --card: #20204a;
  --card-hover: #282856;
  --accent: #e94560;
  --accent2: #a855f7;
  --green: #4ecca3;
  --gold: #f5c542;
  --text: #e8e8f0;
  --muted: #8b8ba8;
  --border: #2e2e5e;
  --bubble-user: linear-gradient(135deg, #5b3fb0, #7c4dd6);
  --bubble-ai: #262650;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  overscroll-behavior-x: none; /* 阻止浏览器横向边缘手势 */
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 85%, rgba(233,69,96,0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(168,85,247,0.07) 0%, transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(78,204,163,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 14px;
}

/* 更多菜单（收纳低频操作，给聊天区让空间） */
.more-menu {
  position: absolute;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 160px;
  z-index: 80;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.more-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85em;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.more-item:hover {
  background: var(--bg);
  color: var(--green);
}

/* ===== 手机自适应优化（安全区 / 动态视口 / iOS 键盘 / 小屏横屏） ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  touch-action: manipulation; /* 禁用双击缩放延迟，点击响应更快 */
}

/* 动态视口：地址栏收起/展开时高度正确（旧浏览器回退 100vh） */
.home-screen, .pick-screen, .main-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* iPhone 刘海屏安全区 */
header {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.input-area {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* 输入框字号 ≥16px：防止 iOS 聚焦时页面自动放大 */
.input-wrap textarea {
  font-size: 16px;
}

/* 去掉点击高亮残留 */
.msg .bubble, .role-card, .pick-role, .home-role-mini, .btn, .icon-btn, .cat-tab, .field-chip, .sort-chip {
  -webkit-tap-highlight-color: transparent;
}

/* 超小屏（≤360px，如 iPhone SE/老安卓）微调 */
@media (max-width: 360px) {
  .brand h1 { font-size: 0.95em; }
  .brand .tagline { max-width: 56px; font-size: 0.64em; }
  .brand .back-home-btn { padding: 6px 8px; font-size: 0.74em; }
  .header-actions { gap: 5px; }
  .home-hero { padding: 40px 14px 26px; }
  .home-logo-svg { width: 88px; height: 88px; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .modal { padding: 18px 16px; }
  .msg .body { max-width: 82%; }
  .msg .bubble { font-size: 0.9em; }
  .role-card { min-width: 96px; }
  .home-foot-light { margin: 22px 20px 0; }
}

/* 横屏小高度：压缩首页顶部，避免滚动过多 */
@media (max-height: 520px) and (orientation: landscape) {
  .home-hero { padding: 24px 20px 16px; }
  .home-logo-svg { width: 72px; height: 72px; }
  .home-hero h1 { margin-top: 10px; font-size: 1.5em; }
  .home-cta { padding: 12px; }
  .home-divider { margin: 18px 0 10px; }
}

/* ===== 头部 ===== */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 0 10px;
  background: linear-gradient(180deg, var(--bg) 65%, transparent);
  backdrop-filter: blur(8px);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.brand .logo {
  font-size: 2em;
  animation: sway 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.brand h1 {
  font-size: 1.25em;
  white-space: nowrap; /* 禁止竖排换行 */
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand .tagline {
  font-size: 0.72em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px; /* fix81: 120→190，放行完整「正在和 xx 聊天」 */
  flex-shrink: 1;
  min-width: 0;
}

/* 窄屏：标题与副标题进一步收敛，防止挤成竖排 */
@media (max-width: 480px) {
  .brand h1 { font-size: 1.05em; }
  .brand .tagline { max-width: 150px; } /* fix81: 76→150 */
  .brand .logo { display: none; }
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.member-badge {
  display: none;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #7a5c00, #a87f00);
  color: #ffe9a8;
  font-size: 0.72em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(245,197,66,0.25);
}

.member-badge.show { display: flex; }

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  position: relative;
}

.btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid var(--bg);
}

.icon-btn:hover { color: var(--text); border-color: var(--accent2); }

.icon-btn .ic {
  width: 17px;
  height: 17px;
  display: block;
}

.back-home-btn .ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.back-home-btn .back-arrow {
  font-size: 1.35em;
  line-height: 1;
  font-weight: 400;
  margin-top: -2px;
}

.icon-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78,204,163,0.1);
}

/* 角色选择面板（收起/展开）*/
.role-panel {
  animation: panelIn 0.22s ease-out;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 角色栏 ===== */
.role-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px 12px;
  scrollbar-width: none;
}

.role-bar::-webkit-scrollbar { display: none; }

/* 分类标签 */
.cat-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 0 6px;
}

.cat-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.8em;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.cat-tab:hover { color: var(--text); }

.cat-tab.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78,204,163,0.08);
}

/* 领域筛选标签 */
.field-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 6px;
  scrollbar-width: none;
}

.field-tabs::-webkit-scrollbar { display: none; }

.field-chip {
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.72em;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}

.field-chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245,197,66,0.08);
}

.field-chip:active { transform: scale(0.94); }

.field-chip .fc {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Toast 轻提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,43,0.92);
  color: #e8e8f0;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 0.85em;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  max-width: 80%;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast .toast-btn {
  background: none;
  border: none;
  color: var(--green);
  font-weight: 700;
  margin-left: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
}

body.light .toast { background: rgba(31,36,48,0.92); }

/* 创建角色卡 */
.role-card.create {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.role-card.create .plus {
  font-size: 1.7em;
  color: var(--muted);
  line-height: 1;
}

.role-card.create:hover .plus { color: var(--green); }

.role-card .edit-hint {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.9em;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}

.role-card:hover .edit-hint { opacity: 0.9; }

/* 角色收藏星标 */
.role-card .fav-star {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.85em;
  color: var(--muted);
  opacity: 0.35;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.role-card:hover .fav-star { opacity: 0.8; }

.role-card .fav-star.active {
  color: var(--gold);
  opacity: 1;
}

.role-card {
  position: relative;
  flex-shrink: 0;
  min-width: 108px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.role-card:hover { background: var(--card-hover); transform: translateY(-2px); }

.role-card.active {
  border-color: var(--green);
  background: linear-gradient(180deg, #1e3d35, #20204a);
  box-shadow: 0 4px 16px rgba(78,204,163,0.15);
}

.role-card .avatar {
  font-size: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(78, 204, 163, 0.06);
}

/* 其他头像容器尺寸兜底（emoji/img/svg 通用，防止图片撑大） */
.pick-role .pr-avatar {
  font-size: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 6px;
}

.forward-list .avatar {
  font-size: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.home-role-mini .em {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.role-card .name {
  font-size: 0.85em;
  font-weight: 600;
}

.role-card .tag {
  font-size: 0.68em;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* ===== 聊天区 ===== */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 8px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 系统提示条 */
.system-hint {
  align-self: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75em;
  padding: 6px 14px;
  border-radius: 20px;
  text-align: center;
  max-width: 90%;
}

/* 消息行 */
.msg {
  display: flex;
  gap: 10px;
  animation: fadeIn 0.35s ease-out;
  max-width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.user {
  flex-direction: row-reverse;
}

.msg .avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  background: var(--card);
  border: 1px solid var(--border);
}

.msg.user .avatar {
  background: linear-gradient(135deg, #5b3fb0, #7c4dd6);
  border: none;
}

.msg .body {
  max-width: 76%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msg .bubble {
  padding: 11px 15px;
  border-radius: 6px var(--radius) var(--radius) var(--radius);
  line-height: 1.65;
  font-size: 0.93em;
  word-break: break-word;
  white-space: pre-wrap;
  background: var(--bubble-ai);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.msg.user .bubble {
  background: var(--bubble-user);
  border-radius: var(--radius) 6px var(--radius) var(--radius);
}

.msg .time {
  font-size: 0.68em;
  color: var(--muted);
  padding: 0 4px;
}

.msg.user .time { text-align: right; }

/* 打字指示器 */
.typing-dots {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px;
  background: var(--bubble-ai);
  border-radius: 6px var(--radius) var(--radius) var(--radius);
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: blink 1.2s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1.1); }
}

/* ===== 额度条 ===== */
.quota-wrap {
  padding: 4px 0 8px;
}

.quota-bar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
}

.quota-bar .quota-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78em;
  margin-bottom: 6px;
}

.quota-bar .quota-left {
  color: var(--muted);
}

.quota-bar .quota-left b { color: var(--text); }

.quota-bar .upgrade-link {
  color: var(--gold);
  cursor: pointer;
  font-weight: 600;
  border: none;
  background: none;
  font-size: 0.95em;
  font-family: inherit;
}

.quota-bar .upgrade-link:hover { text-decoration: underline; }

.quota-track {
  height: 6px;
  background: #14142b;
  border-radius: 3px;
  overflow: hidden;
}

.quota-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.quota-fill.low { background: linear-gradient(90deg, #ff7b54, var(--accent)); }

.quota-bar.locked .quota-fill { background: linear-gradient(90deg, #7a3040, var(--accent)); }

/* 额度充足时淡化（不抢夺注意力，但购买通道保持醒目）*/
.quota-bar.subtle {
  padding: 4px 14px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.quota-bar.subtle .quota-left { opacity: 0.5; }
.quota-bar.subtle .quota-track { height: 3px; opacity: 0.5; }
.quota-bar.subtle .quota-fill { box-shadow: none; }
.quota-bar.subtle .mood-mini-btn { opacity: 0.55; }

/* 打卡轻按钮 */
.mood-mini-btn {
  background: none;
  border: none;
  color: var(--green);
  font-size: 0.74em;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.85;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.mood-mini-btn:hover { opacity: 1; }

/* 金色开通会员按钮 */
.upgrade-pill {
  background: linear-gradient(135deg, #f5c542, #d9a620);
  color: #3a2b00;
  font-size: 0.72em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(245,197,66,0.3);
  transition: all 0.15s;
  white-space: nowrap;
}

.upgrade-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,197,66,0.45);
}

.upgrade-pill:active { transform: scale(0.95); }

/* ===== 输入区 ===== */
.input-area {
  position: sticky;
  bottom: 0;
  background: linear-gradient(0deg, var(--bg) 75%, transparent);
  padding: 8px 0 20px;
  z-index: 15;
}

.input-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}

.input-wrap:focus-within { border-color: var(--green); }

.input-wrap textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95em;
  padding: 8px 6px;
  resize: none;
  outline: none;
  min-height: 42px;
  max-height: 110px;
  line-height: 1.5;
}

.input-wrap textarea::placeholder { color: var(--muted); }

.send-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--green), #35b183);
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(78,204,163,0.3);
}

.send-btn:hover:not(:disabled) { transform: scale(1.07); }
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ===== 模态框 ===== */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(8,8,20,0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-mask.show { display: flex; }

.modal {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  max-width: 400px;
  width: 100%;
  padding: 24px;
  box-shadow: var(--shadow);
  animation: pop 0.25s ease-out;
  max-height: 85vh;
  overflow-y: auto;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.modal h2 {
  font-size: 1.1em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal .close-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3em;
  cursor: pointer;
  line-height: 1;
}

.modal .close-x:hover { color: var(--text); }

/* 会员首月优惠提示 */
.sale-note {
  background: rgba(245, 197, 66, 0.12);
  border: 1px dashed var(--gold);
  color: var(--gold);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8em;
  margin-bottom: 12px;
  text-align: center;
}

.sale-note b {
  font-size: 1.1em;
}

/* 会员面板 */
.member-hero {
  text-align: center;
  padding: 10px 0 16px;
}

.member-hero .crown {
  font-size: 3em;
  display: block;
  animation: float 2.5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 10px 0 4px;
}

.price-row .symbol { font-size: 1em; color: var(--gold); }
.price-row .amount { font-size: 2.2em; font-weight: 800; color: var(--gold); }
.price-row .unit { color: var(--muted); font-size: 0.85em; }

.perks {
  list-style: none;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perks li { display: flex; align-items: center; gap: 8px; color: var(--text); }

.perks .check {
  color: var(--green);
  font-weight: 700;
}

.btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5c542, #d9a620);
  color: #3a2b00;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(245,197,66,0.3);
}

.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85em;
  cursor: pointer;
  font-family: inherit;
  margin-top: 10px;
}

.btn-ghost:hover { color: var(--text); }

/* 支付弹窗 */
.pay-qr-box {
  background: #fff;
  border-radius: 12px;
  width: 180px;
  height: 180px;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-qr-box svg { width: 160px; height: 160px; }

.pay-hint {
  text-align: center;
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.7;
}

.pay-success {
  text-align: center;
  padding: 16px 0;
}

.pay-success .big-check {
  font-size: 3.2em;
  display: block;
  margin-bottom: 8px;
  animation: pop 0.5s ease-out;
}

/* 设置面板 */
.setting-field { margin-bottom: 12px; }

.setting-field label {
  display: block;
  font-size: 0.8em;
  color: var(--muted);
  margin-bottom: 5px;
}

.setting-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.88em;
  outline: none;
  font-family: inherit;
}

.setting-field input:focus { border-color: var(--accent2); }

.cu-area {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.88em;
  outline: none;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}

.cu-area:focus { border-color: var(--accent2); }

/* 头像选择器 */
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.avatar-picker button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}

.avatar-picker button:hover {
  border-color: var(--green);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.avatar-picker button.picked {
  border-color: var(--green);
  background: rgba(78,204,163,0.15);
}

/* AI 智能填充按钮 */
.ai-fill-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--gold);
  border-radius: 12px;
  background: rgba(245,197,66,0.06);
  color: var(--gold);
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ai-fill-btn:hover:not(:disabled) {
  background: rgba(245,197,66,0.14);
}

.ai-fill-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.setting-note {
  font-size: 0.75em;
  color: var(--muted);
  line-height: 1.7;
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-chip {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.82em;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.preset-chip:hover { color: var(--text); }

.preset-chip.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78, 204, 163, 0.08);
}

.test-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  margin-bottom: 12px;
  background: rgba(78,204,163,0.04);
  transition: all 0.15s;
}

.switch-row:hover { border-color: var(--green); }

.switch-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}

.setting-field input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.test-status { font-size: 0.8em; color: var(--muted); }
.test-status.ok { color: var(--green); }
.test-status.fail { color: var(--accent); }

.proxy-help {
  margin-top: 10px;
  font-size: 0.78em;
  color: var(--muted);
}

.proxy-help summary {
  cursor: pointer;
  color: var(--accent2);
}

.proxy-steps {
  font-size: 0.82em;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: 8px;
}

.code-box {
  width: 100%;
  height: 130px;
  margin-top: 8px;
  background: #10102a;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.72em;
  resize: none;
  outline: none;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ============ 界面优化 v2 ============ */

/* 聊天主界面固定视口高度：让 chat-area 成为唯一滚动区（修复手机端滚动失效）*/
.main-screen {
  min-height: 100vh;
  max-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.chat-area {
  min-height: 0; /* flex 子项允许收缩，否则高度溢出 */
}

/* 背景：星空 + 柔光斑 */
body::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(233,69,96,0.1) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(168,85,247,0.1) 0%, transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(78,204,163,0.05) 0%, transparent 50%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,0.16) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,0.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 42%, rgba(255,255,255,0.14) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 78%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 90%, rgba(255,255,255,0.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 48%, rgba(255,255,255,0.1) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 88%, rgba(255,255,255,0.15) 50%, transparent 51%);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* 角色卡：悬浮上浮 + 激活光晕 */
.role-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.role-card:active {
  transform: translateY(0) scale(0.96);
}

.role-card.active {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(78,204,163,0.16), rgba(32,32,74,0.9));
  box-shadow: 0 0 0 1px var(--green), 0 6px 18px rgba(78,204,163,0.22);
}

/* 分类标签按压反馈 */
.cat-tab { transition: transform 0.15s ease; }
.cat-tab:active { transform: scale(0.94); }

/* 气泡：柔和阴影 + 轻触反馈 */
.msg .bubble {
  box-shadow: 0 3px 14px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, background 0.2s ease;
}

.msg .bubble:active { transform: scale(0.99); }

.msg.user .bubble {
  box-shadow: 0 3px 16px rgba(124,77,214,0.4);
}

/* 日期分割线 */
.day-divider {
  align-self: center;
  font-size: 0.7em;
  color: var(--muted);
  background: rgba(43,43,90,0.75);
  padding: 4px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  letter-spacing: 1px;
}

/* 角色欢迎卡 */
.role-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px 22px;
  margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(78,204,163,0.06), transparent);
  border-bottom: 1px solid var(--border);
  animation: fadeIn 0.4s ease-out;
}

.role-intro .ri-avatar {
  font-size: 2.6em;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.role-intro .ri-name {
  margin-top: 8px;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}

.role-intro .ri-tag {
  margin-top: 3px;
  font-size: 0.74em;
  color: var(--green);
  font-weight: 600;
}

.role-intro .ri-desc {
  margin-top: 6px;
  font-size: 0.76em;
  color: var(--muted);
  line-height: 1.6;
  max-width: 92%;
}

.role-intro .ri-switch {
  margin-top: 12px;
  background: rgba(78,204,163,0.1);
  border: 1px dashed var(--green);
  color: var(--green);
  font-size: 0.76em;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.role-intro .ri-switch:hover {
  background: rgba(78,204,163,0.2);
}

/* 话题引导 chips */
.topic-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px 8px 4px;
}

.topic-chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78em;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.topic-chip:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78,204,163,0.08);
  transform: translateY(-1px);
}

.topic-chip:active { transform: scale(0.95); }

/* 回到底部按钮 */
.chat-area { position: relative; }

.scroll-bottom-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--green);
  font-size: 1.05em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.scroll-bottom-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-bottom-btn:active { transform: translateY(0) scale(0.9); }

/* 输入区：胶囊化 */
.input-wrap {
  border-radius: 26px;
  padding: 6px 6px 6px 18px;
}

.input-wrap textarea { padding: 10px 0; }

.send-btn {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}

.send-btn:hover:not(:disabled) {
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 4px 18px rgba(78,204,163,0.5);
}

.send-btn:active:not(:disabled) { transform: scale(0.88); }

/* 额度进度条光晕 */
.quota-fill {
  box-shadow: 0 0 10px rgba(78,204,163,0.45);
  transition: width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* 会员徽章流光 */
.member-badge {
  position: relative;
  overflow: hidden;
}

.member-badge.show::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shine 2.8s ease-in-out infinite;
}

@keyframes shine {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

/* 模态框弹跳感 */
.modal { animation: popSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes popSpring {
  from { opacity: 0; transform: scale(0.88) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 预设 chip 按压反馈 */
.preset-chip { transition: all 0.15s ease; }
.preset-chip:active { transform: scale(0.93); }

.btn-primary { transition: all 0.18s ease; }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }

/* 手机键盘安全区 */
.input-area {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* 移动端紧凑化 */
@media (max-width: 480px) {
  header { padding: 12px 0 8px; }
  header .logo { font-size: 1.6em; }
  .brand h1 { font-size: 1.05em; }
  .brand .tagline { font-size: 0.68em; }
  .cat-tabs { padding: 2px 0 4px; }
  .cat-tab { padding: 5px 12px; font-size: 0.75em; }
  .role-bar { padding: 6px 2px 8px; }
  .role-card { min-width: 84px; padding: 8px 8px; border-radius: 12px; }
  .role-card .avatar { font-size: 1.5em; }
  .role-card .name { font-size: 0.78em; }
  .role-card .tag { font-size: 0.62em; }
  .msg .avatar { width: 32px; height: 32px; font-size: 1.05em; }
  .msg .body { max-width: 80%; }
  .quota-wrap { padding: 2px 0 6px; }
  .input-wrap { border-radius: 22px; padding: 5px 5px 5px 14px; }
}

@media (max-width: 480px) {
  .cat-tabs {
    padding: 4px 0 6px;
  }
  .role-bar {
    padding: 10px 2px 12px;
  }
  .role-card {
    min-width: 96px;
    padding: 8px 10px;
  }
  .modal { padding: 18px; }
}

/* ============ 浅色主题 ============ */
body.light {
  --bg: #f0f2f5;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --card-hover: #f5f7fa;
  --accent: #e94560;
  --accent2: #7c3aed;
  --green: #16a34a;
  --gold: #d97706;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #d1d5db;
  --bubble-user: linear-gradient(135deg, #7c3aed, #a855f7);
  --bubble-ai: #f3f4f6;
}

body.light::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(233,69,96,0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(124,58,237,0.04) 0%, transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(22,163,74,0.03) 0%, transparent 50%);
}

body.light::after { display: none; }

body.light .msg .bubble { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
body.light .msg.user .bubble { box-shadow: 0 2px 10px rgba(124,58,237,0.25); }
body.light .setting-note { background: #f3f4f6; }
body.light .code-box { background: #f3f4f6; color: #16a34a; }
body.light .day-divider { background: #e5e7eb; }
body.light .switch-row { background: rgba(22,163,74,0.04); border-color: #d1d5db; }
body.light .cu-area { background: #f9fafb; }
body.light .setting-field input { background: #f9fafb; }
body.light .setting-field input:focus { border-color: var(--accent2); }
body.light header { background: linear-gradient(180deg, var(--bg) 65%, transparent); }
body.light .input-area { background: linear-gradient(0deg, var(--bg) 75%, transparent); }
body.light .quota-track { background: #e5e7eb; }
body.light .modal { background: var(--bg-soft); }
body.light .typing-dots { background: var(--bubble-ai); }
body.light .scroll-bottom-btn { background: var(--card); }
body.light .preset-chip { background: var(--card); }
body.light .msg.user .bubble { color: #ffffff; }
body.light .role-card.active {
  background: linear-gradient(180deg, rgba(22,163,74,0.1), rgba(255,255,255,0.95));
  box-shadow: 0 0 0 1px var(--green), 0 4px 14px rgba(22,163,74,0.18);
}
body.light .role-card { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }

/* ============ 搜索条 ============ */
.search-bar {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 6px 14px;
  margin: 4px 0 6px;
  transition: border-color 0.2s;
}

.search-bar.show { display: flex; }

.search-bar:focus-within { border-color: var(--green); }

.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88em;
  outline: none;
  padding: 6px 0;
}

.search-bar input::placeholder { color: var(--muted); }

.search-count {
  font-size: 0.75em;
  color: var(--muted);
  white-space: nowrap;
}

.search-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1em;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  font-family: inherit;
}

.search-clear:hover { color: var(--accent); }

/* 搜索范围切换 */
.search-scope {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72em;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}

.search-scope.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78,204,163,0.08);
}

/* 搜索结果列表 */
.search-results {
  display: none;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0 8px;
}

.search-results.show { display: flex; }

.search-result-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.85em;
}

.search-result-item:hover {
  border-color: var(--green);
  background: var(--card-hover);
}

.search-result-item .who {
  font-size: 0.85em;
  color: var(--green);
  font-weight: 600;
  margin-right: 6px;
}

.search-result-item .when {
  font-size: 0.8em;
  color: var(--muted);
  float: right;
}

.search-result-item .preview {
  margin-top: 3px;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-item mark {
  background: rgba(245,197,66,0.3);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* 消息高亮（定位到搜索结果时）*/
.msg.highlight .bubble {
  animation: highlightPulse 1.8s ease-out;
}

@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 3px 14px rgba(0,0,0,0.28); }
  20%, 60% { box-shadow: 0 0 0 3px var(--gold), 0 4px 20px rgba(245,197,66,0.4); }
}

/* ============ 收藏列表 ============ */
.fav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
}

.fav-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
}

.fav-item .fav-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  color: var(--muted);
  margin-bottom: 6px;
}

.fav-item .fav-head .avatar { font-size: 1.1em; }

.fav-item .fav-head .name { color: var(--green); font-weight: 600; }

.fav-item .fav-text {
  font-size: 0.9em;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.fav-item .fav-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.fav-item .fav-actions button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78em;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.fav-item .fav-actions button:hover { color: var(--text); border-color: var(--text); }
.fav-item .fav-actions .del:hover { color: var(--accent); border-color: var(--accent); }

.fav-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 0;
  font-size: 0.88em;
}

/* ============ 护眼绿主题 ============ */
body.green {
  --bg: #0a1f14;
  --bg-soft: #0e2a1a;
  --card: #133020;
  --card-hover: #1a3a28;
  --accent: #4ecca3;
  --accent2: #5ba87a;
  --green: #4ecca3;
  --gold: #b5d99c;
  --text: #d4ebe0;
  --muted: #6a9a7a;
  --border: #1e4030;
  --bubble-user: linear-gradient(135deg, #2d6a4f, #40916c);
  --bubble-ai: #133020;
}

body.green::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(78,204,163,0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(91,168,122,0.06) 0%, transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(78,204,163,0.04) 0%, transparent 50%);
}

body.green::after {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,0.1) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,0.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 42%, rgba(255,255,255,0.08) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 78%, rgba(255,255,255,0.12) 50%, transparent 51%);
}

body.green .msg.user .bubble { color: #ffffff; }
body.green .quota-fill { box-shadow: 0 0 10px rgba(78,204,163,0.4); }

/* ============ 头部按钮紧凑化（多按钮适配） ============ */
.header-actions { gap: 6px; }

@media (max-width: 480px) {
  .header-actions { gap: 4px; }
  .icon-btn { width: 30px; height: 30px; font-size: 0.88em; border-radius: 8px; }
  .member-badge { font-size: 0.65em; padding: 3px 7px; }
}

/* ============ 转发角色选择 ============ */
.forward-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.fwd-role {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.fwd-role:hover {
  border-color: var(--green);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.fwd-role .avatar { font-size: 1.6em; display: block; margin-bottom: 4px; }
.fwd-role .name { font-size: 0.82em; font-weight: 600; color: var(--text); }
.fwd-role .tag { font-size: 0.68em; color: var(--muted); margin-top: 2px; }

/* ============ 心情打卡 ============ */
.mood-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.mood-note-row {
  display: flex;
  gap: 8px;
}

.mood-note-row input {
  flex: 1;
}

.dice-btn {
  width: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.15s;
}

.dice-btn:hover {
  border-color: var(--gold);
  background: var(--card-hover);
  transform: rotate(15deg);
}

.dice-btn:active { transform: rotate(15deg) scale(0.9); }

.mood-emoji {
  width: 56px;
  height: 68px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.15s;
  font-family: inherit;
  color: var(--text);
}

.mood-emoji:hover { border-color: var(--green); background: var(--card-hover); transform: translateY(-2px); }
.mood-emoji.picked { border-color: var(--green); box-shadow: 0 0 0 2px rgba(78,204,163,0.3); }
.mood-emoji span { font-size: 0.55em; font-weight: 600; color: var(--muted); }

.mood-cal-wrap {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.mood-cal-title {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.mood-streak {
  font-size: 0.82em;
  color: var(--gold);
  margin-bottom: 8px;
  padding: 4px 0;
  font-weight: 600;
}

.mood-streak .milestone {
  display: block;
  margin-top: 2px;
  font-size: 0.88em;
  color: var(--accent);
  font-weight: 700;
}

.mood-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 0.8em;
  text-align: center;
}

.mood-cal .day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.9em;
  cursor: default;
}

.mood-cal .day.has { background: rgba(78,204,163,0.12); color: var(--green); font-size: 1.1em; }
.mood-cal .day.today { border: 1.5px solid var(--green); }
.mood-cal .day.dow { font-size: 0.7em; color: var(--muted); opacity: 0.6; }

.mood-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.78em;
}

.mood-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border-radius: 8px;
  padding: 4px 8px;
}

.mood-stat-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--green);
  min-width: 4px;
}

/* ============ 首页 ============ */
.home-screen {
  min-height: 100vh;
  padding-bottom: 40px;
}

.home-hero {
  text-align: center;
  padding: 56px 20px 30px;
}

.home-logo {
  font-size: 4.2em;
  display: block;
  animation: sway 3.5s ease-in-out infinite;
}

/* SVG 树洞 logo（复刻参考图）*/
.logo-svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  animation: sway 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(94,234,212,0.35));
}

.home-logo-svg {
  width: 118px;
  height: 118px;
  display: block;
  margin: 0 auto;
  animation: sway 3.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 20px rgba(16,185,129,0.4));
}

@media (max-width: 480px) {
  .home-logo-svg { width: 96px; height: 96px; }
  .logo-svg { width: 32px; height: 32px; }
}

/* ============ 首页极简版 ============ */
.home-screen {
  position: relative;
}

/* 顶部氛围光晕（柔和月光，呼应官网气质） */
.home-screen::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, 90vw);
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 204, 163, 0.10) 0%, transparent 65%);
  pointer-events: none;
}

.home-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 20px 34px;
}

.home-hero h1 {
  font-size: 2em;
  margin-top: 20px;
  letter-spacing: 6px;
  background: linear-gradient(135deg, #67e8f9, #e9d5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-hero .home-slogan {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.95em;
  line-height: 1.8;
}

/* 首屏数据点：9 位精灵 · 10 条免费 · 仅存本机 */
.home-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.76em;
  letter-spacing: 1px;
}

.home-hero-stats i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}

.home-hero-stats b {
  color: var(--green);
  font-weight: 600;
  margin: 0 1px;
}

.home-logo-svg {
  animation: homeFloat 5s ease-in-out infinite;
}

@keyframes homeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.home-cta {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--green), #35b183);
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 28px rgba(78,204,163,0.35);
  transition: all 0.2s;
}

.home-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(78,204,163,0.45); }
.home-cta:active { transform: scale(0.97); }

/* CTA 箭头 hover 滑动 */
.home-cta .cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.home-cta:hover .cta-arrow {
  transform: translateX(5px);
}

.home-cta-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.72em;
  margin-top: 10px;
}

/* 角色名不截断：字号收紧 + 允许换行（覆盖旧 ellipsis 规则，全名完整显示） */
.pick-role .pr-name {
  font-size: 12px;
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}

.home-role-mini .nm {
  font-size: 11px;
  white-space: normal;
  line-height: 1.3;
}

.pick-suggest .pr-row .pr-name,
.pick-search-res .pr-row .pr-name {
  font-size: 12px;
  white-space: normal;
}

/* 订单会员码行：弹性布局 + 复制按钮（高特异性覆盖） */
.order-item .oi-code {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 10px;
}

.order-item .oi-copy {
  background: var(--gold);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82em;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  font-weight: 600;
}

.order-item .oi-copy:hover {
  opacity: 0.85;
}

.home-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
  color: var(--muted);
  font-size: 0.72em;
  letter-spacing: 1px;
}

.home-divider::before,
.home-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.home-roles {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}

.home-roles::-webkit-scrollbar { display: none; }

.home-role-mini {
  flex-shrink: 0;
  width: 62px;
  background: transparent;
  border: none;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
}

.home-role-mini .em {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  margin: 0 auto 6px;
  transition: all 0.15s;
}

.home-role-mini:hover .em {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(78,204,163,0.25);
}

.home-role-mini:active { transform: scale(0.94); }

.home-role-mini .nm {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 聊过标记（小绿点）*/
.home-role-mini .em {
  position: relative;
}

/* 3D 卡通头像（SVG）*/
.av-3d {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.home-role-mini .chat-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--bg);
}

.home-role-mini .fav-dot {
  display: inline-block;
  font-size: 0.55em;
  color: var(--gold);
  margin-left: 2px;
}

/* 查看全部卡 */
.home-role-mini.home-role-more .em {
  background: rgba(78,204,163,0.08);
  border-style: dashed;
  color: var(--green);
  font-weight: 700;
}

/* CTA 呼吸光晕 */
.home-cta {
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 28px rgba(78,204,163,0.35); }
  50% { box-shadow: 0 8px 42px rgba(78,204,163,0.6); }
}

/* 底部轻文案淡换 */
.home-foot-light {
  transition: opacity 0.6s ease;
}

/* ============ 首页底部：轻文案 + 服务状态 + 操作按钮（排版优化） ============ */
.home-foot-light {
  text-align: center;
  color: var(--muted);
  font-size: 0.74em;
  line-height: 1.9;
  margin: 24px 32px 0;
  letter-spacing: 0.5px;
}

.home-server {
  text-align: center;
  font-size: 0.7em;
  color: var(--muted);
  margin: 14px 24px 0;
  opacity: 0.85;
  line-height: 1.8;
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  width: 100%;
  max-width: 400px;
  margin: 16px auto 0;
  padding: 0 16px;
}

/* 安静的文字链接风格：无框无背景、低饱和，不抢核心按钮注意力 */
.share-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.76em;
  font-weight: 400;
  padding: 9px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
  opacity: 0.8;
  filter: grayscale(0.6);
  transition: all 0.2s;
  white-space: nowrap;
}

.share-btn:hover {
  color: var(--text);
  opacity: 1;
  filter: grayscale(0);
  background: rgba(78, 204, 163, 0.05);
}

.share-btn:active {
  transform: scale(0.97);
}

/* 首页底部四链接：显示不全修复（可折行不截断 + 底部安全区） */
.home-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  padding: 0 12px;
}

.share-btn {
  font-size: 0.72em;
  padding: 8px 2px;
  white-space: normal;
  line-height: 1.5;
  letter-spacing: 0;
  min-width: 0;
  overflow: visible;
  text-align: center;
}

.home-screen {
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
}

/* 首页底部四链接：单行原生 App 风（无框 + 图标文字 + 细竖线分隔） */
.home-actions {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 420px;
  margin: 14px auto 0;
  padding: 0 6px;
  flex-wrap: nowrap;
}

.home-actions .share-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.7em;
  font-weight: 400;
  padding: 8px 2px;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.85;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
  line-height: 1;
}

.home-actions .share-btn .sb-ic {
  font-size: 0.95em;
  flex-shrink: 0;
}

.home-actions .share-btn .sb-tx {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-actions .share-btn + .share-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(139, 139, 168, 0.35);
}

.home-actions .share-btn:hover {
  color: var(--text);
  opacity: 1;
  background: none;
}

.home-actions .share-btn:active {
  transform: scale(0.96);
}

/* ===== 标签主色统一：柔和暖金（选中微光、未选中低透明度、去绿色突兀） ===== */
/* 顶栏描边胶囊按钮：绿 → 暖金 */
header .back-home-btn {
  border-color: rgba(245, 197, 66, 0.45);
  color: var(--gold);
  background: rgba(245, 197, 66, 0.05);
}

header .back-home-btn:hover {
  background: rgba(245, 197, 66, 0.12);
  border-color: var(--gold);
}

header .icon-btn:hover {
  color: var(--gold);
  border-color: rgba(245, 197, 66, 0.4);
}

/* 分类标签：未选中降透明，选中暖金微光 */
.cat-tab {
  opacity: 0.72;
}

.cat-tab.active {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 197, 66, 0.1);
  box-shadow: inset 0 0 10px rgba(245, 197, 66, 0.15);
}

.field-chip {
  opacity: 0.72;
}

.field-chip.active {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 197, 66, 0.1);
}

.sort-chip {
  opacity: 0.72;
}

.sort-chip.active {
  opacity: 1;
}

/* 此刻感觉 chips */
.mq-chip {
  opacity: 0.72;
}

.mq-chip.active {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 197, 66, 0.1);
}

/* 圆形头像与角标：绿 → 暖金 */
.pick-role .pr-avatar {
  background: rgba(245, 197, 66, 0.06);
  border-color: rgba(245, 197, 66, 0.25);
}

.pick-role:hover .pr-avatar {
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(245, 197, 66, 0.2);
}

.pick-role .pr-chat {
  background: rgba(245, 197, 66, 0.12);
  color: var(--gold);
}

.pick-role .pr-fav {
  color: var(--gold);
}

/* 搜索输入框聚焦 */
.pick-search input:focus {
  border-color: var(--gold);
}

.role-search input:focus {
  border-color: var(--gold);
}

/* 聊天页角色面板选中态：绿 → 暖金 */
.role-card.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.14), rgba(32, 32, 74, 0.9));
  box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(245, 197, 66, 0.18);
}

/* 二级页顶部留白：避开手机状态栏 + 拉大标题与切换选项卡间距 */
.pick-header {
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
}

.pick-body .pick-sort {
  padding-top: 14px;
}

/* ===== 头像统一微光边框 + 卡片统一渐变光晕（弱化各图片背景色差异） ===== */
/* 此刻感觉标签区：与搜索框拉开呼吸感 */
#moodQuick {
  margin-top: 14px;
}

/* 未读气泡角标：胶囊高亮，暗色下醒目 */
.pick-role .pr-chat {
  background: var(--gold);
  color: #3a2b00;
  font-weight: 700;
  font-size: 0.72em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(245, 197, 66, 0.4);
}

/* 二级页角色卡：头像放大至卡片宽度 ~66%，外发光双层圆环强化视觉焦点 */
.pick-role .pr-avatar {
  width: 66% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width: 116px;
  margin: 6px auto 10px;
  box-shadow:
    0 0 0 3px rgba(245, 197, 66, 0.14),
    0 0 18px rgba(245, 197, 66, 0.24);
}

img.av-3d {
  object-fit: cover;
}

/* 名人分类 slogan：二级页领域筛选下方（暖金氛围，仅名人 tab） */
#celebSlogan.pick-slogan {
  color: var(--gold);
  opacity: 0.9;
  letter-spacing: 1px;
}

/* 打字机金色光标 + 滚动条金化 */
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--gold);
  border-radius: 1px;
  animation: twBlink 0.9s steps(2) infinite;
}

@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 197, 66, 0.28);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 197, 66, 0.45);
}

/* 聊天欢迎卡：角色大头像 + 光环（进入对话的第一视觉焦点） */
.role-intro .ri-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(245, 197, 66, 0.16),
    0 0 24px rgba(245, 197, 66, 0.26);
  margin-bottom: 6px;
}

/* 首页主按钮：金底深字，暖金主色收口 */
.home-cta {
  background: linear-gradient(135deg, #f5c542, #d9a620) !important;
  color: #3a2b00 !important;
  box-shadow: 0 8px 28px rgba(245, 197, 66, 0.32) !important;
}

.home-cta:hover {
  box-shadow: 0 12px 34px rgba(245, 197, 66, 0.42) !important;
}

/* 头像预览层：上传照片的当前头像预览 + 放大预览通用 */
.av-prev {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(245, 197, 66, 0.4);
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.25);
  margin: 2px 8px 8px 0;
  vertical-align: middle;
}

.avatar-preview {
  position: fixed;
  inset: 0;
  z-index: 300;
    background: rgba(10, 10, 24, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.22s ease;
  cursor: zoom-out;
}

.ap-box {
  text-align: center;
  padding: 20px;
}

.ap-avatar {
  width: 210px;
  height: 210px;
  max-width: 70vw;
  max-height: 52vh;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 197, 66, 0.06);
  box-shadow:
    0 0 0 3px rgba(245, 197, 66, 0.3),
    0 0 44px rgba(245, 197, 66, 0.35);
  margin: 0 auto;
  /* 禁止下载/长按 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ap-avatar img,
.ap-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ap-name {
  margin-top: 16px;
  font-size: 1em;
  letter-spacing: 2px;
  color: var(--text);
}

.ap-tip {
  margin-top: 8px;
  font-size: 0.72em;
  color: var(--muted);
  letter-spacing: 1px;
}

/* 输入区聚焦 + 发送按钮：暖金联动，主色统一 */
.input-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.12);
}

.send-btn {
  background: linear-gradient(135deg, #f5c542, #d9a620) !important;
  color: #3a2b00 !important;
}

.send-btn:hover:not(:disabled) {
  box-shadow: 0 4px 18px rgba(245, 197, 66, 0.5);
}

/* 打卡心情选中态：暖金胶囊 */
.mood-picker .mood-emoji.picked,
.mood-picker .mood-emoji.active {
  border-color: var(--gold);
  background: rgba(245, 197, 66, 0.12);
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.2);
}
img.av-3d {
  border-radius: 50%;
  border: 2px solid rgba(245, 197, 66, 0.38);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.16),
    0 0 0 3px rgba(255, 255, 255, 0.05),
    0 0 10px rgba(245, 197, 66, 0.14);
  background: rgba(245, 197, 66, 0.06);
}

svg.av-3d {
  border-radius: 50%;
  border: 2px solid rgba(245, 197, 66, 0.28);
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.1);
  background: rgba(245, 197, 66, 0.04);
}

/* 角色卡片：统一微弱金黄渐变光晕，视觉归一 */
.pick-role,
.role-card,
.home-role-mini {
  background:
    linear-gradient(158deg, rgba(245, 197, 66, 0.055), transparent 58%),
    var(--card);
}

/* 会员续费顺延提示 */
.pay-stack-tip {
  text-align: center;
  font-size: 0.74em;
  color: var(--muted);
  margin: -2px 0 10px;
}

/* 白银首月特惠倒计时条 */
.sale-countdown {
  background: linear-gradient(135deg, rgba(245, 197, 66, 0.12), rgba(245, 197, 66, 0.05));
  border: 1px solid rgba(245, 197, 66, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.78em;
  color: var(--gold);
  text-align: center;
  line-height: 1.6;
}

.sale-countdown b {
  font-size: 1.05em;
}

/* 会员徽章：顶栏完全隐藏，不占任何位置（会员身份移入 ⋯ 菜单 + 额度条），根治重叠 */
#memberBadge.member-badge {
  display: none !important;
}

.more-menu .more-member {
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 0.88em;
}

/* 顶栏导航：描边胶囊按钮（对齐参考图：细描边 + 青绿 + 轻玻璃底） */
header .back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(78, 204, 163, 0.45);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.8em;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  line-height: 1.2;
}

header .back-home-btn:hover {
  background: rgba(78, 204, 163, 0.1);
  border-color: var(--green);
}

header .back-home-btn:active {
  transform: scale(0.95);
}

header .back-home-btn .back-arrow {
  font-size: 1.1em;
  line-height: 1;
}

header .back-home-btn svg.ic {
  width: 14px;
  height: 14px;
}

/* 顶栏图标按钮：轻玻璃底（对齐参考图玻璃拟态） */
header .icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 此刻感觉：搜索框下方的横滑快捷标签（单行滚动，不折行不膨胀） */
#moodQuick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  max-width: 100%;
}

#moodQuick .mq-title {
  font-size: 0.72em;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

#moodQuick .mq-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
  padding-bottom: 2px;
}

#moodQuick .mq-chips::-webkit-scrollbar {
  display: none;
}

#moodQuick .mq-chips .mq-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 角色网格：统一间距 + 底部卡片文字对齐 + 防遮挡 */
.pick-grid {
  gap: 12px 10px;
}

.pick-grid .pick-role .pr-name {
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pick-body {
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

.home-role-mini .nm {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ============ 二级页：角色选择 ============ */
.pick-screen {
  min-height: 100vh;
  padding-bottom: 40px;
}

.pick-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px 10px;
  background: linear-gradient(180deg, var(--bg) 65%, transparent);
  backdrop-filter: blur(8px);
}

.pick-title {
  flex: 1;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}

.pick-body {
  padding-top: 6px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 480px) {
  .pick-grid { gap: 8px; }
}

.pick-role {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}

.pick-role:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}

.pick-role:active { transform: scale(0.95); }

.pick-role .pr-avatar {
  font-size: 2em;
  display: block;
  margin-bottom: 6px;
}

.pick-role .pr-name {
  font-size: 0.88em;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-role .pr-tag {
  font-size: 0.68em;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-role .pr-fav {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.75em;
  color: var(--gold);
}

/* 二级页搜索 */
.pick-search {
  margin: 4px 0 10px;
}

/* 排序切换 */
.pick-sort {
  display: flex;
  gap: 6px;
  padding: 2px 0 10px;
}

.sort-chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74em;
  padding: 4px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.sort-chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245,197,66,0.08);
}

/* 我的名人入口条 */
.my-celeb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
}

.my-celeb-btn {
  background: var(--card);
  border: 1px dashed var(--gold);
  color: var(--gold);
  font-size: 0.76em;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.my-celeb-btn:hover {
  background: rgba(245,197,66,0.1);
}

.my-celeb-tip {
  font-size: 0.7em;
  color: var(--muted);
}

.pick-search input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.88em;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.pick-search input:focus { border-color: var(--green); }
.pick-search input::placeholder { color: var(--muted); }

/* 人数统计 */
.pick-count {
  font-size: 0.68em;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* 圆形头像 */
.pick-role .pr-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(78,204,163,0.07);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  margin: 0 auto 8px;
  transition: all 0.18s;
}

.pick-role:hover .pr-avatar {
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(78,204,163,0.25);
}

/* 空状态 */
.pick-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 0.85em;
}

/* 分类签名 */
.pick-slogan {
  text-align: center;
  color: var(--muted);
  font-size: 0.8em;
  padding: 2px 0 12px;
  opacity: 0.85;
  letter-spacing: 1px;
  transition: opacity 0.3s;
}

/* 聊过角标 */
.pick-role .pr-chat {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.68em;
  opacity: 0.9;
  background: rgba(78,204,163,0.12);
  border-radius: 10px;
  padding: 1px 6px;
  color: var(--green);
}

.home-foot-light {
  text-align: center;
  color: var(--muted);
  font-size: 0.78em;
  opacity: 0.7;
  margin-top: auto;
  padding-top: 30px;
  letter-spacing: 1px;
}

@media (max-width: 480px) {
  .home-hero { padding: 56px 16px 32px; }
  .home-hero h1 { font-size: 1.7em; }
  .home-role-mini { width: 66px; padding: 10px 4px; }
  .home-role-mini .em { font-size: 1.5em; }
}

.home-hero h1 {
  font-size: 1.7em;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--green), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-slogan {
  color: var(--muted);
  font-size: 0.92em;
  margin-top: 8px;
}

.home-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.78em;
}

.home-stats span {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  color: var(--muted);
}

.home-section {
  margin-top: 8px;
}

.home-section-title {
  font-size: 0.95em;
  font-weight: 700;
  padding: 0 4px 10px;
}

.celeb-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-celeb-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.select-celeb-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.celeb-sel-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.celeb-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 14px;
}

.celeb-sel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.85em;
  user-select: none;
}

.celeb-sel-item:hover {
  border-color: var(--green);
  background: var(--card-hover);
}

.celeb-sel-item input {
  accent-color: var(--green);
  cursor: pointer;
}

.celeb-sel-item .em {
  font-size: 1.3em;
}

.home-role-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 8px;
  scrollbar-width: none;
}

.home-role-row::-webkit-scrollbar { display: none; }

.home-role-card {
  flex-shrink: 0;
  width: 92px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.home-role-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.home-role-card:active { transform: scale(0.94); }

.home-role-card .avatar { font-size: 2em; display: block; margin-bottom: 6px; }
.home-role-card .name { font-size: 0.82em; font-weight: 600; }
.home-role-card .tag { font-size: 0.66em; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.home-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.home-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
}

.home-feature span { font-size: 1.5em; flex-shrink: 0; }
.home-feature b { display: block; font-size: 0.9em; }
.home-feature i { display: block; font-style: normal; font-size: 0.78em; color: var(--muted); margin-top: 2px; }

.home-start-btn {
  width: 100%;
  margin-top: 24px;
  padding: 15px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--green), #35b183);
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 2px;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(78,204,163,0.35);
}

.home-start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(78,204,163,0.45); }
.home-start-btn:active { transform: scale(0.97); }

.home-foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.78em;
  margin-top: 18px;
}

/* 首页仪表盘：继续对话 + 今日心情 */
.home-dash {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.home-resume,
.home-mood-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(78,204,163,0.1), var(--card));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.home-resume:hover,
.home-mood-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.resume-avatar,
.mood-big {
  font-size: 2em;
  flex-shrink: 0;
}

.resume-info,
.mood-info {
  flex: 1;
  min-width: 0;
}

.resume-info b,
.mood-info b {
  display: block;
  font-size: 0.9em;
  color: var(--text);
}

.resume-info i,
.mood-info i {
  display: block;
  font-style: normal;
  font-size: 0.76em;
  color: var(--muted);
  margin-top: 3px;
}

.resume-go,
.mood-go {
  flex-shrink: 0;
  background: rgba(78,204,163,0.15);
  border: none;
  color: var(--green);
  font-size: 0.82em;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
}

.resume-go:hover,
.mood-go:hover { background: rgba(78,204,163,0.25); }

/* 我的树洞统计 */
.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.hm {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
}

.hm b {
  display: block;
  font-size: 1.3em;
  color: var(--green);
  font-weight: 700;
}

.hm i {
  display: block;
  font-style: normal;
  font-size: 0.72em;
  color: var(--muted);
  margin-top: 4px;
}

/* 返回按钮 */
.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}

.back-home-btn:hover {
  background: rgba(78,204,163,0.12);
  transform: translateY(-1px);
}

.back-home-btn:active { transform: scale(0.95); }

@media (max-width: 400px) {
  .back-home-btn {
    padding: 4px 9px;
    font-size: 0.75em;
  }
  .back-text { display: none; } /* 窄屏返回按钮只留图标/箭头 */
  .icon-btn { width: 27px; height: 27px; font-size: 0.82em; }
  .header-actions { gap: 3px; }
  .brand { gap: 5px; }
  .brand .tagline { display: none; }
  .brand .logo { font-size: 1.35em; }
  .brand h1 { font-size: 0.98em; }
  .member-badge { display: none !important; }
}

/* 会员徽章与返回按钮文字：≤640px 折叠为皇冠圆点 + 图标化返回，避免与标题重叠 */
@media (max-width: 640px) {
  .member-badge {
    font-size: 0 !important;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .member-badge::before {
    content: '👑';
    font-size: 15px;
    line-height: 1;
  }
  .back-text { display: none; }
}

@media (max-width: 480px) {
  .back-home-btn {
    padding: 4px 9px;
    font-size: 0.75em;
  }
  .home-hero { padding: 44px 16px 24px; }
  .home-logo { font-size: 3.4em; }
  .home-hero h1 { font-size: 1.4em; }
  .home-role-card { width: 80px; padding: 11px 8px; }
  .home-role-card .avatar { font-size: 1.7em; }
}

/* 浅色/绿色主题下首页适配 */
body.light .home-stats span { background: #ffffff; }
body.light .home-feature { background: #ffffff; }
body.light .home-role-card { background: #ffffff; }
body.green .home-stats span { background: #133020; }

/* ============ 消息长按菜单 ============ */
.msg-menu {
  position: fixed;
  z-index: 90;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  padding: 6px;
  display: none;
  min-width: 120px;
  animation: menuPop 0.18s ease-out;
}

.msg-menu.show { display: block; }

@keyframes menuPop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.msg-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.88em;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}

.msg-menu-item:hover { background: var(--card-hover); }

.msg-menu-item.danger { color: var(--accent); }
.msg-menu-item.danger:hover { background: rgba(233,69,96,0.1); }

@media (max-width: 480px) {
  .msg .body { max-width: 82%; }
  .role-card { min-width: 96px; padding: 8px 10px; }
  .modal { padding: 18px; }
}

/* 页面切换过渡动画 */
.home-screen,
.pick-screen,
.main-screen {
  animation: screenIn 0.28s ease-out;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 首页底部轻文案：可点击换句 */
.home-foot-light {
  cursor: pointer;
  user-select: none;
}

.home-foot-light:hover { opacity: 1; }

/* 聊天页当前角色指示可点击（展开角色面板）*/
.brand .tagline {
  cursor: pointer;
  transition: color 0.15s;
}

.brand .tagline:hover { color: var(--green); }

/* 输入字数提示 */
.char-hint {
  text-align: right;
  font-size: 0.7em;
  color: var(--muted);
  padding: 2px 4px 0;
  min-height: 1em;
}

.char-hint.warn { color: var(--accent); }

/* 首页速览滑动引导遮罩 */
.roles-wrap {
  position: relative;
}

.roles-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.2em;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
  pointer-events: none;
  border-radius: 0 12px 12px 0;
}

/* 二级页自定义角色编辑角标 */
.pick-role .pr-edit {
  position: absolute;
  top: 26px;
  right: 8px;
  font-size: 0.7em;
  cursor: pointer;
  opacity: 0.85;
}

/* 名人锁定状态 */
.pick-role.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.pick-role .pr-lock {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.8em;
}

.home-role-mini.locked .em {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.home-role-mini .mini-lock {
  position: absolute;
  bottom: 0;
  right: 4px;
  font-size: 0.72em;
}

.role-card.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.role-card .rc-lock {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.7em;
}

/* 首页分享按钮 */
.home-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.share-btn {
  display: inline-block;
  margin: 0;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.8em;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.share-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* 使用指南 */
.guide-body {
  max-height: 60vh;
  overflow-y: auto;
}

.guide-sec {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.guide-sec:last-child {
  border-bottom: none;
}

.guide-title {
  font-size: 0.92em;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.guide-sec p {
  font-size: 0.84em;
  line-height: 1.95;
  color: var(--muted);
}

.guide-sec b {
  color: var(--green);
}

/* 分享卡片 */
.share-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.share-text {
  font-size: 0.88em;
  line-height: 1.7;
  color: var(--text);
}

.share-link {
  margin-top: 10px;
  font-size: 0.8em;
  color: var(--green);
  word-break: break-all;
  background: rgba(78,204,163,0.07);
  border-radius: 8px;
  padding: 8px 10px;
}

.share-link.empty {
  color: var(--muted);
  background: transparent;
}

/* 情绪分析面板 */
.ana-summary {
  background: linear-gradient(135deg, rgba(78,204,163,0.12), rgba(168,85,247,0.1));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.9em;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 14px;
}

.ana-section {
  margin-bottom: 14px;
}

.ana-title {
  font-size: 0.85em;
  font-weight: 700;
  margin-bottom: 8px;
}

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

.ana-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}

.ana-metric b {
  display: block;
  font-size: 1.2em;
  color: var(--green);
}

.ana-metric i {
  display: block;
  font-style: normal;
  font-size: 0.7em;
  color: var(--muted);
  margin-top: 3px;
}

.ana-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ana-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78em;
}

.ana-bar-row .label {
  width: 42px;
  flex-shrink: 0;
  color: var(--muted);
}

.ana-bar-track {
  flex: 1;
  height: 10px;
  background: var(--card);
  border-radius: 5px;
  overflow: hidden;
}

.ana-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.ana-bar-fill.pos { background: linear-gradient(90deg, var(--green), #67e8f9); }
.ana-bar-fill.neg { background: linear-gradient(90deg, #f59e0b, var(--accent)); }

.ana-bar-row .num {
  width: 30px;
  text-align: right;
  color: var(--text);
  font-weight: 600;
}

.ana-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 0.82em;
}

.ana-role-row .ar-rank {
  color: var(--gold);
  font-weight: 700;
  width: 20px;
}

.ana-role-row .ar-avatar { font-size: 1.2em; }

.ana-role-row .ar-name {
  flex: 1;
  color: var(--text);
  font-weight: 600;
}

.ana-role-row .ar-count {
  color: var(--muted);
}

/* 手动复制框 */
.copy-manual-box {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.9em;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
  margin-bottom: 14px;
  max-height: 40vh;
  overflow-y: auto;
}

/* 正在思考气泡 */
.typing-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bubble-ai);
  border-radius: 6px var(--radius) var(--radius) var(--radius);
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.typing-box .typing-dots {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.typing-text {
  font-size: 0.75em;
  color: var(--muted);
}

/* 角色操作菜单 */
.role-menu .rm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rm-avatar {
  font-size: 2.4em;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(78,204,163,0.08);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rm-info {
  flex: 1;
  min-width: 0;
}

.rm-name {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text);
}

.rm-tag {
  font-size: 0.78em;
  color: var(--green);
  margin-top: 2px;
}

.rm-desc {
  font-size: 0.85em;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 10px;
}

.rm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-row {
  display: flex;
  gap: 8px;
}

.rm-btn {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8em;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.rm-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.rm-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245,197,66,0.08);
}

/* 解锁面板状态条 */
.unlock-status {
  font-size: 0.82em;
  color: var(--muted);
  line-height: 1.8;
  background: var(--card);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.unlock-status b {
  color: var(--gold);
}

/* 支付：订单号 / 状态 / 订单列表 */
.pay-qr-box img {
  width: 100%;
  max-width: 260px;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
}

.pay-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--text);
  background: var(--card);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.pay-order b {
  color: var(--gold);
  letter-spacing: 0.5px;
}

.link-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.8em;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}

.pay-status {
  font-size: 0.82em;
  color: var(--gold);
  text-align: center;
  min-height: 1.2em;
  margin-bottom: 8px;
}

.order-list {
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

/* 客服补发会员码 */
.manual-issue {
  margin-top: 14px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-issue .mi-title {
  font-size: 0.8em;
  color: var(--muted);
}

.manual-issue .preset-row {
  justify-content: flex-start;
}

.manual-issue .preset-chip {
  padding: 6px 14px;
  font-size: 0.82em;
}

.order-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.82em;
  line-height: 1.7;
}

.order-item .oi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.order-item .oi-id {
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.4px;
}

.order-item .oi-meta {
  color: var(--muted);
  font-size: 0.9em;
}

.order-item .oi-code {
  background: rgba(245,197,66,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0;
  font-family: monospace;
  font-size: 0.92em;
  word-break: break-all;
  color: var(--gold);
}

.order-item .oi-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.oi-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: none;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 0.82em;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.oi-btn.confirm {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245,197,66,0.08);
}

.oi-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 用量统计 */
.stats-body {
  max-height: 60vh;
  overflow-y: auto;
}

.stats-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.stats-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.stats-metric b {
  display: block;
  font-size: 1.15em;
  color: var(--green);
}

.stats-metric i {
  font-style: normal;
  font-size: 0.72em;
  color: var(--muted);
}

.stats-title {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 8px;
}

.stats-day {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74em;
  color: var(--muted);
  margin-bottom: 4px;
}

.stats-day span { width: 40px; flex-shrink: 0; }
.stats-day b { width: 70px; text-align: right; color: var(--text); font-weight: 600; }

.stats-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--card);
  overflow: hidden;
}

.stats-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.stats-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76em;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.stats-user span:first-child { flex: 1; color: var(--text); word-break: break-all; }
.stats-user span { color: var(--muted); }
.stats-user b { color: var(--green); font-weight: 600; }

/* 联系客服 */
.contact-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  word-break: break-all;
}

/* 支付环境提示 */
.pay-env-tip {
  background: rgba(245,197,66,0.12);
  border: 1px dashed var(--gold);
  color: var(--gold);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8em;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 表情选择器 */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.emoji-grid button {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.5em;
  padding: 8px 0;
  cursor: pointer;
  line-height: 1;
}

.emoji-grid button:hover {
  border-color: var(--green);
}

/* 快捷短语 */
.quick-btn {
  background: none;
  border: none;
  font-size: 1.15em;
  cursor: pointer;
  padding: 0 4px 0 10px;
  color: var(--muted);
  flex-shrink: 0;
}

.quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}

.quick-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9em;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1.5;
}

.quick-chip:hover {
  border-color: var(--green);
}

/* 聊天页角色面板搜索 */
.role-search {
  padding: 0 12px 8px;
}

.role-search input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85em;
  color: var(--text);
  font-family: inherit;
  outline: none;
}

.role-search input:focus {
  border-color: var(--green);
}

.role-search-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.85em;
  padding: 20px 0;
}

/* 二级页顶栏：首页 | 树洞小图标+标语 | 主题（一排） */
.pick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0 10px;
}

.pick-brand-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.pick-logo-small {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.35));
}

.pick-tagline {
  font-size: 0.84em;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 计数/推荐提示行 */
.pick-meta {
  font-size: 0.72em;
  color: var(--muted);
  text-align: center;
  padding: 2px 0 8px;
}

/* 二级页：此刻感觉 → 推荐精灵 */
.mood-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mood-quick::-webkit-scrollbar { display: none; }

.mq-title {
  font-size: 0.75em;
  color: var(--muted);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.mq-chips {
  display: flex;
  gap: 6px;
}

.mq-chip {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78em;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.mq-chip:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78, 204, 163, 0.06);
}

.mq-chip.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78, 204, 163, 0.12);
}

.mq-chip.mq-more {
  border-style: dashed;
  color: var(--muted);
}

/* 搜索关键词高亮 */
.pick-mark {
  background: rgba(245, 197, 66, 0.35);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* 首页服务器状态标识 */
.home-server {
  text-align: center;
  font-size: 0.75em;
  color: var(--muted);
  margin: 12px 0 4px;
  opacity: 0.85;
}

/* 会员三档选择 */
.tier-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.tier-tab {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  line-height: 1.5;
  transition: all 0.15s;
  font-size: 0.85em;
}

.tier-tab b {
  font-size: 1.15em;
  color: var(--gold);
}

.tier-tab i {
  font-style: normal;
  font-size: 0.7em;
  color: var(--muted);
}

.tier-tab:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.tier-tab.active {
  border-color: var(--gold);
  background: rgba(245,197,66,0.1);
  box-shadow: 0 4px 14px rgba(245,197,66,0.2);
}

    /* ---------- 支付弹窗美化（微信绿主题，仅 payModal） ---------- */
    #payModal .modal {
      background: linear-gradient(180deg, #EAFBF1 0%, #FFFFFF 26%);
      border: 1px solid #BBEAD0;
      border-radius: 22px;
      box-shadow: 0 24px 70px rgba(4, 120, 87, 0.28);
      overflow: hidden;
    }
    #payModal h2 {
      margin: -18px -16px 12px;
      padding: 13px 16px 12px;
      background: linear-gradient(135deg, #07C160, #059F52);
      color: #fff;
      font-size: 1em;
      letter-spacing: 1px;
      box-shadow: 0 2px 10px rgba(7, 193, 96, 0.35);
    }
    #payModal .close-x { color: rgba(255, 255, 255, 0.92); opacity: 1; }
    #payModal .pay-qr-box {
      width: 208px;
      height: 208px;
      border-radius: 16px;
      border: 2px solid #07C160;
      padding: 10px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(7, 193, 96, 0.18), inset 0 0 0 4px #F0FDF4;
    }
    #payModal #payQrImg {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
    }
    #payModal .pay-hint { line-height: 2; margin: 8px 4px 6px; text-align: center; }
    #payModal #payAmount { font-size: 1.6em !important; color: #B89672; letter-spacing: 0.5px; }
    #payModal .pay-stack-tip { background: #F0FDF4; border-radius: 10px; padding: 6px 10px; margin: 6px 0 10px !important; }
    #payModal #payDoneBtn { border-top: 1px dashed #D1FAE5; padding-top: 12px; margin-top: 14px; }
    #payModal .btn-primary, #payModal .btn-ghost { min-height: 44px; }
    /* 移动端弹窗按钮间距优化 */
    @media (max-width: 480px) {
      .modal .btn-primary, .modal .btn-ghost { margin-top: 12px; }
      .tier-tab { padding: 10px 4px; }
      .tier-tabs { gap: 6px; }
    .msg .bubble { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
    }
    /* 头像预览浮层：头像上移 + 简介 + 操作按钮 */
    #avatarPreview .ap-box { padding: 12px 20px 26px; }
    .ap-desc { font-size: 0.82em; color: var(--muted); line-height: 1.7; margin: 12px auto 0; max-width: 300px; text-align: center; }
    .ap-actions { display: flex; gap: 10px; margin-top: 22px; }
    .ap-actions button { flex: 1; padding: 12px 8px; font-size: 0.9em; border-radius: 12px; border: none; cursor: pointer; font-family: inherit; }
    .ap-actions .btn-primary { background: linear-gradient(135deg, #f5c542, #d9a620); color: #3a2b00; font-weight: 700; }
    .ap-actions .btn-ghost { background: rgba(255,255,255,0.08); color: var(--muted); border: 1px solid var(--border); }
    /* 首页角色卡：肖像适配圆形容器 + hover 反馈 */
    .home-role-mini .em img { width: 100%; height: 100%; object-fit: cover; }
    .home-role-mini { transition: transform 0.15s ease; }
    .home-role-mini:hover { transform: scale(1.06); }
    .home-role-mini .nm { font-weight: 600; }
    /* 头像预览浮层：肖像撑满金环 + 名字/标签层级 */
    #avatarPreview .ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
    #avatarPreview .ap-avatar svg { width: 100%; height: 100%; }
    #avatarPreview .ap-name { font-size: 1.15em; font-weight: 700; letter-spacing: 1px; }
    #avatarPreview .ap-tag { margin-top: 6px; font-size: 0.78em; color: var(--gold); letter-spacing: 2px; font-weight: 400; }
    #avatarPreview .ap-tip { margin-top: 14px; }