/* --- ANIMATION-SPECIFIC STYLES for lateral-movement.js --- */
/* This file contains ONLY the CSS needed for the animations */

/* Basic element styles used in animations */
.node {
    position: absolute;
    padding: 15px;
    border: 2px solid var(--secondary-surface);
    background-color: var(--dark-bg);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}
/* --- FIX for Next/Prev Button Positioning --- */
.sub-step-nav {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 100; /* Ensures buttons are on top */
}

/* Optional: Minor style for the buttons themselves */
.sub-step-button {
    background-color: var(--secondary-surface);
    color: var(--text-muted);
    border: 1px solid #555;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 5px;
}
.sub-step-button:hover:not(:disabled) {
    background-color: var(--accent-color);
    color: var(--dark-bg);
}
.sub-step-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.packet { font-size: 20px; border: none; background: transparent; padding: 0; }
.attacker { border-color: var(--color-bad); }
.pc { width: 80px; height: 60px; }
.server { width: 90px; height: 90px; border-radius: 12px; }
.server.important, .list-item.important { border-color: var(--color-bad); }
.callout { font-size: 12px; padding: 5px 8px; border-color: var(--color-neutral); color: var(--text-muted); }
.list-item { width: 200px; padding: 10px; text-align: left;}

/* Scene 1 & 2 Specifics */
.c2-beacon-path { stroke: var(--color-bad); stroke-width: 1.5; fill: none; stroke-dasharray: 4; animation: c2-dash 1s linear infinite; }
@keyframes c2-dash { to { stroke-dashoffset: -8; } }
.graph-link { stroke-width: 2px; stroke: var(--secondary-surface); stroke-dasharray: 5; transition: stroke 0.5s ease; }

/* Professionally Reworked "Attacker Tools" Scene */
.zone {
    position: absolute; color: var(--text-muted); font-size: 14px;
    border: 1px dashed var(--secondary-surface); border-radius: 10px;
    padding: 20px; width: 500px; height: 380px; text-align: center;
}
.zone h3 { margin: -10px 0 0 0; background: var(--dark-bg); display: inline-block; padding: 0 10px; }
.zone[style*="left: 550px"] { width: 550px; } 

.tool-sidebar { flex: 0 0 200px; }
.lm-tool-button { width: 100%; margin-bottom: 10px; text-align: left; background-color: var(--secondary-surface); color: var(--text-color); border: 1px solid #444; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.lm-tool-button:hover { background-color: #3f3f3f; border-color: var(--text-muted); }
.lm-tool-button.active { background-color: var(--accent-color); color: var(--dark-bg); font-weight: 600; border-color: var(--accent-color); }
.tool-content-pane { position: absolute; width: 100%; height: 100%; }

.lm-terminal { font-size: 14px; text-align: left; min-height: 80px; width: 450px; background-color: #0c0c0c; border: 1px solid var(--secondary-surface);}
.lm-terminal .prompt { color: var(--accent-color); }
.lm-terminal-cursor { display: inline-block; background-color: var(--accent-color); width: 8px; height: 16px; animation: blink 1s infinite; vertical-align: middle;}
@keyframes blink { 50% { opacity: 0; } }

.port { position: absolute; background-color: var(--secondary-surface); width: 25px; height: 25px; border-radius: 50%; display: grid; place-content: center; font-size: 12px; font-weight: 600; transition: background-color 0.3s;}
.share { position: absolute; font-weight: 600; width: 60px; height: 60px; background-color: var(--dark-bg); border: 2px solid var(--secondary-surface); display: grid; place-content: center; font-size: 14px; border-radius: 8px; transition: all 0.3s; }
.packet.file { font-size: 12px; padding: 5px; background: var(--color-data); border-radius: 4px; color: var(--dark-bg); }
.packet.data { font-size: 24px; }
.process-icon { font-size: 24px; border: none; background: transparent; padding: 0; }

/* Pass the Hash Scene */
.credential-store { display: flex; flex-direction: column; justify-content: center; width: 200px; height: 100px; }
.credential-store h4, .credential-store p { margin: 2px; }
.credential-store.warn { border-color: var(--color-warning); }
.credential-store.bad { border-color: var(--color-bad); }
.credential-store.neutral { border-color: var(--color-neutral); }
.hash-icon { background: var(--color-bad); color: white; padding: 8px; font-family: 'Courier New', monospace; font-size: 12px; border-radius: 4px; text-align: center; }
.auth-gate { position: absolute; border: 2px solid var(--color-bad); width: 70px; height: 90px; border-radius: 8px; display: grid; place-content: center; font-size: 14px; transition: all 0.5s;}

/* Sub-step navigation for scenes with multiple parts */
.sub-step-nav { position: absolute; bottom: 15px; right: 20px; z-index: 100; }
.sub-step-button { background-color: var(--secondary-surface); color: var(--text-muted); border: 1px solid #555; padding: 8px 15px; font-size: 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-left: 5px; }
.sub-step-button:hover:not(:disabled) { background-color: var(--accent-color); color: var(--dark-bg); }
.sub-step-button:disabled { cursor: not-allowed; opacity: 0.3; }