/* =========================================================
   chat.css
   Uses the color/type/motion tokens already defined in
   main.css (--bg, --surface, --border, --white, --muted,
   --font-display, --font-body, --curve, --speed, --accent...)
   ========================================================= */

/* A bunch of rules below give their element an explicit
   `display` (flex, etc.) so it lays out correctly when shown.
   That display value otherwise wins over the browser's default
   [hidden]{display:none}, which makes toggling `.hidden = true`
   in JS a silent no-op — the element stays on screen. This one
   rule makes `hidden` always win, everywhere in the chat UI. */
.chat-app[hidden],
.chat-messages[hidden],
.chat-composer[hidden],
.reply-preview[hidden],
.friends-tabs[hidden],
.friends-view[hidden],
.friends-badge[hidden],
.friends-tab-badge[hidden],
.channel-list[hidden],
.dm-list[hidden],
.chat-sidebar-header[hidden],
.chat-topbar-avatar[hidden],
.dm-unread-dot[hidden]{
  display:none;
}

/* Let the chat tab use the full main area instead of the
   centered small-card layout other simple panels use. */
main:has(.chat-panel.active){
  padding:0;
  overflow:hidden;
  align-items:stretch;
  justify-content:stretch;
}

.chat-panel{
  width:100%;
  height:100%;
  position:relative;
}

#chat-root{
  width:100%;
  height:100%;
  position:relative;
}


/* ============ APP SHELL ============ */

.chat-app{
  width:100%;
  height:100%;
  display:flex;
  background:var(--bg);
}

.chat-sidebar{
  width:216px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:18px 10px;
}

.chat-sidebar-header{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  padding:4px 10px 10px;
}

.channel-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  overflow-y:auto;
}

.channel-item{
  display:flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 10px;
  border-radius:var(--radius-md);
  color:var(--muted);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.channel-item:hover{
  background:var(--surface);
  color:var(--text);
}

.channel-item.active{
  background:var(--surface-2);
  color:var(--text);
}

.channel-hash{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  color:var(--muted-dim);
  width:14px;
  text-align:center;
  flex-shrink:0;
}

.channel-item.active .channel-hash{
  color:var(--accent);
}

.channel-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-user-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px 0;
  margin-top:8px;
  border-top:1px solid var(--border);
}

.user-bar-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
  background:var(--surface-2);
  border:1px solid var(--border);
  flex-shrink:0;
}

.user-bar-name{
  flex:1;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-bar-signout{
  width:30px;
  height:30px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  flex-shrink:0;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.user-bar-signout:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.user-bar-signout svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============ MAIN COLUMN ============ */

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

.chat-topbar{
  height:56px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px;
  border-bottom:1px solid var(--border);
  background:var(--sidebar);
  z-index:2;
}

.chat-topbar-hash{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  color:var(--muted-dim);
}

.chat-topbar-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--white);
}

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:20px 20px 8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.messages-loading{
  margin:auto;
  color:var(--muted-dim);
  font-size:13px;
}

.message-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.message-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
  cursor:pointer;
  margin-top:2px;
}

.message-body{
  min-width:0;
}

.message-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:2px;
}

.message-author{
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}

.message-author:hover{
  text-decoration:underline;
}

.message-time{
  font-size:10.5px;
  color:var(--muted-dim);
  font-family:var(--font-mono);
}

.message-text{
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.chat-composer{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 20px 20px;
  padding:4px 4px 4px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color var(--speed) var(--curve), background var(--speed) var(--curve), box-shadow var(--speed) var(--curve);
}

.chat-composer:focus-within{
  border-color:var(--accent);
  background:var(--surface-2);
  box-shadow:0 0 0 3px var(--accent-dim);
}

.chat-composer input{
  flex:1;
  height:var(--control-h);
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font:inherit;
  font-size:14px;
}

.chat-composer input::placeholder{
  color:var(--muted-dim);
}

.chat-composer button{
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--bg);
  cursor:pointer;
  transition:opacity var(--speed) var(--curve), transform var(--speed) var(--curve);
}

