@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=VT323&display=swap');

:root{
  --amp-bg:        #08060f;
  --amp-bg-2:      #0f0a1f;
  --amp-cyan:      #58dbff;
  --amp-cyan-dim:  #2d7ea0;
  --amp-cyan-glow: rgba(88,219,255,0.55);
  --amp-rim:       rgba(88,219,255,0.18);
  --amp-grid:      rgba(88,219,255,0.045);
  --amp-text:      #e8f4ff;
  --amp-text-mute: #6a7a90;
  --amp-warn:      #f5c344;
  --amp-err:       #ff3d3d;
  --amp-tb-1:      #1f7fdc;
  --amp-tb-2:      #0e4d8d;
  --amp-tb-3:      #082f5a;
}

/* ── Page background: deep gradient + subtle vignette + grid ── */
html, body{
  background:
    radial-gradient(ellipse at 50% 30%, #16142e 0%, var(--amp-bg) 60%, #04030a 100%) !important;
}
body::before{
  /* faint scanline overlay covering everything */
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:9990;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:overlay;
}
body::after{
  /* vignette */
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:9991;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ── Terminal window: refined chrome + depth ── */
#terminal-win{
  background:
    radial-gradient(ellipse at 30% 0%, rgba(88,219,255,0.04) 0%, transparent 55%),
    linear-gradient(180deg, #0c0820 0%, #08060f 100%) !important;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
}
#terminal-win.windowed{
  border:1px solid rgba(88,219,255,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 30px 80px -20px rgba(0,0,0,0.8),
    0 0 120px -10px rgba(88,219,255,0.12) !important;
  border-radius:2px;
}

/* Title bar — richer XP-style gradient with proper highlights, original look */
.t-titlebar{
  background:
    linear-gradient(180deg,
      #4ea5e8 0%,
      #1f7fdc 6%,
      #0e4d8d 50%,
      #0a3a72 100%) !important;
  padding:6px 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  border-bottom:1px solid #04203f;
}
.t-tb-icon-img{
  background: linear-gradient(180deg, #0d0a1b, #050308) !important;
  box-shadow:
    inset 0 0 0 1px rgba(88,219,255,0.35),
    0 0 8px rgba(88,219,255,0.25);
  color: var(--amp-cyan) !important;
  font-family:'VT323', monospace !important;
  font-size:13px !important;
}
.t-tb-title{
  font-family:'JetBrains Mono', monospace !important;
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:0.4px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.t-tb-btn{
  background: linear-gradient(180deg,#5fb0ee 0%, #2a8ad8 35%, #1463aa 100%) !important;
  border:1px solid rgba(0,0,0,0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  border-radius:2px !important;
  transition: filter 0.1s, transform 0.05s;
}
.t-tb-btn:hover{ filter: brightness(1.18); }
.t-tb-btn:active{ transform: translateY(1px); filter: brightness(0.9); }
.t-tb-btn.cls{
  background: linear-gradient(180deg,#ff7a6a 0%, #e04030 40%, #b81e10 100%) !important;
}

/* Menu bar — subtle */
.t-menubar{
  background: linear-gradient(180deg, rgba(13,10,27,0.92), rgba(8,6,15,0.92)) !important;
  border-bottom:1px solid rgba(88,219,255,0.08) !important;
  backdrop-filter: blur(2px);
}
.t-menu-item{
  font-family:'JetBrains Mono', monospace !important;
  font-size:12px !important;
  letter-spacing:0.3px;
  border-radius:2px;
  transition: background 0.12s;
}

/* ── Hero section: ASCII + info ── */
#t-main{
  padding:42px 60px 0 60px !important;
  position:relative;
}
/* faint grid behind content */
#t-main::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--amp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--amp-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events:none;
  mask-image: radial-gradient(ellipse at 30% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 30%, transparent 75%);
  z-index:0;
}
#t-top-section, #t-commands-section, #t-screen, #t-input-bar, #t-statusbar{ position:relative; z-index:1; }

#t-agent-ascii{
  filter: drop-shadow(0 0 6px rgba(88,219,255,0.35)) drop-shadow(0 0 14px rgba(88,219,255,0.15));
  position:relative;
}
#terminal-win.red-mode #t-agent-ascii{
  filter: drop-shadow(0 0 6px rgba(255,61,61,0.5)) drop-shadow(0 0 14px rgba(255,61,61,0.2)) !important;
}

/* Info panel: refined typography */
#t-info{
  font-family:'JetBrains Mono', monospace !important;
}
.t-info-line{
  font-family:'JetBrains Mono', monospace !important;
  font-size:13px !important;
  letter-spacing:0.5px !important;
  line-height:1.7 !important;
  color: var(--amp-text) !important;
}
.t-info-line.subtle{
  color: var(--amp-text-mute) !important;
  font-size:12px !important;
}
#t-greeting{
  color: var(--amp-cyan) !important;
  text-shadow: 0 0 12px rgba(88,219,255,0.45);
  margin-top:6px !important;
}

/* Dashed brand box — animated rim + breathing */
.t-dash-box{
  display:block !important;
  position:relative;
  border:none !important;
  padding:14px 22px !important;
  margin:14px 0 !important;
  color: var(--amp-cyan) !important;
  font-family:'JetBrains Mono', monospace !important;
  font-weight:700 !important;
  letter-spacing:2.4px !important;
  font-size:12px !important;
  text-shadow: 0 0 12px rgba(88,219,255,0.6), 0 0 2px rgba(88,219,255,0.9);
  background:
    linear-gradient(90deg, rgba(88,219,255,0.04), rgba(88,219,255,0.10), rgba(88,219,255,0.04));
  text-align:center;
  overflow:hidden;
  clip-path:inset(0);
  isolation:isolate;
}
.t-dash-box::before{
  /* dashed rim */
  content:"";
  position:absolute; inset:0;
  border:1px dashed var(--amp-cyan);
  opacity:0.85;
  pointer-events:none;
  animation: ampDashFlow 18s linear infinite;
  background-image:
    linear-gradient(90deg, var(--amp-cyan) 50%, transparent 50%),
    linear-gradient(90deg, var(--amp-cyan) 50%, transparent 50%),
    linear-gradient(0deg, var(--amp-cyan) 50%, transparent 50%),
    linear-gradient(0deg, var(--amp-cyan) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  border:none;
}
@keyframes ampDashFlow{
  to{ background-position: 200px 0, -200px 100%, 0 -200px, 100% 200px; }
}
.t-dash-box::after{
  /* sweeping highlight */
  content:"";
  position:absolute; top:0; bottom:0;
  width:80px; left:-100px;
  background: linear-gradient(90deg, transparent, rgba(88,219,255,0.35), transparent);
  animation: ampSweep 4.5s cubic-bezier(.6,0,.4,1) infinite;
  pointer-events:none;
}
@keyframes ampSweep{
  0%   { left:-120px; opacity:0; }
  20%  { opacity:1; }
  60%  { opacity:1; }
  80%  { opacity:0; }
  100% { left:calc(100% + 20px); opacity:0; }
}

/* ── COMMANDS section ── */
#t-commands-section{ margin-top:18px; }
.t-section-divider{
  font-family:'JetBrains Mono', monospace !important;
  font-size:11px !important;
  color: var(--amp-cyan-dim) !important;
  letter-spacing:2.5px !important;
  font-weight:600 !important;
  text-transform: uppercase;
  display:flex; align-items:center; gap:10px;
}
.t-section-divider::before{
  content:"◆";
  color: var(--amp-cyan);
  text-shadow: 0 0 8px var(--amp-cyan-glow);
  font-size:8px;
}

.t-cmd-box{
  position:relative;
  border:1px solid rgba(88,219,255,0.30) !important;
  background:
    linear-gradient(180deg, rgba(13,30,50,0.5), rgba(8,12,24,0.5)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    0 0 30px rgba(88,219,255,0.06),
    inset 0 0 60px rgba(88,219,255,0.04);
  padding:14px 18px !important;
  border-radius:2px;
  overflow:hidden;
}
/* corner brackets */
.t-cmd-box::before, .t-cmd-box::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:2px solid var(--amp-cyan);
  pointer-events:none;
}
.t-cmd-box::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.t-cmd-box::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }

.t-cmd-cell{
  position:relative;
  padding:6px 10px !important;
  border-radius:2px;
  cursor:pointer;
  transition: background 0.12s, transform 0.08s;
}
.t-cmd-cell:hover{
  background: rgba(88,219,255,0.08);
}
.t-cmd-cell:hover::before{
  content:"▸";
  position:absolute; left:-4px;
  color: var(--amp-cyan);
  text-shadow: 0 0 6px var(--amp-cyan-glow);
}
.t-cmd-name{
  color: var(--amp-cyan) !important;
  font-family:'JetBrains Mono', monospace !important;
  font-weight:600 !important;
  text-shadow: 0 0 6px rgba(88,219,255,0.4);
}
.t-cmd-desc{
  color: #aab8cc !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:12px !important;
  letter-spacing:0.2px;
}

/* ── Screen area (responses) ── */
#t-screen{
  font-family:'JetBrains Mono', monospace !important;
  padding-top:18px;
}
.t-line{ font-family:'JetBrains Mono', monospace !important; letter-spacing:0.3px; }

/* ── Input bar — refined ── */
#t-input-bar{
  border-top:1px solid rgba(88,219,255,0.16) !important;
  padding:16px 60px !important;
  background:
    linear-gradient(180deg, rgba(8,6,15,0.0), rgba(13,30,50,0.35));
  position:relative;
}
#t-input-bar::before{
  content:"";
  position:absolute; left:60px; right:60px; top:-1px; height:1px;
  background: linear-gradient(90deg, transparent, var(--amp-cyan-glow), transparent);
  opacity:0.6;
  animation: ampInputBeam 6s ease-in-out infinite;
}
@keyframes ampInputBeam{
  0%,100%{ opacity:0.25; }
  50%    { opacity:0.7;  }
}
.t-prompt{
  color: var(--amp-cyan) !important;
  text-shadow: 0 0 8px var(--amp-cyan-glow);
  font-weight:700;
  font-size:15px;
}
#t-cmd-in{
  font-family:'JetBrains Mono', monospace !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  color: var(--amp-text) !important;
  font-size:14px !important;
  caret-color: var(--amp-cyan);
  letter-spacing:0.4px;
  margin-left:10px;
}
#t-cmd-in::placeholder{ color: var(--amp-text-mute); }

