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

:root{
  --bg:#0c0c0f;--bg2:#111115;--bg3:#17171c;--bg4:#1d1d24;--bg5:#222228;
  --border:rgba(255,255,255,0.055);--border2:rgba(255,255,255,0.1);--border3:rgba(255,255,255,0.16);
  --text:#e4e2dc;--text2:#928d87;--text3:#4e4b47;
  --accent:#c8a96e;--accent-dim:rgba(200,169,110,0.1);--accent-border:rgba(200,169,110,0.22);
  --green:#4caf72;--red:#c86e6e;--rs:8px;--r:12px;
}

html,body{
  height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:'Noto Sans SC',sans-serif;font-size:14px;
  -webkit-font-smoothing:antialiased;
}

/* ── 油画噪点 grain ── */


/* ── App shell ── */
.app{display:grid;grid-template-columns:300px 1fr 280px;height:100vh;overflow:hidden;transition:grid-template-columns .3s ease}
.app.profile-hidden{grid-template-columns:300px 1fr 0px}

/* ══ LEFT PANEL ══ */
.char-panel{
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
}

.panel-header{
  padding:22px 20px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;position:relative;
  background-image:url('/portraits/panel_header_bg.jpg');
  background-size:cover;background-position:center top;
  overflow:hidden;
}
.panel-header::before{
  content:'';position:absolute;inset:0;
  background:rgba(6,6,10,0.92);
}
.panel-header>*{position:relative;z-index:1}
.panel-title{text-shadow:0 1px 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,0.8)}
.panel-sub{text-shadow:0 1px 6px rgba(0,0,0,1),0 0 12px rgba(0,0,0,0.9)}
.panel-title{
  font-family:'Noto Serif SC',serif;
  font-size:14px;font-weight:600;
  letter-spacing:.18em;color:#f0ede6;
}
.panel-sub{font-size:11px;color:#b8b3ab;margin-top:4px;letter-spacing:.05em}

.char-list{flex:1;overflow-y:auto;padding:12px 10px;min-height:0}
.char-list::-webkit-scrollbar{width:3px}
.char-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* 角色卡 */
.char-card{
  border-radius:10px;border:1px solid var(--border);
  padding:14px 14px 12px;margin-bottom:8px;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,0.025) 0%,transparent 100%);
  transition:all .22s ease;position:relative;overflow:hidden;
  display:flex;align-items:flex-start;gap:12px;
}
.char-card::before{
  content:'';position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg,rgba(100,160,255,0.04) 0%,transparent 60%);
  opacity:0;transition:opacity .22s;
}
.char-card:hover{border-color:var(--border2);background:linear-gradient(135deg,rgba(100,140,220,0.06) 0%,rgba(255,255,255,0.02) 100%)}
.char-card:hover::before{opacity:1}
.char-card.active{border-color:var(--accent-border);background:linear-gradient(135deg,rgba(196,163,90,0.08) 0%,rgba(196,163,90,0.02) 100%)}
.char-card.active::before{opacity:0}

/* 角色卡左侧彩条 */
.char-card.active::after{
  content:'';position:absolute;left:0;top:16px;bottom:16px;
  width:2px;border-radius:0 2px 2px 0;background:var(--accent);
  box-shadow:0 0 8px rgba(196,163,90,0.5);
}

.card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card-av{
  width:42px;height:42px;border-radius:8px;
  background:var(--bg4);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;overflow:hidden;
  position:relative;
}
.card-av::after{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 50%);
}
.card-name{font-family:'Noto Serif SC',serif;font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--text)}
.card-work{font-size:11px;color:var(--text3);margin-top:2px;letter-spacing:.04em}
.card-quote{
  font-size:11px;color:var(--text2);line-height:1.65;
  font-family:'Noto Serif SC',serif;font-weight:300;
  padding-left:8px;border-left:1px solid var(--border2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:8px;
}
.card-tags{display:flex;gap:5px;flex-wrap:wrap}
.card-tag{
  font-size:10px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--border);color:var(--text3);
  letter-spacing:.04em;
  background:rgba(100,140,220,0.04);
}
.char-card.active .card-tag{border-color:var(--accent-border);color:var(--accent);background:var(--accent-dim)}

