/* ─── MILO OS v2 SERVERLESS HUD STYLING ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:          #050505;
  --bg1: #090909;
  --bg2: #0c0c0c;
  --border: #141414;
  --border2: #1f1f1f;
  --text-low: #3a3a3a;
  --text-hi: #7a7a7a;
  --text-bright: #b5b5b5;
  --accent-neon: #00f2ff;
  --font-ui: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg); color: #fff;
  font-family: var(--font-ui); overflow: hidden;
}

/* ─── INITIALIZATION BOOT OVERLAY LAYER ─── */
#boot-lock-overlay {
  position: fixed; inset: 0; background: rgba(5, 5, 5, 0.98);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}
#boot-lock-overlay.disengaged { opacity: 0; visibility: hidden; pointer-events: none; }

.lock-wrapper { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }

.hologram-ring {
  width: 90px; height: 90px; border-radius: 50%;
  border: 1px dashed rgba(0, 242, 255, 0.2); border-top: 2px solid var(--accent-neon);
  animation: spin 3s linear infinite;
}

#initialize-system-btn {
  background: transparent; color: #fff; border: 1px solid var(--border2);
  padding: 16px 40px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 3px; cursor: pointer; transition: all 0.25s;
}
#initialize-system-btn:hover {
  border-color: var(--accent-neon); color: var(--accent-neon);
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.15);
}

#lock-status { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); letter-spacing: 1.5px; }

/* ─── CORE MATRIX INTERFACE GRID ─── */
#hud-matrix {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 45px 1fr 60px;
  grid-template-areas:
    "top top"
    "left center"
    "bottom bottom";
}

#top {
  grid-area: top; border-bottom: 0.5px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: var(--bg1);
}
.system-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--text-low); }
.system-tag span { color: var(--text-bright); }

#clock-matrix { font-family: var(--font-mono); font-size: 12px; display: flex; gap: 15px; color: var(--text-hi); }

aside { display: flex; flex-direction: column; padding: 20px; gap: 20px; background: var(--bg); border-right: 0.5px solid var(--border); }
#left-panel { grid-area: left; }

.panel-section { display: flex; flex-direction: column; gap: 10px; }
.section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--text-low); border-bottom: 0.5px solid var(--border); padding-bottom: 4px; }

.api-box-wrapper { display: flex; gap: 6px; }
.api-box-wrapper input {
  flex: 1; background: var(--bg2); border: 0.5px solid var(--border2);
  padding: 8px 12px; font-size: 11px; font-family: var(--font-mono); color: #fff; outline: none;
}

.node-list { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-hi); }
.node-list span { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 5px; height: 5px; background: #222; border-radius: 50%; }
.status-dot.on { background: var(--accent-neon); box-shadow: 0 0 6px var(--accent-neon); }

#center-viewport { grid-area: center; display: flex; flex-direction: column; position: relative; overflow: hidden; }
#bg-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sphere-wrapper {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 280px; z-index: 2; display: flex; justify-content: center; align-items: center; pointer-events: none;
}
#sphere-canvas { width: 100%; height: 100%; }
.sphere-state-container { position: absolute; bottom: -20px; text-align: center; width: 100%; }
#state-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--text-low); text-transform: uppercase; }
#state-label.active { color: var(--accent-neon); animation: pulse 1.5s infinite; }

#chat-history {
  position: absolute; bottom: 0; left: 0; right: 0; max-height: 35%;
  overflow-y: auto; padding: 20px; z-index: 3; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(to top, rgba(5,5,5,1) 80%, rgba(5,5,5,0));
}
.msg { font-size: 13px; line-height: 1.4; color: var(--text-bright); }
.msg-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-low); margin-bottom: 2px; }

#bottom { grid-area: bottom; border-top: 0.5px solid var(--border); display: flex; align-items: center; justify-content: center; background: var(--bg1); }
.footer-control-wrapper { width: 90%; max-width: 600px; }

.btn {
  width: 100%; background: var(--bg2); border: 0.5px solid var(--border2); color: var(--text-hi);
  padding: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  cursor: pointer; text-transform: uppercase; transition: all 0.15s; outline: none;
}
.btn:not(.disabled):hover { border-color: var(--accent-neon); color: #fff; background: rgba(0,242,255,0.02); }
.btn.streaming { border-color: var(--accent-neon); color: var(--accent-neon); box-shadow: 0 0 10px rgba(0,242,255,0.1); }
.btn.disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }