/* ============================================================
   lessqqmorepewpew · agent network — shared styles
   Serious / futuristic. Cyan = system/data, Orange = brand/live.
   ============================================================ */
:root{
  --bg:#04060c; --bg2:#020308;
  --surface:rgba(10,16,30,.62); --surface2:rgba(14,22,40,.85);
  --line:rgba(120,160,220,.12); --line-bright:rgba(120,200,255,.34);
  --cyan:#38e1ff; --cyan-dim:#1c6e8c;
  --orange:#f28500; --orange-bright:#ff9a2e;
  --green:#39d98a;
  --ink:#eaf2ff; --mut:#7e8aa3; --mut2:#566179;
  --font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* n8n chat widget theme */
  --chat--color-primary:#f28500;
  --chat--color-primary-shade-50:#d97800;
  --chat--color-primary-shade-100:#b36400;
  --chat--color-secondary:#38e1ff;
  --chat--color-secondary-shade-50:#1cc6e8;
  --chat--color-white:#ffffff;
  --chat--color-light:#0a1020;
  --chat--color-light-shade-50:#0e1730;
  --chat--color-light-shade-100:#13203f;
  --chat--color-medium:#22304f;
  --chat--color-dark:#04060c;
  --chat--color-disabled:#566179;
  --chat--color-typing:#7e8aa3;
  --chat--spacing:14px; --chat--border-radius:10px; --chat--transition-duration:.2s;
  --chat--window--width:100%; --chat--window--height:100%;
  --chat--header--background:#04060c; --chat--header--color:#eaf2ff;
  --chat--heading--font-size:1.05rem; --chat--subtitle--color:#7e8aa3;
  --chat--body--background:#04060c; --chat--message--font-size:.95rem;
  --chat--message--bot--background:#0c1428; --chat--message--bot--color:#dfe9fb;
  --chat--message--user--background:#f28500; --chat--message--user--color:#15100a;
  --chat--message--bot--border:1px solid rgba(120,200,255,.08);
  --chat--input--background:#0a1224; --chat--input--text-color:#eaf2ff;
  --chat--input--border:1px solid rgba(120,160,220,.18);
  --chat--input--send--button--background:#f28500; --chat--input--send--button--color:#15100a;
  --chat--button--color:#15100a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* layered ambience: corner glows + vignette over the live canvas */
.amb{position:fixed; inset:0; z-index:0; pointer-events:none}
.amb.glow{background:
  radial-gradient(820px 520px at 82% -8%, rgba(56,225,255,.10), transparent 60%),
  radial-gradient(760px 560px at -6% 108%, rgba(242,133,0,.10), transparent 58%);}
.amb.vignette{background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);}
#neural{position:fixed; inset:0; z-index:0; display:block}
.layer{position:relative; z-index:2}

/* ---------- top status bar ---------- */
.statusbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,6,12,.85),rgba(4,6,12,.45));
  backdrop-filter:blur(10px); font-family:var(--mono);
}
.wordmark{font-weight:800; letter-spacing:.5px; font-size:.92rem; text-decoration:none; color:var(--ink)}
.wordmark .pew{color:var(--orange)}
.wordmark .sys{color:var(--mut2); font-weight:500}
.telemetry{display:flex; align-items:center; gap:18px; font-size:.7rem; color:var(--mut); letter-spacing:.5px}
.telemetry .t{display:flex; align-items:center; gap:7px; white-space:nowrap}
.telemetry .ok{color:var(--green)}
.telemetry a{color:var(--mut); text-decoration:none}
.telemetry a:hover{color:var(--cyan)}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
@media(max-width:680px){ .telemetry .hideSm{display:none} }