/* ── Status bar ── */
#t-statusbar{
  background: linear-gradient(180deg, rgba(13,30,50,0.45), rgba(8,6,15,0.7)) !important;
  border-top:1px solid rgba(88,219,255,0.12) !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:10.5px !important;
  letter-spacing:1.2px !important;
  text-transform: uppercase;
  color: var(--amp-text-mute) !important;
  padding:8px 60px !important;
  display:flex; gap:24px; align-items:center;
}
#t-statusbar > span{ display:flex; align-items:center; gap:8px; }
#t-statusbar > span:first-child::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background: #6effa6;
  box-shadow: 0 0 8px #6effa6, 0 0 2px #fff;
  animation: ampPulse 2.2s ease-in-out infinite;
}
@keyframes ampPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.45; transform:scale(0.85); }
}
#t-status-wallet{ color:#aab8cc !important; }
#t-status-wallet::before{
  content:"◎"; color:var(--amp-cyan); margin-right:4px;
  text-shadow:0 0 6px var(--amp-cyan-glow);
}

/* signal strength dots in status bar */
#amp-signal{
  margin-left:auto !important;
  display:flex; gap:3px; align-items:flex-end;
}
#amp-signal .bar{
  width:3px; background: var(--amp-cyan);
  box-shadow:0 0 4px var(--amp-cyan-glow);
  animation: ampSignal 1.8s ease-in-out infinite;
}
#amp-signal .bar:nth-child(1){ height:4px;  animation-delay:0s; }
#amp-signal .bar:nth-child(2){ height:7px;  animation-delay:0.15s; }
#amp-signal .bar:nth-child(3){ height:10px; animation-delay:0.3s; }
#amp-signal .bar:nth-child(4){ height:13px; animation-delay:0.45s; }
@keyframes ampSignal{
  0%,100%{ opacity:0.35; }
  50%    { opacity:1; }
}
#amp-uptime{ color:var(--amp-text-mute); letter-spacing:1.5px; }