.chat-composer button:hover{
  opacity:.88;
  transform:translateY(-1px);
}

.chat-composer button svg{
  width:15px;
  height:15px;
  fill:var(--bg);
}


/* ============ REACTIONS ============ */

.message-reactions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:6px;
}

.reaction-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:26px;
  padding:0 9px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  transition:background var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.reaction-pill:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.reaction-pill.mine{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-dim);
}

.reaction-pill span{
  font-family:var(--font-mono);
  font-size:10.5px;
}

.reaction-add{
  width:26px;
  height:26px;
  border-radius:var(--radius-md);
  border:1px dashed var(--border-strong);
  background:var(--surface);
  color:var(--muted-dim);
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.reaction-add:hover{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--border-strong);
}

.reaction-popover{
  position:fixed;
  z-index:50;
  display:flex;
  gap:2px;
  padding:6px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);
  background:var(--sidebar);
  box-shadow:var(--shadow-overlay);
}

.reaction-popover button{
  width:32px;
  height:32px;
  border-radius:var(--radius-md);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.reaction-popover button:hover{
  background:var(--surface-2);
}


/* ============ AUTH SCREEN ============ */

.auth-root:empty{
  display:none;
}

.auth-screen{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  z-index:5;
}

.auth-card{
  width:min(380px,88%);
  padding:32px 28px;
  border-radius:var(--radius-dialog);
  border:1px solid var(--border-strong);
  background:var(--sidebar);
  box-shadow:var(--shadow-overlay);
  text-align:center;
}

.auth-mark{
  width:42px;
  height:42px;
  margin:0 auto 16px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-mark span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}

.auth-card h2{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--white);
}

.auth-sub{
  font-size:13.5px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:22px;
  text-align:left;
}

.auth-form label,
.username-form label,
.edit-profile-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.auth-form input,
.username-form input,
.edit-profile-form input,
.edit-profile-form textarea{
  height:var(--control-h);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:0 14px;
  font:inherit;
  font-size:14px;
  font-weight:400;
  outline:none;
  transition:border-color var(--speed) var(--curve), background var(--speed) var(--curve);
}

.edit-profile-form textarea{
  height:auto;
  padding:10px 14px;
  resize:vertical;
  font-family:var(--font-body);
}

.auth-form input:focus,
.username-form input:focus,
.edit-profile-form input:focus,
.edit-profile-form textarea:focus{
  border-color:var(--accent);
  background:var(--surface-2);
}

.auth-error{
  font-size:12px;
  color:var(--danger);
  background:var(--danger-dim);
  border:1px solid var(--danger-border);
  border-radius:var(--radius-md);
  padding:9px 12px;
  line-height:1.4;
}

.auth-submit{
  height:var(--control-h);
  border-radius:var(--radius-md);
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--bg);
  font-weight:600;
  font-size:13.5px;
  margin-top:4px;
  cursor:pointer;
  transition:opacity var(--speed) var(--curve), transform var(--speed) var(--curve);
}

.auth-submit:hover{
  opacity:.88;
  transform:translateY(-1px);
}

.auth-submit:disabled{
  opacity:.5;
  cursor:default;
  transform:none;
}

.auth-switch{
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
}

.auth-switch:hover{
  color:var(--text);
}


/* ============ MODALS (username setup / profile popup / edit) ============ */

.chat-overlay:empty{
  display:none;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,6,5,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:20;
}

.modal-card{
  width:min(360px,88%);
  max-height:86%;
  overflow-y:auto;
  padding:26px 24px;
  border-radius:var(--radius-dialog);
  border:1px solid var(--border-strong);
  background:var(--surface);
  position:relative;
  text-align:center;
}

.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:26px;
  height:26px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.modal-close:hover{
  background:var(--surface-2);
  color:var(--text);
}

.modal-sub{
  font-size:12.5px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}

.username-form,
.edit-profile-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
  text-align:left;
}

.modal-card h2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--white);
}

/* ============ ADVANCED PROFILE POPUP ============ */

