:root{
  --bg:#f2f3f5;
  --bar:#ffffff;
  --line:#e6e8eb;
  --text:#111418;
  --muted:#8a9099;
  --her:#ffffff;
  --me:#4c9dff;
  --me2:#3d8bf0;
  --brand:#4c9dff;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overscroll-behavior:none;
}

.app{display:flex;flex-direction:column;height:100dvh;max-width:760px;margin:0 auto;background:var(--bg)}

/* 顶栏 */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 8px) 12px 8px;
  background:var(--bar);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
}
.avatar{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;background:#dce9ff;color:#2f6fd0;font-weight:700;font-size:15px;
  background-size:cover;background-position:center;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.meta{flex:1;min-width:0;text-align:center}
.name{font-weight:600;font-size:16px;line-height:1.25}
.sub{font-size:11.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:4px}
.dot{width:6px;height:6px;border-radius:50%;background:#31c48d;display:inline-block}
.actions{display:flex;gap:6px}
.iconbtn{
  width:34px;height:34px;border-radius:9px;border:0;background:transparent;
  color:#3a4149;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.iconbtn:active{background:#eef0f3}

/* 聊天区 */
.chat{
  flex:1;overflow-y:auto;padding:14px 12px 6px;
  display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;
}
.intro{text-align:center;color:var(--muted);padding:40px 0 8px}
.intro-avatar{
  width:66px;height:66px;border-radius:18px;margin:0 auto 10px;overflow:hidden;
  display:grid;place-items:center;font-size:24px;font-weight:700;color:#2f6fd0;background:#dce9ff;
  background-size:cover;background-position:center;
}
.intro p{margin:0;font-size:13px}

.msg{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.msg.me{flex-direction:row-reverse}
.msg .ava{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#2f6fd0;background:#dce9ff;
  background-size:cover;background-position:center;
}
.msg .ava img{width:100%;height:100%;object-fit:cover;display:block}
.bubble{
  position:relative;max-width:70%;padding:9px 12px;border-radius:10px;
  font-size:15.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
  animation:pop .16s ease-out;
}
.msg.her .bubble{background:var(--her);box-shadow:0 1px 2px rgba(16,24,40,.06);border:1px solid rgba(16,24,40,.03)}
.msg.her .bubble::before{
  content:"";position:absolute;left:-5px;top:13px;width:9px;height:9px;background:var(--her);
  transform:rotate(45deg);border-left:1px solid rgba(16,24,40,.03);border-bottom:1px solid rgba(16,24,40,.03);
}
.msg.me .bubble{background:var(--me);color:#fff}
.msg.me .bubble::after{
  content:"";position:absolute;right:-5px;top:13px;width:9px;height:9px;background:var(--me);transform:rotate(45deg);
}
.bubble.plain{padding:0;background:none!important;box-shadow:none!important;border:0}
.bubble.plain::before,.bubble.plain::after{display:none!important}
.bubble.media{padding:4px;background:var(--her);overflow:hidden}
.bubble.media img{max-width:100%;max-height:280px;border-radius:7px;display:block}
.bubble .sticker{width:120px;height:120px;object-fit:contain;display:block}
.sys{align-self:center;color:#8a9099;font-size:12px;background:rgba(255,255,255,.7);
  padding:4px 10px;border-radius:999px;max-width:88%;text-align:center}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 正在输入 */
.typing{display:flex;gap:4px;align-items:center;padding:0 16px 6px;height:16px}
.typing[hidden]{display:none}
.typing .dot{width:5px;height:5px;border-radius:50%;background:#9aa3ad;animation:blink 1.1s infinite}
.typing .dot:nth-child(2){animation-delay:.16s}
.typing .dot:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* 底部输入 */
.composer{
  display:flex;align-items:flex-end;gap:6px;
  padding:7px 8px calc(var(--safe-b) + 7px);
  background:var(--bar);border-top:1px solid var(--line);
}
.tool{
  width:34px;height:38px;flex:0 0 auto;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:#4a5159;
}
.tool:active{opacity:.6}
#input{
  flex:1;min-width:0;resize:none;max-height:110px;
  padding:9px 12px;border-radius:8px;border:0;background:#f2f3f5;
  color:var(--text);font-size:16px;line-height:1.4;font-family:inherit;outline:none;
}
#input::placeholder{color:#a3a9b2}
.send{
  height:36px;min-width:56px;padding:0 14px;flex:0 0 auto;border:0;border-radius:8px;
  background:var(--me);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;
}
.send:disabled{background:#bcd7fb}
.send:active{background:var(--me2)}

/* 抽屉 */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.32)}
.sheet[hidden]{display:none}
.sheet-inner{
  width:100%;max-width:760px;max-height:88dvh;display:flex;flex-direction:column;
  background:#fff;border-radius:16px 16px 0 0;
  padding-bottom:calc(var(--safe-b) + 12px);animation:up .2s ease-out;
}
@keyframes up{from{transform:translateY(16px);opacity:.7}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.sheet-head h2{margin:0;font-size:16.5px}
.sheet-body{overflow-y:auto;padding:2px 16px 10px}
.field{display:block;margin:13px 0}
.field>span{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}
.field input[type=text],.field input[type=password],.field select,.field input[type=file]{
  width:100%;padding:10px 12px;border-radius:9px;font-size:16px;font-family:inherit;
  background:#f5f6f8;border:1px solid var(--line);color:var(--text);outline:none;
}
.field small{display:block;color:#98a0aa;font-size:11.5px;margin-top:5px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.row input[type=checkbox]{width:21px;height:21px;accent-color:var(--brand)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.ghost{
  padding:8px 13px;border-radius:8px;background:#f2f4f7;border:1px solid var(--line);
  color:#1f2937;font-size:13.5px;font-family:inherit;cursor:pointer;
}
.ghost:active{background:#e9edf2}
.ghost.danger{color:#e5484d}
.divider{height:1px;background:var(--line);margin:8px 0}
.tiny{color:#98a0aa;font-size:11.5px;text-align:center;margin:14px 0 2px}
.hint{color:#98a0aa;font-size:12px;margin:6px 0 0}

/* 头像行 */
.avorow{display:flex;align-items:center;gap:12px;margin:12px 0}
.avorow .pv{width:52px;height:52px;border-radius:13px;overflow:hidden;background:#dce9ff;display:grid;place-items:center;color:#2f6fd0;font-weight:700;background-size:cover;background-position:center}
.avorow .pv img{width:100%;height:100%;object-fit:cover}
.avorow .ctl{display:flex;flex-direction:column;gap:6px}
.avorow .ctl .btnrow{display:flex;gap:6px}

/* 记忆 / 表情列表 */
.memadd{display:flex;gap:8px;margin:10px 0 4px}
.memadd input{flex:1;padding:10px 12px;border-radius:9px;background:#f5f6f8;border:1px solid var(--line);font-size:16px;outline:none}
.memlist{list-style:none;margin:4px 0 0;padding:0}
.memlist li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.memlist li span{flex:1;word-break:break-word}
.memlist li button{border:0;background:none;color:#9aa3ad;font-size:16px;cursor:pointer}
.memlist .empty{color:#98a0aa;font-size:13px;justify-content:center;border:0}

/* 表情面板 */
.stickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.stickgrid .cell{
  position:relative;aspect-ratio:1;border-radius:10px;background:#f5f6f8;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;
}
.stickgrid .cell img{width:100%;height:100%;object-fit:contain}
.stickgrid .cell .del{
  position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(0,0,0,.45);color:#fff;font-size:12px;line-height:20px;padding:0;cursor:pointer;
}
.stickgrid .cell.add{color:#8a9099;font-size:22px}

/* 语音设置里的滑杆与按钮 */
input[type=range].range{width:100%;accent-color:var(--me);padding:0;background:none;border:0}
#cloudVoiceWrap .ghost{margin:6px 0 2px}
.dot.off{background:#c3c8cf}