:root {
  --bg:#0e1116; --card:#171b22; --line:#262c36; --txt:#e6e9ef; --dim:#9aa4b2;
  --ok:#3fb950; --gate:#f85149; --acc:#58a6ff; --accd:#1f6feb;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;
}
.hidden { display:none !important; }

header {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top));
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
  background:rgba(14,17,22,.95); backdrop-filter:blur(8px);
}
.logo { font-weight:700; font-size:15px; white-space:nowrap; cursor:pointer; user-select:none; }
.logo span { color:var(--acc); }
nav { margin-left:auto; display:flex; gap:6px; align-items:center; }
nav button, .rolepick {
  background:#21262d; color:var(--txt); border:1px solid var(--line);
  border-radius:9px; padding:8px 12px; font-size:13px; cursor:pointer; min-height:40px;
}
nav button.on { background:var(--accd); border-color:var(--accd); color:#fff; }

main { max-width:820px; margin:0 auto; padding:0 14px; }

/* welcome */
.hero { text-align:center; padding:56px 8px 40px; }
.hero h1 { font-size:clamp(28px,7vw,38px); margin:0 0 12px; line-height:1.1; }
.hero p { color:var(--dim); font-size:clamp(16px,4vw,18px); max-width:560px; margin:0 auto 26px; }
.cta { background:var(--acc); color:#04101f; font-weight:700; font-size:16px; border:none; border-radius:11px; padding:14px 28px; cursor:pointer; min-height:48px; }
.feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:36px 0 0; text-align:left; }
.feat div { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px; font-size:14px; color:var(--dim); }
.feat b { color:var(--txt); display:block; margin-bottom:3px; }
.install-hint { color:var(--dim); font-size:13px; margin-top:42px; }

/* setup */
.sethead { padding:24px 2px 4px; }
.sethead h2 { margin:0 0 4px; }
.sethead p { color:var(--dim); margin:0 0 6px; font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 15px; margin:0 0 11px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.name { font-weight:600; }
.badge { font-size:11px; padding:2px 9px; border-radius:20px; font-weight:700; white-space:nowrap; }
.b-ok{background:rgba(63,185,80,.16);color:var(--ok);}
.b-add{background:rgba(88,166,255,.14);color:var(--acc);}
.b-gate{background:rgba(248,81,73,.15);color:var(--gate);}
.free{color:var(--dim);font-size:13px;margin:5px 0 9px;}
.free a{color:var(--acc);text-decoration:none;}
.controls{display:flex;gap:8px;flex-wrap:wrap;}
input.key{flex:1;min-width:160px;background:#0b0e13;border:1px solid var(--line);border-radius:9px;color:var(--txt);padding:11px 12px;font:14px ui-monospace,Menlo,monospace;min-height:44px;-webkit-text-security:disc;text-security:disc;}
input.key:focus{outline:none;border-color:var(--acc);}
.save{background:var(--acc);color:#04101f;border:none;border-radius:9px;font-weight:600;padding:0 16px;cursor:pointer;min-height:44px;}
.test{background:#21262d;color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:0 16px;cursor:pointer;min-height:44px;}
.msg{font-size:12.5px;margin-top:8px;min-height:1.1em;}
.msg.ok{color:var(--ok);} .msg.err{color:var(--gate);} .msg.work{color:var(--dim);}
.donebar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 40%);padding:18px 0 max(18px,env(safe-area-inset-bottom));text-align:center;}

/* chat */
#view-chat { display:flex; flex-direction:column; height:calc(100dvh - 61px); }
.chatbar { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.newbtn { margin-left:auto; background:#21262d; color:var(--txt); border:1px solid var(--line); border-radius:9px; padding:8px 13px; font-size:13px; cursor:pointer; min-height:40px; }
.msgs { flex:1; overflow-y:auto; padding:16px 2px; -webkit-overflow-scrolling:touch; }
.bubble { max-width:90%; padding:11px 14px; border-radius:15px; margin:0 0 10px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.bubble.user { background:var(--accd); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.bubble.bot { background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; }
.served { font-size:11px; color:var(--dim); margin:-6px 0 12px 4px; }
.empty { text-align:center; color:var(--dim); margin-top:16vh; padding:0 20px; }
.composer { display:flex; gap:8px; padding:10px 0; padding-bottom:max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.composer textarea { flex:1; resize:none; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--txt); padding:12px 14px; font:16px inherit; max-height:140px; }
.composer textarea:focus { outline:none; border-color:var(--acc); }
.send { background:var(--acc); color:#04101f; border:none; border-radius:12px; font-weight:700; padding:0 20px; cursor:pointer; min-height:48px; }
.send:disabled { opacity:.5; }

@media (max-width:520px){ main{padding:0 11px;} .logo{font-size:14px;} .hero{padding:44px 6px 32px;} }