/* 角色卡内部布局补全 */
.card-av-wrap{position:relative;flex-shrink:0}
.card-info{flex:1;min-width:0}
.card-online{
  position:absolute;bottom:-2px;right:-2px;
  width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg2);
  box-shadow:0 0 6px var(--green);
}
.active-indicator{display:none}

/* 侧边栏底部区块 */
.sec-label{font-size:10px;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}

/* 记忆面板 */
.rel-bar{padding:12px 16px 10px;border-top:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,0.15)}
.rel-stages{display:flex;gap:4px;margin-top:8px}
.rel-stage{
  flex:1;height:26px;border-radius:6px;border:1px solid var(--border);
  background:transparent;font-size:10px;color:var(--text3);cursor:default;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.02em;transition:all .2s;font-family:inherit;
}
.rel-stage.active{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}
.rel-stage.clickable{cursor:pointer}
.rel-stage.clickable:hover{background:var(--bg4);color:var(--text2)}
.rel-lock{
  display:flex;align-items:center;gap:5px;font-size:11px;
  color:var(--text3);margin-top:8px;cursor:pointer;
}
.rel-lock:hover{color:var(--accent)}
.lock-icon{font-size:12px}

/* ══ CHAT PANEL ══ */
.chat-panel{
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg);
}

/* 背景光晕 */
.chat-glow{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:600px;height:300px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,rgba(60,100,200,0.06) 0%,transparent 70%);
}

.empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;color:var(--text3);position:relative;z-index:1;
  background-image:url('/portraits/welcome_bg.jpg');
  background-size:cover;background-position:center;
}
.big-emoji{font-size:52px;opacity:.4;filter:grayscale(1)}
.empty-state p{font-size:13px;letter-spacing:.06em;font-family:'Noto Serif SC',serif;font-weight:300}
/* 手机端选择角色按钮 */
.mobile-char-enter-btn{
  display:none;
  padding:12px 28px;border-radius:24px;
  border:1px solid var(--accent-border);
  background:rgba(212,175,55,0.95);border:2px solid #FFD700;
  color:#fff;font-size:15px;font-weight:bold;cursor:pointer;
  font-family:'Noto Serif SC',serif;letter-spacing:.1em;
  backdrop-filter:blur(8px);
}
@media(max-width:768px){
  .mobile-char-enter-btn{display:block}
}

/* 聊天头 */
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;position:relative;z-index:1;
  background:rgba(12,12,15,0.75);backdrop-filter:blur(12px);
}
.ch-left{display:flex;align-items:center;gap:12px}
.hav{
  width:36px;height:36px;border-radius:8px;
  background:var(--bg4);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;overflow:hidden;position:relative;
}
.hav::after{content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,0.07) 0%,transparent 50%)}
.h-name{font-family:'Noto Serif SC',serif;font-size:14px;font-weight:500;letter-spacing:.08em}
.h-work{font-size:11px;color:var(--text2);margin-top:1px;letter-spacing:.04em}
.h-status{
  font-size:10px;color:var(--green);letter-spacing:.08em;
  display:flex;align-items:center;gap:5px;
}
.h-status::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.h-actions{display:flex;gap:4px}
.icon-btn{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--border);
  background:transparent;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.icon-btn svg{width:14px;height:14px}
.icon-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}

.toggle-profile-btn{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--border);
  background:transparent;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.toggle-profile-btn svg{width:14px;height:14px}
.toggle-profile-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}

/* 消息区 */
.messages{
  flex:1;overflow-y:auto;padding:24px 24px 16px;
  position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;
  background-attachment:local;
}
/* Chat background image layer — 挂在 .chat-panel 上，覆盖全聊天区 */
.chat-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .4s ease;
}
.chat-bg.active{opacity:1}
.chat-bg-overlay{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(6,6,10,0.68);
  display:none;
}
/* Make messages sit above bg */
.msg{position:relative;z-index:1;display:flex;gap:10px;animation:msgIn .22s ease both}
.date-sep{position:relative;z-index:1}

/* Bg picker button */
.bg-picker-btn{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--border);
  background:transparent;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
  position:relative;
}
.bg-picker-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.bg-picker-btn svg{width:14px;height:14px}

