/* assets/css/notifications.css */

/* --- VARIÁVEIS DE CORES --- */
:root {
    --notif-bg: #0f172a;
    --notif-card-unread: rgba(59, 130, 246, 0.1);
    --notif-border-unread: rgba(96, 165, 250, 0.3);
    --notif-card-read: rgba(30, 41, 59, 0.4);
    --notif-border-read: rgba(51, 65, 85, 0.3);
}

/* --- SCROLLBAR --- */
.notif-scrollbar::-webkit-scrollbar { 
    width: 4px; 
}
.notif-scrollbar::-webkit-scrollbar-track { 
    background: transparent; 
}
.notif-scrollbar::-webkit-scrollbar-thumb { 
    background: #334155; 
    border-radius: 10px; 
}
.notif-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: #475569; 
}

/* --- ANIMAÇÕES DE ENTRADA --- */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.3s ease-out forwards; }

/* Desktop: Scale In Suave (Estilo Popover) */
@keyframes desktopEntry {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-desktop-entry {
    animation: desktopEntry 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: transform 0.2s, opacity 0.2s;
}

/* Mobile: Slide Up (Estilo Bottom Sheet) */
@keyframes mobileEntry {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.animate-mobile-entry {
    animation: mobileEntry 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.2s, opacity 0.2s;
}

/* --- CARDS DE NOTIFICAÇÃO --- */
.notification-card {
    position: relative;
    border-width: 1px;
    backdrop-filter: blur(5px);
}

/* ESTILO: NÃO LIDA (MÁGICO) */
.notification-card-unread {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 58, 138, 0.15));
    border-color: var(--notif-border-unread);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(96, 165, 250, 0.05);
}
.notification-card-unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3b82f6, #06b6d4);
    box-shadow: 2px 0 10px rgba(59, 130, 246, 0.5);
}

/* Texto Brilhante para Não Lidos */
.text-shadow-glow {
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
}

/* ESTILO: LIDA (DISCRETO) */
.notification-card-read {
    background: var(--notif-card-read);
    border-color: var(--notif-border-read);
}
.notification-card-read:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
}

/* --- ABAS --- */
.notification-tab {
    cursor: pointer;
    user-select: none;
}
.notification-tab.active {
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- BADGE DOT --- */
#notification-dot {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: #ef4444;
    border: 2px solid #0f172a;
    border-radius: 50%;
    color: white; font-size: 10px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
#notification-dot.visible {
    opacity: 1; transform: scale(1);
}
.animate-bounce-short {
    animation: bounce 0.5s ease-in-out;
}
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}