@font-face{font-family:'VT323';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/vt323/v9/pxiKyp0ihIEF2isfFJA.ttf) format('truetype')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#000;
  --accent:rgb(50,255,0);
  --accent-dim:rgba(50,255,0,0.4);
  --text:rgb(50,255,0);
  --text-dim:rgba(50,255,0,0.5);
  --danger:#f87171;
  --border:rgba(50,255,0,0.15);
  --font:'VT323',monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  letter-spacing:0.1em;
  -webkit-font-smoothing:none;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}
::-webkit-scrollbar{width:0}

/* CRT scanline overlay */
#app{position:relative}
#app::before{
  content:"";display:block;position:fixed;top:0;left:0;bottom:0;right:0;
  background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.25) 50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06));
  background-size:100% 2px,3px 100%;
  pointer-events:none;z-index:999;
}

/* Text glitch animation */
@keyframes textShadow{
  0%{text-shadow:0.44px 0 1px rgba(0,30,255,0.5),-0.44px 2px 1px rgba(255,0,80,0.53),0 0 3px}
  5%{text-shadow:2.79px 0 1px rgba(0,30,255,0.75),-2.79px 2px 1px rgba(255,0,80,0.53),0 0 3px}
  10%{text-shadow:0.03px 0 1px rgba(0,30,255,0.5),-0.03px 2px 1px rgba(255,0,80,0.53),0 0 3px}
  15%{text-shadow:0.40px 0 1px rgba(0,30,255,0.75),-0.40px 0 1px rgba(255,0,80,0.53),0 0 3px}
  20%{text-shadow:3.48px 0 1px rgba(0,30,255,0.5),-3.48px 0 1px rgba(255,0,80,0.53),0 0 3px}
  25%{text-shadow:1.61px 0 1px rgba(0,30,255,0.75),-1.61px 0 1px rgba(255,0,80,0.53),0 0 3px}
  30%{text-shadow:0.70px 0 1px rgba(0,30,255,0.5),-0.70px 0 1px rgba(255,0,80,0.53),0 0 3px}
  35%{text-shadow:3.90px 0 1px rgba(0,30,255,0.75),-3.90px 0 1px rgba(255,0,80,0.53),0 0 3px}
  40%{text-shadow:3.87px 0 1px rgba(0,30,255,0.5),-3.87px 0 1px rgba(255,0,80,0.53),0 0 3px}
  45%{text-shadow:2.23px 0 1px rgba(0,30,255,0.75),-2.23px -2px 1px rgba(255,0,80,0.53),0 0 3px}
  50%{text-shadow:0.08px 0 1px rgba(0,30,255,0.5),-0.08px -2px 1px rgba(255,0,80,0.53),0 0 3px}
  55%{text-shadow:2.38px 0 1px rgba(0,30,255,0.75),-2.38px -2px 1px rgba(255,0,80,0.53),0 0 3px}
  60%{text-shadow:2.20px 0 1px rgba(0,30,255,0.5),-2.20px -2px 1px rgba(255,0,80,0.53),0 0 3px}
  65%{text-shadow:2.86px 0 1px rgba(0,30,255,0.75),-2.86px -2px 1px rgba(255,0,80,0.53),0 0 3px}
  70%{text-shadow:0.49px 0 1px rgba(0,30,255,0.5),-0.49px 0 1px rgba(255,0,80,0.53),0 0 3px}
  75%{text-shadow:1.89px 0 1px rgba(0,30,255,0.75),-1.89px 0 1px rgba(255,0,80,0.53),0 0 3px}
  80%{text-shadow:0.08px 0 1px rgba(0,30,255,0.5),-0.08px 0 1px rgba(255,0,80,0.53),0 0 3px}
  85%{text-shadow:0.10px 0 1px rgba(0,30,255,0.75),-0.10px 0 1px rgba(255,0,80,0.53),0 0 3px}
  90%{text-shadow:3.44px 0 1px rgba(0,30,255,0.5),-3.44px 0 1px rgba(255,0,80,0.53),0 0 3px}
  95%{text-shadow:2.18px 0 1px rgba(0,30,255,0.75),-2.18px 0 1px rgba(255,0,80,0.53),0 0 3px}
  100%{text-shadow:2.62px 0 1px rgba(0,30,255,0.5),-2.62px 0 1px rgba(255,0,80,0.53),0 0 3px}
}

/* Layout */
#app{
  display:flex;
  flex-direction:column;
  height:100%;
  height:100dvh;
  max-width:720px;
  margin:0 auto;
  width:100%;
  padding-top:var(--safe-top);
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
}

/* Header */
#header{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px;
  border-bottom:1px solid var(--border);
  font-size:0.9rem;
}
#header-title{color:var(--accent)}
#header-status{color:var(--text-dim);font-size:0.8rem}
#header-status .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle;
}
#header-status .dot.offline{background:var(--danger)}
#header-status .dot.loading{background:#facc15}
#header-status .dot.ready{background:var(--accent)}

/* Terminal output */
#terminal{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 16px;
  animation:textShadow 1s infinite;
  text-shadow:0 0 10px #C8C8C8;
}
.line{
  padding:1px 0;
  font-size:1rem;
  line-height:1.5;
  word-wrap:break-word;
  overflow-wrap:break-word;
  white-space:pre-wrap;
}
.line .prefix{margin-right:4px}
.line .prefix.system{color:var(--text-dim)}
.line .prefix.you{color:var(--accent-dim)}
.line .prefix.ai{color:var(--accent)}
.line .prefix.error{color:var(--danger)}
.line .content{}
.line.ascii{color:var(--accent);line-height:1.15;font-size:0.85rem}

/* Cursor blink on generating line */
.line.generating::after{
  content:'_';
  animation:blink 0.7s step-end infinite;
  color:var(--accent);
}
@keyframes blink{50%{opacity:0}}

/* Input area */
#input-area{
  flex-shrink:0;
  display:flex;
  align-items:center;
  padding:4px 16px;
  padding-bottom:calc(4px + var(--safe-bottom));
  border-top:1px solid var(--border);
}
#input-prompt{
  color:var(--accent);
  flex-shrink:0;
  margin-right:4px;
  font-family:var(--font);
  font-size:16px;
}
#chat-input{
  flex:1;
  font-family:var(--font);
  font-size:16px;
  letter-spacing:0.1em;
  line-height:1.4;
  padding:8px 4px;
  background:transparent;
  color:var(--text);
  border:none;
  outline:none;
  -webkit-font-smoothing:none;
  animation:textShadow 1s infinite;
}
#chat-input::placeholder{color:var(--text-dim)}
#chat-input:disabled{opacity:0.3}

/* PWA banner */
#pwa-banner{
  display:none;flex-shrink:0;padding:6px 16px;
  border-bottom:1px solid var(--accent);
  font-size:0.85rem;
  align-items:center;justify-content:space-between;gap:8px;
}
#pwa-banner.visible{display:flex}
#pwa-banner button{
  background:none;border:none;color:var(--accent);font-size:1.2rem;
  cursor:pointer;padding:0 4px;font-family:var(--font);
}

/* Copy toast */
.copy-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bg);color:var(--accent);padding:6px 16px;
  border:1px solid var(--accent);font-size:0.9rem;z-index:100;
  pointer-events:none;opacity:0;transition:opacity 0.2s;
  box-shadow:0 0 20px var(--accent);font-family:var(--font);
}
.copy-toast.show{opacity:1}

/* Mobile */
@media(max-width:639px){
  #app{max-width:100%}
}