/* NEMOCLAW — console de sandbox. Preto real, verde NVIDIA, ciano de água. */
:root{
  --void:#000;
  --tank:#0A0E08;
  --glass:#101506;
  --line:#243019;
  --line-soft:#18200F;
  --nv:#76B900;
  --nv-hot:#B4FF3A;
  --water:#5BE3E8;
  --deny:#FF5A36;
  --amber:#FFB020;
  --ink:#DDE6D3;
  --muted:#6E7A63;
  --bar:44px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Archivo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:var(--nv);text-decoration:none}
a:hover{color:var(--nv-hot)}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}

/* fundo: vinheta do aquário, estática */
#tank{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(118,185,0,.10), transparent 60%),
    radial-gradient(90% 60% at 80% 110%, rgba(91,227,232,.06), transparent 65%);
}
.statusbar,.console,.cmd,footer{position:relative;z-index:1}

/* ---------- boot ---------- */
#boot{
  position:fixed;inset:0;z-index:90;background:var(--void);
  display:flex;align-items:center;justify-content:flex-start;
  padding:8vh 6vw;transition:opacity .45s ease;
}
#boot.gone{opacity:0;pointer-events:none}
#bootlog{
  font-family:var(--mono);font-size:.8rem;line-height:1.75;
  color:var(--nv);margin:0;white-space:pre-wrap;
}
#bootlog .dim{color:var(--muted)}
#bootlog .hot{color:var(--deny)}

/* ---------- status bar ---------- */
.statusbar{
  position:sticky;top:0;z-index:40;height:var(--bar);
  display:flex;align-items:center;gap:1.4rem;
  padding:0 1rem;background:rgba(0,0,0,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:.72rem;
  white-space:nowrap;
}
.mark{
  font-family:var(--sans);font-weight:800;font-stretch:118%;
  font-size:.95rem;letter-spacing:.055em;color:var(--ink);
}
.stat{color:var(--muted)}
.stat b{color:var(--nv);font-weight:400}
.stat.breach b{color:var(--deny)}
.buy{
  margin-left:auto;font-family:var(--mono);font-size:.74rem;
  color:var(--void);background:var(--nv);
  padding:.4rem .85rem;border-radius:2px;font-weight:700;
}
.buy:hover{background:var(--nv-hot);color:var(--void)}

/* ---------- console ---------- */
.console{
  display:grid;grid-template-columns:212px minmax(0,1fr);
  height:calc(100dvh - var(--bar));
  border-bottom:1px solid var(--line);
}
.rail{
  border-right:1px solid var(--line);
  padding:1.1rem .9rem;
  display:flex;flex-direction:column;gap:1.8rem;
  font-family:var(--mono);font-size:.78rem;
  overflow-y:auto;
}
.rail-h{
  margin:0 0 .6rem;color:var(--muted);font-size:.66rem;
  letter-spacing:.14em;
}
.rail nav{display:flex;flex-direction:column;gap:.15rem}
.rail nav a{
  color:var(--muted);padding:.22rem .4rem;border-left:2px solid transparent;
}
.rail nav a:hover{color:var(--ink)}
.rail nav a.on{color:var(--nv);border-left-color:var(--nv);background:var(--glass)}
.policy-mini dl{display:grid;grid-template-columns:1fr auto;gap:.3rem .5rem;margin:0}
.policy-mini dt{color:var(--muted)}
.policy-mini dd{margin:0;color:var(--nv);text-align:right}
.policy-mini .deny{color:var(--deny)}
.policy-mini .warn{color:var(--amber)}

.chat{display:flex;flex-direction:column;min-width:0}
.stream{
  flex:1;overflow-y:auto;padding:1.6rem 1.4rem .6rem;
  display:flex;flex-direction:column;gap:1.15rem;
  width:100%;max-width:980px;
}
/* terminal: a conversa se apoia no rodapé e cresce pra cima */
.stream > .msg:first-child{margin-top:auto}
.msg{display:grid;grid-template-columns:52px minmax(0,1fr);gap:.8rem;max-width:74ch}
.msg .who{
  font-family:var(--mono);font-size:.68rem;color:var(--muted);
  padding-top:.32rem;
}
.msg.nemo .who{color:var(--nv)}
.msg .body{
  font-size:1rem;line-height:1.62;white-space:pre-wrap;word-wrap:break-word;
}
.msg.nemo .body{
  background:var(--glass);border-left:2px solid var(--nv);
  padding:.55rem .85rem;
}
.msg.you .body{color:var(--muted)}
.msg .body.pending::after{
  content:"\258D";color:var(--nv);animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

.chips{display:flex;gap:.45rem;flex-wrap:wrap;padding:.2rem 1.4rem .8rem;max-width:980px}
.chips button{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  background:transparent;border:1px solid var(--line);
  padding:.34rem .6rem;border-radius:2px;cursor:pointer;
}
.chips button:hover{color:var(--nv);border-color:var(--nv)}
.chips.hide{display:none}

.composer{
  display:flex;gap:.6rem;padding:.8rem 1.4rem 1.1rem;
  border-top:1px solid var(--line-soft);
}
#input{
  flex:1;min-width:0;max-width:840px;background:var(--glass);border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:.95rem;
  padding:.7rem .85rem;border-radius:2px;
}
#input::placeholder{color:var(--muted)}
#input:focus{border-color:var(--nv);outline:none}
#send{
  font-family:var(--mono);font-size:.78rem;cursor:pointer;
  background:var(--nv);color:var(--void);border:0;
  padding:.7rem 1.1rem;border-radius:2px;font-weight:700;
}
#send:hover{background:var(--nv-hot)}
#send:disabled{background:var(--line);color:var(--muted);cursor:default}

