/* Меню дзвіночка (frontend/shared/notifymenu.js) — «Клієнти» й «Постачальники» (Іван 27.10): як у нас влаштовані
   сповіщення і поточний стан. Кольори — токени обох застосунків із запасом (у «Постачальниках» інші імена). */
.nfm {
    position: fixed; z-index: 10060; box-sizing: border-box; padding: 10px 14px 12px; border-radius: 12px;
    background: var(--bg2, #1c2230); border: 1px solid var(--line, rgba(255, 255, 255, .12));
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5); color: var(--text, var(--txt, #e6ecf3)); font-size: 12.5px; line-height: 1.35;
    max-height: calc(100vh - 80px); overflow-y: auto;
    /* видима висота телефону (без панелей браузера): «Вийти» внизу меню не ховається під панель Safari (ревʼю 27.10) */
    max-height: calc(100dvh - 80px); overscroll-behavior: contain;
}
.nfm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.nfm-title { font-weight: 700; font-size: 13.5px; }
.nfm-state { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.nfm-on { color: #7fd38f; background: rgba(127, 211, 143, .13); }
.nfm-dim { color: #d9b36a; background: rgba(217, 179, 106, .13); }
.nfm-off, .nfm-perm { color: #ef8a8a; background: rgba(239, 138, 138, .13); }
.nfm-sec { padding: 6px 0 4px; border-top: 1px solid var(--line, rgba(255, 255, 255, .08)); }
.nfm-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--text-dim, var(--muted, #8b98a5)); margin-bottom: 3px; }
.nfm-row { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.nfm-row i { flex: none; width: 14px; margin-top: 2px; text-align: center; font-size: 11.5px;
    color: var(--text-dim, var(--muted, #8b98a5)); }
.nfm-text { flex: 1; min-width: 0; }
.nfm-row-dim .nfm-text { color: var(--text-dim, var(--muted, #8b98a5)); }
/* стан пункту: ✓ — діє зараз; сірим — вимкнено / ніколи (Іван 27.10 ~14:00: «уследить сложно») */
.nfm-chip { flex: none; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
    white-space: nowrap; line-height: 18px; }
.nfm-chip-on { color: #7fd38f; background: rgba(127, 211, 143, .13); }
.nfm-chip-off, .nfm-chip-never { color: var(--text-muted, var(--muted2, #76808a)); background: rgba(255, 255, 255, .06); }
.nfm-act { padding-top: 8px; border-top: 1px solid var(--line, rgba(255, 255, 255, .08)); }
.nfm-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; cursor: pointer; font: inherit;
    font-size: 12.5px; color: var(--accent-strong, var(--accent2, #6ab3f3)); background: none;
    border: 1px solid color-mix(in srgb, var(--accent-strong, var(--accent2, #6ab3f3)) 45%, transparent);
}
.nfm-btn:hover:not(:disabled) { background: var(--bg-hover, var(--bg3, rgba(255, 255, 255, .06))); }
.nfm-btn:disabled { cursor: not-allowed; opacity: .55; color: var(--text-dim, var(--muted, #8b98a5));
    border-color: var(--line, rgba(255, 255, 255, .15)); }
.nfm-why { margin-top: 5px; font-size: 11.5px; color: var(--text-dim, var(--muted, #8b98a5)); }
.nfm-note { margin-top: 6px; font-size: 11px; color: var(--text-muted, var(--muted2, #76808a)); }
/* «Режим менеджера» (Іван 27.10: з меню біля імені — сюди): перемикач рядком на всю ширину; увімкнено — зелений,
   вимкнено — сірий (Іван 24.10: «значок включённый … всё ещё серый, и выключенный тоже серый») */
.nfm-mode-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 2px 0 3px; padding: 6px 8px;
    border-radius: 8px; border: 1px solid var(--line, rgba(255, 255, 255, .12)); background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; color: var(--text, var(--txt, #e6ecf3));
}
.nfm-mode-btn i { flex: none; font-size: 17px; color: var(--text-muted, var(--muted2, #76808a)); }
.nfm-mode-btn:hover { background: var(--bg-hover, var(--bg3, rgba(255, 255, 255, .06))); }
.nfm-mode-btn.mm-on { color: #7fd38f; border-color: rgba(127, 211, 143, .45); background: rgba(127, 211, 143, .08); }
.nfm-mode-btn.mm-on i { color: #7fd38f; }
/* хто увійшов і «Вийти» — тихим рядком унизу */
.nfm-me { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--line, rgba(255, 255, 255, .08)); color: var(--text-dim, var(--muted, #8b98a5)); font-size: 11.5px; }
.nfm-me > i { flex: none; width: 14px; text-align: center; }
.nfm-me-who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nfm-out { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; cursor: pointer;
    font: inherit; font-size: 11.5px; color: var(--text-dim, var(--muted, #8b98a5)); background: none;
    border: 1px solid var(--line, rgba(255, 255, 255, .12)); }
.nfm-out:hover { color: #ef8a8a; border-color: rgba(239, 138, 138, .45); }
@media (max-width: 720px) {
    .nfm { font-size: 12px; }
}