/* ============================================================
   THREAT HUNTER AI - Tactical HUD Theme
   Full CSS Control - No Framework Limitations
   ============================================================ */

/* === CSS Variables === */
:root {
    --cyan: #00f0ff;
    --cyan-dim: rgba(0, 240, 255, 0.7);
    --cyan-glow: rgba(0, 240, 255, 0.3);
    --magenta: #ff00ff;
    --magenta-dim: rgba(255, 0, 255, 0.5);
    --red: #ff3344;
    --red-glow: rgba(255, 51, 68, 0.4);
    --green: #00ff88;
    --green-glow: rgba(0, 255, 136, 0.3);
    --yellow: #ffcc00;
    --orange: #ff8800;

    --bg-deep: #030810;
    --bg-panel: #0a1020;
    --bg-card: #0d1528;
    --bg-input: rgba(0, 0, 0, 0.4);

    --border: rgba(0, 240, 255, 0.25);
    --border-bright: rgba(0, 240, 255, 0.5);

    --font-display: 'Orbitron', 'Rajdhani', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --header-height: 80px;
    --sidebar-width: 280px;
    --threat-bar-height: 40px;
}

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg-deep);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
}

/* === Scanline Effect === */
.scanlines {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 240, 255, 0.015) 2px,
        rgba(0, 240, 255, 0.015) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* === Main Header === */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(180deg,
        var(--bg-panel) 0%,
        rgba(0, 240, 255, 0.05) 50%,
        var(--bg-deep) 100%
    );
    border-bottom: 2px solid var(--magenta);
    z-index: 1000;
    overflow: hidden;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 2rem;
}

.header-left, .header-right {
    width: 200px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.header-control-btn {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.header-control-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
    transform: scale(1.05);
}

.header-control-btn svg {
    width: 18px;
    height: 18px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    color: var(--cyan);
    filter: drop-shadow(0 0 10px var(--cyan));
}

.main-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    color: var(--cyan);
    text-shadow:
        0 0 20px var(--cyan),
        0 0 40px var(--cyan-glow),
        0 0 60px var(--cyan-glow);
    animation: title-pulse 3s ease-in-out infinite;
    will-change: opacity;  /* GPU acceleration hint for animation */
}

@keyframes title-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.system-time {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--cyan-dim);
    text-align: right;
    letter-spacing: 0.1em;
}

.header-sweep {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 240, 255, 0.1) 25%,
        rgba(255, 0, 255, 0.1) 50%,
        transparent 75%
    );
    animation: sweep 4s linear infinite;
}

@keyframes sweep {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

/* === Threat Status Bar === */
.threat-bar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--threat-bar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    z-index: 999;
    transition: border-color 0.3s ease;
}

.threat-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.threat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px currentColor;
    animation: dot-pulse 1.5s ease-in-out infinite;
    will-change: transform, opacity;  /* GPU acceleration hint for animation */
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.threat-level {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    color: var(--cyan);
}

.threat-status {
    font-size: 0.8rem;
    color: var(--cyan-dim);
    letter-spacing: 0.1em;
}

.threat-time {
    font-size: 0.75rem;
    color: var(--cyan-dim);
}

/* === Main Container === */
.main-container {
    display: flex;
    position: fixed;
    top: calc(var(--header-height) + var(--threat-bar-height));
    left: 0;
    right: 0;
    bottom: 0;
}

/* === Sidebar === */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-deep));
    border-right: 1px solid var(--cyan);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem;
}

.sidebar-section {
    margin-bottom: 1rem;
}

.section-header {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--cyan);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg,
        rgba(0, 240, 255, 0.1) 0%,
        transparent 100%
    );
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    text-shadow: 0 0 10px var(--cyan-glow);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    color: var(--magenta);
    font-size: 0.6rem;
}

/* === Mode Buttons === */
.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.1);
}

.mode-btn.active {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.15);
    color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow), inset 0 0 20px var(--cyan-glow);
}

.mode-icon {
    font-size: 1rem;
}

/* === Parameters === */
.param-group {
    margin-bottom: 1rem;
}

.param-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--cyan-dim);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.param-slider {
    width: 100%;
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--cyan);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--cyan);
}

.param-value {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cyan);
    margin-top: 0.5rem;
}

.param-select, .param-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.param-select:focus, .param-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.param-select option {
    background: var(--bg-panel);
    color: var(--cyan);
}

/* === Sidebar Footer === */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.version-info {
    font-size: 0.7rem;
    color: var(--cyan-dim);
    text-align: center;
    letter-spacing: 0.05em;
}

.powered-by {
    color: var(--magenta-dim);
}

/* === Main Content === */
.main-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    position: relative;
}

/* === Tactical Panel === */
.tactical-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 1.5rem;
    position: relative;
}

.tactical-panel::before,
.tactical-panel::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--cyan);
    border-style: solid;
}

.tactical-panel::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 4px 0 0 0;
}

.tactical-panel::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 4px 0;
    border-color: var(--magenta);
}

.panel-header {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.panel-icon {
    color: var(--cyan);
    font-size: 1rem;
}

.panel-icon.warning {
    color: var(--red);
}

.panel-body {
    padding: 1rem;
}

.panel-desc {
    font-size: 0.85rem;
    color: var(--cyan-dim);
    margin-bottom: 1rem;
}

/* === Upload Zone === */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--cyan);
    opacity: 0.7;
}

.upload-text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan);
    margin-bottom: 0.25rem;
}

.upload-subtext {
    font-size: 0.75rem;
    color: var(--cyan-dim);
}

.selected-file {
    font-size: 0.85rem;
    color: var(--green);
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 4px;
    display: none;
}

.selected-file.visible {
    display: block;
}

/* === Capture Info === */
.capture-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 4px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--cyan-dim);
}

.info-value {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cyan);
}

/* === Action Buttons === */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 0, 255, 0.05));
    border: 1px solid var(--cyan);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn:hover {
    box-shadow: 0 0 20px var(--cyan-glow), 0 0 40px var(--cyan-glow);
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon {
    font-size: 1.1rem;
}

/* === Console Panel === */
.console-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.console-output {
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
}

.console-line {
    color: var(--green);
    margin-bottom: 0.25rem;
}

.console-line::before {
    content: "> ";
    color: var(--cyan);
}

/* === Results Panel === */
.results-panel {
    animation: fadeIn 0.5s ease;
}

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

/* === Metrics Grid === */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: 4px;
    padding: 1rem;
}

.metric-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--cyan-dim);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.metric-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cyan);
}

.metric-value.threat {
    color: var(--red);
}

/* === Data Table === */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th {
    background: rgba(0, 240, 255, 0.1);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--cyan);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--cyan-dim);
}

.data-table tr:hover td {
    background: rgba(0, 240, 255, 0.05);
}

/* === Loading Overlay === */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 16, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.loading-content {
    text-align: center;
}

/* Tactical Loader Styles */
.tactical-loader {
    width: 500px;
    max-width: 90vw;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 10, 20, 0.95));
    border: 2px solid var(--cyan);
    border-radius: 8px;
    box-shadow:
        0 0 30px rgba(0, 240, 255, 0.3),
        inset 0 0 60px rgba(0, 240, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.tactical-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation: scan-line 2s linear infinite;
}

@keyframes scan-line {
    0% { left: -100%; }
    100% { left: 100%; }
}

.tactical-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tactical-icon {
    font-size: 1.5rem;
    color: var(--cyan);
    animation: spin 3s linear infinite;
}

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

.tactical-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.tactical-progress-container {
    margin: 1.5rem 0;
}

