/* Задача №878. Уведомления о новых сообщениях чата */
#chatNotifyBox { position: fixed; right: 50px; bottom: 130px; width: 340px; max-width: calc(100vw - 24px); z-index: 1085; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#chatNotifyBox > * { pointer-events: auto; }
.cn-toast { position: relative; background: #fff; border: 1px solid #dbe4f3; border-left: 4px solid #2563eb; border-radius: 12px; padding: 10px 30px 10px 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .22); cursor: pointer; animation: cn-in .22s ease-out; transition: opacity .25s, transform .25s; }
.cn-toast.out { opacity: 0; transform: translateX(24px); }
.cn-toast:hover { border-color: #93b4f0; }
.cn-toast .cn-head { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #2563eb; margin-bottom: 2px; }
.cn-toast .cn-body { font-size: 13px; line-height: 1.35; color: #0f172a; word-break: break-word; max-height: 4.1em; overflow: hidden; }
.cn-toast .cn-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 20px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.cn-toast .cn-close:hover { color: #0f172a; }
.cn-more { align-self: flex-end; background: #0f172a; color: #fff; font-size: 12px; border-radius: 999px; padding: 4px 12px; cursor: pointer; opacity: .92; }
@keyframes cn-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

#chatNotifyBell { position: fixed; right: 122px; bottom: 68px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #dbe4f3; background: #fff; font-size: 16px; line-height: 1; padding: 0; box-shadow: 0 3px 10px rgba(15, 23, 42, .18); cursor: pointer; z-index: 1085; opacity: .75; }
#chatNotifyBell:hover { opacity: 1; }
#chatNotifyBell.muted { filter: grayscale(1); opacity: .6; }
#chatNotifyPanel { position: fixed; right: 122px; bottom: 110px; width: 270px; background: #fff; border: 1px solid #dbe4f3; border-radius: 12px; padding: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .25); z-index: 1086; font-size: 13px; }
#chatNotifyPanel .cn-title { font-weight: 700; margin-bottom: 8px; color: #0f172a; }
#chatNotifyPanel label { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; cursor: pointer; color: #1f2937; }
#chatNotifyPanel .cn-test { border: 1px solid #2563eb; background: #eff5ff; color: #1d4ed8; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
#chatNotifyPanel .cn-hint { margin-top: 8px; font-size: 11px; color: #b45309; }
@media (max-width: 768px) { #chatNotifyBox, #chatNotifyBell, #chatNotifyPanel { display: none !important; } }