/* Уведомления (django messages): зелёное — получилось, оранжевое — обратите внимание, красное — ошибка.
   Всплывают в правом верхнем углу поверх страницы. Разметка прежняя (.notification-item…), поэтому новый вид
   получают и копии этого блока на отдельных страницах, и уведомления, которые скрипты добавляют сами. */
.info-sidebar-lk__notes{ position:fixed; top:20px; right:24px; left:auto; bottom:auto; z-index:1200; width:400px; max-width:calc(100vw - 32px);
                         display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.info-sidebar-lk__notes:empty{ display:none; }
.info-sidebar-lk__notes .notification-item:not(:last-child){ margin-bottom:0; }

.notification-item{ --ntf-c:#2D82EE; --ntf-t:#EEF5FE; position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 30px; align-items:start; gap:12px;
                    padding:14px 10px 14px 14px; border:1px solid #E7E9EF; border-radius:14px; background:#fff; overflow:hidden; pointer-events:auto;
                    box-shadow:0 20px 44px -20px rgba(25,29,49,.42), 0 2px 6px -2px rgba(25,29,49,.08);
                    font-family:inherit; color:#191D31; animation:ntf-in .28s cubic-bezier(.2,.8,.2,1) both; }
.notification-item--green{ --ntf-c:#18A058; --ntf-t:#E7F6EE; border-color:#E7E9EF; background:#fff; }
.notification-item--warn{ --ntf-c:#D98A00; --ntf-t:#FFF4DF; border-color:#E7E9EF; background:#fff; }
.notification-item--red{ --ntf-c:#E5484D; --ntf-t:#FDECEC; border-color:#F6C9CB; background:#fff; }

.notification-item__left{ width:34px; height:34px; margin:0; border-radius:50%; background:var(--ntf-t); display:flex; align-items:center; justify-content:center;
                          align-self:start; flex-shrink:0; }
.notification-item__left svg{ display:none; }
.notification-item__left::before{ content:""; width:18px; height:18px; background:var(--ntf-c);
    -webkit-mask:var(--ntf-i) center / contain no-repeat; mask:var(--ntf-i) center / contain no-repeat; }
.notification-item--green .notification-item__left::before{
    --ntf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.notification-item--warn .notification-item__left::before{
    --ntf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5v7' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.6'/%3E%3C/svg%3E"); }
.notification-item--red .notification-item__left::before{
    --ntf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 7 10 10M17 7 7 17' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.notification-item__middle{ min-width:0; padding-top:6px; font-size:14px; line-height:1.45; color:#2A3045; letter-spacing:0; overflow-wrap:anywhere; }
.notification-item__middle b, .notification-item__middle strong{ display:block; margin:0 0 3px; font-size:15px; font-weight:700; line-height:1.3; color:#191D31; letter-spacing:0; }
.notification-item__middle p{ margin:0; font-size:13px; line-height:1.45; color:#4A5164; }
.notification-item__middle p + p{ margin-top:4px; }
.notification-item__middle a{ color:#1C6FD8; text-decoration:underline; text-underline-offset:2px; }
.notification-item__middle a:hover{ color:#2D82EE; }

.notification-item__right{ margin:0; display:flex; justify-content:flex-end; }
.notification-item__remove{ width:30px; height:30px; padding:0; border:0; border-radius:9px; background:none; color:#7A8193; cursor:pointer;
                            display:inline-flex; align-items:center; justify-content:center; }
.notification-item__remove svg{ width:14px; height:14px; color:currentColor; }
.notification-item__remove:hover{ background:#F5F7FB; color:#191D31; }
.notification-item__remove:focus-visible{ outline:2px solid #2D82EE; outline-offset:1px; }

/* зелёное закрывается само — полоска показывает, сколько осталось; наведение мыши ставит на паузу */
.notification-item__timer{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ntf-c); opacity:.55; transform-origin:left center;
                           animation:ntf-timer var(--ntf-life, 6s) linear forwards; }
.notification-item:hover .notification-item__timer, .notification-item:focus-within .notification-item__timer{ animation-play-state:paused; }
.notification-item.is-leaving{ animation:ntf-out .2s ease-in forwards; }

@keyframes ntf-in{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes ntf-out{ to{ opacity:0; transform:translateX(16px); } }
@keyframes ntf-timer{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

@media (max-width: 767.98px){
    .info-sidebar-lk__notes{ top:12px; left:12px; right:12px; width:auto; max-width:none; }
    .notification-item{ grid-template-columns:32px minmax(0,1fr) 30px; gap:10px; padding:12px 8px 12px 12px; }
    .notification-item__left{ width:32px; height:32px; }
}
@media (prefers-reduced-motion: reduce){
    .notification-item, .notification-item.is-leaving{ animation:none; }
    .notification-item__timer{ display:none; }
}