.tactical-progress-bar {
    position: relative;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.tactical-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        #00ff88 0%,
        #00f0ff 50%,
        #00ff88 100%);
    background-size: 200% 100%;
    animation: progress-gradient 2s linear infinite;
    transition: width 0.3s ease;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

@keyframes progress-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.tactical-progress-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: glow-sweep 1.5s ease-in-out infinite;
}

@keyframes glow-sweep {
    0%, 100% { opacity: 0; transform: translateX(-50px); }
    50% { opacity: 1; transform: translateX(0); }
}

.tactical-progress-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
}

.tactical-progress-markers span {
    width: 2px;
    height: 8px;
    background: var(--border);
}

.tactical-progress-markers span:nth-child(odd) {
    height: 12px;
    background: var(--cyan-dim);
}

.tactical-stats {
    display: flex;
    justify-content: space-around;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.tactical-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.tactical-stat .stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--cyan-dim);
    opacity: 0.7;
}

.tactical-stat .stat-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.tactical-status {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tactical-substatus {
    font-size: 0.75rem;
    color: var(--cyan-dim);
    opacity: 0.6;
    letter-spacing: 0.05em;
}

/* Corner decorations */
.tactical-loader::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--cyan);
    border-right: 2px solid var(--cyan);
    opacity: 0.5;
}

.tactical-loader .tactical-header::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--cyan);
    border-left: 2px solid var(--cyan);
    opacity: 0.5;
}

/* === Capture Warning === */
.capture-warning {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid var(--red);
    border-left: 4px solid var(--red);
    border-radius: 4px;
}

.capture-warning .warning-icon {
    font-size: 1.5rem;
    color: var(--red);
    animation: pulse 1.5s ease-in-out infinite;
}

.capture-warning .warning-text {
    font-size: 0.85rem;
    line-height: 1.6;
}

.capture-warning .warning-text strong {
    color: var(--red);
    font-family: var(--font-display);
    letter-spacing: 0.1em;
}

.capture-warning .warning-text span {
    color: var(--cyan-dim);
}

.capture-warning .warning-text code {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--green);
}

/* === Utility Classes === */
.hidden {
    display: none !important;
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-glow);
}

/* === AI Analysis Panel === */
.ai-section {
    margin-bottom: 1.5rem;
}

.ai-section-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--cyan);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.ai-threat-level {
    margin: 0.5rem 0;
}

.ai-severity {
    font-size: 0.85rem;
    margin: 0.75rem 0;
    color: var(--cyan-dim);
}

.severity-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.severity-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.ai-summary {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cyan-dim);
}

.ai-summary p {
    margin: 0;
}

.ai-threat-item,
.ai-ioc-item,
.ai-rec-item {
    font-size: 0.85rem;
    padding: 0.5rem 0;
    color: var(--cyan-dim);
    border-left: 2px solid var(--border);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
}

.ai-iocs,
.ai-recommendations {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-no-threats {
    font-size: 0.9rem;
    color: var(--green);
    padding: 0.5rem;
    border-left: 2px solid var(--green);
    padding-left: 0.75rem;
}

.ai-error {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid var(--red);
    border-radius: 4px;
}

.ai-error-icon {
    font-size: 1.5rem;
    color: var(--red);
}

.ai-error-text {
    font-size: 0.85rem;
    color: var(--red);
}

.ai-error-type {
    font-size: 0.75rem;
    color: var(--red);
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Enhanced AI Analysis Styles */
.ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.ai-threat-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.ai-threat-icon {
    font-size: 1.5rem;
}

.ai-scores {
    display: flex;
    gap: 1.5rem;
}

.ai-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.ai-score-label {
    font-size: 0.7rem;
    color: var(--cyan-dim);
    letter-spacing: 0.1em;
}

.ai-score-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.ai-severity-container {
    margin-bottom: 1.5rem;
}

.ai-severity-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.ai-severity-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.ai-summary-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--cyan-dim);
    padding: 0.75rem;
    background: rgba(0, 240, 255, 0.05);
    border-left: 3px solid var(--cyan);
    border-radius: 0 4px 4px 0;
}

/* Threat Cards */
.ai-threats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.ai-threat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
}

.ai-threat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ai-threat-type {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 0.05em;
}

.ai-threat-severity {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.ai-threat-desc {
    font-size: 0.85rem;
    color: var(--cyan-dim);
    line-height: 1.5;
}

/* MITRE ATT&CK Cards */
.ai-mitre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.ai-mitre-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
}

.ai-mitre-id {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--orange);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ai-mitre-name {
    font-size: 0.85rem;
    color: var(--cyan);
    margin-bottom: 0.25rem;
}

.ai-mitre-tactic {
    font-size: 0.75rem;
    color: var(--cyan-dim);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.ai-mitre-relevance {
    font-size: 0.8rem;
    color: var(--cyan-dim);
    line-height: 1.4;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* IOCs List */
.ai-iocs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-iocs-list .ai-ioc-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 136, 0, 0.1);
    border: 1px solid rgba(255, 136, 0, 0.3);
    border-radius: 4px;
    border-left: none;
    margin: 0;
}

.ai-ioc-type {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--orange);
    font-weight: 600;
}

.ai-ioc-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--cyan);
}

.ai-ioc-context {
    font-size: 0.8rem;
    color: var(--cyan-dim);
    width: 100%;
    margin-top: 0.25rem;
}

/* Behavioral Analysis */
.ai-behavioral {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
}

.ai-behavioral-item {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--cyan-dim);
    line-height: 1.6;
}

.ai-behavioral-item:last-child {
    margin-bottom: 0;
}

.ai-behavioral-item strong {
    color: var(--cyan);
    display: block;
    margin-bottom: 0.25rem;
}

.ai-behavioral-item ul {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
}

.ai-behavioral-item li {
    margin-bottom: 0.25rem;
}

/* Recommendations */
.ai-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-recommendations-list .ai-rec-item {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: none;
    margin: 0;
}

.ai-rec-priority {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.ai-rec-action {
    font-size: 0.9rem;
    color: var(--cyan);
}

.ai-rec-rationale {
    font-size: 0.8rem;
    color: var(--cyan-dim);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}

/* False Positive Assessment */
.ai-fp-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
}

.ai-fp-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-fp-likelihood {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
}

.ai-fp-explanation {
    font-size: 0.85rem;
    color: var(--cyan-dim);
    line-height: 1.5;
}

/* Metadata Footer */
.ai-metadata {
    display: flex;
    gap: 1.5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--cyan-dim);
    opacity: 0.7;
}

.ai-metadata span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Panel Badge */
.panel-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-glow));
    color: var(--bg);
    margin-left: auto;
}

/* AI Loading State */
.ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--cyan-dim);
    font-size: 0.9rem;
}

.ai-loading-icon {
    font-size: 1.25rem;
    animation: spin 2s linear infinite;
}

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


/* === Responsive === */
@media (max-width: 1200px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --header-height: 60px;
    }

    .main-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-height: 300px;
    }

    .main-title {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* === API Configuration Styles === */
.api-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse 1.5s ease-in-out infinite;
}

.status-dot.configured {
    background: var(--green);
    animation: none;
}

.status-text {
    color: var(--cyan-dim);
}

.action-btn.compact {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    width: 100%;
}

/* === Custom Modal === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 16, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modalFadeIn 0.2s ease-out;
}

.modal-overlay.hidden {
    display: none;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container {
    background: var(--bg-panel);
    border: 1px solid var(--cyan);
    box-shadow:
        0 0 30px var(--cyan-glow),
        0 0 60px rgba(0, 240, 255, 0.1),
        inset 0 0 30px rgba(0, 240, 255, 0.05);
    min-width: 350px;
    max-width: 500px;
    position: relative;
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Corner brackets */
.modal-container::before,
.modal-container::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--cyan);
    border-style: solid;
}