/* ---------- shared bits ---------- */
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:10px}
.kicker::before,.kicker::after{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan))}
.kicker::after{transform:scaleX(-1)}
.scramble{font-variant-ligatures:none}
.gradtext{background:linear-gradient(120deg,#ffffff 38%, var(--orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* sci-fi corner brackets (applied to .framed) */
.framed{position:relative}
.framed::before,.framed::after{content:""; position:absolute; width:16px; height:16px; pointer-events:none; transition:.25s}
.framed::before{top:10px; left:10px; border-top:1.5px solid var(--line-bright); border-left:1.5px solid var(--line-bright)}
.framed::after{bottom:10px; right:10px; border-bottom:1.5px solid var(--line-bright); border-right:1.5px solid var(--line-bright)}

/* ============ PORTAL ============ */
.wrap{max-width:1140px; margin:0 auto; padding:0 22px}
.hero{text-align:center; padding:84px 0 46px}
.hero h1{font-family:var(--mono); font-weight:800; font-size:clamp(2.5rem,6.4vw,4.4rem); line-height:1.02; margin:20px 0 16px; letter-spacing:-1px}
.hero p{color:var(--mut); font-size:1.06rem; max-width:580px; margin:0 auto; line-height:1.6}
.hero .tag{font-family:var(--mono); color:var(--cyan); font-size:.86rem; margin-top:16px; opacity:.85}
.sep{width:100%; max-width:560px; height:1px; margin:30px auto 0;
  background:linear-gradient(90deg,transparent,var(--line-bright),transparent)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:20px; padding:30px 0 80px}
.agent{
  background:var(--surface); backdrop-filter:blur(12px); border:1px solid var(--line);
  border-radius:14px; padding:26px 24px 22px; min-height:222px; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden;
}
.agent .head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px}
.agent h2{font-family:var(--mono); font-weight:800; font-size:1.45rem; margin:0; letter-spacing:.3px}
.agent .id{font-family:var(--mono); font-size:.62rem; color:var(--mut2); letter-spacing:1px; margin-top:4px}
.state{font-family:var(--mono); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; color:var(--mut)}
.dot{width:8px; height:8px; border-radius:50%}
.dot.on{background:var(--green); box-shadow:0 0 10px var(--green)}
.dot.off{background:var(--mut2)}
.agent p{color:var(--mut); font-size:.9rem; line-height:1.55; margin:14px 0 18px; flex:1}
.open{align-self:flex-start; text-decoration:none; font-family:var(--mono); font-weight:700; font-size:.82rem;
  letter-spacing:.5px; color:#15100a; background:linear-gradient(120deg,var(--orange),var(--orange-bright));
  padding:11px 17px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; transition:.2s}
.open:hover{box-shadow:0 0 24px rgba(242,133,0,.5); transform:translateX(3px)}
/* alive = subtle thin green frame (replaces the ONLINE badge) */
.agent.live{border-color:rgba(57,217,138,.38);
  box-shadow:0 0 0 1px rgba(57,217,138,.10), 0 0 18px rgba(57,217,138,.06)}
.agent.live.framed::before,.agent.live.framed::after{border-color:rgba(57,217,138,.55)}
.agent.live:hover{transform:translateY(-5px); border-color:rgba(57,217,138,.6);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(57,217,138,.22), 0 0 30px rgba(57,217,138,.12)}
.agent.live:hover.framed::before,.agent.live:hover.framed::after{border-color:rgba(57,217,138,.9); width:22px; height:22px}
/* lit terminal = alive agent page */
.terminal.lit{border-color:rgba(57,217,138,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(57,217,138,.12), 0 0 32px rgba(57,217,138,.08), inset 0 1px 0 rgba(255,255,255,.04)}
.terminal.lit.framed::before,.terminal.lit.framed::after{border-color:rgba(57,217,138,.6)}
/* scanning sheen on live cards */
.agent.live::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(115deg,transparent 30%,rgba(56,225,255,.07) 50%,transparent 70%);
  background-size:250% 100%}
.agent.live:hover::after{opacity:1; animation:sheen 1.4s ease}
@keyframes sheen{from{background-position:200% 0}to{background-position:-60% 0}}
.agent.soon{opacity:.46}
.agent.soon .open{background:transparent; border:1px solid var(--line-bright); color:var(--mut); pointer-events:none}
.agent .chip{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:.56rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--mut2); border:1px dashed var(--line-bright); padding:3px 8px; border-radius:999px}

footer{border-top:1px solid var(--line); padding:20px 0 40px; color:var(--mut2);
  font-family:var(--mono); font-size:.7rem; text-align:center}
footer code{color:var(--cyan)}

/* ============ CHAT PAGE ============ */
.page{display:flex; flex-direction:column; height:100vh}
.gate{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.terminal{
  width:100%; max-width:440px; background:var(--surface2); backdrop-filter:blur(16px);
  border:1px solid var(--line-bright); border-radius:16px; padding:34px 30px 30px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(56,225,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
}
.terminal .bar{display:flex; align-items:center; gap:7px; margin-bottom:22px}
.terminal .bar i{width:10px; height:10px; border-radius:50%; background:var(--mut2); display:block}
.terminal .bar i:nth-child(1){background:#ff5f57}.terminal .bar i:nth-child(2){background:#febc2e}.terminal .bar i:nth-child(3){background:#28c840}
.terminal .bar span{margin-left:auto; font-family:var(--mono); font-size:.62rem; color:var(--mut2); letter-spacing:1.5px}
.badge{font-family:var(--mono); font-size:.64rem; letter-spacing:2px; text-transform:uppercase; color:var(--orange);
  border:1px solid rgba(242,133,0,.35); border-radius:999px; padding:4px 11px; display:inline-flex; align-items:center; gap:7px; margin-bottom:16px}
.badge .dot{width:6px;height:6px}
.terminal h1{font-family:var(--mono); font-weight:800; font-size:2.3rem; margin:0 0 6px; line-height:1}
.terminal .desc{color:var(--mut); font-size:.9rem; line-height:1.5; margin:0 0 24px}
.field{margin-bottom:13px}
.field label{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut); margin-bottom:7px}
.field .inp{display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line-bright); border-radius:9px; padding:11px 13px; transition:.2s}
.field .inp:focus-within{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,225,255,.14)}
.field .inp .pfx{font-family:var(--mono); color:var(--cyan); font-size:.9rem}
.field input{flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:var(--mono); font-size:.92rem}
.enter{width:100%; margin-top:12px; cursor:pointer; border:none; border-radius:9px;
  background:linear-gradient(120deg,var(--orange),var(--orange-bright)); color:#15100a;
  font-family:var(--mono); font-weight:800; font-size:.92rem; letter-spacing:.5px; padding:13px;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:.2s}