.profile-card{
  width:min(340px,88%);
  padding:0;
  overflow:visible;
  text-align:left;
}

.profile-banner{
  height:84px;
  border-radius:var(--radius-dialog) 14px 0 0;
  background-size:cover;
  background-position:center;
}

.profile-card .modal-close{
  background:rgba(6,6,5,.5);
}

.profile-card .modal-close:hover{
  background:rgba(6,6,5,.7);
}

.profile-card-body{
  padding:0 20px 22px;
}

.profile-avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin:-40px 0 12px;
  background:var(--surface-2);
  display:block;
  border:4px solid var(--surface);
  box-sizing:border-box;
}

.profile-namerow{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

.profile-namerow h2{
  margin:0;
  font-size:18px;
}

.profile-pronouns{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted-dim);
}

.profile-username{
  font-size:12px;
  color:var(--muted-dim);
  margin-top:2px;
}

.profile-status-pill{
  display:inline-block;
  margin-top:10px;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:12px;
  color:var(--text);
}

.profile-divider{
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.profile-section + .profile-section{
  margin-top:16px;
}

.profile-section-label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted-dim);
  margin-bottom:5px;
}

.profile-bio{
  font-size:13px;
  color:var(--text);
  line-height:1.5;
}

.profile-joined{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--text);
}

.profile-joined svg{
  width:13px;
  height:13px;
  flex-shrink:0;
  fill:none;
  stroke:var(--muted-dim);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.edit-profile-btn{
  width:100%;
  margin-top:18px;
  height:38px;
  padding:0 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.edit-profile-btn:hover{
  background:var(--surface-2);
  border-color:var(--accent);
}


/* ---- Edit-profile preview + form ---- */

.edit-profile-card{
  width:min(380px,88%);
}

.edit-preview{
  position:relative;
  margin:18px -24px 0;
}

.edit-preview-banner{
  height:60px;
}

.edit-preview-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  border:3px solid var(--surface);
  box-sizing:border-box;
  position:absolute;
  left:22px;
  bottom:-16px;
}

.edit-preview-name{
  position:absolute;
  left:82px;
  bottom:-14px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13.5px;
  color:var(--white);
}

.edit-profile-form{
  margin-top:32px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.field-label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-top:4px;
}

.accent-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.accent-swatch{
  width:27px;
  height:27px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color var(--speed) var(--curve);
}

.accent-swatch.selected{
  border-color:var(--text);
}

.accent-check{
  width:13px;
  height:13px;
  fill:none;
  stroke:#0a0a09;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity var(--speed) var(--curve);
}

.accent-swatch.selected .accent-check{
  opacity:1;
}


/* ============ SCROLLBARS ============ */

.chat-messages::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.modal-card::-webkit-scrollbar{
  width:7px;
}

.chat-messages::-webkit-scrollbar-thumb,
.channel-list::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:var(--radius-md);
}

.chat-messages::-webkit-scrollbar-track,
.channel-list::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track{
  background:transparent;
}


/* ============ RESPONSIVE ============ */

@media (max-width:960px){

  .chat-app{
    flex-direction:column;
  }

  .chat-sidebar{
    width:100%;
    height:auto;
    max-height:38%;
    border-right:none;
    border-bottom:1px solid var(--border);
  }

  .chat-messages{
    padding:16px 14px 6px;
  }

  .chat-composer{
    margin:0 14px 14px;
  }

  .chat-topbar{
    padding:0 14px;
  }
}

/* =========================================================
   chat-replies.css
   Styles for the reply-to-message feature: hover reply
   button, quoted snippet on a message, the "Replying to…"
   bar above the composer, and the jump-to-message highlight.
   ========================================================= */

/* ---- hover reply button on each message row ---- */

.message-row{
  position:relative;
}

.message-reply-btn{
  position:absolute;
  top:-6px;
  right:4px;
  width:27px;
  height:27px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  cursor:pointer;
  transition:opacity var(--speed) var(--curve), background var(--speed) var(--curve), color var(--speed) var(--curve);
  pointer-events:none;
}

