:root{--bg:#f4f5f7;--card:#fff;--ink:#161616;--muted:#6f6f6f;--line:#e0e0e0;--accent:#0f62fe;--warn:#8a6d00;--warnbg:#fdf6dd;--err:#da1e28}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none !important}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;background:#161616;color:#fff}
.brand{display:flex;align-items:center;gap:12px}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:var(--accent);font-weight:700;font-size:14px}
.brand .sub{display:block;font-size:12px;color:#a8a8a8}
.user-box{display:flex;align-items:center;gap:12px}
.user-meta{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.user-meta span{font-size:12px;color:#a8a8a8}
.badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:#393939}
.badge[data-role="viewer"]{background:#4d5358}
.badge[data-role="editor"]{background:#0043ce}
.badge[data-role="admin"]{background:#6929c4}
main{padding:32px 24px}
.center{display:grid;place-items:center;min-height:70vh}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:28px;max-width:640px;margin:0 auto}
.card.login{max-width:420px}
h1{margin:0 0 6px;font-size:24px}
.muted{color:var(--muted)}
label{display:block;margin:14px 0 4px;font-size:13px;font-weight:600}
input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;font-size:15px;background:#f4f4f4}
input:focus{outline:2px solid var(--accent);background:#fff}
.btn{margin-top:18px;padding:11px 18px;border:0;border-radius:6px;font-size:15px;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;width:100%}
.btn.primary:hover{background:#0050e6}
.btn.ghost{margin:0;background:transparent;color:#fff;border:1px solid #525252}
.btn.ghost:hover{background:#393939}
.error{color:var(--err);font-size:14px;margin:12px 0 0}
.notice{margin:16px 0;padding:12px 14px;border-radius:6px;font-size:14px;border-left:4px solid var(--warn);background:var(--warnbg);color:var(--warn)}
.demo-users{margin-top:22px;border-top:1px solid var(--line);padding-top:14px;font-size:14px}
.demo-users summary{cursor:pointer;font-weight:600}
.linkish{display:block;width:100%;text-align:left;margin:6px 0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;cursor:pointer}
.linkish:hover{border-color:var(--accent);color:var(--accent)}
code{background:#eee;padding:1px 5px;border-radius:4px;font-size:13px}
.hints{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.hints li{margin:4px 0}

/* ---- click-triggered chat launcher and login dialog ---- */
.launcher{position:fixed;right:24px;bottom:24px;z-index:40;padding:14px 22px;border:0;border-radius:999px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.24)}
.launcher:hover{background:#0050e6}
.launcher:focus-visible{outline:3px solid #161616;outline-offset:2px}
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(22,22,22,.55)}
.overlay .card{position:relative;width:min(420px,92vw)}
.close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:26px;
  line-height:1;color:var(--muted);cursor:pointer}
.close:hover{color:var(--ink)}
.btn.primary:disabled{opacity:.6;cursor:default}
main{padding:32px 24px 120px}