/* ============================================================
   Bahsedilenler (Mentions Inbox) — topbar @ butonu + açılır panel
   Discord Inbox > Mentions görünümü. Koyu tema değişkenleriyle.
   ============================================================ */

/* ---- Topbar butonundaki okunmamış rozeti ---- */
.rh-act#mentionsBtn{ position:relative; }
.mentions-badge{
  position:absolute;
  top:3px; right:3px;
  min-width:16px; height:16px;
  padding:0 4px;
  box-sizing:border-box;
  background:var(--dnd, #f23f43);
  color:#fff;
  font-size:11px; font-weight:700; line-height:16px;
  text-align:center;
  border-radius:8px;
  border:2px solid var(--topbar-bg, var(--panel));
  pointer-events:none;
}
.rh-act#mentionsBtn.has-unread{ color:var(--head); }
.rh-act#mentionsBtn.active{ color:var(--head); }

/* ---- Açılır panel (butona göre konumlanır) ---- */
.mentions-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:420px;
  max-width:calc(100vw - 24px);
  max-height:560px;
  display:flex;
  flex-direction:column;
  background:var(--popout-bg, var(--panel));
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-pop, 0 12px 38px rgba(0,0,0,.46));
  z-index:1200;
  overflow:hidden;
  cursor:default;
  text-align:left;
  animation:mentions-pop-in .14s var(--ease, ease) both;
  transform-origin:top right;
}
.mentions-pop.closing{ animation:mentions-pop-out .12s ease both; }
@keyframes mentions-pop-in{
  from{ opacity:0; transform:translateY(-6px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes mentions-pop-out{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to  { opacity:0; transform:translateY(-6px) scale(.98); }
}

/* ---- Başlık ---- */
.mentions-head{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.mentions-head svg{ color:var(--muted); flex-shrink:0; }
.mentions-title{
  font-size:15px; font-weight:700; color:var(--head);
  flex:1; min-width:0;
}
.mentions-allread{
  background:none; border:none;
  color:var(--accent, #5865f2);
  font-size:12px; font-weight:600;
  cursor:pointer; padding:4px 6px;
  border-radius:6px;
  white-space:nowrap;
  transition:background .1s, color .1s;
}
.mentions-allread:hover{ background:var(--hover, rgba(255,255,255,.06)); color:var(--head); }

/* ---- Gövde (liste) ---- */
.mentions-body{
  overflow-y:auto;
  padding:8px;
  flex:1;
  min-height:60px;
}
.mentions-body::-webkit-scrollbar{ width:8px; }
.mentions-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

/* ---- Bahsetme kartı ---- */
.mi-card{
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:4px;
  transition:background .1s;
  position:relative;
}
.mi-card:hover{ background:var(--hover, rgba(255,255,255,.04)); }
.mi-card.mi-unread{
  background:color-mix(in srgb, var(--accent, #5865f2) 10%, transparent);
}
.mi-card.mi-unread::before{
  content:"";
  position:absolute; left:0; top:8px; bottom:8px;
  width:3px; border-radius:2px;
  background:var(--accent, #5865f2);
}
.mi-card.mi-unread:hover{
  background:color-mix(in srgb, var(--accent, #5865f2) 16%, transparent);
}

/* oda/kanal bağlamı (üst satır) */
.mi-ctx{
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--muted);
  margin-bottom:6px;
  margin-left:4px;
}
.mi-ctx-ic{
  font-weight:700; color:var(--muted);
  font-size:13px;
}
.mi-ctx-name{
  font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:220px;
}
.mi-everyone{
  margin-left:auto;
  font-size:11px; font-weight:700;
  color:var(--accent, #5865f2);
  background:color-mix(in srgb, var(--accent, #5865f2) 16%, transparent);
  padding:1px 6px; border-radius:6px;
  flex-shrink:0;
}

/* gövde: avatar + içerik */
.mi-body{ display:flex; gap:10px; align-items:flex-start; }
.mi-av{
  width:36px; height:36px; min-width:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
  overflow:hidden;
}
.mi-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mi-main{ flex:1; min-width:0; }
.mi-head{ display:flex; align-items:baseline; gap:8px; }
.mi-nick{
  font-size:14px; font-weight:600; color:var(--head);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mi-time{ font-size:11px; color:var(--muted); flex-shrink:0; }
.mi-text{
  font-size:14px; color:var(--text);
  margin-top:2px;
  line-height:1.35;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---- Boş durum ---- */
.mentions-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:48px 24px;
  color:var(--muted);
  gap:10px;
}
.mentions-empty svg{ color:var(--border); opacity:.85; }
.mentions-empty > div{ font-size:14px; font-weight:600; color:var(--text); }
.mentions-empty-sub{ font-size:12px !important; font-weight:400 !important; color:var(--muted) !important; }

/* ---- Mobil: tam genişlik alt-açılır his ---- */
@media (max-width:600px){
  .mentions-pop{
    position:fixed;
    top:auto;
    bottom:0; left:0; right:0;
    width:100%;
    max-width:100%;
    max-height:75vh;
    border-radius:14px 14px 0 0;
    transform-origin:bottom center;
  }
  @keyframes mentions-pop-in{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:translateY(0); }
  }
}