/* ── Vim Desert Color Scheme ── */
:root {
  --bg:          #1c1c1c;
  --fg:          #f5deb3;   /* wheat */
  --ln:          #857b6f;   /* line numbers */
  --comment:     #8a8a8a;   /* grey */
  --keyword:     #eedd82;   /* light goldenrod */
  --string:      #87ceeb;   /* skyblue */
  --identifier:  #add8e6;   /* light blue */
  --func:        #87cefa;
  --op:          #c0c0c0;
  --bracket:     #d4c4a0;
  --tilde:       #3c3c5a;   /* empty-line tildes, muted */
  --statusbg:    #6b6b00;   /* olive */
  --statusfg:    #f5deb3;
  --modebg:      #f5deb3;
  --modefg:      #1c1c1c;
  --special:     #d2691e;   /* chocolate */
  --cursor:      #f5deb3;
  --font:        'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.55;
  overflow: hidden;
}

/* ── Vim Container ── */
#vim-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* ── Buffer ── */
#buffer {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ln) var(--bg);
  position: relative;
}

/* ── Vim cursor ── */
#vim-cursor {
  position: absolute;
  width: 1ch;
  background: var(--cursor);
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: difference;
  animation: blink 1.1s step-end infinite;
  z-index: 5;
}

#buffer::-webkit-scrollbar {
  width: 6px;
}
#buffer::-webkit-scrollbar-thumb {
  background: var(--ln);
  border-radius: 3px;
}
#buffer::-webkit-scrollbar-track {
  background: var(--bg);
}

#buffer[contenteditable="true"] {
  caret-color: var(--cursor);
  outline: none;
}

/* ── Lines ── */
.line {
  display: flex;
  white-space: pre;
  min-height: 1.55em;
  padding: 0 0.5rem;
}

.line:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Line Numbers ── */
.ln {
  color: var(--ln);
  min-width: 3.5em;
  text-align: right;
  user-select: none;
  padding-right: 1.2em;
  flex-shrink: 0;
}

/* ── Syntax Tokens ── */
.comment    { color: var(--comment); font-style: italic; }
.keyword    { color: var(--keyword); font-weight: bold; }
.string     { color: var(--string); }
.identifier { color: var(--identifier); }
.func       { color: var(--func); }
.op         { color: var(--op); }
.bracket    { color: var(--bracket); }
.tilde      { color: var(--tilde); user-select: none; }

/* ── Mail link inside buffer ── */
.mail-link {
  color: var(--string);
  text-decoration: underline;
  text-decoration-color: var(--string);
  text-underline-offset: 2px;
}
.mail-link:hover {
  color: var(--keyword);
  text-decoration-color: var(--keyword);
}

/* Empty lines beyond EOF */
.empty-lines .ln { color: var(--tilde); }

/* ── Statusline ── */
#statusline {
  display: flex;
  align-items: center;
  background: var(--statusbg);
  color: var(--statusfg);
  font-size: 0.9em;
  height: 1.6em;
  gap: 0;
  user-select: none;
  flex-shrink: 0;
}

#mode {
  background: var(--modebg);
  color: var(--modefg);
  font-weight: bold;
  padding: 0 0.8em;
  height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
}

#filename {
  padding: 0 1em;
  font-weight: bold;
  flex: 1;
}

#fileinfo {
  padding: 0 1em;
  color: #c8b870;
  font-style: italic;
}

#cursor-pos {
  padding: 0 1em;
  min-width: 6em;
  text-align: right;
}

#scroll-pct {
  padding: 0 0.8em;
  min-width: 3.5em;
  text-align: right;
}

/* ── Command line ── */
#cmdline {
  background: var(--bg);
  color: var(--fg);
  height: 1.55em;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #2e2e2e;
}

#blink-cursor {
  color: var(--cursor);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ── Scrollbar fade on sides ── */
#vim-container::before,
#vim-container::after {
  content: '';
  position: fixed;
  left: 0; right: 0;
  height: 2rem;
  pointer-events: none;
  z-index: 10;
}
#vim-container::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg), transparent);
}

/* ── Help overlay ── */
#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#help-overlay.hidden {
  display: none;
}

#help-box {
  background: var(--bg);
  border: 1px solid var(--ln);
  padding: 1.5rem 2rem;
  min-width: 320px;
  font-family: var(--font);
  font-size: 0.95em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.help-line {
  display: flex;
  gap: 1.5em;
  white-space: pre;
  color: var(--fg);
}

.help-line .identifier {
  min-width: 8ch;
  color: var(--keyword);
}

#help-close {
  margin-top: 1rem;
  align-self: flex-end;
  background: none;
  border: 1px solid var(--ln);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.9em;
  padding: 0.2em 0.8em;
  cursor: pointer;
}

#help-close:hover {
  background: var(--ln);
  color: var(--bg);
}

/* ── FAQ overlay ── */
#faq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#faq-overlay.hidden {
  display: none;
}

#faq-box {
  background: var(--bg);
  border: 1px solid var(--ln);
  padding: 1.5rem 2rem;
  min-width: 340px;
  max-width: 600px;
  font-family: var(--font);
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  max-height: 80vh;
  overflow-y: auto;
}

#faq-close {
  margin-top: 1rem;
  align-self: flex-end;
  background: none;
  border: 1px solid var(--ln);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.9em;
  padding: 0.2em 0.8em;
  cursor: pointer;
}

#faq-close:hover {
  background: var(--ln);
  color: var(--bg);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #fileinfo { display: none; }
  .ln { min-width: 2.5em; padding-right: 0.8em; }
}