/* Theme variables are set by ThemeManager.applyToCSSVariables()
 * Fallback values provide reasonable defaults for initial render
 * before ThemeManager initializes.
 *
 * Variables provided by ThemeManager:
 *   --theme-bg, --theme-fg
 *   --theme-cursor-bg, --theme-cursor-fg
 *   --theme-statusline-bg, --theme-statusline-fg
 *   --theme-mode-normal, --theme-mode-insert, --theme-mode-visual, --theme-mode-command
 *   --theme-line-number, --theme-line-number-active
 *   --theme-selection-bg
 *   --theme-border, --theme-accent
 *   --theme-popup-bg, --theme-popup-fg
 *   --theme-menu-selected-bg
 *   --theme-text-muted, --theme-text-accent
 */
:root {
  /* Fallback values for pre-ThemeManager render (Dark theme defaults) */
  --theme-bg: #282c34;
  --theme-fg: #abb2bf;
  --theme-cursor-bg: #61afef;
  --theme-cursor-fg: #282c34;
  --theme-statusline-bg: #21252b;
  --theme-statusline-fg: #abb2bf;
  --theme-mode-normal: #61afef;
  --theme-mode-insert: #98c379;
  --theme-mode-visual: #c678dd;
  --theme-mode-command: #e5c07b;
  --theme-line-number: #4b5263;
  --theme-line-number-active: #abb2bf;
  --theme-selection-bg: #3e4451;
  --theme-border: #3e4451;
  --theme-accent: #61afef;
  --theme-popup-bg: #21252b;
  --theme-popup-fg: #abb2bf;
  --theme-menu-selected-bg: #3e4451;
  --theme-text-muted: #5c6370;
  --theme-text-accent: #e06c75;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--theme-bg);
  color: var(--theme-fg);
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#statusline {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-statusline-bg);
  color: var(--theme-statusline-fg);
  font-size: 12px;
}

#mode {
  font-weight: bold;
  padding: 0 0.5rem;
  border-radius: 2px;
}

#mode.normal {
  background-color: var(--theme-mode-normal);
  color: var(--theme-bg);
}

#mode.insert {
  background-color: var(--theme-mode-insert);
  color: var(--theme-bg);
}

#mode.visual,
#mode.visual-line,
#mode.visual-block {
  background-color: var(--theme-mode-visual);
  color: var(--theme-bg);
}

#editor {
  flex: 1;
  position: relative;
  padding: 0.5rem;
  overflow: auto;
}

#buffer {
  white-space: pre;
  min-height: 100%;
}

.line {
  display: flex;
}

.line-number {
  color: var(--theme-line-number);
  text-align: right;
  padding-right: 1rem;
  min-width: 3rem;
  user-select: none;
}

.line-content {
  flex: 1;
}

#cursor {
  position: absolute;
  background-color: var(--theme-cursor-bg);
  color: var(--theme-cursor-fg);
  width: 0.6em;
  height: 1.5em;
  animation: blink 1s step-end infinite;
  z-index: 10; /* Ensure cursor is visible over selection */
}

#cursor.insert {
  width: 2px;
}

#cursor.visual {
  background-color: var(--theme-selection-bg);
  border: 1px solid var(--theme-mode-visual);
  animation: none; /* No blink in visual mode */
}

/* Selection highlighting (Phase 9.1) */
.line-content .selected {
  background-color: var(--theme-selection-bg);
  border-radius: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#commandline {
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-bg);
  min-height: 1.5rem;
}

/* Connection status indicator */
#app.disconnected #statusline::after {
  content: "DISCONNECTED";
  color: var(--theme-text-accent);
  margin-left: auto;
}

#app.connecting #statusline::after {
  content: "CONNECTING...";
  color: var(--theme-mode-command);
  margin-left: auto;
}