.message-row:hover .message-reply-btn{
  opacity:1;
  pointer-events:auto;
}

.message-reply-btn:hover{
  background:var(--surface-2);
  color:var(--text);
}

.message-reply-btn svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---- quoted snippet shown above a reply ---- */

.message-reply-quote{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  padding-left:2px;
  font-size:12px;
  color:var(--muted-dim);
  cursor:pointer;
  max-width:100%;
  overflow:hidden;
}

.message-reply-quote:hover{
  color:var(--muted);
}

.message-reply-quote:hover .reply-quote-text{
  text-decoration:underline;
}

.message-reply-quote svg{
  width:12px;
  height:12px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.reply-quote-author{
  font-weight:600;
  color:var(--muted);
  flex-shrink:0;
}

.reply-quote-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- "Replying to…" bar above the composer ---- */

.reply-preview{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 20px -6px;
  padding:9px 12px;
  border-radius:var(--radius-md) 9px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  background:var(--surface);
  font-size:12.5px;
  color:var(--muted);
}

.reply-preview-inner{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:hidden;
}

.reply-preview-inner svg{
  width:13px;
  height:13px;
  flex-shrink:0;
  fill:none;
  stroke:var(--muted-dim);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.reply-preview-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.reply-preview-text strong{
  color:var(--text);
  font-weight:600;
}

.reply-preview-cancel{
  width:22px;
  height:22px;
  flex-shrink:0;
  border-radius:6px;
  color:var(--muted-dim);
  font-size:15px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.reply-preview-cancel:hover{
  background:var(--surface-2);
  color:var(--text);
}

/* ---- jump-to-message flash highlight ---- */

.message-row.message-flash .message-text,
.message-row.message-flash .message-reply-quote,
.message-row.message-flash .message-author{
  animation:message-flash-anim 1.2s var(--curve);
}

@keyframes message-flash-anim{
  0%{ background-color:var(--accent-dim); }
  100%{ background-color:transparent; }
}

@media (max-width:960px){
  .reply-preview{
    margin:0 14px -6px;
  }
}

/* =========================================================
   chat-friends.css
   Styles for the Friends tab: the sidebar nav button +
   badge, the topbar sub-tabs, friend/request rows, search,
   and the friend-action section shown on a profile popup.
   ========================================================= */

/* ---- sidebar nav button ---- */

.friends-nav-btn{
  display:flex;
  align-items:center;
  gap:10px;
  height:36px;
  padding:0 10px;
  margin-bottom:10px;
  border-radius:var(--radius-md);
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.friends-nav-btn:hover{
  background:var(--surface);
  color:var(--text);
}

.friends-nav-btn.active{
  background:var(--surface-2);
  color:var(--text);
}

.friends-nav-btn svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.friends-nav-btn span:not(.friends-badge){
  flex:1;
  text-align:left;
}

.friends-badge{
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:var(--radius-md);
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ---- topbar sub-tabs (All Friends / Requests / Add Friend) ---- */

.friends-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid var(--border);
}

.friends-tab{
  height:32px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.friends-tab:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.friends-tab.active{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.friends-tab-add{
  color:var(--accent);
  border-color:var(--accent-dim);
  background:var(--accent-dim);
}

.friends-tab-add:hover{
  border-color:var(--accent);
  background:var(--accent-dim);
}

.friends-tab-badge{
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--radius-sm);
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- friends view body ---- */

.friends-view{
  flex:1;
  overflow-y:auto;
  padding:24px 28px;
}

.friends-loading,
.friends-empty{
  margin:60px auto 0;
  max-width:280px;
  text-align:center;
  color:var(--muted-dim);
  font-size:13px;
}

.friends-section-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-dim);
  margin:0 4px 10px;
}

.friends-section-label + .friends-list{
  margin-bottom:24px;
}

.friends-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.friend-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  transition:background var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.friend-row:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
}

.friend-row-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  border:1px solid var(--border);
  flex-shrink:0;
  cursor:pointer;
}

.friend-row-info{
  min-width:0;
  flex:1;
  cursor:pointer;
}

.friend-row-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.friend-row-username{
  font-size:11.5px;
  color:var(--muted-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.friend-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.friend-row-action{
  height:32px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  background:var(--surface-2);
  cursor:pointer;
  transition:background var(--speed) var(--curve), border-color var(--speed) var(--curve), opacity var(--speed) var(--curve);
}

.friend-row-action:hover{
  background:var(--surface-3);
  border-color:var(--border-strong);
}

.friend-row-action:disabled{
  opacity:.55;
}

.friend-row-accept,
.friend-row-add,
.friend-row-message{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
}

.friend-row-accept:hover,
.friend-row-add:hover,
.friend-row-message:hover{
  opacity:.85;
  background:var(--accent);
}

.friend-row-status{
  font-size:12px;
  color:var(--muted-dim);
  padding:0 4px;
}

/* ---- Add Friend search ---- */

.friends-search-wrap{
  margin-bottom:18px;
}

.friends-search-input{
  width:100%;
  height:var(--control-h);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:0 14px;
  font:inherit;
  font-size:13.5px;
  outline:none;
  transition:border-color var(--speed) var(--curve), background var(--speed) var(--curve);
}

.friends-search-input:focus{
  border-color:var(--accent);
  background:var(--surface-2);
}

.friends-search-input::placeholder{
  color:var(--muted-dim);
}

/* ---- friend-action section on a profile popup ---- */

.profile-friend-section{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.profile-friend-status{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.friend-action-btn{
  height:34px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  background:var(--surface-2);
  cursor:pointer;
  transition:background var(--speed) var(--curve), opacity var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.friend-action-btn:hover{
  background:var(--surface-3);
  border-color:var(--border-strong);
}

.friend-action-btn:disabled{
  opacity:.55;
}

.friend-action-add,
.friend-action-accept,
.friend-action-message{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
}

.friend-action-add:hover,
.friend-action-accept:hover,
.friend-action-message:hover{
  opacity:.85;
  background:var(--accent);
}

@media (max-width:960px){
  .friends-tabs{
    margin-left:8px;
    padding-left:8px;
    gap:2px;
  }

  .friends-tab{
    padding:0 8px;
    font-size:11.5px;
  }

  .friends-view{
    padding:14px;
  }
}
/* =========================================================
   chat-dms.css
   Styles for: the Channels/Friends sidebar tabs (replacing
   the old standalone Friends nav button), the DM conversation
   list that swaps in for the channel list under the Friends
   tab, and the small avatar in the topbar when a DM is open.
   ========================================================= */

/* ---- sidebar tabs (Channels / Friends) ---- */

.sidebar-tabs{
  display:flex;
  gap:4px;
  padding:0 4px 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}

.sidebar-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:32px;
  border-radius:var(--radius-md);
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve), border-color var(--speed) var(--curve);
}

.sidebar-tab:hover{
  background:var(--surface);
  color:var(--text);
}

.sidebar-tab.active{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.dm-unread-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* ---- DM conversation list (sits where .channel-list normally is) ---- */

.dm-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  overflow-y:auto;
}

.dm-item{
  display:flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 10px;
  border-radius:var(--radius-md);
  color:var(--muted);
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.dm-item:hover{
  background:var(--surface);
  color:var(--text);
}

.dm-item.active{
  background:var(--surface-2);
  color:var(--text);
}

.dm-item-avatar{
  width:27px;
  height:27px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
}

.dm-item-name{
  flex:1;
  min-width:0;
  text-align:left;
  font-size:13.5px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dm-item-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.dm-list-empty{
  margin:24px 10px 0;
  color:var(--muted-dim);
  font-size:12px;
  line-height:1.5;
}

/* ---- topbar avatar (shown instead of the "#" hash when a DM is open) ---- */

.chat-topbar-avatar{
  width:23px;
  height:23px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
}

/* ---- "Message" action button (friend list row + profile popup) ---- */

.friend-row-message,
.friend-action-message{
  background:var(--surface-2);
  color:var(--accent);
  border-color:var(--accent);
}

.friend-row-message:hover,
.friend-action-message:hover{
  background:var(--accent-dim);
}

@media (max-width:960px){
  .sidebar-tab{
    font-size:11.5px;
  }
}

/* =========================================================
   chat-online.css
   Styles for the "N online" pill in the sidebar and the
   popover list it opens.
   ========================================================= */

.online-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  height:31px;
  margin:0 4px 12px;
  padding:0 10px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--curve), color var(--speed) var(--curve);
}

.online-indicator:hover{
  background:var(--surface);
  color:var(--text);
}

.online-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4fbf6b;
  flex-shrink:0;
}

.online-indicator #online-count{
  font-family:var(--font-mono);
  color:var(--text);
}

.online-popover{
  position:fixed;
  z-index:50;
  width:216px;
  max-height:310px;
  overflow-y:auto;
  padding:6px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--sidebar);
}

.online-popover-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.online-popover-row:hover{
  background:var(--surface-2);
}

.online-popover-avatar{
  width:27px;
  height:27px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
}

.online-popover-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.online-popover-empty{
  padding:14px 10px;
  text-align:center;
  color:var(--muted-dim);
  font-size:12px;
}

.online-popover::-webkit-scrollbar{
  width:7px;
}

.online-popover::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:var(--radius-md);
}

.online-popover::-webkit-scrollbar-track{
  background:transparent;
}

.profile-role-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* =========================================================
   BLUR CHAT ALIGNMENT
   Visual overrides only: preserve existing chat, auth, friend,
   and direct-message behavior while using the shared foundation.
   ========================================================= */

.chat-app,
.chat-main{
  background:var(--canvas);
}

.chat-sidebar{
  width:var(--inner-sidebar);
  padding:18px 10px;
  background:var(--sidebar);
  border-color:var(--border-subtle);
}

.sidebar-tabs{
  padding:0 2px var(--space-3);
}

.sidebar-tab,
.online-indicator{
  border-radius:var(--radius-md);
  transition:background var(--speed) var(--ease-standard), color var(--speed) var(--ease-standard), border-color var(--speed) var(--ease-standard);
}

.sidebar-tab.active,
.channel-item.active,
.dm-item.active{
  background:var(--surface-selected);
  color:var(--text-primary);
}

.online-dot{
  background:var(--success);
}

.chat-sidebar-header{
  padding:var(--space-2) var(--space-3) var(--space-2);
  font-size:var(--text-xs);
  color:var(--text-tertiary);
}

.channel-item,
.dm-item{
  min-height:36px;
  height:auto;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--text-md);
  transition:background var(--speed) var(--ease-standard), color var(--speed) var(--ease-standard);
}

