/* ─────────────────────────────────────────────────────────────
   Аскомтел · кружок человека: фото или инициалы.
   Подключается на всех страницах auth (вход/системы, админка,
   кабинет); разметку строит avatar.js. Размер задаёт страница
   через --ava (по умолчанию 32 px), кружок и его геометрия не
   меняются от того, есть ли фото, — меняется только содержимое.
   Никаких рамок и теней в обычном состоянии (ТЗ, раздел 8).
   ───────────────────────────────────────────────────────────── */
.ava{--ava:32px;width:var(--ava);height:var(--ava);border-radius:50%;flex:none;position:relative;
  display:inline-grid;place-items:center;overflow:hidden;vertical-align:middle;
  background:#E7EAEE;color:#3F4854;
  font:600 calc(var(--ava) * .38)/1 Aptos,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:.02em;text-transform:uppercase;user-select:none}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ava span{position:relative}
/* цвета инициалов по человеку: пять приглушённых пар, кегль ≥4.5:1 к своей подложке */
.ava.c1{background:#E3E8F1;color:#2F4A78}
.ava.c2{background:#E2EFE8;color:#1F5C41}
.ava.c3{background:#F1E7E0;color:#7A4A1F}
.ava.c4{background:#ECE6F3;color:#4E3A86}
.ava.c5{background:#E9EBEF;color:#3F4854}
/* строка «кружок + ФИО» в шапках — ссылка в кабинет */
.melink{display:inline-flex;align-items:center;gap:9px;min-width:0;color:inherit;text-decoration:none;
  border-radius:9px;padding:3px 6px 3px 3px;margin:-3px 0}
.melink b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (hover:hover) and (pointer:fine){ .melink:hover{background:rgba(24,16,80,.06)} }
.melink:focus-visible{outline:2px solid #6C4BF4;outline-offset:2px}

/* ─── кружок-меню в шапке (askUserMenu) ───
   Кнопка — только кружок, без рамок; ФИО и логин — в раскрытом меню.
   Белая карточка одинаково читается и на белой шапке auth, и на тёмной
   полосе систем. Движение: 160 мс, только opacity/transform. */
.umenu{position:relative;display:inline-block;flex:none;line-height:0}
.umenu-btn{display:block;padding:2px;margin:-2px;border:0;background:none;border-radius:50%;cursor:pointer;line-height:0;color:inherit}
.umenu-btn .ava{display:inline-grid}
.umenu-btn:focus-visible{outline:2px solid #6C4BF4;outline-offset:2px}
[data-ask-topbar] .umenu-btn:focus-visible{outline-color:#fff}
@media (hover:hover) and (pointer:fine){
  .umenu-btn:hover .ava,.umenu.is-open .umenu-btn .ava{box-shadow:0 0 0 3px rgba(24,16,80,.12)}
  [data-ask-topbar] .umenu-btn:hover .ava,[data-ask-topbar] .umenu.is-open .umenu-btn .ava{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
}
.umenu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:240px;max-width:320px;
  background:#fff;color:#181050;border:1px solid #E6E3F0;border-radius:12px;padding:6px;
  box-shadow:0 14px 34px -12px rgba(24,16,80,.35),0 2px 8px rgba(24,16,80,.08);
  line-height:1.3;text-align:left;font:13.5px/1.35 Aptos,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transform-origin:top right;animation:umenu-in .16s cubic-bezier(.23,1,.32,1)}
@keyframes umenu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.umenu-head{display:flex;align-items:center;gap:11px;padding:8px 8px 10px;border-bottom:1px solid #EEECF4;margin-bottom:4px;min-width:0}
.umenu-txt{min-width:0;display:grid;gap:3px}
.umenu-txt b{font-weight:600;font-size:14px;color:#181050;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu-txt code{font:12px/1.2 ui-monospace,"IBM Plex Mono",Menlo,monospace;color:#6B6784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu-it{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px 9px;border:0;border-radius:8px;
  background:none;color:#201868;font:inherit;text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap}
.umenu-it svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.umenu-it:hover,.umenu-it:focus-visible{background:#F2EFFE;outline:none;text-decoration:none}
.umenu-it:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){ .umenu-pop{animation:none} }

/* ─── значок «вам написали · вам поручили» (сентябрь 2026) ───
   Пилюля вырастает из-за кружка влево (кнопка кружка лежит выше, z-index 2),
   в покое её не видно вовсе — остаётся счётчик в углу. Пилюля стоит ПОВЕРХ
   содержимого шапки, поэтому у неё есть размытие (правило платформы про стекло).
   Цвета: на белой шапке auth — белая пилюля и фиолетовый счётчик; на тёмной
   плате систем ([data-ask-topbar]) — пилюля цвета платы, счётчик белый с числом
   цветом платы (13:1 и выше на любой системе; цвет системы на её же тёмной плате
   не читается — синий на тёмно-синем даёт 2:1). Красный не берём: он под
   подтверждения. Внимание даёт движение: пружина 0,44 с при росте, отскок
   счётчика при стягивании; prefers-reduced-motion всё выключает. */
.umenu-btn{position:relative;z-index:2}
.ubadge{position:absolute;right:-3px;top:-3px;width:36px;height:36px;border-radius:999px;z-index:1;
  overflow:hidden;opacity:0;pointer-events:none;background:rgba(255,255,255,.86);color:#181050;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(24,16,80,.1),0 4px 14px rgba(24,16,80,.14);
  transition:width .44s cubic-bezier(.34,1.42,.42,1),opacity .2s}
[data-ask-topbar] .ubadge{background:color-mix(in srgb,var(--sys-dark,#181050) 62%,rgba(255,255,255,.18));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.22)}
.umenu.badge-grow .ubadge,.umenu.has-badge.badge-hover:hover .ubadge{opacity:1;width:var(--ubw,180px);pointer-events:auto;cursor:pointer}
.ubadge-c{position:absolute;left:13px;top:0;bottom:0;display:flex;align-items:center;gap:5px;white-space:nowrap;width:max-content;
  font:600 11.5px/1 Aptos,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateX(8px);transition:opacity .22s,transform .3s cubic-bezier(.2,.7,.2,1)}
.ubadge-c svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ubadge-c i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;margin:0 2px}
.umenu.badge-grow .ubadge-c,.umenu.has-badge.badge-hover:hover .ubadge-c{opacity:1;transform:none;transition-delay:.12s}
.ubadge-n{position:absolute;right:-6px;top:-5px;z-index:3;height:17px;min-width:17px;padding:0 4px;border-radius:9px;box-sizing:border-box;
  background:#6C4BF4;color:#fff;border:2px solid #fff;pointer-events:none;text-align:center;
  font:700 10px/13px Aptos,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;
  transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
[data-ask-topbar] .ubadge-n{background:#fff;color:var(--sys-dark,#181050);border-color:var(--sys-dark,#181050)}
.umenu.has-badge .ubadge-n{transform:scale(1)}
.umenu.badge-grow .ubadge-n,.umenu.has-badge.badge-hover:hover .ubadge-n{transform:scale(0)}
.ubadge-n.is-pop{animation:ubadge-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes ubadge-pop{0%{transform:scale(.4)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
.umenu-rows[hidden],.umenu-it[hidden]{display:none}
.umenu-in{font-weight:600}
.umenu-in .umenu-arr{margin-left:auto;font-style:normal;opacity:.5}
@media (prefers-reduced-motion:reduce){
  .ubadge,.ubadge-c,.ubadge-n{transition:none}
  .ubadge-n.is-pop{animation:none}
}