.bg-picker-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:100;
  background:var(--bg3);border:1px solid var(--border2);border-radius:12px;
  padding:14px;width:220px;
  box-shadow:0 16px 48px rgba(0,0,0,0.6);
  display:none;
}
.bg-picker-panel.open{display:block;animation:fadeIn .15s ease}
.bg-picker-title{font-size:10px;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.bg-upload-btn{
  width:100%;padding:7px 12px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text2);font-size:11px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;display:flex;align-items:center;gap:6px;
  transition:all .18s;letter-spacing:.03em;
}
.bg-upload-btn:hover{background:var(--bg4);color:var(--text)}
.bg-clear-btn{
  width:100%;padding:7px 12px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text3);font-size:11px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;transition:all .18s;letter-spacing:.03em;margin-top:6px;
}
.bg-clear-btn:hover{color:var(--text2)}
.messages::-webkit-scrollbar{width:4px}
.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* 气泡 */
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.msg.user{flex-direction:row-reverse}
.msg-av{
  width:30px;height:30px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;position:relative;overflow:hidden;
}
.msg-av::after{content:'';position:absolute;inset:0;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 50%)}

.bubble{
  max-width:72%;min-width:120px;width:fit-content;padding:11px 15px;border-radius:10px;
  font-size:13px;line-height:1.75;font-family:'Noto Serif SC',serif;font-weight:300;
  position:relative;
}
.msg.char .bubble{
  background:linear-gradient(135deg,var(--bg3) 0%,var(--bg4) 100%);
  border:1px solid var(--border);
  border-radius:4px 10px 10px 10px;
  color:var(--text);
}
.bubble-action{
  color:var(--text3);font-style:italic;
  font-family:'Noto Sans SC',sans-serif;font-size:12px;font-weight:300;
  letter-spacing:.02em;
}
.msg.user .bubble{
  background:linear-gradient(135deg,rgba(196,163,90,0.38) 0%,rgba(196,163,90,0.24) 100%);
  border:1px solid rgba(196,163,90,0.45);
  border-radius:10px 4px 10px 10px;min-width:160px;
  color:var(--text);
}
.msg-name{font-size:10px;color:var(--text2);letter-spacing:.06em;margin-bottom:5px;font-family:'Noto Sans SC',sans-serif}
.msg-time{font-size:10px;color:var(--text2);margin-top:5px;letter-spacing:.04em}