.modal-container::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.modal-container::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent);
}

.modal-icon {
    font-size: 1.2rem;
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan);
}

.modal-icon.success {
    color: var(--green);
    text-shadow: 0 0 10px var(--green);
}

.modal-icon.error {
    color: var(--red);
    text-shadow: 0 0 10px var(--red);
}

.modal-icon.warning {
    color: var(--yellow);
    text-shadow: 0 0 10px var(--yellow);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan-glow);
}

.modal-body {
    padding: 1.5rem 1.25rem;
}

.modal-message {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cyan-dim);
}

.modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-btn {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(0, 240, 255, 0.05));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.modal-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.1));
    box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0, 240, 255, 0.1);
    transform: translateY(-1px);
}

.modal-btn:active {
    transform: translateY(0);
}

.modal-btn.primary {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
    border-color: var(--green);
    color: var(--green);
}

.modal-btn.primary:hover {
    box-shadow: 0 0 15px var(--green-glow), 0 0 30px rgba(0, 255, 136, 0.1);
}

.modal-btn.secondary {
    background: transparent;
    border-color: rgba(0, 240, 255, 0.3);
    color: rgba(0, 240, 255, 0.7);
}

.modal-btn.secondary:hover {
    background: rgba(0, 240, 255, 0.05);
    border-color: var(--cyan);
    color: var(--cyan);
}

/* Session Prompt Modal Specific */
.modal-container.session-prompt {
    min-width: 450px;
    max-width: 550px;
}

.session-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    outline: none;
    transition: all 0.2s ease;
}

.session-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
    background: rgba(0, 240, 255, 0.05);
}

.session-input::placeholder {
    color: rgba(0, 240, 255, 0.4);
}

.session-input-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    margin-top: 1rem;
    display: block;
}

.session-input-label:first-child {
    margin-top: 0;
}

.session-option {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.2);
    padding: 0.75rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.session-option:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--cyan);
}

.session-option.selected {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.session-option-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 0.05em;
}

.session-option-desc {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(0, 240, 255, 0.6);
    margin-top: 0.25rem;
}

/* === Export Panel === */
.export-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.export-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan);
    white-space: nowrap;
}

.export-icon {
    font-size: 1.1rem;
    color: var(--cyan);
}

.export-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.02));
    border: 1px solid var(--border);
    color: var(--cyan-dim);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.export-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.05));
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
    transform: translateY(-1px);
}

.export-btn:active {
    transform: translateY(0);
}

.export-btn-icon {
    font-size: 1rem;
}

/* PDF button special styling */
.export-btn#exportPdfBtn {
    border-color: var(--magenta-dim);
}

.export-btn#exportPdfBtn:hover {
    border-color: var(--magenta);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

/* === Interactive Chat Panel === */
.chat-panel {
    margin-top: 1rem;
}

.chat-panel .panel-header {
    position: relative;
}

.chat-header-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.chat-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-action-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.chat-action-btn svg {
    width: 16px;
    height: 16px;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 450px;
    background: rgba(0, 0, 0, 0.2);
}

/* Chat Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--cyan-dim);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--cyan);
}

/* Welcome Message */
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    margin: auto;
}

.chat-welcome-icon {
    font-size: 3rem;
    color: var(--cyan);
    text-shadow: 0 0 20px var(--cyan-glow);
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.chat-welcome-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cyan);
    margin-bottom: 0.75rem;
}

.chat-welcome-text {
    font-size: 0.85rem;
    color: var(--cyan-dim);
    line-height: 1.6;
    max-width: 400px;
}

/* Chat Message Bubbles */
.chat-message {
    display: flex;
    gap: 0.75rem;
    animation: messageSlideIn 0.3s ease-out;
}

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

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.chat-message.user .chat-avatar {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
    border: 1px solid var(--green);
    color: var(--green);
}

.chat-message.assistant .chat-avatar {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.05));
    border: 1px solid var(--cyan);
    color: var(--cyan);
}

.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.chat-message.user .chat-bubble {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05));
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--green);
    border-bottom-right-radius: 2px;
}

.chat-message.assistant .chat-bubble {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.02));
    border: 1px solid var(--border);
    color: var(--cyan-dim);
    border-bottom-left-radius: 2px;
}

.chat-bubble p {
    margin: 0 0 0.75rem 0;
}

.chat-bubble p:last-child {
    margin-bottom: 0;
}

.chat-bubble code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    color: var(--orange);
}

.chat-bubble pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    overflow-x: auto;
}

.chat-bubble pre code {
    background: none;
    padding: 0;
}

.chat-bubble ul, .chat-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-bubble li {
    margin-bottom: 0.25rem;
}

.chat-bubble strong {
    color: var(--cyan);
}

.chat-bubble .chat-h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cyan);
    margin: 1rem 0 0.5rem 0;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}

.chat-bubble .chat-h3:first-child {
    margin-top: 0;
}

.chat-bubble .chat-h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cyan-dim);
    margin: 0.75rem 0 0.25rem 0;
    letter-spacing: 0.03em;
}

.chat-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

/* Typing Indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    max-width: 100px;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
    will-change: transform, opacity;  /* GPU acceleration hint for animation */
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Suggested Questions */
.chat-suggestions {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.suggestions-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan-dim);
    margin-bottom: 0.5rem;
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suggestion-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 8px var(--cyan-glow);
}

/* Chat Input Area */
.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.chat-input-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    resize: none;
    min-height: 44px;
    max-height: 150px;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.chat-input::placeholder {
    color: var(--cyan-dim);
    opacity: 0.5;
}

.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
    border: 1px solid var(--green);
    border-radius: 4px;
    color: var(--green);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.1));
    box-shadow: 0 0 15px var(--green-glow);
    transform: translateY(-1px);
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-send-btn svg {
    width: 20px;
    height: 20px;
}

.chat-input-hint {
    font-size: 0.7rem;
    color: var(--cyan-dim);
    opacity: 0.5;
    margin-top: 0.5rem;
    text-align: right;
}

/* Chat Error Message */
.chat-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid rgba(255, 51, 68, 0.3);
    border-radius: 4px;
    color: var(--red);
    font-size: 0.85rem;
}

.chat-error-icon {
    font-size: 1rem;
}

/* Hide chat panel initially - shown after analysis */
.chat-panel {
    display: none;
}

.chat-panel.visible {
    display: block;
}

/* Responsive chat */
@media (max-width: 768px) {
    .chat-container {
        height: 350px;
    }

    .chat-bubble {
        max-width: 85%;
    }

    .suggestion-btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.6rem;
    }
}

/* === Expanded Chat Panel === */
.chat-panel.expanded .chat-container {
    height: 700px;
}

.chat-panel.expanded .chat-messages {
    flex: 1;
}

#expandChatBtn.expanded svg {
    transform: rotate(180deg);
}

/* === Chat Pop-out Modal === */
.chat-popout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.2s ease-out;
}

.chat-popout-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-popout-container {
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    max-height: 900px;
    background: var(--bg-dark);
    border: 1px solid var(--cyan);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 40px var(--cyan-glow),
        0 0 80px rgba(0, 240, 255, 0.1),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-popout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}

.chat-popout-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan);
}

.chat-popout-title .panel-icon {
    font-size: 1.5rem;
    text-shadow: 0 0 15px var(--cyan-glow);
}

.chat-popout-actions {
    display: flex;
    gap: 0.5rem;
}

.chat-popout-actions .close-btn {
    margin-left: 1rem;
    border-color: var(--red);
    color: var(--red);
}