/* ── Red error mode polish ── */
#terminal-win.red-mode{
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,61,61,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #1a0808 0%, #08020a 100%) !important;
}
#terminal-win.red-mode #t-main::before{
  background-image:
    linear-gradient(rgba(255,61,61,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,61,61,0.05) 1px, transparent 1px);
}
#terminal-win.red-mode .t-dash-box{
  color: var(--amp-err) !important;
  background: linear-gradient(90deg, rgba(255,61,61,0.04), rgba(255,61,61,0.10), rgba(255,61,61,0.04)) !important;
  text-shadow: 0 0 12px rgba(255,61,61,0.6) !important;
}
#terminal-win.red-mode .t-dash-box::before{
  background-image:
    linear-gradient(90deg, var(--amp-err) 50%, transparent 50%),
    linear-gradient(90deg, var(--amp-err) 50%, transparent 50%),
    linear-gradient(0deg, var(--amp-err) 50%, transparent 50%),
    linear-gradient(0deg, var(--amp-err) 50%, transparent 50%);
}
#terminal-win.red-mode .t-dash-box::after{
  background: linear-gradient(90deg, transparent, rgba(255,61,61,0.35), transparent);
}
#terminal-win.red-mode .t-cmd-box{
  border-color: rgba(255,61,61,0.35) !important;
}
#terminal-win.red-mode .t-cmd-box::before,
#terminal-win.red-mode .t-cmd-box::after{ border-color: var(--amp-err) !important; }
#terminal-win.red-mode .t-cmd-name{
  color: var(--amp-err) !important;
  text-shadow: 0 0 6px rgba(255,61,61,0.45) !important;
}
#terminal-win.red-mode .t-section-divider{ color: rgba(255,61,61,0.65) !important; }
#terminal-win.red-mode .t-section-divider::before{ color: var(--amp-err); text-shadow:0 0 6px rgba(255,61,61,0.6); }
#terminal-win.red-mode .t-prompt,
#terminal-win.red-mode #t-cmd-in{ caret-color: var(--amp-err); }
#terminal-win.red-mode .t-prompt{ color: var(--amp-err) !important; text-shadow: 0 0 8px rgba(255,61,61,0.55); }
#terminal-win.red-mode #t-status-wallet::before{ color: var(--amp-err); text-shadow:0 0 6px rgba(255,61,61,0.55); }

