/* Discord-style dark theme */
:root {
  --bg-rail: #1e1f22;
  --bg-sidebar: #2b2d31;
  --bg-chat: #313338;
  --bg-hover: #35373c;
  --bg-active: #404249;
  --bg-input: #383a40;
  --bg-card: #232428;
  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-header: #f2f3f5;
  --text-link: #00a8fc;
  --blurple: #5865f2;
  --blurple-hover: #4753c4;
  --green: #23a55a;
  --red: #da373c;
  --red-hover: #a12d2f;
  --yellow: #f0b232;
  --divider: #3f4147;
  --font-display: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-display);
  background: var(--bg-chat);
  color: var(--text-normal);
  overflow: hidden;
  font-size: 15px;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- auth ---------- */
.auth-wrap {
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #404eed 0%, #2b2d31 100%);
}
.auth-card {
  background: var(--bg-card);
  padding: 32px;
  border-radius: 8px;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.auth-card h1 { color: var(--text-header); font-size: 24px; text-align: center; }
.auth-sub { color: var(--text-muted); text-align: center; margin: 8px 0 20px; }
.auth-card label { display: block; font-size: 12px; font-weight: 700; color: #b5bac1; margin-bottom: 16px; }
.auth-card input {
  width: 100%; margin-top: 6px; padding: 10px;
  background: #1e1f22; color: var(--text-normal);
  border: 1px solid #1e1f22; border-radius: 4px; font-size: 15px; outline: none;
}
.auth-card input:focus { border-color: var(--blurple); }
.auth-error { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.auth-switch { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.auth-switch a { color: var(--text-link); text-decoration: none; margin-left: 4px; }

/* saved accounts on the login screen: click to sign in, ✕ to really log out */
.auth-accounts { margin-bottom: 14px; }
.auth-accounts-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text-muted); margin-bottom: 8px;
}
.auth-account {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--divider); border-radius: 6px;
  background: #1e1f22; cursor: pointer; margin-bottom: 8px;
  transition: background .15s, border-color .15s;
}
.auth-account:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.auth-account-meta { flex: 1; min-width: 0; text-align: left; }
.auth-account-name {
  color: var(--text-header); font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-account-user {
  color: var(--text-muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-account-x { color: var(--text-muted); padding: 6px 8px; border-radius: 4px; font-size: 13px; }
.auth-account-x:hover { color: #fff; background: var(--red); }
.auth-accounts-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 12px; margin: 12px 0 4px;
}
.auth-accounts-or::before, .auth-accounts-or::after {
  content: ''; flex: 1; height: 1px; background: var(--divider);
}

.btn-primary {
  width: 100%; padding: 10px; background: var(--blurple); color: #fff;
  border-radius: 4px; font-size: 15px; font-weight: 500;
}
.btn-primary:hover { background: var(--blurple-hover); }
.btn-secondary {
  padding: 8px 16px; background: transparent; color: var(--text-normal);
  border: 1px solid var(--divider); border-radius: 4px; font-size: 14px;
}
.btn-secondary:hover { background: var(--bg-hover); }

/* ---------- app layout ---------- */
.app { display: flex; height: 100vh; }

/* rail */
.rail {
  width: 72px; min-width: 72px;
  background: var(--bg-rail);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 8px; overflow-y: auto;
}
.rail-item {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-sidebar); color: var(--text-normal);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600;
  transition: border-radius .2s, background .2s;
  position: relative; overflow: hidden;
}
.rail-item:hover, .rail-item.active { border-radius: 16px; background: var(--blurple); color: #fff; }
.rail-item.active::before {
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 40px; background: #fff; border-radius: 0 4px 4px 0;
}
.rail-friends svg { width: 28px; height: 28px; }
.rail-sep { width: 32px; height: 2px; background: var(--bg-sidebar); border-radius: 1px; }
.rail-add { color: var(--green); font-size: 28px; }
.rail-add:hover { background: var(--green); color: #fff; }
.rail-archive { color: var(--text-muted); }
.rail-archive svg { width: 26px; height: 26px; }
.rail-channel { font-size: 14px; }
.rail-badge {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 3px solid var(--bg-rail);
}

/* sidebar */
.sidebar {
  width: 240px; min-width: 240px;
  background: var(--bg-sidebar);
  display: flex; flex-direction: column;
}
.sidebar-search {
  padding: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.2);
  display: flex; align-items: center; gap: 4px;
}
.sidebar-search input {
  flex: 1; min-width: 0;
  padding: 6px 8px; background: #1e1f22; color: var(--text-normal);
  border: none; border-radius: 4px; font-size: 13px; outline: none; cursor: pointer;
}
.sidebar-collapse { flex-shrink: 0; padding: 4px; }
/* collapsed: the whole left column — group rail AND DM list — folds away so the
   conversation gets the full width; the slim handle on the left edge brings it
   back. */
#app.sidebar-hidden .rail,
#app.sidebar-hidden .sidebar {
  width: 0; min-width: 0; padding: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
}
#app .rail { transition: width .16s ease, min-width .16s ease, opacity .12s linear; }
#app .sidebar { transition: width .16s ease, min-width .16s ease, opacity .12s linear; }
.nav-restore {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 15px; height: 68px; border-radius: 0 8px 8px 0;
  background: var(--bg-rail); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 1px 0 4px rgba(0,0,0,.35);
  transition: width .12s ease, color .12s ease;
}
.nav-restore:hover { width: 22px; color: #fff; background: var(--bg-active); }
#sidebar-content { flex: 1; overflow-y: auto; padding: 8px; }
.sidebar-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 8px 4px; letter-spacing: .3px;
  display: flex; justify-content: space-between; align-items: center;
}
.sidebar-label button { color: var(--text-muted); font-size: 16px; line-height: 1; }
.sidebar-label button:hover { color: var(--text-header); }
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 4px; cursor: pointer; color: var(--text-muted);
  position: relative;
}
.sidebar-item:hover { background: var(--bg-hover); color: var(--text-normal); }
.sidebar-item.active { background: var(--bg-active); color: var(--text-header); }
.sidebar-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sidebar-item .leave-x {
  opacity: 0; color: var(--text-muted); font-size: 16px; padding: 2px 4px; border-radius: 4px;
}
.sidebar-item:hover .leave-x { opacity: 1; }
.sidebar-item .leave-x:hover { color: var(--text-header); background: var(--bg-rail); }

/* avatars */
.avatar {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px; position: relative;
}
.avatar.lg { width: 40px; height: 40px; min-width: 40px; font-size: 16px; }
.avatar.xl { width: 80px; height: 80px; min-width: 80px; font-size: 32px; }
/* multi-letter / symbol defaults ("AL", "PH", "C++") need a smaller size */
.avatar.avatar-multi { font-size: 12px; letter-spacing: .5px; }
.avatar.lg.avatar-multi { font-size: 14px; }
.avatar.xl.avatar-multi { font-size: 26px; }
.avatar .dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-muted); border: 3px solid var(--bg-sidebar);
}
.avatar .dot.online { background: var(--green); }
.chat-header .avatar .dot { border-color: var(--bg-chat); }

