:root{
  --bg:#f7f3ee; --panel:#ffffff; --ink:#1f1b16; --sub:#6b6358;
  --accent2:#e8732c; --bubble-u:#1e2a4a; --bubble-u-ink:#fff;
  --bubble-a:#fff; --border:#e7e0d6;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15130f; --panel:#201d18; --ink:#f1ece3; --sub:#aba393;
    --bubble-a:#2a261f; --border:#332e26;
  }
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;}
header h1{font-size:16px;margin:0;}
header p{font-size:12px;color:var(--sub);margin:0;}
#chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;max-width:720px;margin:0 auto;width:100%;}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:85%;}
.msg.user{align-self:flex-end;flex-direction:row-reverse;}
.msg img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;}
.bubble{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;}
.msg.user .bubble{background:var(--bubble-u);color:var(--bubble-u-ink);border-bottom-right-radius:4px;}
.msg.assistant .bubble{background:var(--bubble-a);border:1px solid var(--border);border-bottom-left-radius:4px;}
.typing{font-size:13px;color:var(--sub);padding:0 16px;max-width:720px;margin:0 auto;width:100%;}
footer{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--border);}
#inputRow{max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;}
#inputRow textarea{flex:1;resize:none;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:14px;padding:10px 12px;font-size:15px;font-family:inherit;max-height:120px;}
#inputRow button{border:none;border-radius:50%;width:42px;height:42px;flex:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
#micBtn{background:var(--bg);border:1px solid var(--border);color:var(--ink);}
#micBtn.rec{background:#d5402f;color:#fff;border-color:#d5402f;}
#sendBtn{background:var(--accent2);color:#fff;}
#nameGate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;}
#nameGate .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:360px;width:100%;text-align:center;}
#nameGate img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:12px;}
#nameGate h2{margin:0 0 4px;font-size:18px;}
#nameGate .sub{color:var(--sub);font-size:14px;margin:0;}
#nameGate input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font-size:15px;margin:12px 0;}
#nameGate button{width:100%;padding:10px;border-radius:10px;border:none;background:var(--accent2);color:#fff;font-size:15px;cursor:pointer;}
.hidden{display:none !important;}
::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}