/* ── CRT overlay (subtle, on terminal only) ── */
#terminal-win::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:200;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.06) 3px,
      rgba(0,0,0,0.06) 3px
    );
  mix-blend-mode: multiply;
}

/* ── Particle motes layer ── */
#amp-motes{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
#amp-motes .mote{
  position:absolute;
  width:2px; height:2px;
  background: var(--amp-cyan);
  border-radius:50%;
  box-shadow: 0 0 6px var(--amp-cyan-glow);
  opacity:0;
  animation: ampMote linear infinite;
}
@keyframes ampMote{
  0%   { transform: translateY(20px); opacity:0; }
  10%  { opacity:0.8; }
  90%  { opacity:0.8; }
  100% { transform: translateY(-100vh); opacity:0; }
}

/* ── Tweaks panel chrome lift (if rendered later) ── */

/* ── Responsive fallback for small / phone modes ── */
@media (max-width: 700px){
  #t-main{ padding:24px 22px 0 22px !important; }
  #t-input-bar, #t-statusbar{ padding-left:22px !important; padding-right:22px !important; }
  #t-top-section{ flex-direction:column !important; gap:18px !important; }
  #t-agent-ascii{ flex:0 0 auto !important; max-width:100% !important; font-size:4.5px !important; }
}

/* ── Subtle screen flicker (CRT style) ── */
@keyframes ampFlicker{
  0%, 96%, 100%{ filter: brightness(1); }
  97%          { filter: brightness(0.85); }
  98%          { filter: brightness(1); }
  99%          { filter: brightness(0.9); }
}
/* #terminal-win{ animation: ampFlicker 9s infinite; } */