.chat-popout-actions .close-btn:hover {
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 15px rgba(255, 51, 68, 0.5);
    background: rgba(255, 51, 68, 0.1);
}

.chat-popout-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(0, 0, 0, 0.2);
}

.chat-popout-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-popout-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-popout-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.chat-popout-messages::-webkit-scrollbar-thumb {
    background: var(--cyan-dim);
    border-radius: 4px;
}

.chat-popout-messages::-webkit-scrollbar-thumb:hover {
    background: var(--cyan);
}

.chat-popout-messages .chat-bubble {
    max-width: 70%;
    font-size: 1rem;
    line-height: 1.7;
}

.chat-popout-messages .chat-avatar {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
}

.chat-popout-suggestions {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.chat-popout-input-area {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.chat-popout-input-area .chat-input {
    font-size: 1rem;
    padding: 1rem 1.25rem;
    min-height: 52px;
}

.chat-popout-input-area .chat-send-btn {
    width: 52px;
    height: 52px;
}

.chat-popout-input-area .chat-send-btn svg {
    width: 24px;
    height: 24px;
}

/* Pop-out welcome message */
.chat-popout-messages .chat-welcome {
    padding: 3rem;
}

.chat-popout-messages .chat-welcome-icon {
    font-size: 4rem;
}

.chat-popout-messages .chat-welcome-title {
    font-size: 1.5rem;
}

.chat-popout-messages .chat-welcome-text {
    font-size: 1rem;
    max-width: 500px;
}

/* Responsive pop-out */
@media (max-width: 768px) {
    .chat-popout-overlay {
        padding: 0;
    }

    .chat-popout-container {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .chat-popout-messages .chat-bubble {
        max-width: 85%;
    }
}

/* ============================================
   SESSIONS PANEL STYLES
   ============================================ */

.sessions-toggle-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 255, 136, 0.05));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.sessions-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 255, 136, 0.1));
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* Environment Intel Link */
.env-intel-link {
    display: flex;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 240, 255, 0.05));
    border: 1px solid var(--green);
    color: var(--green);
    text-decoration: none;
    font-family: 'Orbitron', 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 4px;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.env-intel-link:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 240, 255, 0.1));
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
    color: var(--green);
}

.env-intel-link .section-icon {
    font-size: 1.1rem;
}

/* Sessions Panel Overlay */
.sessions-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(3, 8, 16, 0.8);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sessions-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.sessions-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: linear-gradient(180deg, #0a1628 0%, #030810 100%);
    border-left: 1px solid var(--cyan);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
}

.sessions-panel.visible {
    right: 0;
}

.sessions-panel-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(13, 21, 40, 0.95));
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sessions-panel-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.sessions-close-btn {
    background: none;
    border: 1px solid rgba(255, 51, 68, 0.5);
    color: var(--red);
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sessions-close-btn:hover {
    background: rgba(255, 51, 68, 0.2);
    border-color: var(--red);
}

.sessions-search {
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.sessions-search input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.sessions-search input::placeholder {
    color: rgba(0, 240, 255, 0.5);
}

.sessions-search button {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sessions-search button:hover {
    background: rgba(0, 240, 255, 0.2);
}

.sessions-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.sessions-tab {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    color: rgba(0, 240, 255, 0.5);
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.sessions-tab:hover {
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.sessions-tab.active {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
    background: rgba(0, 240, 255, 0.1);
}

.sessions-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

.sessions-tab-content.active {
    display: block;
}

.sessions-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.sessions-section-header span {
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    color: rgba(0, 240, 255, 0.7);
    letter-spacing: 0.1em;
}

.new-session-btn {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--green);
    color: var(--green);
    padding: 0.25rem 0.5rem;
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-session-btn:hover {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.sessions-filter {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.session-filter-btn {
    flex: 1;
    padding: 0.35rem;
    background: none;
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: rgba(0, 240, 255, 0.5);
    font-family: 'Orbitron', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-filter-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.session-filter-btn.active {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--cyan);
    color: var(--cyan);
}

/* Session Card */
.session-card, .analysis-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.2);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.session-card:hover, .analysis-card:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.session-card-header, .analysis-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.session-threat-badge, .analysis-threat-badge {
    font-family: 'Orbitron', monospace;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0.15rem 0.35rem;
    letter-spacing: 0.05em;
}

.session-threat-badge.critical, .analysis-threat-badge.critical {
    background: rgba(255, 51, 68, 0.2);
    border: 1px solid var(--red);
    color: var(--red);
}

.session-threat-badge.high, .analysis-threat-badge.high {
    background: rgba(255, 136, 0, 0.2);
    border: 1px solid var(--orange);
    color: var(--orange);
}

.session-threat-badge.elevated, .analysis-threat-badge.elevated {
    background: rgba(255, 204, 0, 0.2);
    border: 1px solid var(--yellow);
    color: var(--yellow);
}

.session-threat-badge.minimal, .session-threat-badge.secure,
.analysis-threat-badge.minimal, .analysis-threat-badge.secure {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid var(--green);
    color: var(--green);
}

.session-threat-badge.standby, .analysis-threat-badge.standby {
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid var(--cyan);
    color: var(--cyan);
}

.session-name, .analysis-filename {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.session-card-info, .analysis-card-info {
    display: flex;
    gap: 0.75rem;
    font-size: 0.65rem;
    color: rgba(0, 240, 255, 0.6);
    margin-bottom: 0.5rem;
}

.analysis-unsaved {
    color: var(--yellow);
    font-style: italic;
}

.analysis-session {
    color: var(--green);
}

.session-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.session-tag {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 0.1rem 0.3rem;
    font-size: 0.55rem;
    color: var(--cyan);
}

.session-card-actions, .analysis-card-actions {
    display: flex;
    gap: 0.35rem;
}

.session-action-btn {
    flex: 1;
    padding: 0.35rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    font-family: 'Orbitron', monospace;
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-action-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--cyan);
}

.session-action-btn.primary {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--green);
    color: var(--green);
}

.session-action-btn.primary:hover {
    background: rgba(0, 255, 136, 0.2);
}

.session-action-btn.danger {
    background: rgba(255, 51, 68, 0.1);
    border-color: rgba(255, 51, 68, 0.5);
    color: var(--red);
}

.session-action-btn.danger:hover {
    background: rgba(255, 51, 68, 0.2);
    border-color: var(--red);
}

/* Loading and empty states */
.loading-sessions, .no-sessions, .error-sessions {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(0, 240, 255, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.error-sessions {
    color: var(--red);
}

/* Search results */
.search-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.ioc-result {
    padding: 0.5rem;
    background: rgba(255, 136, 0, 0.1);
    border: 1px solid rgba(255, 136, 0, 0.3);
    margin-bottom: 0.35rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.ioc-result:hover {
    background: rgba(255, 136, 0, 0.2);
    border-color: var(--orange);
}

.ioc-type {
    color: var(--orange);
    font-weight: 600;
}

.ioc-value {
    color: var(--text);
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
}

.ioc-file {
    color: rgba(0, 240, 255, 0.6);
    font-size: 0.6rem;
}

/* Session detail modal content */
.session-detail h3 {
    color: var(--cyan);
    font-family: 'Orbitron', monospace;
    margin-bottom: 0.5rem;
}

.session-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.session-detail-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: rgba(0, 240, 255, 0.6);
    margin-bottom: 1rem;
}

.session-analyses-list {
    max-height: 300px;
    overflow-y: auto;
}

.session-analysis-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-analysis-item:hover {
    background: rgba(0, 240, 255, 0.1);
}

.no-analyses {
    color: rgba(0, 240, 255, 0.5);
    text-align: center;
    padding: 1rem;
    font-size: 0.75rem;
}

/* Save to Session Button - Prominent styling */
.export-btn.save-session-btn {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1));
    border-color: var(--green);
    color: var(--green);
}

.export-btn.save-session-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.2));
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    border-color: var(--green);
}

/* ============================================================
   EXPANDABLE THREAT CARD CHAT SYSTEM
   ============================================================ */

/* Expandable cards base styles */
.ai-threat-card.expandable,
.ai-mitre-card.expandable,
.ai-ioc-item.expandable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ai-threat-card.expandable:hover,
.ai-mitre-card.expandable:hover,
.ai-ioc-item.expandable:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Expand icon */
.card-expand-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: var(--cyan);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.ai-threat-card:hover .card-expand-icon,
.ai-mitre-card:hover .card-expand-icon,
.ai-ioc-item:hover .card-expand-icon {
    opacity: 1;
}

.expanded .card-expand-icon {
    transform: rotate(180deg);
}

/* Investigate button */
.card-investigate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(0, 240, 255, 0.05));
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-investigate-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.1));
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.card-investigate-btn.small {
    padding: 0.35rem 0.5rem;
    font-size: 0.6rem;
    margin-top: 0.5rem;
}

