/* ══════════════════════════════════════════════════
   OBSERVIUM — CSS
   Developer: Fabio Guerrera, CEO Hesh
   ══════════════════════════════════════════════════ */

:root {
    --bg: #050a15;
    --bg2: #080c18;
    --bg3: #0a1225;
    --bg4: #0c1a30;
    --border: #162a44;
    --border2: #1a3050;
    --text: #b8c8dd;
    --text2: #6a8aaa;
    --text3: #3a5a7b;
    --text4: #2a4a65;
    --cyan: #00f0ff;
    --blue: #0055ff;
    --purple: #a78bfa;
    --red: #ff2d55;
    --orange: #f0a030;
    --green: #00ff6a;
    --yellow: #f0b429;
    --fo: 'Orbitron', sans-serif;
    --fr: 'Rajdhani', sans-serif;
    --fm: 'Share Tech Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--fr); overflow: hidden; height: 100vh; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg3); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
input, textarea { font-family: var(--fm); }
button { font-family: var(--fr); }

/* ── ANIMATIONS ── */
@keyframes pg { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes fu { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes si { from{transform:translateX(16px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes gf { 0%{background-position:0 0} 100%{background-position:50px 50px} }
@keyframes br { 0%,100%{box-shadow:0 0 15px #00f0ff22} 50%{box-shadow:0 0 35px #00f0ff44} }
@keyframes ns { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes ig { 0%,100%{filter:drop-shadow(0 0 8px #00f0ff)} 50%{filter:drop-shadow(0 0 25px #00f0ff)} }
@keyframes bl { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
@keyframes type { from{width:0} to{width:100%} }

/* ══════════════════════════════════════
   BOOT SCREEN
   ══════════════════════════════════════ */
.boot-screen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9999; }
.boot-grid { position:absolute; inset:0; background-image:linear-gradient(#00f0ff06 1px,transparent 1px),linear-gradient(90deg,#00f0ff06 1px,transparent 1px); background-size:50px 50px; animation:gf 4s linear infinite; }
.boot-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,#00f0ff08,transparent 60%); }
.boot-center { position:relative; text-align:center; z-index:1; }
.boot-eye { animation:ig 2.5s infinite; margin-bottom:24px; }
.boot-title { font-family:var(--fo); font-size:30px; font-weight:800; color:var(--cyan); letter-spacing:10px; text-shadow:0 0 30px #00f0ff44; }
.boot-sub { font-size:10px; color:var(--text3); letter-spacing:5px; margin-top:4px; font-family:var(--fm); margin-bottom:32px; }
.boot-terminal { width:500px; max-width:90vw; height:200px; overflow-y:auto; padding:12px; background:var(--bg2); border:1px solid #0f2035; border-radius:8px; font-family:var(--fm); font-size:10.5px; text-align:left; margin-bottom:12px; }
.boot-terminal .line { margin-bottom:2px; animation:bl 0.1s; }
.boot-terminal .online { color:var(--green); }
.boot-terminal .ok { color:var(--cyan); }
.boot-terminal .info { color:var(--text3); }
.boot-progress { height:3px; background:#0f1a2d; border-radius:2px; overflow:hidden; width:500px; max-width:90vw; margin:0 auto; }
.boot-bar { height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--blue)); border-radius:2px; transition:width 0.2s; box-shadow:0 0 10px #00f0ff44; }
.boot-pct { font-family:var(--fm); font-size:10px; color:var(--text3); display:block; margin-top:6px; }
.boot-footer { position:absolute; bottom:20px; left:0; right:0; text-align:center; font-size:9px; color:var(--border); letter-spacing:2px; font-family:var(--fm); }

/* ══════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════ */
.login-screen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.login-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,#00f0ff05,transparent 50%); }
.login-grid-bg { position:absolute; inset:0; background-image:linear-gradient(#00f0ff04 1px,transparent 1px),linear-gradient(90deg,#00f0ff04 1px,transparent 1px); background-size:60px 60px; }
.login-card { width:430px; padding:40px; background:#0a1225ee; border:1px solid var(--border2); border-radius:20px; position:relative; animation:fu 0.4s; z-index:1; }
.login-accent { position:absolute; top:-1px; left:60px; right:60px; height:2px; background:linear-gradient(90deg,transparent,#00f0ff88,transparent); }
.login-header { text-align:center; margin-bottom:28px; }
.login-header h1 { font-family:var(--fo); font-size:22px; font-weight:700; color:var(--cyan); letter-spacing:6px; margin-top:8px; }
.login-header p { font-size:9px; color:var(--text3); letter-spacing:4px; font-family:var(--fm); margin-top:3px; }
.login-tabs { display:flex; margin-bottom:22px; background:var(--bg); border-radius:10px; padding:3px; border:1px solid var(--border2); }
.tab-btn { flex:1; padding:10px 0; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text3); font-weight:600; font-size:12px; cursor:pointer; letter-spacing:2px; transition:all 0.3s; }
.tab-btn.active { background:linear-gradient(135deg,#00f0ff15,#0055ff15); border-color:#00f0ff33; color:var(--cyan); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.field { margin-bottom:14px; }
.field label { font-size:9px; color:var(--text3); letter-spacing:1.5px; font-family:var(--fm); display:block; margin-bottom:5px; }
.field input { width:100%; padding:12px 16px; background:#060b18; border:1px solid var(--border2); border-radius:10px; color:#d0dae8; font-size:13px; outline:none; transition:border 0.3s; }
.field input:focus { border-color:#00f0ff55; }
.field input.token-input { color:var(--yellow); letter-spacing:1px; }
.field-hint { font-size:8px; color:var(--text4); font-family:var(--fm); display:block; margin-top:4px; }
.msg-error { margin-top:14px; padding:10px 12px; background:#ff2d5512; border:1px solid #ff2d5533; border-radius:8px; color:#ff6b8a; font-size:11px; font-family:var(--fm); }
.msg-ok { margin-top:14px; padding:10px 12px; background:#10b98112; border:1px solid #10b98133; border-radius:8px; color:#34d399; font-size:11px; font-family:var(--fm); }
.submit-btn { width:100%; margin-top:18px; padding:14px; background:linear-gradient(135deg,#00e0f0,var(--blue)); border:none; border-radius:10px; color:var(--bg); font-family:var(--fo); font-size:12px; font-weight:700; cursor:pointer; letter-spacing:3px; box-shadow:0 5px 20px #00f0ff30; transition:opacity 0.3s; }
.submit-btn:disabled { opacity:0.5; cursor:wait; }
.login-footer { text-align:center; margin-top:20px; font-size:8px; color:var(--border); font-family:var(--fm); }

/* ══════════════════════════════════════
   DASHBOARD LAYOUT
   ══════════════════════════════════════ */
.app { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.header { height:50px; background:var(--bg3); border-bottom:1px solid #162a4440; display:flex; align-items:center; padding:0 14px; gap:10px; flex-shrink:0; z-index:10; }
.sidebar-toggle { background:none; border:none; cursor:pointer; color:var(--text2); font-size:16px; padding:4px; }
.header-eye { filter:drop-shadow(0 0 6px #00f0ff33); }
.header-title { font-family:var(--fo); font-size:14px; font-weight:700; color:var(--cyan); letter-spacing:5px; }
.header-feeds { display:flex; gap:3px; margin-left:6px; }
.feed-badge { font-size:6.5px; padding:1.5px 5px; background:#10b98108; border:1px solid #10b98112; border-radius:3px; color:#2aa06a; font-family:var(--fm); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.role-badge { font-size:8px; padding:3px 8px; border-radius:4px; font-family:var(--fm); font-weight:600; letter-spacing:1px; }
.role-badge.admin { background:#f0b42910; border:1px solid #f0b42928; color:var(--yellow); }
.role-badge.client { background:#00f0ff0a; border:1px solid #00f0ff20; color:#00dce8; }
.header-email { font-size:9px; color:var(--text2); font-family:var(--fm); }
.header-exp { font-size:8px; color:var(--text4); font-family:var(--fm); }
.logout-btn { background:#ff2d5508; border:1px solid #ff2d5520; border-radius:6px; padding:5px 10px; cursor:pointer; color:#ff6b8a; font-size:9px; font-family:var(--fm); }

/* TICKER */
.ticker { overflow:hidden; background:var(--bg2); border-bottom:1px solid #162a4420; padding:6px 0; flex-shrink:0; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track { display:flex; gap:45px; white-space:nowrap; width:max-content; animation:ns 56s linear infinite; }
.ticker-item { font-size:10px; color:var(--text2); font-family:var(--fm); display:inline-flex; align-items:center; gap:6px; }
.ticker-sev { font-size:8px; font-weight:700; }
.ticker-sev.crit { color:var(--red); }
.ticker-sev.high { color:var(--orange); }

/* BODY */
.body-wrap { flex:1; display:flex; overflow:hidden; }

/* SIDEBAR */
.sidebar { width:250px; background:#090f20; border-right:1px solid #162a4430; display:flex; flex-direction:column; flex-shrink:0; transition:width 0.25s; overflow:hidden; }
.sidebar.collapsed { width:0; border:none; }
.sidebar-scroll { padding:14px 10px; overflow-y:auto; flex:1; }
.nav-section { font-size:7px; color:var(--text4); letter-spacing:3px; font-family:var(--fm); padding:12px 4px 6px; }
.nav-section:first-child { padding-top:4px; }
.nav-btn { width:100%; padding:8px 10px; margin-bottom:1px; background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; color:var(--text2); transition:all 0.2s; text-align:left; }
.nav-btn:hover { background:#0a162844; }
.nav-btn.active { background:#00f0ff08; border-color:#00f0ff20; }
.nav-btn.active[data-view="chat"] { color:#00e0f0; }
.nav-btn .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* Category buttons */
.cat-btn { font-size:11.5px; font-weight:700; padding:10px 10px; margin-top:4px; margin-bottom:0; border:1px solid #162a4430; background:#0a162822; border-radius:8px; letter-spacing:0.3px; }
.cat-btn:hover { background:#0d1a3066; border-color:#162a4460; }
.cat-btn.expanded { background:#0d1a3044; border-color:#162a4450; }
.cat-arrow { font-size:9px; color:var(--text3); transition:transform 0.2s; margin-left:auto; }
.cat-btn.expanded .cat-arrow { transform:rotate(180deg); }
.cat-sub { padding-left:8px; border-left:1px solid #162a4425; margin-left:12px; margin-bottom:4px; }
.nav-btn.sub { font-size:10px; font-weight:500; padding:6px 8px; color:var(--text3); }
.nav-btn.sub:hover { color:var(--text); }
.nav-btn.sub.active { color:#00dce8; background:#00f0ff08; border-color:#00f0ff15; }
.nav-icon { width:32px; height:32px; border-radius:8px; background:#00f0ff12; border:1.5px solid #00f0ff25; display:flex; align-items:center; justify-content:center; }
.ai-icon { animation:br 3s infinite; }
.nav-text { text-align:left; }
.nav-text strong { display:block; font-size:12px; font-family:var(--fo); letter-spacing:1px; color:#00e0f0; }
.nav-text small { font-size:8px; color:var(--text3); font-family:var(--fm); }
.sidebar-footer { padding:10px; border-top:1px solid #162a4420; }
.threat-meter { padding:12px 14px; background:var(--bg2); border-radius:10px; border:1px solid #162a4433; }
.tm-header { display:flex; justify-content:space-between; margin-bottom:6px; font-size:8px; font-family:var(--fm); color:var(--text3); letter-spacing:2px; }
.tm-label { font-family:var(--fo); font-size:10px; font-weight:700; }
.tm-bar { display:flex; gap:2px; height:4px; }
.tm-seg { flex:1; border-radius:2px; opacity:0.3; }
.tm-seg.active, .tm-seg.active ~ .tm-seg { opacity:1; }
.tm-seg:nth-child(-n+4) { opacity:1; }
.tm-seg:nth-child(5) { opacity:0.15; }
.sidebar-feeds { font-size:6px; color:#1a5a4b; font-family:var(--fm); text-align:center; margin-top:8px; line-height:1.6; }
.sidebar-brand { text-align:center; font-size:7px; color:var(--border); font-family:var(--fm); margin-top:8px; }

/* ══════════════════════════════════════
   MAIN / VIEWS
   ══════════════════════════════════════ */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#070c1a; }
.view { display:none; flex-direction:column; height:100%; }
.view.active { display:flex; }
.view-title { font-family:var(--fo); font-size:16px; font-weight:700; color:#e0e8ff; letter-spacing:2px; padding:22px; }

/* CHAT */
.chat-header { padding:10px 18px; background:var(--bg3); border-bottom:1px solid #162a4433; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.chat-avatar { width:34px; height:34px; border-radius:50%; background:#00f0ff12; border:2px solid #00f0ff33; display:flex; align-items:center; justify-content:center; }
.chat-avatar.pulse { animation:br 3s infinite; }
.chat-info strong { display:block; font-size:13px; font-family:var(--fo); color:#e0e8ff; letter-spacing:3px; }
.chat-info small { font-size:8px; color:var(--text3); font-family:var(--fm); }
.chat-status { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:8px; color:var(--green); font-family:var(--fm); }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px #00ff6a55; animation:pg 2s infinite; }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.chat-welcome { text-align:center; padding:40px 16px; animation:fu 0.4s; }
.welcome-eye { margin-bottom:16px; }
.chat-welcome h3 { font-size:16px; color:var(--text3); font-weight:600; margin-bottom:6px; }
.chat-welcome p { font-size:10px; color:var(--text4); font-family:var(--fm); max-width:440px; margin:0 auto; line-height:1.7; margin-bottom:24px; }
.quick-queries { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.quick-btn { padding:8px 14px; background:var(--bg3); border:1px solid #1a305055; border-radius:20px; color:var(--text2); font-size:10px; font-family:var(--fm); cursor:pointer; transition:all 0.2s; }
.quick-btn:hover { border-color:#00f0ff44; color:#00dce8; }

.msg-row { display:flex; gap:10px; animation:si 0.2s; }
.msg-row.user { flex-direction:row-reverse; }
.msg-ava { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.msg-ava.ai { background:#00f0ff15; border:1.5px solid #00f0ff33; }
.msg-ava.user { background:#a78bfa15; border:1.5px solid #a78bfa33; }
.msg-ava .ava-dot { width:8px; height:8px; border-radius:50%; }
.msg-bubble { max-width:80%; padding:12px 16px; font-size:12.5px; line-height:1.65; }
.msg-bubble.ai { background:linear-gradient(160deg,var(--bg3),var(--bg4)); border:1px solid #162a4450; border-radius:16px 16px 16px 4px; }
.msg-bubble.user { background:#a78bfa08; border:1px solid #a78bfa18; border-radius:16px 16px 4px 16px; color:#d0dae8; }

/* Markdown in AI messages */
.msg-bubble.ai pre { background:#060c18; padding:12px; border-radius:8px; border:1px solid var(--border); overflow-x:auto; font-family:var(--fm); font-size:11px; margin:8px 0; color:#8899bb; line-height:1.6; }
.msg-bubble.ai code { font-family:var(--fm); background:#060c1880; padding:1px 5px; border-radius:3px; font-size:11px; color:#00dce8; }
.msg-bubble.ai strong { color:#00dce8; }
.msg-bubble.ai em { color:var(--purple); }
.msg-bubble.ai a { color:#818cf8; text-decoration:underline; }
.msg-bubble.ai h3, .msg-bubble.ai h4 { color:#00e0f0; margin:12px 0 5px; font-weight:600; }
.msg-bubble.ai h3 { font-size:14px; border-bottom:1px solid var(--border); padding-bottom:3px; }
.msg-bubble.ai ul, .msg-bubble.ai ol { padding-left:18px; margin:6px 0; }
.msg-bubble.ai li { margin:3px 0; }
.msg-bubble.ai table { border-collapse:collapse; width:100%; margin:8px 0; }
.msg-bubble.ai td, .msg-bubble.ai th { border:1px solid var(--border); padding:6px 10px; font-size:11px; }
.msg-bubble.ai th { background:#060c18; color:#00dce8; }
.msg-bubble.ai blockquote { border-left:3px solid #00f0ff44; padding-left:10px; color:var(--text2); margin:6px 0; }

.typing-row { display:flex; gap:10px; animation:fu 0.2s; }
.typing-dots { display:flex; gap:4px; }
.typing-dots span { width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.typing-dots span:nth-child(1) { animation:pg 1.2s 0s infinite; }
.typing-dots span:nth-child(2) { animation:pg 1.2s 0.2s infinite; }
.typing-dots span:nth-child(3) { animation:pg 1.2s 0.4s infinite; }

.chat-sources { padding:5px 18px; background:var(--bg2); border-top:1px solid #162a4420; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.src-label { font-size:8px; color:var(--text3); font-family:var(--fm); }
.src-badge { font-size:7px; padding:2px 6px; background:#10b98110; border:1px solid #10b98118; border-radius:3px; color:#2dd4a0; font-family:var(--fm); }

.chat-input-wrap { padding:12px 18px; background:var(--bg2); border-top:1px solid #162a4440; flex-shrink:0; display:flex; gap:8px; align-items:flex-end; }
.chat-input-wrap textarea { flex:1; padding:10px 14px; background:#060b18; border:1px solid var(--border2); border-radius:12px; color:#d0dae8; font-size:11.5px; outline:none; resize:none; min-height:40px; max-height:100px; line-height:1.4; }
.chat-input-wrap textarea:focus { border-color:#00f0ff55; }
.send-btn { width:42px; height:42px; border-radius:12px; background:#162a4440; border:none; color:var(--text3); font-size:16px; cursor:default; flex-shrink:0; transition:all 0.3s; display:flex; align-items:center; justify-content:center; }
.send-btn.ready { background:linear-gradient(135deg,#00e0f0,var(--blue)); color:var(--bg); cursor:pointer; box-shadow:0 3px 14px #00f0ff30; }

/* MODULE VIEW */
.module-panel { padding:22px; animation:fu 0.3s; }
.module-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.module-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.module-title { font-family:var(--fo); font-size:16px; font-weight:700; color:#e0e8ff; letter-spacing:2px; }
.module-desc { font-size:11px; color:#6a8aaa; line-height:1.6; margin-top:4px; max-width:560px; font-family:var(--fr); }
.module-input-row { display:flex; gap:8px; margin-bottom:16px; }
.module-input { flex:1; padding:11px 14px; background:#060b18; border-radius:10px; color:#d0dae8; font-size:11.5px; outline:none; }
.module-submit { padding:11px 18px; border-radius:10px; font-weight:600; font-size:12px; cursor:pointer; border:none; white-space:nowrap; letter-spacing:0.5px; }
.module-qa-title { font-size:8px; color:var(--text4); letter-spacing:2px; font-family:var(--fm); margin-bottom:8px; }
.module-qa-btn { display:block; width:100%; padding:9px 12px; margin-bottom:4px; background:var(--bg3); border:1px solid #162a4440; border-radius:7px; color:var(--text2); font-size:10.5px; font-family:var(--fm); cursor:pointer; text-align:left; transition:all 0.2s; line-height:1.4; }
.module-qa-btn:hover { border-color:#00f0ff40; color:#00dce8; }
.module-footer { margin-top:20px; padding:14px 16px; background:#080c1866; border-radius:10px; border:1px solid #162a4422; font-size:9px; color:#2a4a65; font-family:var(--fm); line-height:1.7; text-align:center; }

/* HISTORY */
.history-list { padding:0 22px 22px; }
.hist-item { padding:12px 14px; background:var(--bg3); border:1px solid #162a4430; border-radius:8px; margin-bottom:6px; cursor:default; transition:border 0.2s; }
.hist-item:hover { border-color:#a78bfa33; }
.hist-title { font-size:12px; color:#b8c8dd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-meta { font-size:8px; color:var(--text3); font-family:var(--fm); margin-top:3px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .sidebar { width:0; position:absolute; z-index:20; height:calc(100vh - 50px); top:50px; }
    .sidebar.open { width:250px; }
    .header-email, .header-exp, .header-feeds { display:none; }
}