/* 打字动画 */
.typing-wrap{display:flex;gap:10px;align-items:flex-end}
.typing-bub{
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1px solid var(--border);border-radius:4px 10px 10px 10px;
  padding:12px 16px;display:flex;gap:5px;align-items:center;
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--text3);animation:dotPulse 1.4s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* 日期分隔 */
.date-sep{
  display:flex;align-items:center;gap:10px;font-size:10px;
  color:var(--text2);letter-spacing:.1em;flex-shrink:0;
}
.date-sep::before,.date-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* 输入区 */
.input-area{
  padding:12px 20px 14px;border-top:1px solid var(--border);
  flex-shrink:0;position:relative;z-index:1;
  background:rgba(12,12,15,0.8);backdrop-filter:blur(12px);
}
.mem-bar{height:1px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:10px}
.mem-fill{height:100%;background:linear-gradient(90deg,rgba(196,163,90,0.3),var(--accent));border-radius:2px;transition:width .4s ease}
.input-wrap{display:flex;gap:10px;align-items:flex-end}
textarea{
  flex:1;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;color:var(--text);
  font-size:13px;font-family:'Noto Serif SC',serif;font-weight:300;
  resize:none;max-height:110px;min-height:21px;overflow-y:auto;
  transition:border-color .2s;line-height:1.6;letter-spacing:.02em;
}
textarea:focus{outline:none;border-color:var(--border2)}
textarea::placeholder{color:var(--text3)}
.send-btn{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(196,163,90,0.2),rgba(196,163,90,0.1));
  border:1px solid var(--accent-border);color:var(--accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.send-btn:hover{background:linear-gradient(135deg,rgba(196,163,90,0.3),rgba(196,163,90,0.15));box-shadow:0 0 16px rgba(196,163,90,0.2)}
.send-btn:disabled{opacity:.35;cursor:not-allowed}
.send-btn svg{width:15px;height:15px}
.input-meta{display:flex;justify-content:space-between;margin-top:7px}
.input-hint{font-size:10px;color:var(--text3);letter-spacing:.05em}
.mem-info{font-size:10px;color:var(--text3)}

/* ══ RIGHT PROFILE PANEL ══ */
.profile-panel{
  background:var(--bg2);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:all .3s ease;width:280px;flex-shrink:0;
}
.app.profile-hidden .profile-panel{width:0;border-left:none;overflow:hidden}

.profile-avatar-wrap{
  position:relative;width:100%;height:220px;
  background:linear-gradient(160deg,var(--bg3) 0%,var(--bg4) 100%);
  overflow:hidden;flex-shrink:0;
}
.profile-avatar-wrap img{width:100%;height:100%;object-fit:cover;object-position:top}
.profile-avatar-wrap .avatar-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;
  background:linear-gradient(160deg,var(--bg3) 0%,var(--bg4) 100%);
}
.profile-avatar-wrap .avatar-placeholder .ai-gen-hint{
  font-size:10px;color:var(--text3);letter-spacing:.1em;
  font-family:'Noto Sans SC',sans-serif;font-weight:300;
}
.profile-avatar-wrap .avatar-overlay{
  position:absolute;bottom:0;left:0;right:0;height:55%;
  background:linear-gradient(transparent,var(--bg2));
}
.profile-name-block{position:absolute;bottom:0;left:0;right:0;padding:16px 16px 12px;z-index:1}
.profile-char-name{
  font-family:'Noto Serif SC',serif;font-size:16px;font-weight:500;
  letter-spacing:.1em;color:var(--text);
}
.profile-char-work{font-size:11px;color:var(--text3);margin-top:2px;letter-spacing:.06em}
.profile-body{flex:1;overflow-y:auto;padding:14px 16px 20px;position:relative;z-index:1}
.profile-body::-webkit-scrollbar{width:3px}
.profile-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.profile-section{margin-bottom:18px}
.profile-sec-title{
  font-size:10px;color:var(--text3);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px;
}
.profile-tags{display:flex;flex-wrap:wrap;gap:6px}
.profile-tag{
  font-size:11px;padding:3px 10px;border-radius:20px;
  border:1px solid var(--border);color:var(--text2);
  font-family:'Noto Serif SC',serif;font-weight:300;
  background:rgba(100,140,220,0.04);
}
.profile-quote{
  font-family:'Noto Serif SC',serif;font-size:12px;color:var(--text2);line-height:1.8;
  font-weight:300;font-style:italic;padding:10px 12px;
  border-left:2px solid var(--accent-border);
  background:var(--accent-dim);border-radius:0 6px 6px 0;
}

/* Profile action buttons */
.profile-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.profile-action-btn{
  width:100%;padding:9px 14px;border-radius:8px;border:1px solid var(--border);
  background:rgba(100,140,220,0.03);color:var(--text2);font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;font-family:'Noto Sans SC',sans-serif;
  transition:all .2s;letter-spacing:.03em;text-align:left;
}
.profile-action-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.profile-action-btn.locked{color:var(--text3);cursor:default}
.profile-action-btn.locked:hover{background:rgba(100,140,220,0.03);color:var(--text3);border-color:var(--border)}
.profile-action-btn svg{width:14px;height:14px;flex-shrink:0}
.profile-action-btn .btn-lock{margin-left:auto;font-size:10px;opacity:.5}
.upload-input{display:none !important;position:absolute;width:0;height:0;opacity:0;pointer-events:none}

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

/* ── 右侧形象区（静态，无动画）── */
.avatar-anim-wrap{
  width:100%;height:100%;position:relative;overflow:hidden;
}
.avatar-portrait-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:linear-gradient(160deg,var(--bg3) 0%,var(--bg4) 100%);
}
.avatar-portrait-placeholder .placeholder-icon{font-size:36px;opacity:.3}
.avatar-portrait-placeholder .placeholder-text{font-size:11px;color:var(--text3);letter-spacing:.1em;font-family:'Noto Serif SC',serif;font-weight:300}

