:root{
  --green:#00ff66;
  --white:#e6e6e6;
  --bg:#020202;
  --pos-bg:rgba(0,255,102,0.08);
  --neg-bg:rgba(255,165,0,0.08);
  --err-bg:rgba(255,60,60,0.12);
  --muted: rgba(143,184,168,0.8);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family:Menlo,monospace;color:var(--white)}

/* header */
.terminal-header{position:fixed;top:0;left:0;right:0;height:58px;background:#000;border-bottom:2px solid var(--green);padding:10px 14px;z-index:120}
.header-left .name{color:var(--green);font-size:20px;font-weight:700}
.header-left .subtitle{color:var(--muted);font-size:12px;margin-top:4px}

/* layout */
.main-area{display:flex;height:calc(100vh - 58px - 36px);padding-top:64px;padding-bottom:36px}
.left-col{flex:0 0 44%;position:relative;background:linear-gradient(135deg,#060606,#0b0b0b);border-right:2px solid var(--green);overflow:hidden;display:flex;align-items:center;justify-content:center}
.p-3{padding:1rem}
.three-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#threeCanvas{width:100%;height:100%;display:block}

/* face message bubble */
.face-message{
  position:absolute;
  left:50%;
  bottom:18%;
  transform:translateX(-50%) translateY(8px);
  min-width:160px;
  max-width:70%;
  background:rgba(0,0,0,0.6);
  border-radius:12px;
  padding:10px 14px;
  color:var(--green);
  font-weight:700;
  text-align:center;
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease, background-color 200ms ease, color 200ms ease;
  pointer-events:none;
  z-index:20;
  box-shadow:0 12px 28px rgba(0,0,0,0.6);
}
.face-message.positive{background:var(--pos-bg);color:var(--green)}
.face-message.negative{background:var(--neg-bg);color:#ff9b4d}
.face-message.error{background:var(--err-bg);color:#ff5151}

/* terminal */
.nav-links{padding:8px;border-bottom:1px solid rgba(0,255,102,0.06);color:var(--green);font-size:13px}
.terminal-shell{flex:1;background:#000;border:1px solid rgba(0,255,102,0.06);padding:0;display:flex;flex-direction:column;position:relative}
.terminal-content{flex:1;display:flex;flex-direction:column;color:#dcdcdc;font-size:14px;line-height:1.45;padding:8px 12px;overflow:hidden}
.history{flex:1 1 auto; overflow-y:auto; padding:6px 2px; white-space:pre-wrap; word-break:break-word;}
.command-line{margin:6px 0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.command-response{margin:6px 0;white-space:pre-wrap}

/* lists */
.command-list{padding-left:18px}
.command-list li{margin:6px 0;font-size:14px;display:flex;gap:8px;align-items:center}
.command-list .cmd{color:var(--green);font-weight:700;min-width:160px}
.command-list .desc{color:#cfcfcf}

/* prompt & input */
.prompt-row{display:flex;align-items:flex-start;gap:8px;padding-top:8px;flex-wrap:wrap}
.prompt-blue{color:#3db7ff;font-weight:600;white-space:nowrap}
.prompt-green{color:var(--green);white-space:nowrap}
.terminal-input{
  background:transparent;border:none;outline:none;color:var(--white);font:inherit;flex:1;caret-color:var(--green);
  min-width:80px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;max-width:100%;padding:2px 0;line-height:1.35;display:block;
}
/* placeholder */
.terminal-input:empty:before{content:attr(data-placeholder);color:rgba(230,230,230,0.12)}

/* keep prompt row positioned after history - margin to separate visually */
.terminal-content > .prompt-row{margin-top:8px}

/* footer */
.terminal-footer{position:fixed;bottom:0;left:0;right:0;height:36px;background:#000;border-top:2px solid var(--green);display:flex;justify-content:space-between;align-items:center;padding:6px 12px;color:var(--green);z-index:130}

/* responsive */
@media(max-width:880px){
  .main-area{flex-direction:column}
  .left-col{flex:0 0 auto;height:40vh;border-right:none;border-bottom:2px solid rgba(0,255,102,0.06)}
  .right-col{flex:1 1 auto}
  #threeCanvas{height:100%}
}

/* system log (visual hidden by default) */
.system-log{position:absolute;right:8px;top:8px;color:rgba(200,200,200,0.06);font-size:12px;pointer-events:none}

/* scrollbar look */
.history::-webkit-scrollbar{width:1000px}
.history::-webkit-scrollbar-thumb{background:rgba(0,255,102,0.12);border-radius:8px}

/* Track */
.history::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.history::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.history::-webkit-scrollbar-thumb:hover {
  background: #555; 
}