/* ═══════════════════════════════════════════════════════════
   bijees // welcoming AGI  —  the whole site is one console
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#05070a;
  --panel:rgba(4,8,11,.94);
  --line:rgba(0,255,156,.18);
  --line-soft:rgba(160,190,180,.11);
  --txt:#c3d2ce;
  --mut:#5d6f6b;
  --acc:#00ff9c;
  --acc-2:#4de1ff;
  --acc-rgb:0,255,156;
  --glow:0 0 12px rgba(var(--acc-rgb),.55);
  --ff:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
html[data-phosphor="amber"]  { --acc:#ffb000; --acc-2:#ff7a3d; --acc-rgb:255,176,0; }
html[data-phosphor="cyan"]   { --acc:#4de1ff; --acc-2:#8f7bff; --acc-rgb:77,225,255; }
html[data-phosphor="magenta"]{ --acc:#ff2e88; --acc-2:#ffb000; --acc-rgb:255,46,136; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--txt); overflow:hidden;
  font-family:var(--ff); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--acc); color:#04120c; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(var(--acc-rgb),.3); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(var(--acc-rgb),.6); }

/* ── backdrop ──────────────────────────────────────── */
#rain{ position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55; }
.fx-scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.35) 2px 4px);
  mix-blend-mode:multiply;
}
.fx-grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-2%)} 100%{transform:translate(0,0)} }
.fx-vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.92) 100%);
}

/* ── cursor ────────────────────────────────────────── */
.cursor{ position:fixed; top:0; left:0; z-index:99; pointer-events:none; mix-blend-mode:screen; display:none; }
.cursor span{
  display:block; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  border:1px solid rgba(var(--acc-rgb),.65); transition:transform .18s var(--ease), background .18s;
}
.cursor.hot span{ transform:scale(1.55); background:rgba(var(--acc-rgb),.14); }
.trail{
  position:fixed; z-index:98; pointer-events:none; font-size:10px; color:var(--acc);
  opacity:.8; animation:trailOut .7s linear forwards; text-shadow:var(--glow);
}
@keyframes trailOut{ to{ opacity:0; transform:translateY(22px); } }
@media (pointer:fine){ .cursor{ display:block; } }

/* ── shell ─────────────────────────────────────────── */
.shell{
  position:relative; z-index:5; height:100dvh;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  gap:16px; padding:clamp(16px,4.5vh,40px) clamp(14px,6vw,70px) clamp(16px,3.5vh,30px);
  max-width:1060px; margin:0 auto;
}

/* ── hud ───────────────────────────────────────────── */
.hud{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut);
}
.hud-mark{ font-weight:800; letter-spacing:.34em; color:var(--acc); text-shadow:var(--glow); cursor:default; }
.hud-right{ display:flex; gap:20px; align-items:center; }
.hud-stat{ display:inline-flex; align-items:center; gap:8px; }
.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acc);
  box-shadow:var(--glow); animation:pulse 1.9s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.65) } }

