/* =============================================================================
   GENOMICS MISSION TERMINAL
   Shared styles for public squad page + agent portal mission terminal
   ============================================================================= */

/* ---- Color tokens ---- */
:root {
    --gen-green:      #00ff9d;
    --gen-green-dim:  rgba(0, 255, 157, 0.18);
    --gen-green-glow: rgba(0, 255, 157, 0.35);
    --gen-red:        #ff3b5c;
    --gen-red-dim:    rgba(255, 59, 92, 0.18);
    --gen-amber:      #ffb830;
    --gen-amber-dim:  rgba(255, 184, 48, 0.18);
    --gen-cyan:       #00c8ff;
    --gen-cyan-dim:   rgba(0, 200, 255, 0.15);
    --gen-bg:         #030a07;
    --gen-surface:    rgba(0, 255, 157, 0.04);
    --gen-border:     rgba(0, 255, 157, 0.14);
    --gen-border-hi:  rgba(0, 255, 157, 0.32);

    /* base-pair colours */
    --bp-a: #ff6b6b;
    --bp-t: #4ecdc4;
    --bp-g: #ffe66d;
    --bp-c: #a8edea;
}

/* ============================================================
   SHARED TERMINAL SHELL
   ============================================================ */

.genomics-terminal {
    background: var(--gen-bg);
    border: 1px solid var(--gen-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 255, 157, 0.06), inset 0 0 60px rgba(0, 0, 0, 0.4);
    flex: 1 1 0;
    min-width: 0;
}

.genomics-terminal-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(0, 255, 157, 0.05);
    border-bottom: 1px solid var(--gen-border);
}

.genomics-terminal-dots {
    display: flex;
    gap: 6px;
}
.genomics-terminal-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gen-border-hi);
}
.genomics-terminal-dots span:nth-child(1) { background: #ff5f56; }
.genomics-terminal-dots span:nth-child(2) { background: #ffbd2e; }
.genomics-terminal-dots span:nth-child(3) { background: var(--gen-green); }

.genomics-terminal-title {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: var(--gen-green);
    letter-spacing: 0.12em;
    flex: 1;
    text-transform: uppercase;
}

.genomics-terminal-status {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: var(--gen-green);
    letter-spacing: 0.1em;
    animation: gen-blink 2s step-end infinite;
}
.genomics-terminal-status.warn { color: var(--gen-amber); }
.genomics-terminal-status.alert { color: var(--gen-red); }

/* ---- Boot sequence ---- */
.genomics-boot {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gen-border);
}
.genomics-boot-line {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: rgba(0, 255, 157, 0.55);
    letter-spacing: 0.08em;
    line-height: 2;
    opacity: 0;
    animation: gen-fade-in 0.3s ease forwards;
}
.genomics-boot-line:nth-child(1) { animation-delay: 0.1s; }
.genomics-boot-line:nth-child(2) { animation-delay: 0.5s; }
.genomics-boot-line:nth-child(3) { animation-delay: 0.9s; }
.genomics-boot-line:nth-child(4) { animation-delay: 1.3s; }

/* ---- Organism / difficulty selector ---- */
.genomics-organism-select,
.genomics-difficulty-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gen-border);
    background: var(--gen-surface);
}

.genomics-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(0, 255, 157, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.genomics-organism-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.genomics-pill {
    padding: 5px 14px;
    border: 1px solid var(--gen-border-hi);
    border-radius: 3px;
    background: transparent;
    color: rgba(0, 255, 157, 0.6);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.genomics-pill:hover,
.genomics-pill.active {
    background: var(--gen-green-dim);
    border-color: var(--gen-green);
    color: var(--gen-green);
    box-shadow: 0 0 10px var(--gen-green-glow);
}

/* ---- Scan button ---- */
.genomics-scan-btn {
    padding: 7px 20px;
    background: var(--gen-green-dim);
    border: 1px solid var(--gen-green);
    border-radius: 3px;
    color: var(--gen-green);
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    margin-left: auto;
}
.genomics-scan-btn:hover {
    background: rgba(0, 255, 157, 0.25);
    box-shadow: 0 0 14px var(--gen-green-glow);
}
.genomics-scan-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Sequence panel ---- */
.genomics-seq-panel {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gen-border);
}

.genomics-seq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.genomics-seq-meta {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(0, 255, 157, 0.45);
    letter-spacing: 0.08em;
}

/* ---- Sequence viewer ---- */
.genomics-seq-viewer {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    line-height: 2;
    letter-spacing: 0.08em;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gen-border);
    border-radius: 4px;
    padding: 14px 16px;
    max-height: 200px;
    overflow-y: auto;
    word-break: break-all;
    white-space: pre-wrap;
    scrollbar-width: thin;
    scrollbar-color: var(--gen-border-hi) transparent;
}

