:root { --bg:#1e1f22; --panel:#2b2d31; --raised:#383a40; --text:#f2f3f5; --dim:#b5bac1; --accent:#5865f2; --mine:#3c4270; --red:#da373c; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { display: flex; height: 100%; position: relative; }
#tabs { width: 240px; flex: none; background: var(--panel); overflow-y: auto; padding: 8px; }
.tab { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--dim); padding: 10px; border-radius: 6px; cursor: pointer; font: inherit; position: relative; min-height: 44px; }
.tab:hover { background: var(--raised); }
.tab.on { background: var(--raised); color: var(--text); }
.tab b { display: block; padding-right: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { position: absolute; right: 8px; top: 10px; background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
#chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#head { padding: 12px 16px; border-bottom: 1px solid #111214; font-weight: 600; }
#head small { display: block; font-weight: 400; color: var(--dim); }
#log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 75%; align-self: flex-start; background: var(--panel); padding: 8px 12px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--mine); }
.msg small { display: block; color: var(--dim); font-size: 12px; margin-bottom: 2px; }
.empty { margin: auto; color: var(--dim); text-align: center; padding: 16px; }
#send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #111214; }
#text { flex: 1; min-width: 0; background: var(--raised); border: 0; border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; }
#go { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
#go:disabled, #text:disabled { opacity: .5; cursor: default; }
#status { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); background: var(--red); color: #fff; padding: 6px 12px; border-radius: 6px; display: none; max-width: 90%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) {
  #app { flex-direction: column; }
  #tabs { width: 100%; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; flex: none; }
  .tab { width: 170px; flex: none; }
  .msg { max-width: 88%; }
}