/* ============================================================
   TEXTPAD — GLOBAL DESIGN TOKENS
   Palette: near-black surface, cool-slate mid, warm-white text
   Accent: electric-indigo #6C63FF (not the typical acid-green)
   Type: JetBrains Mono for editor; Inter for UI chrome
   ============================================================ */

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

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg-base:       #0f1117;
  --bg-surface:    #161b27;
  --bg-raised:     #1e2535;
  --bg-hover:      #252d40;

  --border:        #2a3347;
  --border-focus:  #6c63ff;

  --text-primary:  #e8eaf0;
  --text-secondary:#8b93a8;
  --text-disabled: #4a5166;

  --accent:        #6c63ff;
  --accent-dim:    rgba(108, 99, 255, 0.18);
  --accent-hover:  #7b74ff;

  --match-bg:      rgba(255, 213, 79, 0.30);
  --match-current: rgba(255, 213, 79, 0.75);
  --match-border:  #ffd54f;

  --success:       #4caf7d;
  --danger:        #f44362;

  /* Syntax token colors */
  --tok-keyword:   #ff6ac1;
  --tok-string:    #7ee7c7;
  --tok-comment:   #6a7288;
  --tok-function:  #82aaff;
  --tok-number:    #ffb454;
  --tok-tag:       #ff6ac1;
  --tok-attr:      #ffd54f;
  --tok-punct:     #8b93a8;
  --tok-property:  #c3a6ff;
  --tok-operator:  #8b93a8;
  --tok-title:     #e8eaf0;

  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;

  --toolbar-h:     52px;
  --find-h:        0px;   /* updated by JS when panel open */

  --font-ui:       'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --line-h:        1.65;
  --editor-fs:     14px;

  --shadow-modal:  0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
  --transition:    160ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reliably hides the native file input. This lives in the stylesheet
   (not an inline style="" attribute) because a strict style-src CSP
   without 'unsafe-inline' silently drops inline style attributes,
   which is exactly what let the native file picker show through. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.toolbar__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-right: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.brand-icon { cursor: pointer; }

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

/* ── Brand easter egg (double-click the logo) ───────────── */
.brand-easter-egg {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 150;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}

.brand-easter-egg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.toolbar__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-disabled);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-left: auto;
}

.status-sep { color: var(--border); }

.status-lang {
  color: var(--accent-hover);
  font-weight: 500;
}

.status-filename {
  color: var(--text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
  outline: none;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn svg { flex-shrink: 0; }

.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: #5a52d5; }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.btn--ghost:active { background: var(--bg-raised); }

/* ── Find & Replace Panel ────────────────────────────────── */
.find-panel {
  position: fixed;
  top: var(--toolbar-h);
  left: 0; right: 0;
  z-index: 90;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  transform: translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.find-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.find-panel__inner {
  max-width: 720px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.find-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.find-label {
  width: 56px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
  text-align: right;
  user-select: none;
}

.find-input-wrap {
  position: relative;
  flex: 1;
}

.find-input {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 5px 10px;
  outline: none;
  resize: none;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  word-wrap: normal;
  transition: border-color var(--transition);
}

/* A pasted multi-line string is preserved in the value (so matching
   works correctly) even though only the first line is visible here —
   the field is intentionally single-line in appearance. */
.find-input::-webkit-scrollbar { height: 0; }

.find-input:focus { border-color: var(--border-focus); }

.find-input::placeholder { color: var(--text-disabled); }

.find-count {
  flex-shrink: 0;
  min-width: 68px;
  text-align: center;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-disabled);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  white-space: nowrap;
}

.find-count:empty { display: none; }

.find-count.no-match {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(244, 67, 98, 0.08);
}

.find-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.find-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  outline: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.find-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-focus); }
.find-btn:active { background: var(--bg-raised); }
.find-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.find-btn--text { width: auto; padding: 0 10px; }

.find-btn--close {
  background: transparent;
  border-color: transparent;
  margin-left: 4px;
}

.find-options {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 64px;
}

.opt-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.opt-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* ── Editor Shell ────────────────────────────────────────── */
.editor-shell {
  position: fixed;
  top: var(--toolbar-h);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  transition: top var(--transition);
}

.editor-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* horizontal scroll now lives on .editor-scroll-x only */
  position: relative;
  /* NOTE: no scroll-behavior:smooth here — it would animate every
     scrollTop change, including ones set every few ms while dragging
     the custom scroll thumb, making content visibly lag behind the
     finger. Smooth scrolling is still applied selectively via JS
     (see the find-match scrollIntoView call) where a brief animation
     is actually wanted. */
}

/* ── Line Numbers ────────────────────────────────────────── */
.line-numbers {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 16px 0;
  min-width: 52px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: calc(var(--editor-fs) - 1px);
  line-height: var(--line-h);
  color: var(--text-disabled);
  user-select: none;
  counter-reset: line;
  /* numbers are rendered by JS into spans */
}

/* ── Horizontal-scroll wrapper for code text ────────────────
   Isolating horizontal overflow to just this element (rather than the
   whole .editor-wrap row) keeps the line-number gutter from ever moving
   sideways, with no sticky/pinning needed — and avoids a mobile-browser
   bug where very tall position:sticky elements fail to paint their
   background fully during horizontal scroll. */