/* ── Overlay & modal ── */
.overlay{
  position:fixed;inset:0;background:rgba(4,8,15,0.85);backdrop-filter:blur(8px);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--bg3);border:1px solid var(--border2);border-radius:14px;
  padding:28px 28px 20px;width:340px;
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
.modal h3{font-family:'Noto Serif SC',serif;font-size:15px;font-weight:500;letter-spacing:.08em;margin-bottom:10px}
.modal p{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:20px}
.mfooter{display:flex;gap:10px;justify-content:flex-end}
.mfooter button{
  padding:8px 18px;border-radius:8px;font-size:13px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--text2);
  font-family:'Noto Sans SC',sans-serif;transition:all .18s;
}
.mfooter button:hover{background:var(--bg4);color:var(--text)}
.mfooter button.del{background:rgba(158,74,74,0.15);border-color:rgba(158,74,74,0.3);color:#c47878}
.mfooter button.del:hover{background:rgba(158,74,74,0.25)}

/* 解锁弹窗 */
.unlock-modal{text-align:center;padding:32px 28px 24px}
.unlock-icon{font-size:40px;margin-bottom:8px;animation:unlockPop .4s ease}
.unlock-badge{display:inline-block;font-size:11px;letter-spacing:.1em;padding:3px 12px;border-radius:20px;border:1px solid var(--accent-border);color:var(--accent);background:var(--accent-dim);margin-bottom:14px}
.unlock-content{font-family:'Noto Serif SC',serif;font-size:13px;color:var(--text2);line-height:1.9;text-align:left;padding:16px;background:var(--bg2);border-radius:10px;border:1px solid var(--border);margin:12px 0 20px;white-space:pre-wrap}
@keyframes unlockPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* 场景横幅 */
.scene-banner{
  padding:10px 20px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(200,169,110,0.10),transparent);
  border-bottom:1px solid var(--accent-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;z-index:1;
}
.scene-banner-info{display:flex;align-items:center;gap:10px;min-width:0}
.scene-banner-icon{font-size:16px;flex-shrink:0}
.scene-banner-title{font-family:'Noto Serif SC',serif;font-size:13px;color:var(--accent);white-space:nowrap}
.scene-banner-desc{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-exit-btn{flex-shrink:0;font-size:11px;padding:4px 12px;border-radius:6px;border:1px solid var(--accent-border);background:transparent;color:var(--accent);cursor:pointer;letter-spacing:.04em;transition:all .18s}
.scene-exit-btn:hover{background:var(--accent-dim)}

/* 场景卡片 */
.scene-card{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px;transition:all .2s;position:relative}
.scene-card.unlocked{cursor:pointer}
.scene-card.unlocked:hover{border-color:var(--accent-border);background:var(--accent-dim)}
.scene-card.locked{opacity:.45;cursor:default}
.scene-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.scene-card-title{font-size:12px;font-weight:500;color:var(--text);font-family:'Noto Serif SC',serif}
.scene-card-badge{font-size:10px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);padding:1px 7px;border-radius:10px}
.scene-card-badge.locked-badge{color:var(--text3);background:transparent;border-color:var(--border)}
.scene-card-desc{font-size:11px;color:var(--text3);line-height:1.6;font-family:'Noto Serif SC',serif;font-weight:300}

/* sbtn */
.sbtn{
  width:100%;padding:9px 16px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text2);font-size:12px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;transition:all .18s;letter-spacing:.04em;
}
.sbtn:hover{background:var(--bg4);color:var(--text)}
.sbtn.danger{color:var(--red);border-color:rgba(158,74,74,0.25)}
.sbtn.danger:hover{background:rgba(158,74,74,0.1)}