.chat-user-bar{
  margin-top:var(--space-2);
  padding:var(--space-3) var(--space-2) 0;
  border-color:var(--border-subtle);
}

.user-bar-signout{
  border-radius:var(--radius-md);
}

.chat-topbar{
  height:58px;
  padding:0 var(--space-8);
  gap:var(--space-2);
  border-color:var(--border-subtle);
  background:var(--surface-overlay);
}

.chat-topbar-name{
  font-size:var(--heading-section);
}

.chat-messages{
  padding:var(--space-6) var(--space-8) var(--space-3);
  gap:var(--space-2);
}

.messages-loading,
.friends-loading,
.friends-empty{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}

.message-row{
  width:100%;
  padding:var(--space-2);
  margin:0;
  border-radius:var(--radius-lg);
  transition:background var(--speed) var(--ease-standard);
}

.message-row:hover{
  background:var(--surface-raised);
}

.message-meta{
  margin-bottom:var(--space-1);
}

.message-author{
  font-size:var(--text-md);
}

.message-text{
  font-size:var(--text-body);
  line-height:1.6;
  color:var(--text-primary);
}

.chat-composer{
  width:auto;
  margin:0 20px 20px;
  gap:var(--space-2);
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius:var(--radius-lg);
  border-color:var(--border-subtle);
  background:var(--surface-raised);
  transition:border-color var(--speed) var(--ease-standard), background var(--speed) var(--ease-standard), box-shadow var(--speed) var(--ease-standard);
}