/* Expanded card state */
.ai-threat-card.expanded,
.ai-mitre-card.expanded,
.ai-ioc-item.expanded {
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.ai-threat-card.expanded .card-investigate-btn,
.ai-mitre-card.expanded .card-investigate-btn,
.ai-ioc-item.expanded .card-investigate-btn {
    display: none;
}

/* Card chat container */
.card-chat-container {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

.card-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.card-chat-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    color: var(--cyan);
    letter-spacing: 0.08em;
}

/* Card chat messages */
.card-chat-messages {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.1);
    margin-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--cyan) rgba(0, 0, 0, 0.3);
}

.card-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.card-chat-messages::-webkit-scrollbar-thumb {
    background: var(--cyan);
    border-radius: 2px;
}

.card-chat-welcome {
    text-align: center;
    padding: 1rem;
    color: rgba(0, 240, 255, 0.5);
    font-size: 0.7rem;
    font-style: italic;
}

/* Card chat message bubbles */
.card-chat-message {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    animation: fadeIn 0.2s ease;
}

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

.card-chat-message.user {
    flex-direction: row-reverse;
}

.card-chat-avatar {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid rgba(0, 240, 255, 0.3);
    font-size: 0.7rem;
    color: var(--cyan);
    flex-shrink: 0;
}

.card-chat-message.user .card-chat-avatar {
    background: rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.3);
    color: var(--green);
}

.card-chat-bubble {
    flex: 1;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.2);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text);
}

.card-chat-message.user .card-chat-bubble {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.2);
}

/* Card chat bubble content formatting */
.card-chat-bubble p {
    margin: 0 0 0.5rem 0;
}

.card-chat-bubble p:last-child {
    margin-bottom: 0;
}

.card-chat-bubble code {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.1rem 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--orange);
}

.card-chat-bubble pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    font-size: 0.7rem;
}

.card-chat-bubble ul, .card-chat-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.card-chat-bubble li {
    margin-bottom: 0.25rem;
}

.card-chat-bubble strong {
    color: var(--cyan);
}

/* Card chat typing indicator */
.card-chat-typing {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.2);
    padding: 0.5rem 0.75rem;
}

/* Card chat suggestions */
.card-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.card-suggestion-btn {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    padding: 0.25rem 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-suggestion-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--cyan);
}

/* Card chat input area */
.card-chat-input-area {
    display: flex;
    gap: 0.5rem;
}

.card-chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--text);
    padding: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    resize: none;
    min-height: 2rem;
    max-height: 80px;
}

.card-chat-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.card-chat-input::placeholder {
    color: rgba(0, 240, 255, 0.4);
}

.card-chat-send-btn {
    width: 2.5rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.1));
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-chat-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 240, 255, 0.2));
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.card-chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Card chat error */
.card-chat-error {
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid rgba(255, 51, 68, 0.3);
    color: var(--red);
    padding: 0.5rem;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* MITRE card specific header */
.ai-mitre-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* IOC item specific header */
.ai-ioc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.ai-ioc-item.expandable {
    flex-direction: column;
    align-items: stretch;
}

.ai-ioc-item.expandable .ai-ioc-context {
    margin-top: 0.35rem;
}

/* Badge for cards with existing chat history */
.card-has-chat::after {
    content: '💬';
    position: absolute;
    top: 0.3rem;
    right: 1.5rem;
    font-size: 0.6rem;
    opacity: 0.7;
}

/* ============================================================
   INVESTIGATION NOTES SYSTEM
   ============================================================ */

/* Save Note Button on Chat Messages */
.save-note-btn {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid transparent;
    color: rgba(0, 240, 255, 0.4);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    opacity: 0;
    transition: all 0.2s ease;
}

.chat-message {
    position: relative;
}

.chat-message:hover .save-note-btn {
    opacity: 1;
}

.save-note-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.3);
    color: var(--cyan);
}

.save-note-btn.saved {
    color: var(--green);
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.1);
}

.save-note-btn.small {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
    right: -0.5rem;
}

/* Card chat message save button positioning */
.card-chat-message {
    position: relative;
}

.card-chat-message:hover .save-note-btn {
    opacity: 1;
}

/* Note Save Dropdown Menu */
.note-save-menu {
    background: rgba(10, 15, 25, 0.98);
    border: 1px solid var(--cyan);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 240, 255, 0.2);
    z-index: 10000;
    min-width: 180px;
    font-family: 'JetBrains Mono', monospace;
}

.note-save-menu-header {
    padding: 0.5rem 0.75rem;
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.note-save-menu-items {
    padding: 0.35rem 0;
}

.note-save-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.note-save-menu-item:hover {
    background: rgba(0, 240, 255, 0.1);
    color: var(--cyan);
}

.note-save-menu-item.new-doc {
    color: var(--green);
}

.note-save-menu-item.new-doc:hover {
    background: rgba(0, 255, 136, 0.1);
}

.note-save-menu-divider {
    height: 1px;
    background: rgba(0, 240, 255, 0.2);
    margin: 0.35rem 0;
}

/* Notes Panel Styling */
.notes-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    margin-bottom: 0.5rem;
}

.notes-doc-tab {
    padding: 0.35rem 0.6rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-doc-tab:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: rgba(0, 240, 255, 0.4);
}

.notes-doc-tab.active {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--cyan);
    color: var(--cyan);
}

/* Notes Content Area */
.notes-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    max-height: calc(100vh - 380px);
}

/* Note Card */
.note-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.15);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    transition: all 0.2s ease;
}

.note-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
}

.note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.6rem;
}

.note-timestamp {
    color: rgba(0, 240, 255, 0.6);
    font-family: 'JetBrains Mono', monospace;
}

.note-source {
    background: rgba(0, 240, 255, 0.15);
    padding: 0.1rem 0.35rem;
    color: var(--cyan);
    font-size: 0.55rem;
    letter-spacing: 0.05em;
}

.note-delete-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(255, 51, 68, 0.5);
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    font-size: 0.65rem;
    opacity: 0;
    transition: all 0.2s ease;
}

.note-card:hover .note-delete-btn {
    opacity: 1;
}

.note-delete-btn:hover {
    color: var(--red);
}

/* Note Body */
.note-body {
    display: flex;
    gap: 0.5rem;
}

.note-role {
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    color: var(--cyan);
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.note-role.user {
    color: var(--green);
}

.note-content {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Q&A Pair Notes */
.note-body.qa-pair {
    display: block;
}

.note-body.qa-pair .note-content {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem;
    border-left: 2px solid rgba(0, 240, 255, 0.3);
}

/* Notes Actions */
.notes-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    margin-top: 0.5rem;
}

.notes-action-btn {
    flex: 1;
    padding: 0.5rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-action-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--cyan);
}