/* ---------- seções de comando ---------- */
.cmd{
  padding:4.5rem 1.4rem;max-width:860px;
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top:var(--bar);
}
.cmd h2{
  font-family:var(--mono);font-size:1.02rem;font-weight:400;
  color:var(--ink);margin:0 0 1.6rem;
}
.dollar{color:var(--nv)}
.log{
  font-family:var(--mono);font-size:.78rem;line-height:1.85;
  color:var(--muted);margin:0;overflow-x:auto;
}
.log b{color:var(--nv);font-weight:400}
.log i{color:var(--deny);font-style:normal}
.aside{color:var(--muted);font-size:.9rem;max-width:58ch;margin:1.4rem 0 0}

.spec{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.6rem;margin:0;font-size:.92rem}
.spec dt{font-family:var(--mono);font-size:.76rem;color:var(--muted);padding-top:.15rem}
.spec dd{margin:0;color:var(--ink)}

.ca{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:2rem;padding:.85rem 1rem;
  background:var(--glass);border:1px solid var(--line);
}
.ca-label{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.ca code{font-family:var(--mono);font-size:.8rem;color:var(--nv);word-break:break-all;flex:1;min-width:0}
#ca-copy{
  font-family:var(--mono);font-size:.7rem;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:.3rem .6rem;border-radius:2px;
}
#ca-copy:hover{color:var(--nv);border-color:var(--nv)}

.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:2rem 1fr;
  gap:.1rem 1rem;padding:.85rem 0;border-top:1px solid var(--line-soft);
}
.steps li::before{
  content:counter(s);font-family:var(--mono);font-size:.76rem;color:var(--nv);
  grid-row:span 2;padding-top:.2rem;
}
.steps span{font-size:1rem}
.steps em{font-style:normal;color:var(--muted);font-size:.85rem}
.buy.big{display:inline-block;margin-top:2rem;padding:.75rem 1.5rem;font-size:.85rem}

footer{padding:3rem 1.4rem 4rem;max-width:860px}
.links{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.8rem;margin:0 0 1.6rem}
.fine{color:#8A9680;font-size:.76rem;line-height:1.7;max-width:64ch;margin:0}

/* ---------- mascote ---------- */
#nemo-layer{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
#nemo{
  position:absolute;top:0;left:0;width:104px;cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 0 14px rgba(118,185,0,.35));
}
#nemo .tail{transform-origin:24px 36px;animation:swish 1.1s ease-in-out infinite}
#nemo .eye-led{animation:led 3.4s ease-in-out infinite}
#nemo .claw{transform-origin:82px 50px;animation:pinch 4.6s ease-in-out infinite}
@keyframes swish{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@keyframes led{0%,92%,100%{opacity:1}95%{opacity:.25}}
@keyframes pinch{0%,88%,100%{transform:rotate(0)}93%{transform:rotate(-17deg)}}
.bubble-dot{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.7), rgba(91,227,232,.2) 60%, transparent 72%);
  border:1px solid rgba(91,227,232,.32);pointer-events:none;
}
#nemo-say{
  position:absolute;pointer-events:none;
  font-family:var(--mono);font-size:.72rem;color:var(--void);
  background:var(--nv);padding:.32rem .55rem;border-radius:2px;
  white-space:nowrap;opacity:0;transition:opacity .18s ease;
}
#nemo-say.on{opacity:1}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .console{
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    height:calc(100dvh - var(--bar));
  }
  .rail{
    flex-direction:row;align-items:center;gap:1rem;
    border-right:0;border-bottom:1px solid var(--line);
    padding:.5rem .9rem;overflow-x:auto;
  }
  .rail nav{flex-direction:row;gap:.2rem}
  .rail .rail-h{display:none}
  .policy-mini{display:none}
  .chat{min-height:0}
  .statusbar{gap:.9rem;overflow-x:auto}
  .statusbar .stat{display:none}
  .stream{padding:1.1rem .9rem .4rem}
  .msg{grid-template-columns:44px minmax(0,1fr);gap:.5rem}
  .chips{padding:.2rem .9rem .7rem}
  .composer{padding:.7rem .9rem 1rem}
  .cmd{padding:3rem .9rem}
  footer{padding:2.4rem .9rem 3rem}
  #nemo{width:76px}
}

@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}