.chat-composer:focus-within{
  background:var(--surface-selected);
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}

.chat-composer input{
  height:var(--control-h);
  font-size:var(--text-body);
}

.chat-composer button{
  width:var(--control-h-sm);
  height:var(--control-h-sm);
  border-radius:var(--radius-md);
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--bg);
}

.chat-composer button:hover{
  opacity:.88;
  background:var(--accent);
}

.reaction-pill,
.reaction-add{
  border-radius:var(--radius-md);
}

.reaction-popover,
.online-popover{
  border-radius:var(--radius-lg);
  border-color:var(--border-emphasis);
  background:var(--surface-overlay);
  box-shadow:var(--shadow-overlay);
}

.friends-tabs{
  margin-left:var(--space-3);
  padding-left:var(--space-3);
  border-color:var(--border-subtle);
}

.friends-tab{
  border-radius:var(--radius-md);
}

.friends-view{
  padding:var(--space-6) var(--space-8);
}

.auth-screen{
  background:var(--canvas);
}

.auth-card{
  padding:var(--space-8) var(--space-6);
  border-radius:var(--radius-dialog);
  border-color:var(--border-subtle);
  background:var(--surface-raised);
  box-shadow:var(--shadow-overlay);
}

.auth-mark{
  border-radius:var(--radius-lg);
}

