/* ==============================================
   Mono 小手机 2.0 - 暗色沉浸式主题
   高端二次元小手机风格，对标竞品
   ============================================== */

:root {
  --bg:            #0D0D12;
  --screen-bg:     #111118;
  --chat-bg:       #0D0D12;
  --user-bubble:   #2A2A3E;
  --ai-bubble:     #1E1E2E;
  --text:          #E8E8EE;
  --text-sub:      #8888A0;
  --text-link:     #7B8CDE;
  --accent:        #A78BFA;
  --accent-light:  #C4B5FD;
  --red:           #FF6B8A;
  --green:         #5CE0A0;
  --border:        rgba(255,255,255,0.06);
  --glass:         rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --font:          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  /* 角色主题色（由 JS 动态覆盖） */
  --char-primary:  #A78BFA;
  --char-secondary:#7C3AED;
  --char-glow:     rgba(167,139,250,0.15);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font); color: var(--text);
  background: #000;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ======== 加载 ======== */
.loading-screen {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s;
}
.loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loading-phone { text-align:center; }
.loading-logo {
  width:76px; height:76px; margin:0 auto 16px;
  border-radius:22px; display:flex; align-items:center; justify-content:center;
  font-size:38px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--char-primary),var(--char-secondary));
  box-shadow:0 12px 40px var(--char-glow);
}
.loading-text { font-size:15px; color:var(--text-sub); margin-bottom:24px; font-weight:500; letter-spacing:.5px; }
.loading-dots { display:flex; justify-content:center; gap:8px; }
.loading-dots span {
  width:6px; height:6px; border-radius:50%; background:var(--char-primary);
  animation:bounce 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.16s}
.loading-dots span:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}

