:root { --bg:#f5f6fa; --card:#fff; --pri:#4a7dff; --text:#222; --sub:#888; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body { background:var(--bg); color:var(--text); font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  overscroll-behavior:none; user-select:none; }
#app { display:flex; flex-direction:column; height:100vh; max-width:640px; margin:0 auto; }
header { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff;
  border-bottom:1px solid #eee; position:sticky; top:0; z-index:5; }
header #title { font-weight:700; font-size:16px; }
.tag { font-size:12px; color:var(--pri); background:#eef3ff; padding:2px 8px; border-radius:10px;
  max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#btnSettings { margin-left:auto; border:none; background:none; font-size:18px; cursor:pointer; }

main { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.view.active { display:flex; }

/* 聊天 */
#chatLog { flex:1; overflow-y:auto; padding:12px; }
.msg { max-width:82%; margin:6px 0; padding:9px 12px; border-radius:12px; font-size:15px;
  line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.msg.user { margin-left:auto; background:var(--pri); color:#fff; border-bottom-right-radius:3px; }
.msg.ai { background:#fff; border-bottom-left-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.msg .who { display:block; font-size:12px; color:var(--pri); margin-bottom:2px; }
.msg.sys { background:transparent; color:var(--sub); font-size:12px; text-align:center; }

#inputBar { display:flex; gap:8px; padding:10px; background:#fff; border-top:1px solid #eee; }
#textInput { flex:1; border:1px solid #ddd; border-radius:20px; padding:10px 14px; font-size:15px;
  outline:none; }
button { border:none; border-radius:20px; padding:10px 16px; font-size:15px; cursor:pointer;
  background:#eee; color:var(--text); }
button.primary { background:var(--pri); color:#fff; }
#btnSend { background:var(--pri); color:#fff; }
.mic { width:46px; height:46px; border-radius:50%; background:var(--pri); color:#fff;
  font-size:20px; padding:0; flex-shrink:0; touch-action:none; }
.mic.recording { background:#e5484d; transform:scale(1.08); box-shadow:0 0 0 6px rgba(229,72,77,.15); }
.hint { text-align:center; color:#e5484d; font-size:13px; padding:4px; }
.hidden { display:none !important; }

/* 列表 */
.toolbar { padding:10px 12px 4px; }
#personaList, #voiceList { flex:1; overflow-y:auto; padding:8px 12px 20px; }
.card { background:#fff; border-radius:12px; padding:12px; margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); }
.card .row { display:flex; align-items:center; gap:8px; }
.card .name { font-weight:700; font-size:15px; flex:1; }
.card .desc { color:var(--sub); font-size:13px; margin-top:4px; max-height:60px; overflow:hidden; }
.card .mini { font-size:12px; color:var(--sub); }
/* 顶部标签栏 */
#tabs { display:flex; background:#fff; border-bottom:1px solid #eee; padding:6px 4px;
  position:sticky; top:0; z-index:6; }
#tabs button { flex:1; border-radius:10px; font-size:14px; padding:8px 0; background:none; }
#tabs button.active { background:#eef3ff; color:var(--pri); font-weight:600; }

/* 各页工具栏（清空/新增） */
.toolbar { display:flex; align-items:center; padding:8px 12px 4px; }
.chatbar { border-bottom:1px solid #eee; background:#fff; }
.barTitle { font-size:13px; color:var(--sub); }
.mini-btn { margin-left:auto; background:var(--pri); color:#fff; padding:6px 12px;
  font-size:13px; border-radius:14px; }
.card.persona-card:active { background:#eef3ff; }
.badge { font-size:11px; padding:2px 8px; border-radius:8px; background:#eee; color:var(--sub); }
.badge.current { background:#e6f7e6; color:#2e8b57; }
.badge.custom { background:#fff3e0; color:#b26a00; }
.card .ops { display:flex; gap:8px; margin-top:8px; }
.card .ops button { padding:6px 12px; font-size:13px; }

/* 模态 */
#modalMask { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center;
  justify-content:center; z-index:20; }
.panel { background:#fff; border-radius:14px; width:88%; max-width:420px; padding:16px;
  max-height:86vh; overflow-y:auto; }
.panel h3 { margin:0 0 12px; }
.panel label { display:block; font-size:13px; color:var(--sub); margin:10px 0 4px; }
.panel input,.panel textarea,.panel select { width:100%; border:1px solid #ddd; border-radius:8px;
  padding:9px 10px; font-size:14px; font-family:inherit; }
.modalBtns { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

#tabs button.active { background:#eef3ff; color:var(--pri); font-weight:600; }