.notes-action-btn.delete {
    color: var(--red);
    border-color: rgba(255, 51, 68, 0.3);
    background: rgba(255, 51, 68, 0.1);
}

.notes-action-btn.delete:hover {
    background: rgba(255, 51, 68, 0.2);
    border-color: var(--red);
}


/* ============================================================
   STREAMING LIVE CAPTURE STYLES
   ============================================================ */

/* Live Status Container */
.capture-live-status {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
}

.capture-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.capture-dot {
    width: 10px;
    height: 10px;
    background: var(--green);
    border-radius: 50%;
}

.capture-dot.pulsing {
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px var(--green);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 15px var(--green);
    }
}

.capture-status-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: var(--green);
    letter-spacing: 0.1em;
}

.capture-stats {
    display: flex;
    gap: 2rem;
}

.capture-stat {
    display: flex;
    flex-direction: column;
}

.capture-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--cyan);
}

.capture-stat-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
}

/* Packet Feed */
.capture-feed {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 4px;
    margin: 1rem 0;
    max-height: 200px;
    overflow: hidden;
}

.capture-feed-header {
    background: rgba(0, 240, 255, 0.1);
    padding: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    font-family: 'Orbitron', sans-serif;
}

.capture-feed-list {
    max-height: 160px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.capture-feed-item {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.capture-feed-item:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
}

.capture-feed-item .proto {
    color: var(--cyan);
    min-width: 40px;
}

.capture-feed-item .src {
    color: var(--green);
}

.capture-feed-item .arrow {
    color: rgba(255, 255, 255, 0.4);
}

.capture-feed-item .dst {
    color: var(--yellow);
}

/* Stop button danger style */
.action-btn.danger {
    background: linear-gradient(180deg, rgba(255, 51, 68, 0.3) 0%, rgba(255, 51, 68, 0.1) 100%);
    border-color: rgba(255, 51, 68, 0.5);
    color: var(--red);
}

.action-btn.danger:hover {
    background: linear-gradient(180deg, rgba(255, 51, 68, 0.5) 0%, rgba(255, 51, 68, 0.2) 100%);
    box-shadow: 0 0 20px rgba(255, 51, 68, 0.3);
}

.action-btn.danger:active {
    transform: translateY(1px);
}

/* Capture complete state */
.capture-live-status.complete .capture-dot {
    background: var(--cyan);
    animation: none;
}

.capture-live-status.complete .capture-status-text {
    color: var(--cyan);
}

/* === AI Offline Notification Banner === */
.ai-offline-banner {
    position: fixed;
    top: calc(var(--header-height) + var(--threat-bar-height));
    left: 0;
    right: 0;
    height: 52px;
    background: linear-gradient(180deg,
        rgba(255, 136, 0, 0.2) 0%,
        rgba(255, 136, 0, 0.35) 50%,
        rgba(255, 136, 0, 0.2) 100%
    );
    border-top: 1px solid rgba(255, 136, 0, 0.5);
    border-bottom: 2px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: ai-offline-glow 2s ease-in-out infinite;
    box-shadow:
        0 0 20px rgba(255, 136, 0, 0.3),
        0 0 40px rgba(255, 136, 0, 0.15),
        inset 0 0 30px rgba(255, 136, 0, 0.1);
}

.ai-offline-banner.hidden {
    display: none;
}

@keyframes ai-offline-glow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 136, 0, 0.3),
            0 0 40px rgba(255, 136, 0, 0.15),
            inset 0 0 30px rgba(255, 136, 0, 0.1);
    }
    50% {
        box-shadow:
            0 0 35px rgba(255, 136, 0, 0.5),
            0 0 60px rgba(255, 136, 0, 0.25),
            inset 0 0 40px rgba(255, 136, 0, 0.2);
    }
}

.ai-offline-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-display);
}

.ai-offline-icon {
    color: var(--orange);
    font-size: 24px;
    animation: ai-icon-pulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.8);
}

@keyframes ai-icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 136, 0, 0.8);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(255, 136, 0, 1);
    }
}

.ai-offline-text {
    color: var(--orange);
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.ai-offline-text strong {
    color: #ffcc44;
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 0 15px rgba(255, 170, 68, 0.6);
}

.ai-offline-action {
    color: var(--cyan);
    font-size: 12px;
    font-family: var(--font-mono);
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 136, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Adjust main container when AI offline banner is visible (pushes content down) */
body.ai-offline .main-container {
    top: calc(var(--header-height) + var(--threat-bar-height) + 52px);
}

/* Also adjust sidebar position when AI offline */
body.ai-offline .sidebar {
    top: calc(var(--header-height) + var(--threat-bar-height) + 52px);
}

/* === API Button Group === */
.api-btn-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.api-btn-group .action-btn {
    flex: 1;
}

.action-btn.danger {
    background: linear-gradient(180deg, rgba(255, 51, 68, 0.3) 0%, rgba(255, 51, 68, 0.1) 100%);
    border-color: var(--red);
    color: var(--red);
}

.action-btn.danger:hover {
    background: linear-gradient(180deg, rgba(255, 51, 68, 0.5) 0%, rgba(255, 51, 68, 0.2) 100%);
    box-shadow: 0 0 15px rgba(255, 51, 68, 0.3);
}

/* ============================================================
   GLOBAL JARVIS CHAT BUTTON
   ============================================================ */

.jarvis-float-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 255, 0.15));
    border: 2px solid var(--cyan);
    border-radius: 50%;
    color: var(--cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 20px rgba(0, 240, 255, 0.3),
        0 0 40px rgba(0, 240, 255, 0.2),
        inset 0 0 20px rgba(0, 240, 255, 0.1);
}

.jarvis-float-btn:hover {
    transform: scale(1.1);
    border-color: var(--magenta);
    box-shadow:
        0 6px 30px rgba(255, 0, 255, 0.4),
        0 0 60px rgba(255, 0, 255, 0.3),
        inset 0 0 30px rgba(255, 0, 255, 0.15);
}

.jarvis-float-btn:active {
    transform: scale(0.95);
}

.jarvis-icon {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 8px var(--cyan-glow));
}

/* HUD Icon Image */
.jarvis-float-btn .hud-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.jarvis-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-deep);
    box-shadow: 0 0 10px var(--red-glow);
}

/* Pulsing animation ring */
.jarvis-pulse {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    animation: jarvis-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes jarvis-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Hide on mobile to avoid overlap */
@media (max-width: 768px) {
    .jarvis-float-btn {
        bottom: 1rem;
        right: 1rem;
        width: 50px;
        height: 50px;
    }

    .jarvis-icon {
        width: 24px;
        height: 24px;
    }
}

/* When chat popout is open, change button appearance */
.jarvis-float-btn.active {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 240, 255, 0.2));
    border-color: var(--magenta);
    box-shadow:
        0 4px 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(255, 0, 255, 0.3);
}

.jarvis-float-btn.active .jarvis-icon {
    filter: drop-shadow(0 0 8px var(--magenta));
}

/* ============================================================
   Chat Mode Selector & Context Filters
   ============================================================ */

/* Mode Bar - Container for mode selector and filter toggle */
.chat-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
}

/* Mode Selector Buttons */
.chat-mode-selector {
    display: flex;
    gap: 0.25rem;
}

.chat-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-mode-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--cyan-dim);
    color: var(--cyan);
}

.chat-mode-btn.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.chat-mode-btn .mode-icon {
    font-size: 0.75rem;
}