/* ======== 手机壳 ======== */
.phone-body {
  width:94vw; max-width:400px;
  height:92vh; max-height:780px; min-height:540px;
  background:#000; border-radius:44px; padding:10px;
  display:flex; flex-direction:column; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-notch {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:8px 0 6px;
}
.camera-dot{width:10px;height:10px;border-radius:50%;background:#1a1a2e;box-shadow:inset 0 0 0 2px #0d0d1a}
.earpiece{width:56px;height:4px;border-radius:2px;background:#222}
.sensor-dot{width:6px;height:6px;border-radius:50%;background:#1a1a2e}
.home-indicator{width:36%;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:6px auto}

/* ======== 屏幕 ======== */
.phone-screen {
  flex:1; background:var(--screen-bg);
  border-radius:24px; display:flex; flex-direction:column; overflow:hidden;
}

/* ======== 状态栏 ======== */
.status-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 20px; font-size:12px; color:rgba(255,255,255,.6);
  background:transparent; flex-shrink:0;
  padding-top:calc(8px + var(--safe-top)); font-weight:600;
}
.status-left{display:flex;align-items:center;gap:6px}
.signal-bars{display:flex;gap:1.5px;align-items:flex-end;height:11px}
.signal-bars span{width:3px;border-radius:1px;background:rgba(255,255,255,.5)}
.signal-bars span:nth-child(1){height:3px}
.signal-bars span:nth-child(2){height:5px}
.signal-bars span:nth-child(3){height:8px}
.signal-bars span:nth-child(4){height:11px}
.signal-bars span.dim{opacity:.2}
.carrier{font-size:12px}
.time{font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.status-right{display:flex;align-items:center}
.battery-icon{width:22px;height:10px;border:1.5px solid rgba(255,255,255,.4);border-radius:3px;position:relative;padding:1.5px}
.battery-icon::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:2px;height:5px;background:rgba(255,255,255,.4);border-radius:0 1px 1px 0}
.battery-level{height:100%;width:72%;background:var(--green);border-radius:1px}

/* ======== 页面容器 ======== */
.tab-content {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
.tab-page {
  display:none; flex-direction:column;
  flex:1; overflow:hidden;
  animation:pageIn .3s cubic-bezier(.22,1,.36,1);
}
.tab-page.active { display:flex; }
@keyframes pageIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

.page-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; flex-shrink:0;
}
.page-title{font-size:17px;font-weight:700;letter-spacing:.3px}
.icon-btn{background:none;border:none;color:var(--text-sub);cursor:pointer;padding:6px;display:flex;border-radius:50%;transition:all .2s}
.icon-btn:active{background:var(--glass)}

/* ======== Tab 栏 ======== */
.tab-bar {
  display:flex; flex-shrink:0;
  background:rgba(17,17,24,0.95);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.tab-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:6px 0 4px; gap:2px;
  cursor:pointer; color:var(--text-sub);
  transition:color .2s; user-select:none; -webkit-user-select:none;
}
.tab-item span{font-size:10px;font-weight:500}
.tab-item.active{color:var(--char-primary)}
.tab-item svg{transition:transform .2s}
.tab-item:active svg{transform:scale(.88)}

/* ======== 聊天头部 ======== */
.chat-header {
  display:flex; align-items:center;
  padding:10px 16px; flex-shrink:0;
  background:rgba(13,13,18,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.avatar {
  width:42px; height:42px; border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; flex-shrink:0;
  box-shadow:0 4px 16px var(--char-glow);
}
.chat-header-info{margin-left:12px;flex:1}
.chat-header-name{font-size:16px;font-weight:600;letter-spacing:.3px}
.chat-header-status{font-size:11px;color:var(--text-sub);display:flex;align-items:center;gap:4px}
.chat-header-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 6px rgba(92,224,160,.4)}
.token-badge {
  background:var(--glass); color:var(--char-primary);
  font-size:11px; padding:4px 12px; border-radius:14px;
  white-space:nowrap; font-weight:600;
  border:1px solid var(--glass-border);
}

/* ======== 聊天区域 ======== */
.chat-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:8px 14px 12px;
  scrollbar-width:none; -ms-overflow-style:none;
  position:relative;
}
.chat-area::-webkit-scrollbar{display:none}

/* 聊天背景 - 渐变叠加层 */
.chat-area::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 20%, var(--char-glow), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(124,58,237,0.06), transparent 60%);
}
.chat-area > * { position:relative; z-index:1; }

/* 欢迎卡 */
.welcome-card{display:flex;flex-direction:column;align-items:center;padding:32px 16px 16px;text-align:center}
.welcome-card .welcome-avatar{
  width:72px;height:72px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;margin-bottom:14px;
  box-shadow:0 8px 32px var(--char-glow);
  border:2px solid rgba(255,255,255,.1);
}
.welcome-card .welcome-text{font-size:14px;line-height:1.8;color:var(--text-sub);max-width:240px}

/* 时间分隔 */
.time-divider{text-align:center;margin:16px 0 12px;font-size:11px;color:var(--text-sub)}
.time-divider span{
  background:rgba(255,255,255,0.06);padding:3px 10px;border-radius:10px;
  font-size:11px;backdrop-filter:blur(4px);
}

/* ======== 消息气泡 ======== */
.message{display:flex;margin-bottom:14px;animation:msgIn .25s cubic-bezier(.22,1,.36,1)}
.message.user{justify-content:flex-end}
.message.ai{justify-content:flex-start}
.message.continued{margin-bottom:5px}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* 头像 */
.msg-avatar {
  width:38px; height:38px; border-radius:50%;
  color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.message.ai .msg-avatar{margin-right:8px}
.message.user .msg-avatar{margin-left:8px;order:1}
.message.continued .msg-avatar{visibility:hidden}

/* 气泡体 */
.msg-body{max-width:64%;position:relative}
.bubble {
  padding:10px 14px; font-size:15.5px; line-height:1.55;
  word-break:break-word; position:relative; letter-spacing:.2px;
}

/* AI 暗色气泡 */
.message.ai .bubble {
  background:rgba(255,255,255,0.07);
  color:var(--text);
  border-radius:2px 18px 18px 18px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.06);
}
.message.ai.continued .bubble{border-radius:18px}

/* 用户气泡 - 角色主题色 */
.message.user .bubble {
  background:linear-gradient(135deg, var(--char-primary), var(--char-secondary));
  color:#fff;
  border-radius:18px 2px 18px 18px;
  box-shadow:0 4px 20px var(--char-glow);
}
.message.user.continued .bubble{border-radius:18px}

/* 已读 */
.msg-status{font-size:10px;color:var(--text-sub);margin-top:3px;text-align:right;padding-right:2px}
.message.ai .msg-status{display:none}

/* 撤回 */
.message.withdrawn{justify-content:center!important}
.message.withdrawn .msg-avatar{display:none}
.message.withdrawn .bubble{
  background:rgba(255,255,255,0.04)!important;color:var(--text-sub);
  font-size:12px;box-shadow:none;padding:6px 14px;border-radius:14px;
  backdrop-filter:none!important;
}
.message.withdrawn .msg-status{display:none}

/* 打字指示器 */
.typing-indicator{display:flex;gap:5px;padding:4px 0}
.typing-indicator span{width:7px;height:7px;border-radius:50%;background:var(--char-primary);animation:typing 1.2s ease-in-out infinite}
.typing-indicator span:nth-child(2){animation-delay:.15s}
.typing-indicator span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ======== 输入区 ======== */
.input-area {
  padding:6px 10px; padding-bottom:calc(6px + var(--safe-bottom));
  background:rgba(17,17,24,0.95); flex-shrink:0;
  border-top:1px solid var(--border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.input-wrapper {
  display:flex; gap:6px; align-items:center;
  background:rgba(255,255,255,0.06); border-radius:22px;
  padding:7px 7px 7px 16px;
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .2s;
}
.input-wrapper:focus-within{border-color:var(--char-primary)}
.input-wrapper input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:15px; font-family:var(--font);
  color:var(--text); min-width:0;
}
.input-wrapper input::placeholder{color:rgba(255,255,255,.25)}
.send-btn {
  width:34px; height:34px; border-radius:50%;
  border:none; background:linear-gradient(135deg, var(--char-primary), var(--char-secondary));
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 16px var(--char-glow);
}
.send-btn:active{transform:scale(.9)}
.send-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}

/* ======== 朋友圈 ======== */
.moments-feed{flex:1;overflow-y:auto;background:var(--screen-bg);scrollbar-width:none}
.moments-feed::-webkit-scrollbar{display:none}

/* 封面 */
.moments-cover{position:relative;height:260px;overflow:hidden;margin-bottom:28px}
.moments-cover-bg{position:absolute;inset:0}
.moments-cover-info{position:absolute;bottom:-24px;right:16px;display:flex;align-items:flex-end;gap:12px;z-index:2}
.moments-cover-name{color:#fff;font-size:17px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.5);margin-bottom:8px}
.moments-cover-avatar{
  width:64px;height:64px;border-radius:18px;border:3px solid var(--screen-bg);
  color:#fff;font-size:24px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

.moments-empty{text-align:center;padding:80px 20px;color:var(--text-sub);font-size:14px}
.moments-empty .sub-text{font-size:12px;margin-top:8px;opacity:.6}

/* 动态卡片 */
.moment-card{padding:14px 16px 12px;border-bottom:1px solid var(--border)}
.moment-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.moment-avatar{
  width:42px;height:42px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px var(--char-glow);
}
.moment-meta{flex:1;padding-top:2px}
.moment-name{font-size:15px;font-weight:600;color:var(--char-primary)}
.moment-time-top{font-size:12px;color:var(--text-sub);margin-top:2px}
.moment-text{font-size:15px;line-height:1.65;color:var(--text);white-space:pre-wrap;padding-left:52px;margin-bottom:6px}

/* 操作行 */
.moment-actions-row{display:flex;align-items:center;justify-content:space-between;padding-left:52px;margin-bottom:4px}
.moment-time-inline{font-size:11px;color:var(--text-sub)}
.moment-action-btns{display:flex;gap:6px}
.moment-action{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--text-sub);cursor:pointer;user-select:none;padding:4px 6px;border-radius:4px;transition:all .15s}
.moment-action:active{background:var(--glass)}
.moment-action.liked{color:var(--red)}
.moment-action svg{width:15px;height:15px}

/* 互动区 */
.moment-interaction{margin-left:52px;background:rgba(255,255,255,0.04);border-radius:6px;font-size:13px;line-height:1.6;overflow:hidden}
.moment-likes{padding:6px 10px;display:flex;align-items:flex-start;gap:4px;border-bottom:1px solid var(--border)}
.moment-likes svg{width:14px;height:14px;color:var(--red);flex-shrink:0;margin-top:2px}
.moment-likes-text{color:var(--char-primary);font-weight:500;flex:1}
.moment-comments{padding:6px 10px}
.moment-comment{padding:2px 0}
.moment-comment:last-child{padding-bottom:0}
.moment-comment .comment-name{color:var(--char-primary);font-weight:500}
.moment-comment .comment-text{color:var(--text)}

/* ======== 人设卡片 ======== */
.characters-scroll{flex:1;overflow-y:auto;padding:16px;background:var(--screen-bg);scrollbar-width:none}
.characters-scroll::-webkit-scrollbar{display:none}

.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.char-card {
  background:rgba(255,255,255,0.04); border-radius:20px;
  padding:24px 14px 18px; text-align:center;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
  position:relative;
  border:1.5px solid transparent;
  backdrop-filter:blur(4px);
}
.char-card:active{transform:scale(.96)}
.char-card.active{
  border-color:var(--char-primary);
  box-shadow:0 4px 24px var(--char-glow);
  background:rgba(255,255,255,0.06);
}
.char-card .char-avatar {
  width:56px; height:56px; border-radius:50%;
  color:#fff; font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  border:2px solid rgba(255,255,255,.08);
}
.char-card .char-name{font-size:15px;font-weight:600;margin-bottom:6px}
.char-card .char-tags{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.char-card .char-tag{
  font-size:10px;padding:2px 8px;border-radius:10px;
  background:rgba(255,255,255,0.06);color:var(--text-sub);font-weight:500;
}
.char-card .char-active-badge{
  position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--char-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px var(--char-glow);
}
.char-card .char-active-badge::after{content:'';width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.char-card .char-greeting{font-size:11px;color:var(--text-sub);margin-top:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ======== 设置 ======== */
.settings-list{padding:16px 0 0}
.settings-group{background:rgba(255,255,255,0.04);border-radius:14px;margin:0 16px 12px;overflow:hidden;border:1px solid var(--glass-border)}
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.settings-item:last-child{border-bottom:none}
.settings-label{font-size:15px}
.settings-value{font-size:14px;color:var(--text-sub)}
.settings-arrow{font-size:16px;color:rgba(255,255,255,.2);font-weight:300}
.settings-item.clickable{cursor:pointer}
.settings-item.clickable:active{background:rgba(255,255,255,0.04)}

/* ======== 弹窗 ======== */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s,visibility .25s;
  backdrop-filter:blur(4px);
}
.modal-overlay.active{opacity:1;visibility:visible}
.modal {
  background:var(--screen-bg); border-radius:18px;
  padding:24px 20px 18px; width:85%; max-width:310px;
  text-align:center;
  transform:scale(.85) translateY(20px);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  border:1px solid var(--glass-border);
}
.modal-overlay.active .modal{transform:scale(1) translateY(0)}
.modal-icon{font-size:40px;margin-bottom:8px}
.modal-title{font-size:17px;font-weight:700;margin-bottom:6px}
.modal-desc{font-size:13px;color:var(--text-sub);margin-bottom:18px;line-height:1.5}
.modal input{
  width:100%;padding:11px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;
  font-size:15px;font-family:var(--font);color:var(--text);outline:none;text-align:center;
  background:rgba(255,255,255,0.04);transition:border-color .2s;
}
.modal input:focus{border-color:var(--char-primary)}
.modal input::placeholder{color:rgba(255,255,255,.2)}
.modal-btns{display:flex;gap:10px;margin-top:16px}
.modal-btn{flex:1;padding:11px 0;border:none;border-radius:10px;font-size:16px;font-family:var(--font);font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s}
.modal-btn:active{transform:scale(.96)}
.modal-btn.cancel{background:rgba(255,255,255,0.06);color:var(--text)}
.modal-btn.confirm{background:linear-gradient(135deg,var(--char-primary),var(--char-secondary));color:#fff}
.modal-hint{font-size:12px;margin-top:10px;min-height:16px;color:var(--text-sub)}

/* ======== 长按菜单 ======== */
.context-overlay{position:fixed;inset:0;z-index:999;display:none}
.context-overlay.active{display:block}
.context-menu{
  position:fixed;z-index:1001;
  background:rgba(30,30,46,0.95);border-radius:10px;padding:3px 0;min-width:88px;
  display:none;box-shadow:0 8px 32px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.context-menu.active{display:block}
.context-item{padding:10px 22px;font-size:14px;color:#fff;font-weight:500;cursor:pointer;text-align:center;transition:background .15s}
.context-item:active{background:rgba(255,255,255,.1)}
.context-item+.context-item{border-top:1px solid rgba(255,255,255,0.06)}

/* ======== 好感度条 ======== */
.intimacy-bar {
  display:flex; align-items:center; gap:6px;
  margin-top:4px; height:14px;
}
.intimacy-fill {
  flex:1; height:3px; border-radius:2px;
  background:var(--char-primary);
  transition:width .4s ease, background .4s ease;
}
.intimacy-label {
  font-size:10px; color:var(--text-sub);
  white-space:nowrap; font-weight:500;
}

/* ======== 消息操作按钮（重说/语音） ======== */
.msg-actions {
  display:flex; gap:6px; margin-top:4px;
}
.msg-action-btn {
  width:28px; height:28px; border-radius:8px;
  border:none; background:rgba(255,255,255,0.06);
  color:var(--text-sub); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; transition:all .15s;
}
.msg-action-btn:active{background:rgba(255,255,255,0.1)}
.msg-action-btn.speaking{color:var(--char-primary);background:var(--char-glow)}

/* ======== Toast 提示 ======== */
.toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(30,30,46,0.9); color:#fff;
  padding:8px 22px; border-radius:20px;
  font-size:13px; font-family:var(--font);
  opacity:0; visibility:hidden;
  transition:opacity .3s,transform .3s,visibility .3s;
  z-index:2000; white-space:nowrap;
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.toast.active {
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* ======== 新手引导 ======== */
.onboard-modal { max-width:340px; padding:24px 16px 20px; }
.onboard-logo {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--char-primary),var(--char-secondary));
  color:#fff; font-size:28px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
  box-shadow:0 8px 32px var(--char-glow);
}
.onboard-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:10px; margin-top:12px;
}
.onboard-card {
  background:rgba(255,255,255,0.04); border-radius:14px;
  padding:14px 6px; text-align:center;
  cursor:pointer; transition:transform .15s,background .15s;
  border:1.5px solid transparent;
}
.onboard-card:active{transform:scale(.95)}
.onboard-card:hover{background:rgba(255,255,255,0.06)}
.onboard-avatar {
  width:40px; height:40px; border-radius:50%;
  color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.onboard-name{font-size:12px;font-weight:600}

/* ======== 人设卡片好感度小条 ======== */
.char-intimacy {
  margin-top:6px; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.06); overflow:hidden;
}
.char-intimacy-fill {
  height:100%; border-radius:2px;
  transition:width .4s ease;
}
.char-intimacy-text {
  font-size:10px; color:var(--text-sub);
  margin-top:3px;
}

/* ======== 模式切换 ======== */
.mode-toggle {
  display:flex; margin:0 16px; background:rgba(255,255,255,0.04);
  border-radius:10px; padding:3px; flex-shrink:0;
  border:1px solid var(--glass-border);
}
.mode-option {
  flex:1; text-align:center; padding:5px 0; border-radius:8px;
  font-size:12px; font-weight:600; color:var(--text-sub);
  cursor:pointer; transition:all .2s; user-select:none;
}
.mode-option.active {
  background:var(--char-primary); color:#fff;
  box-shadow:0 2px 8px var(--char-glow);
}

/* ======== 场景选择 ======== */
.scenario-bar {
  flex-shrink:0; padding:6px 0; border-bottom:1px solid var(--border);
}
.scenario-scroll {
  display:flex; gap:8px; padding:0 16px; overflow-x:auto;
  scrollbar-width:none;
}
.scenario-scroll::-webkit-scrollbar{display:none}
.scenario-chip {
  flex-shrink:0; padding:6px 14px; border-radius:16px;
  background:rgba(255,255,255,0.04); color:var(--text-sub);
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:all .2s;
  white-space:nowrap; user-select:none;
}
.scenario-chip.active {
  background:var(--char-glow); color:var(--char-primary);
  border-color:var(--char-primary);
}

/* ======== 日记 ======== */
.diary-feed {
  flex:1; overflow-y:auto; padding:16px; scrollbar-width:none;
}
.diary-feed::-webkit-scrollbar{display:none}
.diary-empty{text-align:center;padding:80px 20px;color:var(--text-sub);font-size:14px}
.diary-empty .sub-text{font-size:12px;margin-top:8px;opacity:.6}

.diary-timeline{position:relative;padding-left:24px}
.diary-timeline::before{
  content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,0.06);border-radius:1px;
}
.diary-entry{position:relative;margin-bottom:20px;animation:msgIn .3s ease}
.diary-entry::before{
  content:'';position:absolute;left:-20px;top:12px;width:10px;height:10px;
  border-radius:50%;border:2px solid var(--char-primary);background:var(--screen-bg);
}
.diary-entry.user-entry::before{border-color:var(--green)}

.diary-entry-card{
  background:rgba(255,255,255,0.04);border-radius:14px;
  padding:14px 16px;border:1px solid var(--glass-border);
}
.diary-entry-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.diary-entry-avatar{
  width:28px;height:28px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.diary-entry-name{font-size:12px;font-weight:600;color:var(--char-primary)}
.diary-entry.user-entry .diary-entry-name{color:var(--green)}
.diary-entry-time{font-size:10px;color:var(--text-sub);margin-left:auto}
.diary-entry-text{font-size:14px;line-height:1.7;color:var(--text)}
.diary-entry-mood{font-size:12px;margin-top:6px}

/* ======== 论坛 ======== */
.forum-board-tabs{
  display:flex;gap:8px;padding:0 16px 8px;overflow-x:auto;flex-shrink:0;
  scrollbar-width:none;
}
.forum-board-tabs::-webkit-scrollbar{display:none}
.forum-board-chip{
  flex-shrink:0;padding:5px 14px;border-radius:14px;
  background:rgba(255,255,255,0.04);color:var(--text-sub);
  font-size:12px;font-weight:500;cursor:pointer;
  border:1px solid transparent;transition:all .2s;
  white-space:nowrap;user-select:none;
}
.forum-board-chip.active{
  background:var(--char-glow);color:var(--char-primary);
  border-color:var(--char-primary);
}

.forum-feed{flex:1;overflow-y:auto;padding:0 16px 16px;scrollbar-width:none}
.forum-feed::-webkit-scrollbar{display:none}
.forum-empty{text-align:center;padding:80px 20px;color:var(--text-sub);font-size:14px}
.forum-empty .sub-text{font-size:12px;margin-top:8px;opacity:.6}

.forum-post{
  background:rgba(255,255,255,0.04);border-radius:14px;
  padding:14px 16px;margin-bottom:12px;
  border:1px solid var(--glass-border);
  animation:msgIn .3s ease;
}
.forum-post-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.forum-post-avatar{
  width:32px;height:32px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px var(--char-glow);
}
.forum-post-author{font-size:13px;font-weight:600;color:var(--char-primary)}
.forum-post-board{font-size:10px;color:var(--text-sub);margin-left:4px;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,0.04)}
.forum-post-time{font-size:10px;color:var(--text-sub);margin-left:auto}
.forum-post-title{font-size:15px;font-weight:600;margin-bottom:6px;line-height:1.4}
.forum-post-content{font-size:14px;line-height:1.65;color:var(--text-sub);margin-bottom:10px}
.forum-post-actions{display:flex;align-items:center;gap:16px}
.forum-post-action{
  display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-sub);
  cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;
  user-select:none;
}
.forum-post-action:active{background:rgba(255,255,255,0.06)}
.forum-post-action.liked{color:var(--red)}
.forum-post-action svg{width:16px;height:16px}

.forum-replies{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.forum-reply{padding:6px 0;font-size:13px;line-height:1.5}
.forum-reply-author{color:var(--char-primary);font-weight:500}
.forum-reply-text{color:var(--text)}

/* ======== 我的页面 ======== */
.profile-scroll{flex:1;overflow-y:auto;scrollbar-width:none}
.profile-scroll::-webkit-scrollbar{display:none}

.profile-user-card{
  display:flex;align-items:center;gap:12px;
  margin:0 16px 16px;padding:16px;
  background:rgba(255,255,255,0.04);border-radius:16px;
  border:1px solid var(--glass-border);
}
.profile-user-avatar{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:700;flex-shrink:0;
}
.profile-user-info{flex:1}
.profile-user-name{font-size:16px;font-weight:600}
.profile-user-id{font-size:11px;color:var(--text-sub);margin-top:2px}
.profile-edit-btn{
  padding:6px 14px;border-radius:10px;border:1px solid var(--glass-border);
  background:var(--glass);color:var(--text-sub);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .2s;font-family:var(--font);
}
.profile-edit-btn:active{background:rgba(255,255,255,0.08)}

.profile-section{margin-bottom:16px}
.profile-section-title{
  font-size:13px;font-weight:600;color:var(--text-sub);
  padding:0 16px 8px;letter-spacing:.3px;
}
.profile-action-btn{
  display:block;width:calc(100% - 32px);margin:8px 16px 0;
  padding:10px;border-radius:12px;border:1.5px dashed var(--glass-border);
  background:transparent;color:var(--text-sub);font-size:14px;font-weight:500;
  cursor:pointer;transition:all .2s;font-family:var(--font);text-align:center;
}
.profile-action-btn:active{background:var(--glass);color:var(--text)}

.header-btns{display:flex;gap:4px}

/* ======== 弹窗通用字段 ======== */
.modal-field{margin-bottom:14px;text-align:left}
.modal-field label{display:block;font-size:12px;color:var(--text-sub);margin-bottom:6px;font-weight:500}
.modal-field textarea{
  width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;
  font-size:14px;font-family:var(--font);color:var(--text);outline:none;
  background:rgba(255,255,255,0.04);resize:none;transition:border-color .2s;
}
.modal-field textarea:focus{border-color:var(--char-primary)}
.modal-field textarea::placeholder{color:rgba(255,255,255,.2)}

.create-char-modal{max-width:340px}

/* ======== 颜色选择器 ======== */
.color-picker{display:flex;gap:8px;flex-wrap:wrap}
.color-dot{
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;
}
.color-dot.active{border-color:#fff;transform:scale(1.15)}
.color-dot:active{transform:scale(.95)}

/* ======== 心情选择器 ======== */
.mood-picker{display:flex;gap:6px;flex-wrap:wrap}
.mood-option{
  padding:4px 10px;border-radius:10px;font-size:12px;
  background:rgba(255,255,255,0.04);color:var(--text-sub);
  cursor:pointer;transition:all .15s;user-select:none;
  border:1px solid transparent;
}
.mood-option.active{background:var(--char-glow);color:var(--char-primary);border-color:var(--char-primary)}

/* ======== 版块列表 ======== */
.board-list{max-height:200px;overflow-y:auto;scrollbar-width:none}
.board-list::-webkit-scrollbar{display:none}
.board-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;margin-bottom:4px;border-radius:8px;
  background:rgba(255,255,255,0.04);font-size:14px;
}
.board-item-name{color:var(--text)}
.board-item-del{
  color:var(--red);cursor:pointer;font-size:18px;padding:0 4px;
  opacity:.6;transition:opacity .15s;
}
.board-item-del:active{opacity:1}

/* ======== 响应式 ======== */

/* 移动端：去掉手机壳，全屏独立APP体验 */
@media(max-width:500px){
  body{background:var(--screen-bg)}
  .phone-body{
    width:100vw;height:100vh;height:100dvh;
    max-width:none;max-height:none;
    border-radius:0;padding:0;
    background:var(--screen-bg);
    box-shadow:none;
  }
  .phone-notch{display:none}
  .home-indicator{display:none}
  .phone-screen{border-radius:0}
}
/* 桌面端小窗口 */
@media(min-width:501px) and (max-height:600px){
  .phone-body{padding:6px;border-radius:32px}
  .phone-notch{padding:4px 0 2px}
  .home-indicator{margin:3px auto}
  .chat-header{padding:6px 12px}
  .welcome-card{padding:16px 12px}
  .moments-cover{height:200px}
}
@media(orientation:landscape) and (max-height:500px){
  body::after{content:'\8BF7\65CB\8F6C\624B\673A\81F3竖屏';position:fixed;inset:0;z-index:9999;background:var(--screen-bg);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-sub);font-family:var(--font)}
}