.genomics-seq-placeholder {
    color: rgba(0, 255, 157, 0.25);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

/* Base pair colors */
.bp-A { color: var(--bp-a); }
.bp-T { color: var(--bp-t); }
.bp-G { color: var(--bp-g); }
.bp-C { color: var(--bp-c); }

/* Flagged position — agent only */
.bp-flagged {
    background: rgba(255, 59, 92, 0.25);
    border-radius: 2px;
    outline: 1px solid var(--gen-red);
    cursor: pointer;
}
.bp-classified {
    background: rgba(255, 184, 48, 0.25);
    outline: 1px solid var(--gen-amber);
}
.bp-clickable {
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.1s;
}
.bp-clickable:hover {
    background: rgba(0, 255, 157, 0.15);
}

/* ---- Stats chips (public) ---- */
.genomics-seq-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.genomics-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--gen-border);
    border-radius: 4px;
    background: var(--gen-surface);
    gap: 3px;
}
.genomics-stat-chip span:first-child {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--gen-green);
    font-weight: 600;
}
.genomics-stat-chip span:last-child {
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    color: rgba(0, 255, 157, 0.45);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.genomics-chip-locked {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.5;
}
.genomics-chip-locked span:first-child { font-size: 1rem; }

/* ---- Public CTA bar ---- */
.genomics-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(0, 255, 157, 0.03);
    border-top: 1px solid var(--gen-border);
}

.genomics-cta-text {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(0, 255, 157, 0.45);
    letter-spacing: 0.08em;
}

.genomics-cta-btn {
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--gen-green);
    border-radius: 3px;
    color: var(--gen-green);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: all 0.2s;
    text-transform: uppercase;
}
.genomics-cta-btn:hover {
    background: var(--gen-green-dim);
    box-shadow: 0 0 12px var(--gen-green-glow);
}

/* ---- Public page intro text ---- */
.genomics-demo-intro {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 20px 0;
    max-width: 600px;
    line-height: 1.7;
}

/* ============================================================
   AGENT PORTAL — MISSION TERMINAL LAYOUT
   ============================================================ */

.genomics-mission-wrap {
    display: flex;
    gap: 20px;
    padding: 24px 28px;
    min-height: 100vh;
    align-items: flex-start;
}

.genomics-mission-header {
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--gen-border);
    margin-bottom: 20px;
    display: none; /* injected into wrap above terminal via JS if needed */
}

/* Agent terminal — wider viewer */
.genomics-terminal--agent {
    flex: 1 1 0;
}

.genomics-seq-viewer--agent {
    max-height: 300px;
    font-size: 0.8rem;
}

/* ---- Incident brief ---- */
.genomics-brief {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gen-border);
    background: rgba(255, 59, 92, 0.03);
}

.genomics-brief-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    color: var(--gen-red);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.genomics-brief-text {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 10px;
}

.genomics-brief-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.genomics-brief-meta span {
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    color: rgba(0, 255, 157, 0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Timer ---- */
.genomics-timer-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.genomics-timer {
    font-family: var(--font-mono, monospace);
    font-size: 1.4rem;
    color: var(--gen-green);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}
.genomics-timer.warn { color: var(--gen-amber); }
.genomics-timer.critical { color: var(--gen-red); animation: gen-blink 0.5s step-end infinite; }

/* ---- Classifier panel ---- */
.genomics-classifier {
    padding: 14px 20px;
    border-top: 1px solid var(--gen-border);
    background: rgba(0, 0, 0, 0.2);
}

.genomics-classifier-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    color: rgba(0, 255, 157, 0.4);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.genomics-classifier-types {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.genomics-class-btn {
    padding: 5px 14px;
    border-radius: 3px;
    border: 1px solid var(--gen-border-hi);
    background: transparent;
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.genomics-class-btn[data-type="missense"] { color: var(--bp-a); border-color: rgba(255, 107, 107, 0.4); }
.genomics-class-btn[data-type="missense"]:hover { background: rgba(255, 107, 107, 0.15); }
.genomics-class-btn[data-type="frameshift"] { color: var(--bp-g); border-color: rgba(255, 230, 109, 0.4); }
.genomics-class-btn[data-type="frameshift"]:hover { background: rgba(255, 230, 109, 0.15); }
.genomics-class-btn[data-type="silent"] { color: var(--bp-t); border-color: rgba(78, 205, 196, 0.4); }
.genomics-class-btn[data-type="silent"]:hover { background: rgba(78, 205, 196, 0.15); }
.genomics-class-clear { color: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.12); }
.genomics-class-clear:hover { background: rgba(255, 255, 255, 0.06); }
.genomics-class-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---- Flagged list ---- */
.genomics-flagged-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.genomics-flagged-empty {
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    color: rgba(0, 255, 157, 0.25);
    letter-spacing: 0.08em;
}

.genomics-flag-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px solid var(--gen-border);
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s;
}
.genomics-flag-chip[data-type="missense"] { border-color: rgba(255, 107, 107, 0.5); color: var(--bp-a); }
.genomics-flag-chip[data-type="frameshift"] { border-color: rgba(255, 230, 109, 0.5); color: var(--bp-g); }
.genomics-flag-chip[data-type="silent"] { border-color: rgba(78, 205, 196, 0.5); color: var(--bp-t); }
.genomics-flag-chip[data-type="unflagged"] { color: rgba(255, 255, 255, 0.4); }

/* ---- Pathogen spread bar ---- */
.genomics-spread-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--gen-border);
    background: rgba(255, 59, 92, 0.03);
}