.editor-scroll-x {
  flex: 1;
  min-width: 0;
  min-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.editor-scroll-x::-webkit-scrollbar { display: none; }
.editor-scroll-x { scrollbar-width: none; -ms-overflow-style: none; }

.line-numbers .ln {
  display: block;
  padding-right: 14px;
  padding-left: 8px;
  height: calc(var(--editor-fs) * var(--line-h));
  transition: color var(--transition);
}

.line-numbers .ln.active {
  color: var(--text-primary);
}

/* ── Editor ──────────────────────────────────────────────── */
.editor {
  flex: 1;
  min-height: 100%;
  padding: 16px 34px 40vh 20px;
  font-family: var(--font-mono);
  font-size: var(--editor-fs);
  line-height: var(--line-h);
  color: var(--text-primary);
  background: var(--bg-base);
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  tab-size: 2;
  -moz-tab-size: 2;
  caret-color: var(--accent);
  /* Critical for performance with large docs */
  contain: layout style;
}

/* Cursor blink */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Syntax highlighting (Prism tokens) ──────────────────── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.blockquote {
  color: var(--tok-comment);
  font-style: italic;
}

.token.punctuation { color: var(--tok-punct); }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--tok-tag);
}

.token.boolean,
.token.number { color: var(--tok-number); }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.code {
  color: var(--tok-string);
  font-family: var(--font-mono);
}

.token.operator,
.token.entity,
.token.url {
  color: var(--tok-operator);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--tok-keyword);
  font-weight: 500;
}

.token.function,
.token.class-name { color: var(--tok-function); }

.token.regex,
.token.important,
.token.variable { color: var(--tok-property); }

.token.title {
  color: var(--tok-title);
  font-weight: 700;
}

.token.list,
.token.hr { color: var(--tok-number); }

.token.url { text-decoration: underline; }

.token.important,
.token.bold { font-weight: 700; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* ── Highlight Overlay (find matches) ────────────────────── */
/* Matches are shown via <mark> elements injected into editor content
   rather than a separate overlay, for simpler DOM sync */
mark.find-match {
  background: var(--match-bg);
  border-radius: 2px;
  color: inherit;
  outline: none;
}

mark.find-match.current {
  background: var(--match-current);
  outline: 1px solid var(--match-border);
}

/* ── Drop hint ───────────────────────────────────────────── */
.drop-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-disabled);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--transition);
}

.drop-hint svg { opacity: 0.4; }

.drop-hint p {
  font-size: 14px;
  line-height: 1.7;
  font-family: var(--font-ui);
}

.drop-hint.hidden { opacity: 0; }

/* Drop-active state */
body.drag-over .editor-shell {
  background: var(--accent-dim);
}

body.drag-over .drop-hint {
  opacity: 1;
  color: var(--accent);
}

/* ── Download Modal ──────────────────────────────────────── */
/* Default: always hidden. Only .is-open makes it visible.    */
/* The HTML `hidden` attr alone is not reliable on mobile     */
/* browsers with bfcache — we control visibility via class.   */
.modal-backdrop {
  display: none;           /* hidden by default, period */
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal-backdrop.is-open {
  display: flex;
  animation: fade-in 140ms ease;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: var(--shadow-modal);
  animation: slide-up 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.modal__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.modal__input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition);
  margin-bottom: 20px;
}

.modal__input:focus { border-color: var(--border-focus); }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 300;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  white-space: nowrap;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.is-success { border-color: var(--success); }
.toast.is-error   { border-color: var(--danger); }

/* ── Scrollbar styling ───────────────────────────────────── */
/* Native scrollbar is hidden everywhere — replaced by the custom
   .scroll-track/.scroll-thumb below, which renders identically on
   desktop and mobile (native overlay scrollbars can't be forced
   to stay visible on touch browsers). */
.editor-wrap {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
.editor-wrap::-webkit-scrollbar { display: none; }

.scroll-track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  z-index: 6;
  pointer-events: none; /* pass-through except over the thumb itself */
}

.scroll-thumb {
  position: absolute;
  right: 5px;
  width: 22px;
  min-height: 44px;
  border-radius: 11px;
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  transition: background 120ms ease;
  display: none; /* shown by JS only when content actually overflows */
}

.scroll-thumb::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 14px;
  transform: translate(-50%, -50%);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 2px,
    transparent 2px, transparent 4px
  );
}

.scroll-thumb.is-dragging {
  background: var(--accent-hover);
  cursor: grabbing;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .toolbar { padding: 0 10px; gap: 5px; }
  .btn span { display: none; }
  .btn { padding: 0 10px; }
  .toolbar__status { display: none; }
  .brand-name { display: none; }
  .line-numbers { min-width: 38px; }
  .line-numbers .ln { padding-right: 8px; }
  .editor { padding: 12px 12px 60vh 10px; font-size: 13px; }
  .find-panel__inner { padding: 8px 10px; }
  .find-label { width: 44px; font-size: 11px; }
  .find-count { min-width: 52px; font-size: 10px; padding: 6px 5px; }
  .brand-easter-egg { left: -8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}