.enter:hover{box-shadow:0 0 28px rgba(242,133,0,.5); transform:translateY(-1px)}
.enter:disabled{opacity:.6; cursor:wait}
.console{margin-top:14px; min-height:1.2em; font-family:var(--mono); font-size:.74rem; line-height:1.7; white-space:pre-wrap}
.console .ok{color:var(--green)} .console .err{color:#ff6b6b} .console .sys{color:var(--cyan)}
.note{margin-top:18px; padding-top:15px; border-top:1px solid var(--line); color:var(--mut2); font-size:.7rem; line-height:1.55; font-family:var(--mono)}
.note b{color:var(--cyan); font-weight:700}

.stage{flex:1; position:relative; display:none; min-height:0}
.stage.show{display:block}
.chat-host{position:absolute; inset:0}
.chat-host .chat-layout{height:100%; max-height:100%; border-radius:0}
.chat-host .chat-window-wrapper,.chat-host .chat-window{height:100%}
.signout{position:absolute; z-index:5; top:12px; right:16px; background:var(--surface2);
  border:1px solid var(--line-bright); color:var(--mut); font-family:var(--mono); font-size:.7rem;
  padding:6px 12px; border-radius:8px; cursor:pointer}
.signout:hover{color:var(--orange); border-color:var(--orange)}
@media(max-width:480px){ .terminal{padding:28px 22px} .terminal h1{font-size:2rem} }

/* ============ ANDROID FACES ============ */
.face{position:relative; flex:none; display:block}
.face .lowpoly{width:100%; height:100%; display:block; overflow:visible; animation:headfloat 6s ease-in-out infinite}
@keyframes headfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
/* eyes: subtle burning-fire flicker (color from --gl set per agent) */
.face .lowpoly .eye{filter:drop-shadow(0 0 3px var(--gl,#38e1ff)); animation:fireeye 1.7s ease-in-out infinite}
@keyframes fireeye{
  0%{opacity:.72; filter:drop-shadow(0 0 2px var(--gl,#38e1ff))}
  18%{opacity:1; filter:drop-shadow(0 0 6px var(--gl,#38e1ff))}
  36%{opacity:.82; filter:drop-shadow(0 0 3px var(--gl,#38e1ff))}
  54%{opacity:1; filter:drop-shadow(0 0 8px var(--gl,#38e1ff))}
  70%{opacity:.86; filter:drop-shadow(0 0 4px var(--gl,#38e1ff))}
  86%{opacity:1; filter:drop-shadow(0 0 6px var(--gl,#38e1ff))}
  100%{opacity:.92; filter:drop-shadow(0 0 3px var(--gl,#38e1ff))}
}
.face .lowpoly .shard{transform-box:fill-box; transform-origin:center; animation:sharddrift 4.5s ease-in-out infinite}
@keyframes sharddrift{0%{transform:translate(0,0); opacity:.15} 45%{opacity:.9} 100%{transform:translate(9px,-7px); opacity:0}}
.face .lowpoly.is-dim .eye{animation:none; filter:none; opacity:.5}
.face .lowpoly.is-dim .shard{animation:none; opacity:.2}
.face::after{content:""; position:absolute; inset:-7px; border-radius:50%; z-index:-1; opacity:0; transition:opacity .3s}
.face[data-accent="cyan"].live::after{background:radial-gradient(circle,rgba(56,225,255,.20),transparent 70%); opacity:1; animation:facepulse 3.2s ease-in-out infinite}
.face[data-accent="orange"].live::after{background:radial-gradient(circle,rgba(242,133,0,.22),transparent 70%); opacity:1; animation:facepulse 3.2s ease-in-out infinite}
@keyframes facepulse{0%,100%{opacity:.35}50%{opacity:.85}}
/* portal card avatar */
.agent .idz{display:flex; align-items:center; gap:14px}
.agent .face{width:90px; height:90px}
/* terminal avatar */
.terminal .face{width:141px; height:141px; margin:0 auto 18px}

/* ============ CLOSED SESSION ============ */
.gate.closed{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
#closed .terminal{text-align:center}
#closed .terminal .face{filter:grayscale(.4) brightness(.8)}
#closed h1{font-size:1.8rem}
#closed .desc{margin-bottom:22px}