/* ── 会员选择弹窗 ── */
.member-overlay{
  position:fixed;inset:0;background:rgba(4,8,15,0.92);backdrop-filter:blur(14px);
  z-index:3000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.member-overlay.open{opacity:1;pointer-events:all}
.member-modal-wrap{width:380px;display:flex;flex-direction:column;gap:12px}
.member-modal-title{
  font-family:'Noto Serif SC',serif;font-size:15px;font-weight:500;
  letter-spacing:.1em;color:var(--text);text-align:center;margin-bottom:4px;
}
.member-modal-sub{font-size:11px;color:var(--text3);text-align:center;letter-spacing:.06em;margin-bottom:8px}
.member-cards{display:flex;gap:12px}
.member-card{
  flex:1;border:1px solid var(--border);border-radius:12px;padding:18px 16px 16px;
  cursor:pointer;transition:all .2s;background:var(--bg3);
  display:flex;flex-direction:column;gap:8px;
}
.member-card:hover{border-color:var(--border2);background:var(--bg4)}
.member-card.premium{border-color:var(--accent-border);background:linear-gradient(135deg,rgba(200,169,110,0.07),rgba(200,169,110,0.02))}
.member-card.premium:hover{background:linear-gradient(135deg,rgba(200,169,110,0.12),rgba(200,169,110,0.04))}
.member-card-icon{font-size:24px}
.member-card-name{font-family:'Noto Serif SC',serif;font-size:13px;font-weight:500;color:var(--text)}
.member-card.premium .member-card-name{color:var(--accent)}
.member-card-perks{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.member-card-perk{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px}
.member-card-perk::before{content:'·';color:var(--text3)}
.member-card.premium .member-card-perk{color:var(--text2)}
.member-card.premium .member-card-perk::before{content:'✓';color:var(--accent)}
.member-hint{font-size:10px;color:var(--text3);text-align:center;letter-spacing:.04em;margin-top:4px}

/* ── 语音按钮状态 ── */
.icon-btn.voice-on{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}

/* ── 角色卡片背景图层 ── */
.card-bg-layer{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:top center;
  opacity:0.13;transition:opacity .22s;border-radius:10px;
}
.char-card:hover .card-bg-layer{opacity:0.2}
.char-card.active .card-bg-layer{opacity:0.25}
.char-card > *:not(.card-bg-layer){position:relative;z-index:1}

/* ── 同框条幅加深 ── */
.dual-banner{
  padding:8px 20px;flex-shrink:0;
  background:rgba(6,6,10,0.92);
  border-bottom:1px solid rgba(100,150,255,0.18);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;z-index:1;
}

/* ── 聊天背景全屏遮罩 ── */
.bg-modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
}
.bg-modal-overlay.open{display:flex;animation:fadeIn .18s ease}
.bg-modal-panel{
  background:var(--bg3);border:1px solid var(--border2);border-radius:16px;
  padding:24px 20px;width:260px;
  box-shadow:0 24px 64px rgba(0,0,0,0.85);
}
.bg-modal-title{
  font-family:'Noto Serif SC',serif;font-size:12px;letter-spacing:.14em;
  color:var(--text3);text-transform:uppercase;text-align:center;margin-bottom:16px;
}
.bg-modal-btn{
  width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,0.03);color:var(--text2);font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;font-family:inherit;letter-spacing:.03em;
  transition:all .2s;margin-bottom:8px;text-align:left;
}
.bg-modal-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.bg-modal-btn:last-child{margin-bottom:0}
.bg-modal-btn.danger{color:var(--text3)}
.bg-modal-btn.danger:hover{color:var(--red);border-color:var(--red)}

/* ── 同框模式头像 ── */
.dual-hav-wrap{display:flex;align-items:center;gap:-4px}
.dual-hav{
  width:28px;height:28px;border-radius:6px;border:1px solid var(--border2);
  background:var(--bg4);display:flex;align-items:center;justify-content:center;
  font-size:13px;overflow:hidden;flex-shrink:0;
}
.dual-hav:last-child{margin-left:-8px;border-color:var(--bg3)}

/* ── 双角色同框 ── */
.dual-toggle-btn{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:10px;padding:3px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.35);
  color:#b8b3ab;cursor:pointer;transition:all .2s;
  font-family:'Noto Sans SC',sans-serif;letter-spacing:.06em;
  white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.dual-toggle-btn:hover{border-color:var(--border2);color:var(--text2)}
.dual-toggle-btn.active{border-color:var(--accent-border);color:var(--accent);background:var(--accent-dim)}

.dual-banner-old{display:none}
.dual-banner-sep{font-size:12px;color:var(--text3);opacity:.5}
.dual-banner-char{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);font-family:'Noto Serif SC',serif;font-weight:300}
.dual-banner-label{font-size:10px;color:var(--text3);letter-spacing:.08em;margin-left:4px}

/* ── 分享按钮 ── */
.msg-share-btn{
  display:none;
  margin-top:4px;
  font-size:10px;color:var(--text3);
  background:none;border:none;cursor:pointer;
  padding:2px 0;letter-spacing:.05em;
  font-family:'Noto Sans SC',sans-serif;
  transition:color .15s;
}
.msg.char:hover .msg-share-btn{display:inline-block}
.msg-share-btn:hover{color:var(--accent)}

