/* theme-noir.css - Space Age Glassmorphism */
:root {
    --primary-dark: #050b18;
    --teal: #008080;
    --pink: #ff007f;
    --glass-border: rgba(0, 128, 128, 0.4);

    /* Metric Colors */
    --tf-color: #008080;   /* Neon Teal */
    --aip-color: #48cae4;  /* Electric Blue */
    --ei-color: #ff007f;   /* Cyber Pink */
    --er-color: #ae00ff;   /* Neon Purple */
}

body { background: var(--primary-dark); color: white; }
header { background: #000b1e; border-bottom: 1px solid #1e293b; }

#theme-selector { background: #0a1221 !important; color: var(--teal) !important; border: 1px solid var(--teal) !important; padding: 5px; border-radius: 12px; }

#ui-header-title { color: var(--teal) !important; font-weight: 900; }
#ui-user-info { color: white; opacity: 0.8; }
#user-grade { color: var(--pink) !important; }
#ui-logout-btn { background: none; border: 1px solid var(--pink); color: var(--pink); padding: 5px 12px; border-radius: 20px; font-weight: 900; font-size: 0.7rem; }

#nav-pane { background: #0a1221; border-right: 1px solid #1e293b; }
.lang-trigger-btn, .back-btn { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--glass-border) !important; color: var(--teal) !important; border-radius: 12px; font-weight: 700; }
.nav-path li { background: #1a2235; border: 1px solid #334155; border-radius: 10px; color: #94a3b8; padding: 12px 15px; margin-bottom: 25px; position: relative; }
.nav-path li.active { border-color: var(--teal); background: rgba(0, 128, 128, 0.1); color: white; }
.nav-path li:not(:last-child)::after { content: '▼'; position: absolute; bottom: -20px; left: 20px; font-size: 10px; color: var(--teal); opacity: 0.6; }

/* NEON GLASS DATA-SLABS */
.cat-level, .cat-series, .cat-course, .chunky-card { 
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    color: var(--teal);
}

.cat-level:nth-child(1), .cat-series:nth-child(4n+1) { border-left: 4px solid var(--teal) !important; }
.cat-level:nth-child(2), .cat-series:nth-child(4n+2) { border-left: 4px solid #48cae4 !important; }
.cat-level:nth-child(3), .cat-series:nth-child(4n+3) { border-left: 4px solid #ade8f4 !important; }
.cat-level:nth-child(4), .cat-series:nth-child(4n+4) { border-left: 4px solid #f0f !important; }
.cat-level:nth-child(5) { border-left: 4px solid var(--er-color) !important; }

.cat-level:hover, .cat-series:hover, .cat-course:hover { transform: translateY(-10px) scale(1.05) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 0 40px rgba(0, 128, 128, 0.4); z-index: 10; }

.cat-level .spine-mid { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-weight: 900; font-size: 1.8rem; color: var(--teal); }
.spine-logo img { width: 45px; height: 45px; filter: invert(1) brightness(2); }

#history-loader { color: var(--teal); border-bottom-color: rgba(0, 128, 128, 0.1); }
.session-break::before, .session-break::after { border-bottom-color: white !important; }
#chat-log { background: #000000; }
.fifi-msg { background: #262629; color: #ffffff; border-radius: 20px; border-bottom-left-radius: 4px; }
.user-msg { background: var(--pink); color: white; border-radius: 20px; border-bottom-right-radius: 4px; }
#fifi-hub { background: var(--pink); border-radius: 30px; }
#fifi-hub.expanded { background: #121212; border: 1px solid #333; }
#fifi-header { background: #1a1a1a; border-bottom: 1px solid #333; }
#ui-fifi-close { background: #333; color: white; border-radius: 20px; }
#ui-fifi-mode-btn { background: var(--pink); color: white; border-radius: 20px; }
#ui-fifi-talk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-weight: 900; background: var(--pink); z-index: 20; border-radius: 30px; }
#speech-overlay { background: #000; }
#fifi-mouth-img { filter: drop-shadow(0px 0px 20px var(--pink)); }
.pulse-ring { border-color: var(--pink); }
#ui-fifi-tap-btn { background: var(--pink); color: white; border-radius: 30px; }
#fifi-footer { background: #1a1a1a; padding: 20px; }
#chatInput { background: #222; color: white; border-radius: 20px; border: none; padding: 12px; width: 100%; }

/* Metrics Noir Restoration */
#metrics-tab { background: var(--teal); border-radius: 10px 0 0 10px; color: white; }
#metrics-tab.open { border-radius: 20px 0 0 20px; }
#ui-metrics-close { margin-top: auto; font-size: 0.7rem; color: white; opacity: 0.7; text-align: center; }

/* REDESIGNED LANGUAGE MENU */
#lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 12px;
    width: 280px; /* Wider for 14 items */
    background: rgba(5, 11, 24, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--teal);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(0, 128, 128, 0.3);
}
#lang-grid span {
    color: var(--teal);
    padding: 8px;
    border-radius: 8px;
    transition: 0.3s;
    font-size: 0.8rem;
    font-weight: 700;
}
#lang-grid span:hover {
    background: var(--teal);
    color: white;
    box-shadow: 0 0 10px var(--teal);
}

.metric-tooltip { background: rgba(5, 11, 24, 0.95); backdrop-filter: blur(10px); border-color: var(--teal); color: white; }

/* --- FIFI GENERAL AI OVERRIDE --- */
/* This ensures that when source is 'general', the bubble transforms */
.msg.fifi-msg.general-ai {
    background: rgba(240, 173, 78, 0.2) !important; /* Amber/Gold Transparent */
    border: 2px solid #f0ad4e !important;           /* Solid Amber Border */
    color: #f0ad4e !important;                      /* Amber Text */
    box-shadow: 0 0 15px rgba(240, 173, 78, 0.4) !important; /* Gold Glow */
    backdrop-filter: blur(10px);
}