/* ═══════════════════════════════════════════════════════════════════════
   ДЗВІНОЧОК: ПОХИТУВАННЯ Й ПОСТІЙНИЙ АКЦЕНТ.

   Лічильник сам по собі людина не помічає — вона дивиться в форму, а не в
   кут екрана (розпорядження власника 23.09.2026). Рух привертає погляд
   ОДИН раз, а обідок лишається, доки є непрочитане.

   Файл поза `platform/`: той каталог правити заборонено (CLAUDE.md §8).
   ═══════════════════════════════════════════════════════════════════════ */

/* Акцент — постійний, знімається лише коли непрочитаних не лишилось. */
#notif-bell.notif-accent {
    box-shadow: 0 0 0 2px var(--color-warning, #d97757);
    border-radius: 8px;
}

/* Похитування — 0,6 с, один раз на подію. */
@keyframes crmBellShake {
    0%, 100% { transform: rotate(0); }
    12%      { transform: rotate(-11deg); }
    28%      { transform: rotate(9deg); }
    44%      { transform: rotate(-7deg); }
    60%      { transform: rotate(5deg); }
    76%      { transform: rotate(-3deg); }
}
#notif-bell.notif-shake > i,
#notif-bell.notif-shake > svg {
    display: inline-block;
    transform-origin: 50% 15%;      /* гойдається від підвісу, не від центра */
    animation: crmBellShake .6s ease-in-out 1;
}

/* КОМУ РУХ ЗАВАЖАЄ — лише акцент, без анімації (вимога оглядача). Код теж
   перевіряє це сам: правило тут — друга лінія, на випадок класу ззовні. */
@media (prefers-reduced-motion: reduce) {
    #notif-bell.notif-shake > i,
    #notif-bell.notif-shake > svg { animation: none; }
}

/* ═══ ПЛАШКА ПРО ПОДІЮ ════════════════════════════════════════════════
   Стек і каркас — наявні (.notify-stack/.notify-toast у components.css).
   Тут лише те, чого у звичайного тоста немає: заголовок, текст події й
   кнопка переходу. Кольори — лише токенами, інакше ніч зламається. */
.notif-toast .notif-toast-title {
    font-weight: 600;
    color: var(--color-text-primary, #29251e);
}
.notif-toast .notif-toast-body {
    margin-top: 2px;
    color: var(--color-text-secondary, #6b6963);
}
.notif-toast .notif-toast-open { margin-top: 8px; }

/* Кому рух заважає — плашка зʼявляється без виїзду (макет, правило 5). */
@media (prefers-reduced-motion: reduce) {
    .notif-toast,
    .notif-toast.notify-show,
    .notif-toast.notify-hide { transition: none; transform: none; }
}