/* Code editors (template + test data): gutter, highlight overlay, tokens */

.editor { flex: 1; display: flex; min-height: 0; position: relative; background: var(--surface); }
/* drag-and-drop a text file onto the editor: highlight the drop zone while dragging over */
.editor.drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; }
.editor.drop-target::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  opacity: 0.07; z-index: 6; pointer-events: none;
}
/* whose move it is: while the agent owns the turn it also owns the files — the editors are
   read-only (set in chat.js) and get an accent strip + a not-allowed cursor as the cue */
body.agent-turn .editor::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); z-index: 5; pointer-events: none;
}
body.agent-turn #tplTA, body.agent-turn #dataTA { cursor: not-allowed; }
.gutter {
  width: 46px; flex: none;
  overflow: hidden;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  user-select: none;
}
.gutter pre {
  font-family: var(--mono); font-size: 12.5px; line-height: 20px;
  margin: 0;
  padding: 12px 8px 12px 0;
  text-align: right;
  color: var(--faint);
}
.gutter pre .eline { color: var(--danger); font-weight: 700; }
.edwrap { position: relative; flex: 1; min-width: 0; }
/* The textarea (transparent text, real caret) sits over the highlight layer
   that owns the glyphs. Their line metrics must be IDENTICAL or the caret
   drifts on long files: integer px line-height (fractional leading
   accumulates over hundreds of lines), no ligatures/kerning (advance widths),
   and the inner layer is moved with transform, which never clamps the way
   scrollTop does when layer heights disagree by a few px. */
.edwrap pre.hl, .edwrap textarea {
  position: absolute; inset: 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 20px;
  white-space: pre; word-wrap: normal;
  tab-size: 2;
  font-variant-ligatures: none; font-kerning: none; letter-spacing: 0;
}
.edwrap textarea { padding: 12px 14px; }
.edwrap pre.hl { margin: 0; padding: 0; overflow: hidden; pointer-events: none; color: var(--ink); }
.edwrap pre.hl .hl-inner { display: block; padding: 12px 14px; will-change: transform; }
.edwrap textarea {
  width: 100%; height: 100%;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink);
  border: none; resize: none; outline: none;
  overflow: auto;
}
.tok-tag  { color: var(--c-tag); }
.tok-attr { color: var(--c-attr); }
.tok-str  { color: var(--c-str); }
.tok-kw   { color: var(--c-kw); font-weight: 600; }
.tok-expr { color: var(--c-expr); }
.tok-cm   { color: var(--c-cm); font-style: italic; }

/* selection must stay translucent: the glyphs live on the highlight layer below */
.edwrap textarea::selection { background: rgba(88, 134, 255, 0.25); }

/* full-width error line painted on the highlight layer */
.edwrap pre.hl .hl-errline { background: rgba(229, 72, 77, 0.20); display: inline-block; min-width: 100%; border-radius: 3px; }

/* transient source-link bar on the template highlight layer */
.edwrap pre.hl .hl-inner { position: relative; }
.hl-line-bar { position: absolute; left: 0; right: 0; height: 20px; pointer-events: none; }
.hl-line-bar.hover { background: rgba(88, 134, 255, 0.16); }
.hl-line-bar.flash { background: rgba(88, 134, 255, 0.32); animation: hlFlash 0.9s ease-out forwards; }
@keyframes hlFlash { to { opacity: 0; } }