/* Special styling for different modes when active */
.chat-mode-btn[data-mode="analysis"].active {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 10px var(--green-glow);
}

.chat-mode-btn[data-mode="environment"].active {
    border-color: var(--yellow);
    color: var(--yellow);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.chat-mode-btn[data-mode="general"].active {
    border-color: var(--magenta);
    color: var(--magenta);
    box-shadow: 0 0 10px var(--magenta-dim);
}

/* Filter Toggle Button */
.chat-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--cyan-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.chat-filters-toggle:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--cyan-dim);
    color: var(--cyan);
}

.chat-filters-toggle.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--orange);
    color: #000;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Filters Panel */
.chat-filters-panel {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 300px;
}

.chat-filters-panel.collapsed {
    max-height: 0;
    padding: 0 1rem;
    border-bottom: none;
}

.filter-section {
    margin-bottom: 0.75rem;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan-dim);
    margin-bottom: 0.4rem;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.filter-option-btn {
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--cyan-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-option-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--cyan-dim);
}

.filter-option-btn.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

/* IP Filter Input Row */
.filter-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-ip-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.filter-ip-input::placeholder {
    color: var(--cyan-dim);
    opacity: 0.5;
}

.filter-ip-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.filter-apply-btn,
.filter-clear-btn {
    padding: 0.35rem 0.6rem;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-apply-btn {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid var(--green);
    color: var(--green);
}

.filter-apply-btn:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 10px var(--green-glow);
}

.filter-clear-btn {
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid var(--red);
    color: var(--red);
}

.filter-clear-btn:hover {
    background: rgba(255, 51, 68, 0.2);
    box-shadow: 0 0 10px var(--red-glow);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-mode-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .chat-mode-selector {
        flex-wrap: wrap;
    }

    .chat-mode-btn {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
    }

    .filter-options {
        gap: 0.25rem;
    }

    .filter-input-row {
        flex-wrap: wrap;
    }

    .filter-ip-input {
        width: 100%;
    }
}

/* ============================================================
   MONITORING PANEL
   ============================================================ */

.monitoring-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
}

.monitoring-overlay.visible {
    display: block;
}

.monitoring-panel {
    position: fixed;
    top: 0;
    right: -550px;
    width: 550px;
    height: 100vh;
    background: var(--bg-panel);
    border-left: 2px solid var(--cyan);
    z-index: 999;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -5px 0 30px rgba(0, 240, 255, 0.2);
}

.monitoring-panel.visible {
    right: 0;
}

.monitoring-panel-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent);
    position: sticky;
    top: 0;
    z-index: 10;
}

.monitoring-panel-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: 0.05em;
}

.monitoring-close-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--cyan);
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitoring-close-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(255, 51, 68, 0.1);
}

.monitoring-panel-body {
    padding: 1rem 1.5rem;
}

.monitoring-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.monitoring-section-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--cyan);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.08em;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px var(--red-glow);
}

.status-indicator.active {
    background: var(--green);
    box-shadow: 0 0 10px var(--green-glow);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.monitoring-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.stat-label {
    color: var(--cyan-dim);
}

.stat-value {
    color: var(--cyan);
    font-weight: 600;
}

.monitoring-controls {
    display: flex;
    gap: 0.75rem;
}

.monitoring-controls .action-btn.compact {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
}

.monitoring-controls .action-btn.danger {
    border-color: var(--red);
    color: var(--red);
}

.monitoring-controls .action-btn.danger:hover {
    background: rgba(255, 51, 68, 0.15);
    box-shadow: 0 0 15px var(--red-glow);
}

/* Cost Summary */
.cost-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.cost-period {
    text-align: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.cost-period-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    color: var(--cyan-dim);
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.cost-period-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green);
    margin-bottom: 0.25rem;
}

.cost-period-detail {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--cyan-dim);
}

/* Playbooks */
.playbook-input-group {
    margin-bottom: 1rem;
}

.playbook-target-input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-radius: 4px;
}

.playbook-target-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow);
}

.playbook-target-input::placeholder {
    color: var(--cyan-dim);
    opacity: 0.5;
}

.playbook-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.playbook-btn {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(255, 0, 255, 0.04));
    border: 1px solid var(--border);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.playbook-btn:hover {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 255, 0.08));
    box-shadow: 0 0 20px var(--cyan-glow);
    transform: translateY(-2px);
}

.playbook-btn:active {
    transform: translateY(0);
}

.playbook-btn.running {
    border-color: var(--yellow);
    color: var(--yellow);
    pointer-events: none;
}

.playbook-icon {
    font-size: 1.5rem;
}

/* Events List */
.events-list {
    max-height: 300px;
    overflow-y: auto;
}

.events-empty {
    text-align: center;
    padding: 2rem;
    color: var(--cyan-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.event-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: 3px solid var(--cyan);
}

.event-item.critical {
    border-left-color: var(--red);
}

.event-item.routine {
    border-left-color: var(--yellow);
}

.event-item.processed {
    opacity: 0.6;
}

.event-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.event-type {
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--cyan);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.event-time {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--cyan-dim);
}

.event-description {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan-dim);
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .monitoring-panel {
        width: 100%;
        right: -100%;
    }

    .cost-summary {
        grid-template-columns: 1fr;
    }

    .playbook-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   JARVIS TACTICAL COMMAND HUD
   ============================================================ */

.jarvis-hud-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 998;
}

.jarvis-hud-overlay.active {
    display: block;
}

.jarvis-hud {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.98), rgba(0, 10, 20, 0.98));
    border: 2px solid var(--cyan);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.4), inset 0 0 60px rgba(0, 240, 255, 0.05);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none;
    flex-direction: column;
    border-radius: 8px;
}

.jarvis-hud.active {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* HUD Header */
.jarvis-hud-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jarvis-hud-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jarvis-icon {
    font-size: 1.5rem;
    animation: pulse 2s ease-in-out infinite;
}

.jarvis-hud-title h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.jarvis-status {
    padding: 0.25rem 0.75rem;
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid var(--green);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--green);
    letter-spacing: 0.1em;
}

.close-hud-btn {
    background: none;
    border: none;
    color: var(--cyan);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-hud-btn:hover {
    color: var(--red);
    transform: scale(1.2);
}

/* Resource Selection Bar */
.resource-selection-bar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.resource-selection-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--cyan-dim);
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
}

.resource-toggles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.resource-toggle {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.resource-toggle .resource-icon {
    font-size: 1.5rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.resource-toggle .resource-label {
    letter-spacing: 0.1em;
}

.resource-toggle .resource-check {
    font-size: 0.9rem;
}

.resource-toggle:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.resource-toggle.active {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 255, 0.05));
    color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.resource-toggle.active .resource-icon {
    opacity: 1;
}

.resource-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.active-resources {
    color: var(--cyan);
    letter-spacing: 0.05em;
}

.cost-estimate {
    color: var(--green);
    letter-spacing: 0.05em;
}

.cost-estimate.warning {
    color: var(--yellow);
}

.cost-estimate.expensive {
    color: var(--red);
}

/* Operational Mode Bar */
.operational-mode-bar {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.mode-toggle-group {
    display: flex;
    gap: 1rem;
}

.mode-toggle {
    padding: 0.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.mode-toggle .mode-indicator {
    font-size: 1rem;
}

.mode-toggle:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.mode-toggle.active {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 255, 0.05));
    color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.mode-toggle.active[data-mode="weapons_free"] {
    border-color: var(--red);
    background: linear-gradient(135deg, rgba(255, 51, 68, 0.2), rgba(255, 136, 0, 0.05));
    color: var(--red);
    box-shadow: 0 0 15px rgba(255, 51, 68, 0.3);
}

/* HUD Body */
.jarvis-hud-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
    overflow: hidden;
}

/* Tactical Panel (Left) */
.tactical-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
}

