/* ═══════════════════════════════════════════════════════════════════
   Значок мессенджеров в топбаре /index (индиго-плитка + красный каунт +
   кастомный тултип со списком каналов). Разметку инжектит
   js/messenger-badge.js — здесь только стили.
   Правила заскоуплены под .topbar, чтобы перебить глобальные
   `.topbar span` / `.topbar span:hover` (padding/background), иначе они
   раздувают и подсвечивают плитку/каунт.
   Тултип виден над контентом за счёт .topbar{position:relative;z-index:1100}.
   ═══════════════════════════════════════════════════════════════════ */
.topbar .msgr-topbar-wrap{display:flex;align-items:center;margin-right:16px}

.topbar .msgr-topbar-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;cursor:pointer;padding:0;
  transition:transform .15s ease;
}
.topbar .msgr-topbar-btn:hover{transform:translateY(-1px)} /* подъём, без смены цвета */
/* без чёрной фокус-рамки при возврате фокуса (Esc/клик). */
.topbar .msgr-topbar-btn:focus,
.topbar .msgr-topbar-btn:focus-visible{outline:none}

/* индиго-плитка (узкая 16×18) */
.topbar .msgr-topbar-btn .msgr-tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:31px;height:29px;padding:0;box-sizing:border-box;flex:none;border-radius:7px;opacity:1;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  box-shadow:0 2px 6px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
/* глиф ~80% площади плитки */
.topbar .msgr-topbar-btn .msgr-glyph{width:90%;height:90%;display:block}

/* красный каунт в правом верхнем углу */
.topbar .msgr-topbar-btn .msgr-count{
  position:absolute;top:-6px;right:-5px;
  display:flex;align-items:center;justify-content:center;
  min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;
  border-radius:8px;background:#ff3b5c;color:#fff;opacity:1;
  font-size:9.5px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px #21357f;
}
.topbar .msgr-topbar-btn .msgr-count[hidden]{display:none}

/* компактный кастомный тултип со списком каналов (раскрывается вниз) */
.topbar .msgr-topbar-btn .msgr-tt{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:rgba(15,23,42,.92);color:#fff;font-size:11px;font-weight:400;
  padding:6px 10px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;
  z-index:3000;line-height:1.4;box-shadow:0 4px 12px rgba(15,23,42,.25);
}
.topbar .msgr-topbar-btn .msgr-tt-line{white-space:nowrap;display:block;padding:0;margin:0}
.topbar .msgr-topbar-btn:hover .msgr-tt{opacity:1;transform:translateX(-50%) translateY(0)}