.auth-form input,
.username-form input,
.edit-profile-form input,
.edit-profile-form textarea{
  border-radius:var(--radius-md);
  border-color:var(--border-subtle);
}

.auth-form input:focus,
.username-form input:focus,
.edit-profile-form input:focus,
.edit-profile-form textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}

.auth-submit{
  border-radius:var(--radius-md);
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
}

.auth-submit:hover{
  opacity:.88;
  background:var(--accent);
}

@media(max-width:960px){
  .chat-topbar{ padding:0 var(--space-4); }
  .chat-messages{ padding:var(--space-4) var(--space-4) var(--space-2); }
  .chat-composer{ width:calc(100% - 32px); margin:0 var(--space-4) var(--space-4); }
  .friends-view{ padding:var(--space-4); }
}


/* Add these rules to fix the pronouns field overflow */

.edit-profile-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

.edit-profile-form .form-row label {
  min-width: 0; /* Prevents overflow */
  max-width: 100%;
  width: 100%;
}

.edit-profile-form .form-row input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* Ensures padding doesn't cause overflow */
}

/* Also ensure the overall form doesn't overflow */
.edit-profile-card {
  width: min(380px, 88%);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Prevents any scrollbar issues */
}

.edit-profile-form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* For the entire modal card */
.modal-card.edit-profile-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* No horizontal scroll */
}

/* =========================================================
   MESSAGING UX — grouping, mentions, pings, links, embeds
   Extends the existing message-row system; no redesign.
   ========================================================= */

/* every row keeps a 36px gutter so grouped rows align with
   full rows; the gutter hosts the hover timestamp when the
   avatar/name are hidden */
.message-avatar-slot{
  position:relative;
  width:36px;
  flex-shrink:0;
}

.message-grouped{
  margin-top:-6px;
}

.message-hover-time{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted-dim);
  white-space:nowrap;
  opacity:0;
  transition:opacity var(--speed) var(--curve);
  pointer-events:none;
}

.message-grouped:hover .message-hover-time{
  opacity:1;
}

/* messages that mention you get a quiet highlight */
.message-row.message-pinged{
  background:var(--accent-dim);
  box-shadow:inset 2px 0 0 var(--accent);
}

.message-row.message-pinged:hover{
  background:var(--accent-dim);
}

