/**
 * Mobile Landing Page Styles
 * Full-screen faux code editor with syntax highlighting.
 * Colors match the desktop Monaco EDITOR_THEME from constants.ts.
 *
 * Font sizing: the original bot face is 60 chars wide. We calculate
 * a responsive font-size so ~64 chars fit the viewport width:
 *   available = 100vw - gutterWidth(32px) - padding(8px)
 *   fontSize  = available / (64 × 0.6)  [Fira Code char ratio]
 * No max cap — font scales freely to fill the available resolution.
 */

/* ─── Full-screen editor container ──────────────────────────────────────────── */

#mobile-landing-container {
  --editor-font-size: max(7px, calc((100vw - 40px) / 40));

  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  background: #0f1013;
  overflow: hidden;
  z-index: 100;
}

/* ─── Editor layout (gutter + code) ─────────────────────────────────────────── */
/* Parent is the vertical scroll container so gutter and code scroll in sync.   */

.mobile-editor {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  flex: 3;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Line numbers gutter ───────────────────────────────────────────────────── */

.mobile-editor-gutter {
  flex-shrink: 0;
  min-width: 32px;
  padding: 12px 0;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid #1c1d22;
  background: #0f1013;
}

.mobile-editor-line-number {
  display: block;
  padding: 0 6px 0 4px;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--editor-font-size);
  line-height: 1.5;
  color: #555;
}

/* ─── Code area ─────────────────────────────────────────────────────────────── */
/* Left-aligned pre. The bot face art has internal whitespace that provides      */
/* natural visual centering. Font scaling fills most of the available width.     */

.mobile-editor-code {
  flex: 1;
  min-width: 0;
  padding: 12px 4px 12px 6px;
  overflow-x: hidden;
}

.mobile-editor-code pre {
  margin: 0;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--editor-font-size);
  line-height: 1.5;
  white-space: pre;
  color: #FFFFFF;
}

/* ─── Syntax highlighting (EDITOR_THEME colors) ────────────────────────────── */

.mobile-editor-code .hl-cm  { color: #C5CDD9; }  /* comments — grey        */
.mobile-editor-code .hl-kw  { color: #8478E5; }  /* keywords — purple      */
.mobile-editor-code .hl-str { color: #00D4AA; }  /* strings  — green       */
.mobile-editor-code .hl-num { color: #FFB800; }  /* numbers  — amber       */

/* ─── Terminal output panel (bottom 25%) ─────────────────────────────────────── */

.mobile-terminal {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #080a0c;
  border-top: 1px solid #1c1d22;
}

/* ─── Terminal header ────────────────────────────────────────────────────────── */

.mobile-terminal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  background: #161820;
  border-bottom: 1px solid #1c1d22;
  flex-shrink: 0;
}

.terminal-title {
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 9px;
  color: #555;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Terminal body ──────────────────────────────────────────────────────────── */

.mobile-terminal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--editor-font-size);
  line-height: 1.6;
}

/* ─── Terminal line colors by type ────────────────────────────────────────────── */

.terminal-line.terminal-prompt  { color: #555;    }  /* dim grey — $ prompt    */
.terminal-line.terminal-output  { color: #FFFFFF; }  /* white — normal output  */
.terminal-line.terminal-data    { color: #8b949e; }  /* grey — JSON objects    */
.terminal-line.terminal-info    { color: #79C0FF; }  /* blue  — ℹ info        */
.terminal-line.terminal-feature { color: #8478E5; }  /* purple — ✦ features   */
.terminal-line.terminal-action  { color: #79C0FF; }  /* blue — → call to act  */

/* ─── Blinking cursor ────────────────────────────────────────────────────────── */

.terminal-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: #555;
  vertical-align: text-bottom;
  animation: terminal-blink 1s step-end infinite;
}

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