.tactical-panel-header {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tactical-panel-header .panel-icon {
    font-size: 1rem;
}

.tactical-panel-header .panel-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--cyan);
    letter-spacing: 0.15em;
}

.tactical-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
}

.jarvis-welcome-message {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 4px;
}

.welcome-icon {
    font-size: 2rem;
    color: var(--cyan);
}

.welcome-text h3 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--cyan);
}

.welcome-text p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.tactical-message {
    margin-bottom: 1rem;
    animation: slideIn 0.3s ease;
}

.tactical-message.user {
    display: flex;
    justify-content: flex-end;
}

.tactical-message.assistant {
    display: flex;
    justify-content: flex-start;
}

.message-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
}

.message-bubble.user {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 255, 0.1));
    border: 1px solid var(--cyan);
    color: var(--cyan);
}

.message-bubble.assistant {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.message-citations {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: var(--cyan-dim);
}

.citation-item {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 3px;
    margin-bottom: 0.25rem;
}

.message-cost {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--green);
}

.tactical-input-area {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
}

.tactical-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    border-radius: 4px;
}

.tactical-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.tactical-input::placeholder {
    color: rgba(0, 240, 255, 0.4);
}

.tactical-send-btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(255, 0, 255, 0.1));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.tactical-send-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.5), rgba(255, 0, 255, 0.2));
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
}

.tactical-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Resource Index Panel (Right) */
.resource-index-panel {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.3);
}

.resource-index-header {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resource-index-header .panel-icon {
    font-size: 1rem;
}

.resource-index-header .panel-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--cyan);
    letter-spacing: 0.15em;
}

.resource-index-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.resource-category {
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.resource-category.inactive {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.5;
}

.resource-category-header {
    padding: 0.75rem;
    background: rgba(0, 240, 255, 0.05);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-icon {
    font-size: 1rem;
}

.category-title {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.category-status {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid var(--green);
    border-radius: 3px;
    color: var(--green);
}

.category-status.disabled {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
}

.resource-items {
    padding: 0.75rem;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.resource-item.disabled {
    opacity: 0.5;
    color: rgba(255, 255, 255, 0.5);
}

.resource-item.cost-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.item-icon {
    color: var(--green);
}

.item-name {
    flex: 1;
}

.item-count,
.item-status {
    color: var(--cyan-dim);
    font-size: 0.7rem;
}

.resource-category.cost-summary {
    border-color: rgba(0, 255, 136, 0.3);
}

.cost-breakdown {
    padding: 0.75rem;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cost-item:last-child {
    border-bottom: none;
}

.cost-label {
    color: rgba(255, 255, 255, 0.7);
}

.cost-value {
    color: var(--green);
    font-weight: 600;
}

/* Operation Log */
.operation-log {
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.4);
    max-height: 120px;
    display: flex;
    flex-direction: column;
}

.operation-log-header {
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.log-icon {
    font-size: 0.9rem;
}

.log-title {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.log-clear-btn {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 51, 68, 0.2);
    border: 1px solid var(--red);
    color: var(--red);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 3px;
}

.log-clear-btn:hover {
    background: rgba(255, 51, 68, 0.3);
}

.operation-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem;
}

.log-entry {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
    display: flex;
    gap: 0.5rem;
}

.log-timestamp {
    color: var(--cyan-dim);
}

.log-message {
    flex: 1;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .jarvis-hud {
        width: 95vw;
        height: 90vh;
    }

    .jarvis-hud-body {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 768px) {
    .jarvis-hud-body {
        grid-template-columns: 1fr;
    }

    .resource-index-panel {
        display: none;
    }

    .resource-toggles {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   PROFILE SELECTOR BAR
   ============================================================ */

.profile-selector-bar {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-current {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-icon {
    font-size: 1rem;
}

.profile-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan-dim);
    letter-spacing: 0.1em;
}

.profile-dropdown {
    flex: 1;
    max-width: 300px;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-dropdown:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.profile-dropdown option {
    background: rgba(0, 20, 40, 1);
    color: var(--cyan);
    padding: 0.5rem;
}

.profile-dropdown optgroup {
    background: rgba(0, 10, 20, 1);
    color: var(--cyan-dim);
    font-weight: 600;
}

.profile-action-btn {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 255, 0.05));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-action-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(255, 0, 255, 0.1));
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
}

/* ============================================================
   PROFILE BUILDER MODAL
   ============================================================ */

.profile-builder-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

.profile-builder-overlay.active {
    display: block;
}

.profile-builder-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: 90vw;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.98), rgba(0, 10, 20, 0.98));
    border: 2px solid var(--cyan);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.5);
    border-radius: 8px;
    z-index: 1001;
    flex-direction: column;
}

.profile-builder-modal.active {
    display: flex;
}

.profile-builder-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-builder-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.close-modal-btn {
    background: none;
    border: none;
    color: var(--cyan);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    color: var(--red);
    transform: scale(1.2);
}

.profile-builder-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.profile-name-section {
    margin-bottom: 1.5rem;
}

.profile-name-section label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan-dim);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.profile-name-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 1rem;
    border-radius: 4px;
}

.profile-name-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.profile-resource-selection {
    margin-bottom: 1.5rem;
}

.selection-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan-dim);
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.builder-resource-toggles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.builder-resource-toggle {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.builder-resource-toggle .resource-icon {
    font-size: 1.5rem;
    opacity: 0.5;
}

.builder-resource-toggle .resource-check {
    font-size: 1rem;
}

.builder-resource-toggle:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.05);
}

.builder-resource-toggle.active {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 255, 0.05));
    color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.builder-resource-toggle.active .resource-icon {
    opacity: 1;
}

.profile-preview-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
}

.preview-header {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.preview-content {
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.preview-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cyan-dim);
}

.preview-category {
    margin-bottom: 1rem;
}

.preview-category-title {
    color: var(--cyan);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-category-items {
    padding-left: 1.5rem;
}

.preview-category-item {
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.7);
}

.profile-cost-estimate {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cost-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan-dim);
}

.cost-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green);
    font-weight: 600;
}

.profile-builder-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    gap: 1rem;
}

.profile-save-btn,
.profile-test-btn {
    flex: 1;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(255, 0, 255, 0.1));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.profile-save-btn:hover,
.profile-test-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.5), rgba(255, 0, 255, 0.2));
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
}

.profile-cancel-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 51, 68, 0.2);
    border: 1px solid var(--red);
    color: var(--red);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.profile-cancel-btn:hover {
    background: rgba(255, 51, 68, 0.3);
}

/* ============================================================
   WORKFLOW GUIDE MODAL
   ============================================================ */

.workflow-guide-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

.workflow-guide-overlay.active {
    display: block;
}

.workflow-guide-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 90vw;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.98), rgba(0, 10, 20, 0.98));
    border: 2px solid var(--cyan);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.5);
    border-radius: 8px;
    z-index: 1001;
    flex-direction: column;
}

.workflow-guide-modal.active {
    display: flex;
}

.workflow-guide-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workflow-guide-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.workflow-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.workflow-card {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: 4px;
}

.workflow-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.workflow-icon {
    font-size: 1.5rem;
}

.workflow-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.workflow-profile-badge {
    padding: 0.25rem 0.75rem;
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid var(--cyan);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
}

.workflow-steps {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.workflow-step {
    padding: 0.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.workflow-step::before {
    content: "→";
    color: var(--cyan);
}

.workflow-load-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(255, 0, 255, 0.1));
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.workflow-load-btn:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.5), rgba(255, 0, 255, 0.2));
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
}