/* GGurgenidze Phase 2: live notifications and messages */
.notification-button.has-unread{
    color:#176ee8!important;
    background:rgba(225,239,255,.96)!important;
    box-shadow:
        0 0 0 4px rgba(31,111,235,.10),
        0 9px 24px rgba(26,102,215,.16)!important;
}

.notification-button.is-ringing,
.sidebar-nav-link.is-ringing{
    animation:ggRing 1s ease;
}

@keyframes ggRing{
    0%,100%{transform:rotate(0) scale(1)}
    15%{transform:rotate(-12deg) scale(1.06)}
    30%{transform:rotate(10deg) scale(1.08)}
    45%{transform:rotate(-8deg) scale(1.06)}
    60%{transform:rotate(5deg) scale(1.03)}
}

.sidebar-nav-link.has-unread{
    color:#1266d8;
    background:#edf5ff;
}

.live-toast-stack{
    position:fixed;
    top:88px;
    right:22px;
    z-index:1800;
    width:min(370px,calc(100vw - 30px));
    display:grid;
    gap:10px;
    pointer-events:none;
}

.live-toast{
    pointer-events:auto;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    align-items:center;
    padding:13px 14px;
    border:1px solid rgba(83,130,193,.20);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    color:#223550;
    text-decoration:none;
    box-shadow:0 18px 50px rgba(22,43,76,.20);
    backdrop-filter:blur(14px);
    animation:toastIn .22s ease-out;
}

.live-toast.is-leaving{
    opacity:0;
    transform:translateX(18px);
    transition:.24s ease;
}

@keyframes toastIn{
    from{opacity:0;transform:translateY(-8px) translateX(10px)}
    to{opacity:1;transform:translate(0)}
}

.live-toast-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e9f3ff;
    color:#1672e8;
}

.live-toast.is-message .live-toast-icon{
    background:#e9f8f1;
    color:#15935e;
}

.live-toast-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.live-toast-copy{
    min-width:0;
    display:grid;
    gap:3px;
}

.live-toast-copy strong{
    font-size:.9rem;
}

.live-toast-copy span{
    overflow:hidden;
    color:#68778c;
    font-size:.8rem;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.conversation-avatar-wrap{
    position:relative;
    display:inline-grid;
    flex:0 0 auto;
}

.conversation-online-dot{
    position:absolute;
    right:0;
    bottom:1px;
    width:12px;
    height:12px;
    border:2px solid #fff;
    border-radius:50%;
    background:#22b56f;
    box-shadow:0 0 0 1px rgba(26,130,83,.08);
}

.conversation-presence-label{
    overflow:hidden;
    color:#8490a1;
    font-size:.66rem;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.chat-presence{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.chat-presence.is-online::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20ad69;
    box-shadow:0 0 0 3px rgba(32,173,105,.10);
}

.chat-typing-indicator{
    min-height:34px;
    padding:6px 18px;
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid #edf1f6;
    background:#fbfcfe;
    color:#708095;
    font-size:.78rem;
}

.chat-typing-indicator[hidden]{
    display:none!important;
}

.typing-dots{
    height:22px;
    padding:0 9px;
    display:flex;
    align-items:center;
    gap:4px;
    border-radius:999px;
    background:#edf1f6;
}

.typing-dots i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#8290a2;
    animation:typingDot 1.15s infinite ease-in-out;
}

.typing-dots i:nth-child(2){animation-delay:.14s}
.typing-dots i:nth-child(3){animation-delay:.28s}

@keyframes typingDot{
    0%,65%,100%{transform:translateY(0);opacity:.45}
    32%{transform:translateY(-3px);opacity:1}
}

.notification-type-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eaf3ff;
    color:#176fe3;
}

.notification-type-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notification-item{
    position:relative;
    align-items:center!important;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.notification-item:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 30px rgba(32,57,89,.09);
}

.notification-item .notification-dot{
    margin-left:auto;
    margin-top:0;
}

.notification-copy time{
    color:#8591a2;
    font-size:.73rem;
}

.notification-target-flash{
    animation:targetFlash 1.8s ease;
}

@keyframes targetFlash{
    0%,100%{filter:none}
    20%,60%{filter:drop-shadow(0 0 10px rgba(24,119,242,.32))}
}

@media(max-width:650px){
    .live-toast-stack{
        top:72px;
        right:10px;
        width:calc(100vw - 20px);
    }

    .live-toast{
        border-radius:14px;
    }
}