/* @mention chips — clickable, opens the profile like any [data-user] */
.mention{
  color:var(--accent);
  background:var(--accent-dim);
  border-radius:var(--radius-sm);
  padding:0 4px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.mention:hover{
  background:rgba(201,195,154,.24);
  text-decoration:underline;
}

/* autolinks */
.message-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--border-strong);
  overflow-wrap:anywhere;
}

.message-link:hover{
  text-decoration-color:var(--accent);
}

/* lightweight embeds */
.message-embeds{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}

.message-embed{
  display:block;
  max-width:min(380px,100%);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--surface);
  position:relative;
}

.message-embed-yt img{
  display:block;
  width:100%;
  max-height:210px;
  object-fit:cover;
}

.message-embed-yt .message-embed-source{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:2px 7px;
  border-radius:var(--radius-sm);
  background:rgba(6,6,5,.75);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--white);
}

.message-embed-image img{
  display:block;
  max-width:100%;
  max-height:220px;
}

/* @mention autocomplete popover */
.mention-popover{
  position:fixed;
  z-index:60;
  display:flex;
  flex-direction:column;
  padding:4px;
  gap:1px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);
  background:var(--sidebar);
  box-shadow:var(--shadow-overlay);
}

.mention-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:7px 9px;
  border-radius:var(--radius-md);
  text-align:left;
  color:var(--text);
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.mention-item:hover,
.mention-item.active{
  background:var(--surface-2);
}

.mention-item img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
}

.mention-item-name{
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mention-item-handle{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
  margin-left:auto;
  flex-shrink:0;
}

.chat-send-feedback{
  min-height:0;
  margin:0 22px;
  color:var(--danger);
  font-size:11px;
  opacity:0;
  transition:opacity var(--speed) var(--curve);
}
.chat-send-feedback.visible{ opacity:1; min-height:18px; }

.channel-hash-announcement svg{
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.channel-divider{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 10px 6px;
  color:var(--muted-dim);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.channel-divider::before,
.channel-divider::after{ content:""; height:1px; background:var(--border); flex:1; }

.chat-sidebar-header.channel-divider{
  margin-top:0;
}

.mention-everyone-chip{
  display:inline;
  padding:0 4px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent);
  font-family:inherit;
  font-size:inherit;
  font-weight:600;
}

.chat-composer.announcement-readonly{ opacity:.78; }
.chat-composer.announcement-readonly input{ cursor:not-allowed; }
.chat-app.announcement-readonly .message-reply-btn{ display:none; }

.mention-everyone-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-strong);
  border-radius:50%;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:12px;
  flex-shrink:0;
}

.md-bold{font-weight:700;color:var(--white)}
.md-italic{font-style:italic}
.md-strike{text-decoration:line-through;opacity:.8}
.md-code{padding:1px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-family:var(--font-mono);font-size:.9em}
.message-list{margin:4px 0 4px 20px;padding:0}
.message-list li{padding-left:3px}


/* =========================================================
   MENTION/PING INDICATORS
   Small danger-colored dot = "you were mentioned here and
   haven't opened it". Distinct from the accent unread dot.
   ========================================================= */

/* dot on the Chat item in the main Blur sidebar */
.nav-mention-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--danger);
  margin-left:auto;
  flex-shrink:0;
}

.nav-mention-dot[hidden],
.channel-item.has-mention[hidden],
.dm-item.has-mention[hidden]{
  display:none;
}

/* keep the dot visible in the collapsed mobile rail, where the
   other nav spans are hidden */
@media (max-width:960px){
  .nav a span.nav-mention-dot,
  nav a span.nav-mention-dot{
    display:block;
    position:absolute;
    top:6px;
    right:6px;
    margin-left:0;
  }
}

/* dot on a channel in the channel list */
.channel-item.has-mention::after,
.dm-item.has-mention::after{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--danger);
  margin-left:auto;
  flex-shrink:0;
}

.channel-item.has-mention{
  color:var(--text);
}

/* the mention dot supersedes the plain unread dot on DM items */
.dm-item.has-mention .dm-item-dot{
  display:none;
}