:root{
  --ink:#141b2b;
  --ink-2:#1d2740;
  --line:#2b3752;
  --paper:#f2efe6;
  --paper-dim:#c7c3b8;
  --amber:#e8a33d;
  --live:#4fb783;
  --dead:#8a94a8;
  --hot:#d9634a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  background:var(--ink);
  color:var(--paper);
}
button{font:inherit;cursor:pointer}
input{font:inherit}
.hidden{display:none !important}
.err{color:var(--hot);font-size:13px;min-height:18px}

/* gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--ink);z-index:20}
.gate-card{width:min(360px,90vw);display:flex;flex-direction:column;gap:12px}
.gate-card h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em}
.gate-card p{margin:0;color:var(--paper-dim);font-size:14px}
.gate-card input,.gate-card button{padding:11px 13px;border-radius:6px;border:1px solid var(--line)}
.gate-card input{background:var(--ink-2);color:var(--paper)}
.gate-card button{background:var(--amber);border-color:var(--amber);color:#1a1206;font-weight:600}

/* shell */
.app{display:grid;grid-template-columns:240px 280px 1fr;height:100vh}
.lines,.chats{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.lines{background:var(--ink-2)}
.lines-head,.pane-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--line);min-height:56px;
}
.brand{font-weight:600;letter-spacing:-.01em}
.lines-head button,.lines-foot button{
  background:none;border:1px solid var(--line);color:var(--paper-dim);
  border-radius:5px;padding:5px 9px;font-size:12px;
}
.lines-head button:hover,.lines-foot button:hover{color:var(--paper);border-color:var(--amber)}
.lines-foot{padding:12px 16px;border-top:1px solid var(--line)}
.lines-foot button{width:100%}

ul{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}

.line{padding:12px 16px;border-bottom:1px solid rgba(43,55,82,.5);cursor:pointer}
.line:hover{background:rgba(232,163,61,.07)}
.line.on{background:rgba(232,163,61,.13);box-shadow:inset 3px 0 0 var(--amber)}
.line-top{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dead);flex:none}
.dot.connected{background:var(--live)}
.dot.qr,.dot.connecting,.dot.reconnecting{background:var(--amber)}
.dot.logged_out{background:var(--hot)}
.line-label{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-sub{font-size:12px;color:var(--paper-dim);margin-top:2px}

.chat{padding:12px 16px;border-bottom:1px solid rgba(43,55,82,.5);cursor:pointer}
.chat:hover{background:rgba(255,255,255,.03)}
.chat.on{background:rgba(255,255,255,.06)}
.chat-name{font-weight:500;font-size:14px}
.chat-last{font-size:12.5px;color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

.empty{padding:28px 20px;color:var(--paper-dim);font-size:14px}

/* thread */
.thread{display:flex;flex-direction:column;min-height:0}
.thread-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:min(60ch,72%);padding:8px 12px;border-radius:10px;font-size:14.5px;word-wrap:break-word}
.bubble.in{background:var(--ink-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.bubble.out{background:var(--amber);color:#1a1206;align-self:flex-end;border-bottom-right-radius:3px}
.bubble time{display:block;font-size:11px;opacity:.6;margin-top:3px}
.day{align-self:center;font-size:12px;color:var(--paper-dim);padding:4px 0}

.composer{display:flex;gap:8px;padding:14px 24px;border-top:1px solid var(--line)}
.composer input{
  padding:10px 12px;border-radius:6px;border:1px solid var(--line);
  background:var(--ink-2);color:var(--paper);
}
#to{width:170px}
#text{flex:1}
.composer button{
  padding:10px 20px;border-radius:6px;border:none;
  background:var(--amber);color:#1a1206;font-weight:600;
}
.composer button:disabled{opacity:.5;cursor:default}

.clip{
  display:grid;place-items:center;width:40px;border:1px solid var(--line);
  border-radius:6px;color:var(--paper-dim);font-size:22px;cursor:pointer;
}
.clip:hover{color:var(--amber);border-color:var(--amber)}
.attached{
  display:flex;align-items:center;gap:10px;padding:8px 24px;
  border-top:1px solid var(--line);font-size:13px;color:var(--paper-dim);
}
.attached button{background:none;border:none;color:var(--hot);font-size:18px}
.bubble img,.bubble video{
  max-width:min(100%,300px);max-height:300px;width:auto;height:auto;
  object-fit:contain;border-radius:6px;display:block;margin-bottom:4px;
}
.bubble a.file{color:inherit;text-decoration:underline}
.bubble audio{display:block;margin-bottom:4px;max-width:260px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,14,22,.75);display:grid;place-items:center;z-index:30}
.modal-card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:26px;width:min(400px,92vw)}
.modal-x{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--paper-dim);font-size:24px;line-height:1}
.modal-card h2{margin:0 0 6px;font-size:19px;font-weight:600}
.modal-card p{margin:0 0 14px;color:var(--paper-dim);font-size:13.5px}
.modal-card input{width:100%;padding:10px 12px;margin-bottom:10px;border-radius:6px;border:1px solid var(--line);background:var(--ink);color:var(--paper)}
.modal-card button.primary{width:100%;padding:10px;border-radius:6px;border:none;background:var(--amber);color:#1a1206;font-weight:600}
.qr-box{background:#fff;padding:10px;border-radius:8px;display:grid;place-items:center;min-height:200px}
.qr-box img{display:block;width:100%;max-width:300px}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lines,.chats{display:none}
}