/* ── terminal ──────────────────────────────────────── */
.term{
  position:relative; min-height:0;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 0 70px rgba(var(--acc-rgb),.08), inset 0 0 90px rgba(0,0,0,.65);
}
.term-bar{
  display:flex; align-items:center; gap:7px; padding:11px 16px;
  border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.02);
}
.led{ width:9px; height:9px; border-radius:50%; opacity:.6; }
.led.r{ background:#ff5f57 } .led.y{ background:#ffbd2e } .led.g{ background:#28c840 }
.term-title{ margin-left:12px; font-size:10.5px; letter-spacing:.16em; color:var(--mut); text-transform:uppercase; }
.term-hint{ margin-left:auto; font-size:10.5px; letter-spacing:.12em; color:rgba(160,190,180,.4); }
.term-hint b{ color:var(--acc); font-weight:700; }

.term-body{
  overflow-y:auto; overflow-x:hidden; padding:22px clamp(16px,3vw,26px) 12px;
  font-size:13.5px; line-height:1.85; scroll-behavior:smooth;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.term-body .l{ white-space:pre-wrap; word-break:break-word; flex:0 0 auto; }
.term-body .box{ line-height:1.15; letter-spacing:0; }
.term-body .echo{ color:var(--acc-2); }
.term-body .ok{ color:var(--acc); text-shadow:var(--glow); }
.term-body .dim{ color:var(--mut); }
.term-body .err{ color:#ff5f57; }
.term-body b{ color:var(--txt); font-weight:700; }
.term-body .ok b{ color:inherit; }
.term-body a{ color:var(--acc); border-bottom:1px dotted rgba(var(--acc-rgb),.5); }
.term-body a:hover{ background:rgba(var(--acc-rgb),.16); }
.term-body .run{
  color:var(--acc); border-bottom:1px dotted rgba(var(--acc-rgb),.45); cursor:pointer;
  padding:0; font:inherit;
}
.term-body .run:hover{ background:rgba(var(--acc-rgb),.16); }

/* ── input row ─────────────────────────────────────── */
.term-foot{ position:relative; }
.term-in{
  display:flex; align-items:center; gap:10px;
  padding:14px clamp(16px,3vw,26px); border-top:1px solid var(--line-soft);
}
.prompt{ color:var(--acc); text-shadow:var(--glow); font-weight:700; }
.term-in input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--txt);
  font:inherit; font-size:14.5px; caret-color:transparent;
}
.term-in input::placeholder{ color:rgba(var(--acc-rgb),.45); }
.term-in .blink{ color:var(--acc); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* ── slash menu ────────────────────────────────────── */
.menu{
  position:absolute; left:clamp(12px,3vw,22px); right:clamp(12px,3vw,22px); bottom:calc(100% + 6px);
  max-height:min(340px,46vh); z-index:20; display:flex; flex-direction:column;
  border:1px solid var(--acc); background:rgba(4,8,11,.985);
  box-shadow:0 -14px 50px rgba(0,0,0,.75), 0 0 30px rgba(var(--acc-rgb),.14);
  animation:menuIn .16s var(--ease);
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(8px) } }
.menu[hidden]{ display:none; }
.menu-head{
  padding:8px 14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mut); border-bottom:1px solid var(--line-soft); flex:0 0 auto;
}
.menu-list{ overflow-y:auto; min-height:0; flex:1 1 auto; }
.menu-item{
  display:flex; align-items:baseline; gap:14px; width:100%; text-align:left;
  padding:9px 14px; font-size:13px; border-left:2px solid transparent;
}
.menu-item .m-cmd{ color:var(--acc); font-weight:500; flex:0 0 auto; min-width:112px; }
.menu-item .m-desc{ color:var(--mut); font-size:12px; }
.menu-item.sel{ background:rgba(var(--acc-rgb),.13); border-left-color:var(--acc); }
.menu-item.sel .m-desc{ color:var(--txt); }
.menu-item:hover{ background:rgba(var(--acc-rgb),.08); }
.menu-foot{
  padding:7px 14px; font-size:10px; letter-spacing:.12em; color:rgba(160,190,180,.4);
  border-top:1px solid var(--line-soft); display:flex; gap:16px; flex-wrap:wrap; flex:0 0 auto;
}
.menu-foot kbd{
  font:inherit; font-size:9.5px; padding:1px 5px; border:1px solid var(--line-soft);
  border-radius:3px; color:var(--mut);
}

/* ── chips ─────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chips button{
  padding:7px 14px; border:1px solid var(--line-soft); font-size:11.5px; color:var(--mut);
  letter-spacing:.06em; transition:all .25s var(--ease);
}
.chips button:hover{
  color:var(--acc); border-color:var(--acc); background:rgba(var(--acc-rgb),.09);
  transform:translateY(-2px); box-shadow:0 4px 18px rgba(var(--acc-rgb),.12);
}

/* ── toast ─────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:120;
  padding:10px 20px; border:1px solid var(--acc); background:rgba(4,8,11,.96); color:var(--acc);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-shadow:var(--glow);
  opacity:0; pointer-events:none; transition:all .35s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ── glitch mode ───────────────────────────────────── */
html.glitch .term{ animation:boxGlitch 4.5s steps(3) infinite; }
@keyframes boxGlitch{
  0%,94%,100%{ transform:none; filter:none }
  95%{ transform:translateX(-3px); filter:drop-shadow(3px 0 var(--acc-2)) }
  97%{ transform:translateX(3px); filter:drop-shadow(-3px 0 #ff2e88) }
}
html.glitch .hud-mark{ animation:boxGlitch 3.2s steps(3) infinite; }

/* ── responsive ────────────────────────────────────── */
@media (max-width:640px){
  .hide-sm, .term-hint{ display:none; }
  .shell{ gap:10px; padding:12px 12px 14px; }
  .term-body{ font-size:12.5px; padding-top:16px; }
  .menu-item .m-cmd{ min-width:96px; }
  .menu-item{ font-size:12.5px; }
  .chips button{ padding:6px 11px; font-size:11px; }
}
@media (max-height:520px){ .chips{ display:none; } }

/* ── reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .fx-grain{ display:none; }
  .term-body{ scroll-behavior:auto; }
}