/* =============================================================
   Cipher Suite — Homepage / Shell Styles
   Author: Adam Abuarab
   ============================================================= */

:root { --sidebar-w: 220px; }

body { height:100vh; display:flex; overflow:hidden; padding:0; }
body::after {
  content:''; position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events:none; z-index:9999;
}

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:relative; z-index:100;
  transition: transform .3s ease;
}
.sidebar::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent); opacity:.4;
}
.sidebar-header { padding:1.4rem 1.2rem 1rem; border-bottom:1px solid var(--border); }
.sidebar-header:hover .sidebar-title { text-shadow:0 0 20px rgba(0,255,224,.7); }
.sidebar-title {
  font-family:'Orbitron',sans-serif; font-size:.9rem; font-weight:900;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  text-shadow:0 0 12px rgba(0,255,224,.4); line-height:1.2;
}
.sidebar-sub { font-size:.5rem; letter-spacing:.25em; color:var(--muted); margin-top:.35rem; text-transform:uppercase; }
.cursor {
  display:inline-block; width:8px; height:1em; background:var(--accent);
  vertical-align:middle; margin-left:2px; animation:blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.nav { flex:1; padding:.8rem 0; overflow-y:auto; }
.nav-section {
  font-family:'Orbitron',monospace; font-size:.42rem; letter-spacing:.3em;
  color:var(--muted); text-transform:uppercase; padding:.6rem 1.2rem .3rem;
}
.nav-item {
  display:flex; align-items:center; gap:.65rem; padding:.65rem 1.2rem;
  cursor:pointer; border-left:2px solid transparent; transition:all .15s; user-select:none;
}
.nav-item:hover { background:rgba(0,255,224,.05); border-left-color:rgba(0,255,224,.3); }
.nav-item.active { background:rgba(0,255,224,.08); border-left-color:var(--accent); }
.nav-item.active .nav-label { color:var(--accent); }
.nav-item.active .nav-icon  { color:var(--accent); text-shadow:0 0 8px rgba(0,255,224,.5); }
.nav-icon { font-size:.85rem; width:18px; text-align:center; color:var(--muted); flex-shrink:0; }
.nav-label { font-family:'Orbitron',sans-serif; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); line-height:1.3; }
.nav-tag {
  margin-left:auto; font-size:.42rem; letter-spacing:.1em; color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:2px;
  padding:1px 5px; white-space:nowrap; flex-shrink:0;
}
.nav-item.active .nav-tag { color:var(--accent); border-color:rgba(0,255,224,.3); background:rgba(0,255,224,.06); }
.sidebar-footer { padding:.8rem 1.2rem; border-top:1px solid var(--border); font-size:.48rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; line-height:1.6; }

/* ── Overlay (mobile only, behind open sidebar) ── */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  z-index:99;
  backdrop-filter:blur(2px);
}

/* ── Main area ── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; min-width:0; }
.topbar {
  height:42px; flex-shrink:0; background:var(--panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1rem; gap:.75rem; position:relative;
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.3;
}
.topbar-title { font-family:'Orbitron',sans-serif; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.topbar-title:hover { text-shadow:0 0 12px rgba(0,255,224,.6); }
.topbar-path { font-size:.55rem; letter-spacing:.1em; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-path span { color:var(--text); }
.topbar-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--accent); margin-left:auto; flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* Hamburger button (hidden on desktop) */
.menu-btn {
  display:none;
  flex-shrink:0;
  background:transparent; border:1px solid var(--border); border-radius:3px;
  color:var(--accent); cursor:pointer; padding:5px 8px;
  font-size:1rem; line-height:1;
  transition:border-color .15s, box-shadow .15s;
}
.menu-btn:hover { border-color:var(--accent); box-shadow:0 0 8px rgba(0,255,224,.3); }

.frame-container { flex:1; position:relative; overflow:hidden; }
.cipher-frame { position:absolute; inset:0; width:100%; height:100%; border:none; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.cipher-frame.visible { opacity:1; pointer-events:all; }

/* ── Splash ── */
.splash {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; z-index:2;
  transition:opacity .3s ease; overflow-y:auto; padding:1rem;
}
.splash.hidden { opacity:0; pointer-events:none; }
.splash::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(0,255,224,.025) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(0,255,224,.025) 40px);
  pointer-events:none;
}
.splash-title {
  font-family:'Orbitron',sans-serif; font-size:clamp(1.6rem,5vw,3.5rem); font-weight:900;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  text-shadow:0 0 30px rgba(0,255,224,.4),0 0 80px rgba(0,255,224,.15);
  animation:flicker 6s infinite; text-align:center;
}
.splash-sub { font-size:.7rem; letter-spacing:.15em; color:var(--muted); text-align:center; line-height:2.2; }
.splash-sub a { color:var(--accent); text-decoration:none; }
.splash-sub a:hover { text-shadow:0 0 8px rgba(0,255,224,.7); }
.splash-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
  margin-top:1rem; max-width:520px; width:100%; padding:0 .5rem;
}
.splash-card {
  background:var(--panel); border:1px solid var(--border); border-radius:4px;
  padding:.8rem .5rem; cursor:pointer; transition:all .15s; text-align:center;
}
.splash-card:hover { border-color:var(--accent); background:rgba(0,255,224,.06); box-shadow:0 0 16px rgba(0,255,224,.15); transform:translateY(-2px); }
.splash-card-icon { font-size:1.2rem; margin-bottom:.3rem; }
.splash-card-name { font-family:'Orbitron',sans-serif; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
.splash-card-type { font-size:.44rem; letter-spacing:.08em; color:var(--muted); margin-top:.2rem; }

/* Mute button */
.mute-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  transition: border-color .15s, color .15s, box-shadow .15s;
  margin-left: .25rem;
  min-width: unset;
  flex: 0;
}
.mute-btn:hover { border-color: var(--accent); box-shadow: 0 0 8px rgba(0,255,224,.3); }
.mute-btn.muted { color: var(--muted); border-color: var(--border); }
.mute-btn.muted:hover { color: var(--accent2); border-color: var(--accent2); }

/* ── Mobile breakpoint ── */
@media (max-width: 640px) {

  /* Sidebar slides in from left, hidden by default */
  .sidebar {
    position:fixed; top:0; left:0; bottom:0;
    transform:translateX(-100%);
    box-shadow:4px 0 24px rgba(0,0,0,.6);
  }
  .sidebar.open {
    transform:translateX(0);
  }

  /* Overlay visible when sidebar is open */
  .sidebar-overlay.open {
    display:block;
  }

  /* Main takes full width */
  .main { width:100%; }

  /* Show hamburger button */
  .menu-btn { display:flex; align-items:center; justify-content:center; }

  /* Topbar adjustments */
  .topbar { padding:0 .75rem; gap:.5rem; }
  .topbar-title { font-size:.55rem; }
  .topbar-path { display:none; }

  /* Splash: 2 columns on mobile */
  .splash-grid { grid-template-columns:repeat(2,1fr); max-width:340px; }
  .splash-title { font-size:clamp(1.4rem,8vw,2rem); letter-spacing:.1em; }
  .splash-sub { font-size:.6rem; letter-spacing:.08em; }

  /* Nav items: bigger tap targets */
  .nav-item { padding:.85rem 1.2rem; }
}