/* ==========================================================
   SENTRIX CYBER 2.0
   ANIMATIONS + DYNAMIC COMPONENT STYLES
   File : css/animation.css

   This file covers elements that are created or toggled by
   JavaScript (js/upload.js, js/scanner.js, js/chat.js,
   js/timeline.js, app.js) and had no matching CSS anywhere
   else in the project, plus a couple of small keyframes/
   states referenced by class name but never defined.
========================================================== */

/*=========================================================
                SIDEBAR TOGGLE (mobile)
=========================================================*/

.sidebar-toggle{
    display:none;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text);
    font-size:1.2rem;
    cursor:pointer;
    transition:var(--transition);
}

.sidebar-toggle:hover{
    background:rgba(79,124,255,.15);
    border-color:var(--primary);
}

@media(max-width:992px){
    .sidebar-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
}

/*=========================================================
                GENERIC KEYFRAMES
=========================================================*/

@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes pulseGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(79,124,255,.45); }
    50%{ box-shadow:0 0 0 14px rgba(79,124,255,0); }
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

@keyframes slideInRight{
    from{ transform:translateX(40px); opacity:0; }
    to{ transform:translateX(0); opacity:1; }
}

/*=========================================================
                SCROLL-REVEAL (dashboard.js observeCards)
=========================================================*/

.status-card,
.timeline-item,
.mission-card,
.widget{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.status-card.visible,
.timeline-item.visible,
.mission-card.visible,
.widget.visible{
    opacity:1;
    transform:translateY(0);
}

/*=========================================================
                TOPBAR GLASS STATE (dashboard.js scrollEffects)
=========================================================*/

.topbar.glass{
    background:rgba(5,8,22,.75);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow-md);
}

/*=========================================================
                DROPZONE DRAG STATE (js/upload.js, js/scanner.js)
=========================================================*/

.dropzone.dragging,
.upload-area.dragging{
    border-color:var(--primary);
    background:rgba(79,124,255,.08);
}

.dropzone.pulse,
.upload-area.pulse{
    animation:pulseGlow .9s ease;
}

/*=========================================================
                UPLOAD PREVIEW CARDS (js/upload.js)
=========================================================*/

.upload-preview{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px;
}

.upload-preview-card,
.preview-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    background:var(--bg-card);
    border:1px solid var(--border);
    animation:fadeInUp .4s ease;
}

.preview-card{
    flex-direction:column;
    align-items:stretch;
}

.upload-preview-card .upload-icon{
    font-size:1.5rem;
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(79,124,255,.15);
    flex-shrink:0;
}

.upload-info{
    flex:1;
    min-width:0;
}

.upload-info h4,
.preview-footer h4{
    font-size:.95rem;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.upload-info p,
.preview-footer p{
    font-size:.8rem;
    color:var(--text-muted);
}

.remove-upload{
    background:rgba(255,77,103,.12);
    color:var(--danger);
    border:none;
    width:30px;
    height:30px;
    border-radius:10px;
    cursor:pointer;
    flex-shrink:0;
    transition:var(--transition);
}

.remove-upload:hover{
    background:var(--danger);
    color:#fff;
}

.preview-image,
.preview-video{
    width:100%;
    max-height:220px;
    object-fit:cover;
    border-radius:14px;
}

.preview-pdf{
    width:100%;
    height:220px;
    border:none;
    border-radius:14px;
}

.preview-file{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:30px 10px;
    font-size:2rem;
}

.preview-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:10px;
}

/*=========================================================
                SCAN RESULT SUMMARY (js/scanner.js)
=========================================================*/

.scan-summary{
    margin-top:18px;
    padding:20px;
    border-radius:16px;
    background:var(--bg-card);
    border:1px solid var(--border);
    animation:fadeInUp .4s ease;
}

.scan-summary h3{
    margin-bottom:10px;
    color:var(--success);
}

.scan-summary p{
    padding:4px 0;
    font-size:.9rem;
    color:var(--text-light);
}

/*=========================================================
                CHAT EXTRAS (js/chat.js)
=========================================================*/

.chat-reactions{
    display:flex;
    gap:6px;
    margin-top:8px;
}

.chat-reactions button{
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius:10px;
    padding:2px 8px;
    cursor:pointer;
    transition:var(--transition);
}