/* sidebar user panel */
.sidebar-user {
  padding: 8px; background: rgba(0,0,0,.2);
  display: flex; align-items: center; gap: 8px;
}
.sidebar-user .info { flex: 1; overflow: hidden; }
.sidebar-user .uname { font-weight: 600; font-size: 14px; color: var(--text-header); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .status { font-size: 11px; color: var(--text-muted); }
.icon-btn {
  color: var(--text-muted); padding: 6px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text-header); background: var(--bg-hover); }
.icon-btn.danger:hover { color: var(--red); }

/* ---------- main ---------- */
.main { flex: 1; display: flex; flex-direction: column; background: var(--bg-chat); min-width: 0; position: relative; }

/* chat header */
.chat-header {
  height: 48px; min-height: 48px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 0 rgba(0,0,0,.2); z-index: 1;
}
.chat-header-title { display: flex; align-items: center; gap: 8px; color: var(--text-header); font-weight: 600; min-width: 0; }
.chat-header-icon { color: var(--text-muted); font-size: 22px; }
.chat-header-icon.has-image {
  width: 26px; height: 26px; min-width: 26px; border-radius: 30%;
  background-size: cover; background-position: center; font-size: 0;
}
.chat-header-sub { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.chat-header-actions { display: flex; gap: 4px; }
.chat-header-actions .icon-btn { color: var(--text-muted); }

/* chat view: a flex column so the composer is ALWAYS pinned to the bottom,
   with the message list filling (and scrolling) the space above it */
.chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-body { flex: 1; display: flex; min-height: 0; }
.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* members panel (right side of the chat) */
.members-panel {
  width: 240px; min-width: 240px;
  background: var(--bg-sidebar);
  border-left: 1px solid rgba(0,0,0,.2);
  overflow-y: auto; padding: 12px 8px;
}
.members-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 8px 8px; letter-spacing: .3px;
}
.member-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; }
.member-row:hover { background: var(--bg-hover); }
.member-row .m-info { flex: 1; min-width: 0; }
.member-row .m-name {
  color: var(--text-normal); font-weight: 500; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-row .m-you { color: var(--text-muted); font-size: 11px; }
.kick-btn {
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 4px; opacity: .6;
}
.member-row:hover .kick-btn { opacity: 1; }
.kick-btn:hover { color: #fff; background: var(--red); }

/* messages */
.messages { flex: 1; overflow-y: auto; padding: 16px 0; }
.msg-group { display: flex; gap: 12px; padding: 2px 16px; }
.msg-group:hover { background: rgba(0,0,0,.04); }
.msg-avatar-col { width: 40px; min-width: 40px; }
.msg-content { flex: 1; min-width: 0; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 600; color: var(--text-header); }
.msg-time { font-size: 11px; color: var(--text-muted); }
.msg-text { color: var(--text-normal); word-wrap: break-word; white-space: pre-wrap; }
.msg-system {
  padding: 4px 16px 4px 68px; color: var(--text-muted); font-size: 13px;
}
/* the meeting invite inside a system message — "…join: /meet/g_…" */
.meet-link { color: var(--text-link); text-decoration: none; }
.meet-link:hover { text-decoration: underline; }

/* a person inside a system line — an @mention resolved from their account id,
   not a name pasted into the text when the line was written */
.msg-system .mention {
  padding: 1px 4px; border-radius: 4px;
  background: rgba(88,101,242,.22); color: #c9cdfb; font-weight: 600;
  cursor: pointer;
}
.msg-system .mention:hover { background: var(--blurple); color: #fff; }
.msg-system .mention-deleted { background: rgba(218,55,60,.18); color: #f2a0a2; }
/* the line mentions YOU: it reads as a ping in the transcript */
.msg-system .mention-me { background: rgba(88,101,242,.5); color: #fff; }
.msg-system.mentions-me {
  background: rgba(88,101,242,.1);
  border-left: 3px solid var(--blurple);
  padding-left: 65px;
}

/* ---------- meeting guest door + guest mode ---------- */
.meet-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-chat);
}
.meet-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 40px 30px;
  width: min(400px, calc(100% - 40px));
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.meet-emoji { font-size: 46px; margin-bottom: 12px; }
.meet-card h1 {
  font-size: 22px;
  color: var(--text-header);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.meet-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.meet-card input {
  width: 100%;
  background: var(--bg-input);
  border: none;
  border-radius: 6px;
  color: var(--text-normal);
  padding: 11px 12px;
  font-size: 15px;
  margin-bottom: 14px;
  outline: none;
}
.meet-card input::placeholder { color: var(--text-muted); }
.meet-card .btn-primary { width: 100%; padding: 11px; font-size: 15px; }
.meet-error { color: var(--red); font-size: 13px; margin-top: 14px; }
.meet-note { color: var(--text-muted); font-size: 12px; margin-top: 16px; }
/* guests keep the chat + calls; the account surfaces disappear */
body.guest-mode #rail,
body.guest-mode #sidebar { display: none; }
body.guest-mode #btn-attach { display: none; }
.msg-date-divider {
  display: flex; align-items: center; gap: 8px; margin: 16px 16px 4px;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
}
.msg-date-divider::before, .msg-date-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--divider);
}
.welcome-block { padding: 16px 16px 8px 68px; }
.welcome-block h2 { color: var(--text-header); font-size: 24px; }
.welcome-block p { color: var(--text-muted); }

/* typing + composer */
.typing-row { height: 22px; padding: 0 20px; font-size: 13px; color: var(--text-normal); font-style: italic; }
.composer { padding: 0 16px 20px; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1; resize: none; background: var(--bg-input); color: var(--text-normal);
  border: none; border-radius: 8px; padding: 12px; font-size: 15px; outline: none;
  max-height: 160px; line-height: 1.35;
}
.send-btn { color: var(--blurple) !important; }
.attach-btn { color: var(--text-muted); }
.attach-btn:hover { color: var(--text-header); }

/* message hover actions: edit + delete on your own messages */
.msg-actions { display: flex; gap: 2px; margin-left: auto; align-self: flex-start; opacity: 0; }
.msg-group:hover .msg-actions { opacity: 1; }
.msg-actions .icon-btn { padding: 4px; font-size: 14px; }
.msg-edited { color: var(--text-muted); font-size: 11px; font-style: italic; margin-left: 6px; }
.msg-edited-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.msg-edited-link:hover { color: var(--text-normal); }

/* message edit history modal */
.hist-item {
  border: 1px solid var(--divider); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px; background: var(--bg-rail);
}
.hist-current { border-color: var(--green); }
.hist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hist-tag {
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-active); color: var(--text-header); flex-shrink: 0;
}
.hist-current .hist-tag { background: var(--green); color: #fff; }
.hist-who { font-size: 12px; font-weight: 600; color: var(--text-normal); }
.hist-time { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.hist-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--text-normal); }
.msg-deleted { color: #72767d; font-style: italic; }
.msg-editing { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.msg-editing textarea {
  width: 100%; resize: none; background: var(--bg-input); color: var(--text-normal);
  border: none; border-radius: 8px; padding: 10px; font-size: 15px; outline: none;
  font-family: inherit; min-height: 44px;
}
.msg-edit-btns { display: flex; gap: 8px; justify-content: flex-end; }
.msg-edit-btns .btn-primary { width: auto; padding: 6px 14px; font-size: 13px; }
.msg-edit-btns .btn-secondary { padding: 6px 12px; font-size: 13px; }

/* file attachments */
.msg-attachment {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  background: var(--bg-card); border: 1px solid var(--divider);
  border-radius: 8px; padding: 10px 12px; max-width: 380px; cursor: pointer;
}
.msg-attachment:hover { border-color: var(--text-muted); }
.att-icon { font-size: 22px; }
.att-meta { min-width: 0; }
.att-name { color: var(--text-header); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { color: var(--text-muted); font-size: 12px; }
.att-badge {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  background: var(--blurple); color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle;
}
.att-loading { color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 6px; }
.att-gone { color: var(--red); font-size: 12px; font-style: italic; margin-top: 6px; }
.att-preview-img {
  display: block; max-width: 420px; max-height: 320px; border-radius: 8px;
  margin-top: 6px; cursor: zoom-in; background: var(--bg-card);
}
.att-preview-video {
  display: block; max-width: 420px; max-height: 320px; border-radius: 8px;
  margin-top: 6px; background: #000;
}
.att-preview-audio {
  display: block; width: 100%; max-width: 420px; margin-top: 6px;
  color-scheme: dark; /* the native transport follows the dark theme */
}
.att-preview-text {
  margin: 6px 0 0; padding: 10px 12px; max-width: 480px; max-height: 220px; overflow: auto;
  background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px;
  font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 12.5px; color: #dbdee1;
  white-space: pre-wrap; word-break: break-word; cursor: pointer;
}

/* right-click context menu */
.ctx-menu {
  position: fixed; z-index: 300; min-width: 210px; padding: 6px;
  background: #111214; border: 1px solid #2e3035; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; border-radius: 4px; background: none;
  color: #dbdee1; text-align: left; cursor: pointer; font-size: 14px; font-family: inherit;
}
.ctx-item:hover { background: var(--blurple); color: #fff; }
.ctx-item.danger { color: #f23f43; }
.ctx-item.danger:hover { background: #f23f43; color: #fff; }
.ctx-item.disabled { color: #72767d; cursor: default; font-style: italic; }
.ctx-item.disabled:hover { background: none; color: #72767d; }
.ctx-sep { height: 1px; margin: 4px 6px; background: #2e3035; }
.ctx-head {
  padding: 4px 10px 6px; color: #72767d; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- friends view ---------- */
.friends-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.friends-header { justify-content: flex-start; gap: 16px; }
.friends-tabs { display: flex; align-items: center; gap: 6px; }
.ftab {
  padding: 4px 10px; border-radius: 4px; font-size: 14px; color: var(--text-muted);
}
.ftab:hover { background: var(--bg-hover); color: var(--text-normal); }
.ftab.active { background: var(--bg-active); color: var(--text-header); }
.ftab.add-friend { background: var(--green); color: #fff; }
.ftab.add-friend:hover { background: #1a8245; }
.ftab-sep { width: 1px; height: 24px; background: var(--divider); margin: 0 6px; }
.badge {
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
}
.friends-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.friends-body h3 { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; }
.friend-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 6px; border-top: 1px solid var(--divider);
  cursor: pointer;
}
.friend-row:first-of-type { border-top: none; }
.friend-row:hover { background: var(--bg-hover); }
.friend-row .info { flex: 1; min-width: 0; }
.friend-row .fname { font-weight: 600; color: var(--text-header); }
.friend-row .fsub { font-size: 12px; color: var(--text-muted); }
.friend-row .actions { display: flex; gap: 8px; }
.round-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-rail); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.round-btn:hover { color: var(--text-header); }
.round-btn.green:hover { color: var(--green); }
.round-btn.red:hover { color: var(--red); }
.empty-note { color: var(--text-muted); font-size: 14px; padding: 8px 4px; }
.add-friend-form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.add-friend-form p { color: var(--text-muted); font-size: 14px; }
.add-friend-input-row { display: flex; gap: 12px; }
.add-friend-input-row input {
  flex: 1; background: var(--bg-card); color: var(--text-normal);
  border: none; border-radius: 8px; padding: 12px; outline: none; font-size: 15px;
}
.add-friend-msg { font-size: 14px; min-height: 20px; }
.add-friend-msg.ok { color: var(--green); }
.add-friend-msg.err { color: var(--red); }

/* ---------- calls ---------- */
/* docked: the call takes the TOP half above the chat, so the video is the first
   thing you see while you keep typing below. The fullscreen button flips it to
   a full overlay. */
.call-view {
  position: relative; /* the remote-support bar is placed against the call view */
  display: flex; flex-direction: column;
  order: -1; /* stack above the chat, not below it */
  height: 50%; min-height: 240px; flex-shrink: 0;
  background: #000;
}
.call-view.fullscreen {
  position: absolute; inset: 0; z-index: 50; height: 100%;
}
/* the Fullscreen API path: author styles beat the UA's, so say it explicitly */
.call-view:fullscreen { height: 100%; min-height: 100%; }
.call-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(0,0,0,.5); color: #fff;
}
.call-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.call-timer { color: #aaa; margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.call-grid {
  flex: 1; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center; padding: 12px; overflow: auto;
}
.call-tile {
  background: var(--bg-card); border-radius: 8px; overflow: hidden;
  position: relative; min-width: 280px; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
}
/* A tile stacks three layers: the peer's screen, their camera (which carries
   their audio too), and the canvas the JPEG relay fallback paints into. */
.call-tile .tile-media,
.call-tile .tile-screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #000; object-fit: cover;
}
/* A shared screen is never cropped: it is scaled to fit and centred in the
   sharer's tile, so a window or a whole desktop is fully visible. */
.call-tile .tile-screen { object-fit: contain; object-position: center; background: #000; display: none; }
.call-tile.sharing .tile-screen { display: block; }
.call-tile.sharing .tile-media { opacity: 0; } /* the camera steps aside; see .tile-audio */
/* one hidden element per remote audio track (their mic, their shared screen's
   sound): a media element only plays a single audio track of a MediaStream */
.call-tile .tile-audio { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* the relay fallback's canvas keeps its own aspect ratio, centred and fitted */
.call-tile .tile-relay { display: none; max-width: 100%; max-height: 100%; background: #000; }
.call-tile:not(.rtc) .tile-media,
.call-tile:not(.rtc) .tile-screen { display: none; }
.call-tile:not(.rtc) .tile-relay { display: block; }
.call-tile .tile-name {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 13px;
  padding: 3px 8px; border-radius: 4px;
}
/* pointing at a share: nobody but the sharer can click inside that tab, so the
   call says "there" instead — middle-click drops the dot, left-click still
   enlarges. The layer covers the tile; each dot is placed inside the
   letterboxed picture (see Pointers in app.js). */
.tile-pointers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.tile-pointer {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  pointer-events: none; white-space: nowrap;
  opacity: 1; transition: opacity .35s ease;
}
.tile-pointer.gone { opacity: 0; }
.tile-pointer.flip { flex-direction: row-reverse; }
.tile-pointer-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: hsl(var(--hue, 210) 90% 62%);
  box-shadow: 0 0 0 3px hsl(var(--hue, 210) 90% 62% / .55), 0 0 0 7px hsl(var(--hue, 210) 90% 62% / .22);
  animation: point-ping 1s ease-out infinite;
}
.tile-pointer-name {
  font-size: 12px; line-height: 1.5; color: #fff; padding: 1px 8px; border-radius: 10px;
  background: hsl(var(--hue, 210) 55% 38% / .95);
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
@keyframes point-ping {
  0% { box-shadow: 0 0 0 3px hsl(var(--hue, 210) 90% 62% / .55), 0 0 0 7px hsl(var(--hue, 210) 90% 62% / .25); }
  100% { box-shadow: 0 0 0 6px hsl(var(--hue, 210) 90% 62% / 0), 0 0 0 16px hsl(var(--hue, 210) 90% 62% / 0); }
}
.call-tile.speaking { outline: 3px solid var(--green); }
.call-tile { cursor: pointer; }
.call-tile:hover { outline: 2px solid rgba(255,255,255,.35); }
/* click-to-zoom: the chosen tile (video or screenshare) takes the panel above a
   slim STRIP of the other participants — their cards shrink and line up below
   the picture instead of covering its bottom edge. Clicking the big tile
   restores the grid. */
.call-grid.zoomed {
  position: relative; /* the enlarged tile is the stage, the cards the strip */
  --peer-strip: 62px; /* the row the small cards live in, under the picture */
  flex-wrap: wrap; align-content: flex-end; align-items: flex-end;
  justify-content: center; padding: 0 10px 6px; gap: 8px; overflow: hidden;
}
.call-grid.zoomed .call-tile {
  width: 96px; height: 54px; min-width: 96px; min-height: 54px;
  border-radius: 5px; position: relative; z-index: 2;
}
.call-grid.zoomed .call-tile.max {
  position: absolute; inset: 0 0 var(--peer-strip) 0; z-index: 1;
  width: auto; height: auto; min-width: 0; min-height: 0;
  border-radius: 0; background: #000;
}
/* a name has to stay legible on a 96px card */
.call-grid.zoomed .call-tile:not(.max) .tile-name {
  left: 4px; bottom: 4px; font-size: 10px; padding: 1px 5px; border-radius: 3px;
}
/* the big one keeps its name out of the way, over the picture's top-left */
.call-grid.zoomed .call-tile.max .tile-name { top: 10px; bottom: auto; font-size: 15px; padding: 5px 12px; }

/* chat minimized while in a call: the call keeps the whole height above a thin
   strip naming the hidden conversation; anything in the strip brings it back */
.main.chat-min #call-view { height: auto; flex: 1 1 auto; min-height: 0; }
.main.chat-min #chat-view { display: none; }
.chat-min-name {
  flex: 1; min-width: 0; color: var(--text-header); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-min-hint { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.chat-min-btn { color: var(--text-muted); }
/* remote support: the ask, the answer, and the way out */
.call-tile .tile-control {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(88, 101, 242, .92); color: #fff; font-size: 12px;
  padding: 6px 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.call-tile .tile-control:hover { background: var(--blurple-hover); }
.call-tile .tile-control.waiting { background: rgba(0,0,0,.6); color: #ccc; cursor: default; }
.call-tile .tile-control.live { background: rgba(218, 55, 60, .94); }
/* a 96px card only ever carries a Stop (see syncTile), so it stays tiny and
   tucks into the corner the name leaves free */
.call-grid.zoomed .call-tile:not(.max) .tile-control {
  top: 3px; right: 3px; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  box-shadow: none;
}
/* while I drive somebody's screen the tile takes the pointer literally */
.call-tile .tile-screen.controlled { cursor: crosshair; outline: 2px solid var(--red); }
.support-bar {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100% - 32px));
  padding: 8px 12px; border-radius: 20px; font-size: 13px; color: #fff;
  background: rgba(32, 34, 37, .95); box-shadow: 0 6px 20px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
}
.support-bar .support-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
.support-bar.driving .support-dot { background: var(--blurple); }
.support-bar .support-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-bar .support-stop {
  background: var(--red); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px; flex-shrink: 0;
}
.support-bar .support-stop:hover { background: var(--red-hover); }

.call-controls { display: flex; justify-content: center; gap: 16px; padding: 16px; background: rgba(0,0,0,.5); }
.call-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-input); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.call-btn:hover { background: var(--bg-active); }
.call-btn.off { background: var(--red); }
.call-btn.on { background: var(--green); }
.call-btn.danger { background: var(--red); }
.call-btn.danger:hover { background: var(--red-hover); }

/* incoming call overlay */
.call-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
}
.call-ring-card {
  background: var(--bg-card); border-radius: 12px; padding: 32px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.ring-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: 600;
  animation: ringpulse 1.2s infinite;
}
@keyframes ringpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(88,101,242,.6); }
  50% { box-shadow: 0 0 0 18px rgba(88,101,242,0); }
}
.ring-name { color: var(--text-header); font-size: 20px; font-weight: 600; }
.ring-kind { color: var(--text-muted); font-size: 14px; }
.ring-actions { display: flex; gap: 24px; margin-top: 12px; }
.ring-btn {
  width: 60px; height: 60px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ring-btn.accept { background: var(--green); }
.ring-btn.accept:hover { background: #1a8245; }
.ring-btn.decline { background: var(--red); }
.ring-btn.decline:hover { background: var(--red-hover); }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg-card); border-radius: 8px; padding: 24px;
  width: 440px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: 16px;
}
.modal-title { color: var(--text-header); font-size: 20px; font-weight: 600; }
.modal-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.modal-body input[type=text] {
  background: #1e1f22; color: var(--text-normal); border: none;
  border-radius: 4px; padding: 10px; outline: none; font-size: 15px;
}
.modal-member {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 4px; cursor: pointer;
}
.modal-member:hover { background: var(--bg-hover); }
.modal-member.selected { background: var(--bg-active); outline: 1px solid var(--blurple); }
.modal-member .check {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent;
}
.modal-member.selected .check { background: var(--blurple); border-color: var(--blurple); color: #fff; }
/* Archived Chats menu rows */
.modal-meta { flex: 1; min-width: 0; }
.modal-meta-title {
  color: var(--text-header); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-meta-sub { color: var(--text-muted); font-size: 12px; }
.modal-row-btns { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.modal-restore, .modal-delete { flex-shrink: 0; padding: 6px 14px; }
.modal-delete.confirm {
  background: var(--red); border-color: var(--red); color: #fff; font-weight: 600;
}
.modal-delete.confirm:hover { background: var(--red-hover); border-color: var(--red-hover); }

/* sessions manager (Profile Settings) */
.profile-sessions-btn { width: 100%; margin-top: 4px; }
/* deleting the account is last, and looks like what it is */
.profile-delete-btn {
  width: 100%; margin-top: 8px; color: var(--red); border-color: rgba(237, 66, 69, .5);
}
.profile-delete-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.delete-account-body p { color: var(--text-normal); font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
.delete-account-pass {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: none;
  background: var(--bg-input); color: var(--text-normal); font-size: 15px; outline: none;
}

/* a deleted account: red, and a trashcan instead of letters or a picture */
.avatar.avatar-deleted svg { width: 58%; height: 58%; display: block; opacity: .92; }
.avatar.avatar-deleted .dot { display: none; }
.session-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
.session-current {
  margin-left: auto; flex-shrink: 0;
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
.session-remove { flex-shrink: 0; padding: 6px 14px; }
.sessions-remove-all {
  margin-top: 6px; width: 100%;
  border-color: var(--red); color: var(--red);
}
.sessions-remove-all:hover { background: var(--red); color: #fff; }
.sessions-remove-all.confirm { background: var(--red); color: #fff; font-weight: 600; }

/* permanent user ids (#1, #2, …) shown next to names everywhere */
.uid-tag { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
/* webhook posts have no account behind them — the tag says where they came from */
.webhook-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #1e1f22; background: var(--yellow);
  padding: 1px 5px; border-radius: 4px; margin-left: 6px;
  vertical-align: 1px;
}
/* meeting guests share one account — the tag marks their door-name row */
.guest-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-active);
  padding: 1px 5px; border-radius: 4px; margin-left: 6px;
}
.profile-id {
  background: #1e1f22; border: 1px solid #2b2d31; border-radius: 4px;
  padding: 8px 10px; color: var(--text-header); font-weight: 600;
  letter-spacing: .5px;
}

/* user card (right-click -> View profile) */
.user-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; }
.user-card-name { color: var(--text-header); font-size: 20px; font-weight: 700; margin-top: 8px; text-align: center; }
.user-card-user { color: var(--text-muted); font-size: 14px; }
.user-card-id { color: var(--text-normal); font-size: 13px; font-weight: 600; letter-spacing: .5px; }
.user-card-status { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.user-card-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* Direct / Group picker in the new-channel modal */
.kind-pills { display: flex; gap: 8px; }
.kind-pill {
  flex: 1; padding: 8px; border-radius: 4px; background: #1e1f22;
  color: var(--text-muted); font-weight: 600; font-size: 14px;
}
.kind-pill:hover:not(.active) { background: var(--bg-hover); color: var(--text-normal); }
.kind-pill.active { background: var(--blurple); color: #fff; }
/* meetings need no friends — with zero, Direct/Group step aside */
.kind-pill:disabled { opacity: .4; cursor: default; }
.kind-pill:disabled:hover:not(.active) { background: #1e1f22; color: var(--text-muted); }

/* ---------- profile settings ---------- */
.modal-body input[type=password] {
  background: #1e1f22; color: var(--text-normal); border: none;
  border-radius: 4px; padding: 10px; outline: none; font-size: 15px; width: 100%;
}
.profile-field { display: block; font-size: 12px; font-weight: 700; color: #b5bac1; }
.profile-field span { display: block; margin-bottom: 6px; }
.profile-field input { width: 100%; }
/* a heading that splits the settings modal: account / voice & video */
.profile-section {
  margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--divider);
  font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--text-muted);
}
/* microphone / camera pickers: same dark field as the text inputs */
.profile-field select {
  width: 100%; background: #1e1f22; color: var(--text-normal);
  border: none; border-radius: 4px; padding: 10px; outline: none;
  font-size: 15px; cursor: pointer;
}
.profile-field select:disabled { opacity: .55; cursor: default; }
/* plain inputs dropped into the generic modal (rename group, …) */
.modal-body > input {
  width: 100%; background: var(--bg-input); color: var(--text-normal);
  border: none; border-radius: 8px; padding: 10px 12px; outline: none;
  font-size: 15px; margin-top: 4px;
}

/* group webhook settings */
.modal-note { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.modal-label {
  font-size: 11px; font-weight: 700; color: #b5bac1;
  text-transform: uppercase; letter-spacing: .03em; margin-top: 2px;
}
.webhook-url-row { display: flex; gap: 8px; align-items: stretch; }
.webhook-url-row input {
  flex: 1; min-width: 0; background: #1e1f22; color: var(--text-normal);
  border: none; border-radius: 8px; padding: 10px 12px; outline: none;
  font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 12.5px;
}
.webhook-url-row .btn-secondary { flex-shrink: 0; padding: 8px 12px; }
.webhook-demo-link { color: var(--text-link); font-size: 13px; width: fit-content; }
.webhook-demo-link:hover { text-decoration: underline; }
.webhook-disable {
  align-self: flex-start; margin-top: 4px; padding: 6px 12px;
  border: 1px solid var(--red); border-radius: 4px;
  color: var(--red); background: none; font-size: 13px; font-weight: 600;
}
.webhook-disable:hover { background: var(--red); color: #fff; }
.profile-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.profile-avatar-row { display: flex; align-items: center; gap: 16px; }
.profile-avatar-btns { display: flex; flex-direction: column; gap: 8px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
}
.swatch.active { border-color: var(--text-header); box-shadow: 0 0 0 2px var(--bg-rail); }

/* ---------- crop tool ---------- */
.crop-card {
  background: var(--bg-card); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; width: 420px; max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.crop-title { color: var(--text-header); font-size: 18px; font-weight: 600; text-align: center; }
.crop-stage {
  position: relative; overflow: hidden; background: #101114;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  height: 280px; user-select: none; touch-action: none;
}
/* the image is sized in explicit pixels by layoutCrop, never by CSS: a
   max-width/max-height of 100% would clamp one axis only and squash the
   picture, making the box show a region the canvas never copies */
.crop-stage img { max-width: none; max-height: none; display: block; pointer-events: none; }
.crop-box {
  position: absolute; border: 2px solid var(--blurple);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  cursor: move; border-radius: 4px;
}
.crop-zoom { width: 100%; accent-color: var(--blurple); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions .btn-primary { width: auto; padding: 8px 16px; }
/* in-app confirm/alert — sits above the call and the other modals */
.dialog-overlay { z-index: 130; }
.dialog-card { width: 400px; }
.dialog-card .modal-title { font-size: 18px; }
.dialog-card .modal-body { color: var(--text-normal); font-size: 14px; line-height: 1.45; }
.modal-actions .btn-primary.danger { background: var(--red); }
.modal-actions .btn-primary.danger:hover { background: var(--red-hover); }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--bg-card); color: var(--text-normal);
  padding: 12px 16px; border-radius: 6px; border-left: 4px solid var(--blurple);
  box-shadow: 0 4px 12px rgba(0,0,0,.4); font-size: 14px;
  animation: slidein .2s ease-out; max-width: 340px;
}
.toast.good { border-left-color: var(--green); }
.toast.bad { border-left-color: var(--red); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* upload progress card: one file (or one packed folder) at a time, cancellable
   while it runs — no size limit is enforced here, the server decides */
.upload-card {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); z-index: 118;
  background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.upload-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.upload-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-header);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-pct { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.upload-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.upload-fill { height: 100%; width: 0; background: var(--blurple); border-radius: 3px; transition: width .15s linear; }
/* packing/compressing have no byte count to report yet: sweep instead of filling */
.upload-card.indeterminate .upload-fill { width: 35% !important; animation: uploadsweep 1.1s ease-in-out infinite; }
@keyframes uploadsweep { from { margin-left: -35%; } to { margin-left: 100%; } }
.upload-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.upload-detail { flex: 1; min-width: 0; font-size: 12px; color: var(--text-normal); }
.upload-cancel {
  border: 1px solid var(--divider); color: var(--text-normal); font-size: 12px;
  padding: 4px 10px; border-radius: 4px; background: transparent;
}
.upload-cancel:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.upload-cancel:disabled { opacity: .5; cursor: default; }

/* drag-and-drop upload target: covers the window while a file is over it, and
   never eats the drag itself (pointer-events: none) */
.drop-overlay {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0, 0, 0, .55);
  border: 3px dashed var(--blurple); border-radius: 10px;
  box-shadow: inset 0 0 60px rgba(88, 101, 242, .25);
}
.drop-overlay-icon { font-size: 44px; }
.drop-overlay-title { font-size: 22px; font-weight: 700; color: #fff; }
.drop-overlay-sub { font-size: 13px; color: var(--text-normal); }

/* responsive */
@media (max-width: 760px) {
  .sidebar { width: 72px; min-width: 72px; }
  .sidebar .name, .sidebar-label span, .sidebar-user .info { display: none; }
}