/* ── 分享卡片 overlay ── */
.share-overlay{
  position:fixed;inset:0;background:rgba(4,8,15,0.92);backdrop-filter:blur(14px);
  z-index:2000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.share-overlay.open{opacity:1;pointer-events:all}
.share-modal-wrap{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.share-card-outer{
  width:360px;border-radius:16px;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.85);
}
#shareCard{
  width:360px;
  background:linear-gradient(160deg,#0e0e14 0%,#141422 50%,#0a0a10 100%);
  padding:38px 32px 30px;
  display:flex;flex-direction:column;align-items:center;
  font-family:'Noto Serif SC',serif;
  position:relative;overflow:hidden;
}
#shareCard::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:320px;height:220px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(100,140,220,0.09) 0%,transparent 70%);
  pointer-events:none;
}
#shareCard::after{
  content:'';position:absolute;bottom:-50px;right:-50px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,169,110,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.sc-emoji{font-size:42px;margin-bottom:10px;filter:drop-shadow(0 0 16px rgba(200,169,110,0.3));position:relative;z-index:1}
.sc-name{font-size:12px;letter-spacing:.15em;color:rgba(200,169,110,0.75);margin-bottom:16px;font-weight:400;position:relative;z-index:1}
.sc-divider{width:28px;height:1px;background:rgba(200,169,110,0.22);margin-bottom:18px;position:relative;z-index:1}
.sc-text{
  font-size:14px;line-height:1.9;color:#d4d0c8;
  text-align:center;font-weight:300;font-style:italic;
  max-width:278px;letter-spacing:.03em;
  white-space:pre-wrap;word-break:break-word;
  position:relative;z-index:1;
}
.sc-brand{
  margin-top:26px;font-size:10px;color:rgba(200,169,110,0.3);
  letter-spacing:.18em;font-style:normal;position:relative;z-index:1;
  text-transform:uppercase;
}
.share-actions{display:flex;gap:10px}
.share-action-btn{
  padding:9px 22px;border-radius:8px;font-size:13px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;transition:all .18s;letter-spacing:.04em;
}
.share-action-btn.primary{
  background:linear-gradient(135deg,rgba(200,169,110,0.2),rgba(200,169,110,0.1));
  border:1px solid var(--accent-border);color:var(--accent);
}
.share-action-btn.primary:hover{background:linear-gradient(135deg,rgba(200,169,110,0.3),rgba(200,169,110,0.18))}
.share-action-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text3)}
.share-action-btn.ghost:hover{background:var(--bg4);color:var(--text2)}

/* 重播语音按钮 */
.msg-replay-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--text3);cursor:pointer;
  transition:all .18s;margin-left:6px;flex-shrink:0;vertical-align:middle;
}
.msg-replay-btn:hover{background:var(--bg4);color:var(--accent);border-color:var(--accent-border)}
.msg-replay-btn svg{width:10px;height:10px}
.msg-actions{display:flex;align-items:center;margin-top:5px;gap:4px;flex-wrap:wrap}
.msg-share-btn{font-size:10px;color:var(--text3);background:transparent;border:none;cursor:pointer;padding:0;letter-spacing:.04em;transition:color .15s}
.msg-share-btn:hover{color:var(--text2)}

/* ══ 移动端适配 ══ */
@media(max-width:768px){
  .app{grid-template-columns:1fr !important;position:relative}
  .char-panel{
    position:fixed;left:-300px;top:0;bottom:0;width:280px;z-index:200;
    transition:left .28s ease;box-shadow:4px 0 24px rgba(0,0,0,0.4);
  }
  .char-panel.mobile-open{left:0}
  .profile-panel{
    position:fixed;right:-300px;top:0;bottom:0;width:280px;z-index:200;
    transition:right .28s ease;box-shadow:-4px 0 24px rgba(0,0,0,0.5);
    display:flex !important;overflow-y:auto;
  }
  .profile-panel.mobile-open{right:0}
  .app.profile-hidden{grid-template-columns:1fr !important}
  .mobile-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;
    display:none;
  }
  .mobile-overlay.visible{display:block}
  .mobile-menu-btn{
    display:flex !important;
  }
  .chat-header{padding:10px 14px}
  .messages{padding:16px 14px 12px}
  .input-area{padding:10px 14px 12px}
  .bubble{max-width:88% !important}
  .bg-picker-panel{right:0;left:auto;width:190px}
}
@media(min-width:769px){
  .mobile-menu-btn{display:none !important}
  .mobile-overlay{display:none !important}
}