/* Retro Terminal Blog Styles */
:root {
  --bg: #0a0f0a;
  --text: #3cff3c;
  --dim: #2a552a;
  --accent: #9eff9e;
  --error: #ff5555;
  --font: 'Courier New', Courier, monospace;
}
html,body { height:100%; margin:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* keep content at top */
  padding: 18px 18px 48px;
  min-height: 100vh;
  overflow-y: hidden;
}
#terminal {
  width: min(960px, 100%);
  border: 2px solid var(--dim);
  padding: 12px;
  box-shadow: 0 0 12px #072807, inset 0 0 24px #072807;
  position: relative;
  overflow: visible; /* allow suggestions to escape */
  margin-top: 0; /* sit near top */
}
#terminal:before { /* subtle scanline */
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 4px);
  pointer-events:none;
}
#output {
  flex:1;
  overflow-y: auto;
  line-height: 1.3;
  padding-right:4px;
  scroll-behavior: smooth; /* smooth scrolling when commands executed */
}
.prompt { margin-right: 6px; color: var(--accent); }
#prompt-line { display:flex; align-items:center; margin-top:8px; position:relative; }
#command-input {
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  caret-color: var(--accent);
}
#command-input::selection { background: var(--accent); color: var(--bg); }

.entry { margin:0; white-space:pre-wrap; }
.entry.system { color: var(--accent); }
.entry.error { color: var(--error); }
.entry.title { font-weight:bold; text-decoration:underline; }

#suggestions {
  position:absolute;
  background: rgba(10,15,10,0.95);
  border:1px solid var(--dim);
  top:100%; left: 0;
  width: clamp(240px, 50%, 380px);
  z-index:20;
  font-size:14px;
  max-height:240px;
  overflow-y:auto;
  box-shadow: 0 4px 10px #021502;
}
#suggestions.drop-up {
  top:auto;
  bottom:100%;
  box-shadow: 0 -4px 10px #021502;
}
#suggestions div { padding:4px 6px; cursor:pointer; }
#suggestions div.active, #suggestions div:hover { background: var(--dim); }

.markdown h1,.markdown h2,.markdown h3 { margin:8px 0 4px; }
.markdown h1 { font-size:22px; }
.markdown h2 { font-size:18px; }
.markdown h3 { font-size:16px; }
.markdown p { margin:4px 0; }
.markdown code { background: #021d02; padding:2px 4px; border-radius:3px; }
.markdown pre { background:#021d02; padding:8px; overflow:auto; }
.markdown a { color: var(--accent); }
.markdown ul { margin:4px 0 4px 18px; }

/* Blinking cursor effect on prompt arrow */
.prompt:after {
  content:'_';
  animation: blink 1s steps(2, start) infinite;
  margin-left:2px;
}
@keyframes blink { to { visibility:hidden; } }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#081308; }
::-webkit-scrollbar-thumb { background:#154c15; }
::-webkit-scrollbar-thumb:hover { background:#1f6e1f; }

/* Bottom prompt layout always active */
#terminal.bottom-prompt {
  height: 85vh;
  display:flex;
  flex-direction:column;
}
#terminal.bottom-prompt #prompt-line {
  margin-top:8px;
  display:flex;
}
/* Suggestions appear above only if overflow detected (handled by JS) */

/* Image hover preview */
.img-hover-preview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border: 1px solid var(--dim);
  background: #000;
  padding: 4px;
  box-shadow: 0 0 12px #072807;
  max-width: 860px;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-hover-preview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.markdown a.img-link {
  position: relative;
  text-decoration: underline dotted;
}