.genomics-spread-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 59, 92, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.genomics-spread-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gen-amber), var(--gen-red));
    border-radius: 3px;
    transition: width 1s linear;
}

.genomics-spread-pct {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: var(--gen-red);
    min-width: 36px;
    text-align: right;
    letter-spacing: 0.06em;
}

/* ---- Verdict panel ---- */
.genomics-verdict-panel {
    padding: 20px;
    border-top: 1px solid var(--gen-border);
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.genomics-verdict-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.genomics-verdict-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 16px 0;
}

.genomics-verdict-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.genomics-verdict-btn {
    padding: 10px 28px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-weight: 600;
}
.genomics-verdict-quarantine {
    background: rgba(255, 59, 92, 0.12);
    border: 1px solid var(--gen-red);
    color: var(--gen-red);
}
.genomics-verdict-quarantine:hover {
    background: rgba(255, 59, 92, 0.25);
    box-shadow: 0 0 16px rgba(255, 59, 92, 0.3);
}
.genomics-verdict-clear {
    background: var(--gen-green-dim);
    border: 1px solid var(--gen-green);
    color: var(--gen-green);
}
.genomics-verdict-clear:hover {
    background: rgba(0, 255, 157, 0.25);
    box-shadow: 0 0 16px var(--gen-green-glow);
}

/* ---- Results panel ---- */
.genomics-results-panel {
    padding: 24px 20px;
    border-top: 1px solid var(--gen-border);
}

.genomics-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.genomics-results-verdict {
    font-family: var(--font-mono, monospace);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
}
.genomics-results-verdict.correct { color: var(--gen-green); }
.genomics-results-verdict.wrong { color: var(--gen-red); }

.genomics-results-score {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: rgba(0, 255, 157, 0.6);
    letter-spacing: 0.08em;
}

.genomics-results-breakdown {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 2;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}

.genomics-results-actions {
    display: flex;
    justify-content: center;
}

/* ---- Agent sidebar ---- */
.genomics-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.genomics-sidebar-block {
    background: rgba(0, 255, 157, 0.03);
    border: 1px solid var(--gen-border);
    border-radius: 4px;
    padding: 12px 14px;
}

.genomics-sidebar-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    color: rgba(0, 255, 157, 0.35);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.genomics-sidebar-val {
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
    color: var(--gen-green);
    letter-spacing: 0.06em;
}

.genomics-credits {
    color: var(--gen-amber);
}

/* ---- How to play ---- */
.genomics-howto {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.genomics-howto-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    letter-spacing: 0.04em;
}
.genomics-howto-step span {
    color: var(--gen-green);
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---- Mission header (agent page top) ---- */
.genomics-mission-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    color: var(--gen-red);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.genomics-mission-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}
.genomics-mission-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes gen-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes gen-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes gen-scan-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--gen-green-glow); }
    50%      { box-shadow: 0 0 20px 4px var(--gen-green-glow); }
}

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

@media (max-width: 900px) {
    .genomics-mission-wrap {
        flex-direction: column;
        padding: 16px;
    }
    .genomics-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .genomics-sidebar-block {
        flex: 1 1 120px;
    }
}

@media (max-width: 600px) {
    .genomics-seq-viewer {
        font-size: 0.62rem;
    }
    .genomics-verdict-btns {
        flex-direction: column;
    }
}