.chat-reactions button.active,
.chat-reactions button:hover{
    background:rgba(79,124,255,.2);
    border-color:var(--primary);
}

.guardian-message{
    position:relative;
}

.delete-chat{
    position:absolute;
    top:6px;
    right:6px;
    background:transparent;
    border:none;
    color:var(--text-muted);
    cursor:pointer;
    opacity:0;
    transition:var(--transition);
}

.guardian-message:hover .delete-chat{
    opacity:1;
}

.delete-chat:hover{
    color:var(--danger);
}

.copy-btn{
    display:block;
    margin-bottom:6px;
    background:rgba(255,255,255,.08);
    border:none;
    border-radius:8px;
    padding:2px 10px;
    font-size:.75rem;
    color:var(--text-light);
    cursor:pointer;
}

/*=========================================================
                NOTIFICATION DRAWER (id="notificationPanel")
=========================================================*/

.notification-panel{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:360px;
    max-width:88vw;
    background:var(--bg-secondary);
    border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    padding:30px 24px;
    z-index:4000;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
}

.notification-panel.active{
    transform:translateX(0);
}

.notification-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.notification-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.notification{
    padding:14px 16px;
    border-radius:14px;
    background:var(--bg-card);
    border:1px solid var(--border);
    font-size:.9rem;
    line-height:1.5;
    animation:fadeInUp .4s ease;
}

/*=========================================================
                SETTINGS DRAWER (id="settingsPanel")
=========================================================*/

.settings-panel{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:360px;
    max-width:88vw;
    background:var(--bg-secondary);
    border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    padding:30px 24px;
    z-index:4000;
    transform:translateX(100%);
    transition:transform .35s ease;
    display:flex;
    flex-direction:column;
    gap:18px;
    overflow-y:auto;
}

.settings-panel.active{
    transform:translateX(0);
}

.settings-panel h2{
    margin-bottom:6px;
}

.settings-panel label{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    background:var(--bg-card);
    border:1px solid var(--border);
    cursor:pointer;
    font-size:.9rem;
}

.settings-panel input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--primary);
}

.panel-close{
    align-self:flex-end;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    color:var(--text-light);
    border-radius:10px;
    padding:6px 14px;
    cursor:pointer;
    font-size:.8rem;
    transition:var(--transition);
}

.panel-close:hover{
    background:rgba(255,77,103,.15);
    color:var(--danger);
    border-color:var(--danger);
}

/*=========================================================
                PROFILE DRAWER (class="profile-panel")
=========================================================*/

.profile-panel{
    position:fixed;
    top:80px;
    right:30px;
    width:260px;
    z-index:4000;
    box-shadow:var(--shadow-lg);
    animation:slideInRight .3s ease;
}

.profile-panel img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
}

.profile-panel button{
    margin-top:10px;
    width:100%;
    padding:10px;
    border-radius:12px;
    border:none;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    transition:var(--transition);
}

.profile-panel button:hover{
    background:var(--primary-light);
}

/*=========================================================
                EXPANDED GUARDIAN CHAT (id="expandGuardian")
=========================================================*/

.guardian-window.expanded{
    position:fixed;
    inset:5vh 6vw;
    height:auto;
    width:auto;
    z-index:5000;
    box-shadow:var(--shadow-lg);
}

/*=========================================================
                PANIC MODE ACTIVE STATE
=========================================================*/

body.panic-active .panic-button{
    animation:pulseGlow .8s ease infinite;
}

body.panic-active::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    border:4px solid var(--danger);
    z-index:9999;
    animation:pulseGlow 1.2s ease infinite;
}

/*=========================================================
                TOAST NOTIFICATIONS (app.js)
=========================================================*/

.sentrix-toast-stack{
    position:fixed;
    bottom:30px;
    right:30px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:6000;
}

.sentrix-toast{
    padding:14px 20px;
    border-radius:14px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    font-size:.85rem;
    animation:fadeInUp .3s ease;
    max-width:320px;
}

.sentrix-toast.success{ border-color:var(--success); }
.sentrix-toast.warning{ border-color:var(--warning); }
.sentrix-toast.danger{ border-color:var(--danger); }

/*=========================================================
                RESPONSIVE
=========================================================*/

@media (max-width:560px){
    .notification-panel,
    .settings-panel{
        width:100%;
        max-width:100%;
    }
    .profile-panel{
        right:16px;
        left:16px;
        width:auto;
    }
}