/* MEX Avatar + Dropdown — эталон, один на все продукты */
.mex-theme-light {
  --mex-bg: #FFFFFF;
  --mex-bg-elev: #F7F8FA;
  --mex-bg-hover: #EEF0F4;
  --mex-border: #E4E7EC;
  --mex-text: #0A0B0D;
  --mex-text-dim: #6B7280;
  --mex-accent: #0052FF;
  --mex-accent-soft: rgba(0,82,255,.10);
  --mex-green: #098551;
  --mex-shadow: 0 4px 16px rgba(10,11,13,.08), 0 1px 3px rgba(10,11,13,.04);
}
.mex-theme-dark {
  --mex-bg: #0A0B0D;
  --mex-bg-elev: #14161A;
  --mex-bg-hover: #1D2025;
  --mex-border: #25282E;
  --mex-text: #FFFFFF;
  --mex-text-dim: #8A8F98;
  --mex-accent: #3B7BFF;
  --mex-accent-soft: rgba(59,123,255,.16);
  --mex-green: #12B76A;
  --mex-shadow: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}

/* !important на размерах — защита от глобальных `button { height: ...; border-radius: ... }`
   в продуктах. Без этого аватарка превращается в прямоугольник. */
.mex-av {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff; letter-spacing: .02em;
  flex: 0 0 34px !important;
  cursor: pointer;
  border: none; padding: 0; background: #0052FF;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mex-av:hover { transform: scale(1.06); }
.mex-av:focus-visible { outline: 2px solid var(--mex-accent); outline-offset: 2px; }
.mex-av--lg {
  width: 52px !important; height: 52px !important;
  min-width: 52px !important; min-height: 52px !important;
  flex: 0 0 52px !important;
  font-size: 17px !important;
}
.mex-av__initials { pointer-events: none; }

.mex-who { position: relative; display: inline-flex; }

.mex-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px;
  background: var(--mex-bg-elev); border: 1px solid var(--mex-border);
  border-radius: 14px; box-shadow: var(--mex-shadow); padding: 8px;
  z-index: 1000;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .16s cubic-bezier(.4,0,.2,1), transform .16s cubic-bezier(.4,0,.2,1), visibility .16s;
}
.mex-menu--open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.mex-menu__head { display: flex; align-items: center; gap: 12px; padding: 10px; }
.mex-menu__who { display: flex; flex-direction: column; min-width: 0; }
.mex-menu__login {
  font: 600 14px/1.3 -apple-system, sans-serif; color: var(--mex-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mex-menu__dom { font: 500 12px/1.4 -apple-system, sans-serif; color: var(--mex-text-dim); }
.mex-menu__sep { height: 1px; background: var(--mex-border); margin: 6px 4px; }
.mex-menu__title {
  font: 600 10px/1 -apple-system, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mex-text-dim); padding: 8px 10px 6px;
}
.mex-menu__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font: 500 13.5px/1.2 -apple-system, sans-serif; color: var(--mex-text);
  text-decoration: none; transition: background .12s ease; cursor: pointer;
}
.mex-menu__item:hover { background: var(--mex-bg-hover); }
.mex-menu__item:focus-visible { outline: 2px solid var(--mex-accent); outline-offset: -2px; }
/* Пункт без доступа: приглушён, НО остаётся ссылкой (контракт 26.10.2026) —
   человек должен уметь дойти до продукта и увидеть там форму входа. */
.mex-menu__item--off { color: var(--mex-text-dim); }
.mex-menu__item--off:hover { background: var(--mex-bg-hover); }
.mex-menu__dot {
  width: 7px !important; height: 7px !important;
  min-width: 7px !important; min-height: 7px !important;
  border-radius: 50% !important;
  flex: 0 0 7px !important;
  padding: 0 !important; border: none !important;
}
.mex-menu__dot--on { background: var(--mex-green); box-shadow: 0 0 0 3px rgba(9,133,81,.15); }
.mex-menu__dot--off { background: var(--mex-border); }
.mex-menu__lbl { flex: 1; }
.mex-menu__role {
  font: 500 11px/1 ui-monospace, monospace; color: var(--mex-text-dim);
  text-transform: lowercase;
}
.mex-menu__danger { color: #E5484D; }
.mex-menu__danger:hover { background: rgba(229,72,77,.1); }

@media (max-width: 480px) {
  .mex-menu { width: calc(100vw - 32px); right: -8px; }
}

/* Текущий продукт в дропдауне — видно «ты здесь», но кликабельно */
.mex-menu__item--current { background: var(--mex-accent-soft); }
.mex-menu__item--current .mex-menu__lbl { font-weight: 600; }