/* The conversation editor (2026-09-22): a plain text editor for a `.conv` screenplay, in
   the same frame as the area editor — same topbar, same inspector, same publish pill. The
   text is the thing; everything else on the page is either the list of characters or the
   compiler talking back. Deliberately NOT a node graph: Kris writes these. */
.sub-topbar { color: var(--panel-text); opacity: 0.8; font-size: 13px; }
.statusline { padding: 4px 14px; font-size: 12.5px; color: var(--ink-soft); border-top: 2px solid var(--line); background: var(--card); min-height: 24px; }
.area-picker {
  font: inherit; font-size: 15px; background: var(--plum-deep); cursor: pointer;
  max-width: 32ch; appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.area-picker:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The editor proper: a gutter of line numbers beside the textarea, the two sharing one
   line-height and one scroll offset. A textarea, not a contenteditable — the text is the
   file, and nothing may come between what is typed and what is saved. */
.conv-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--card);
  --conv-line: 21px;
  --conv-font: 13.5px/21px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --conv-pad: 10px;
}
.gutter {
  flex: none;
  width: 4.2rem;
  padding: var(--conv-pad) 8px var(--conv-pad) 0;
  margin: 0;
  overflow: hidden;
  text-align: right;
  font: var(--conv-font);
  color: var(--ink-soft);
  background: var(--cream);
  border-right: 2px solid var(--line);
  user-select: none;
}
.gutter div { height: var(--conv-line); white-space: pre; }
.gutter div.bad { color: var(--cinnabar); font-weight: 700; background: rgba(166, 43, 31, 0.12); }
.gutter div.bad::after { content: ' ●'; }
#text {
  flex: 1;
  min-width: 0;
  padding: var(--conv-pad) 12px;
  border: 0;
  resize: none;
  font: var(--conv-font);
  color: var(--ink);
  background: var(--card);
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
#text:focus { outline: none; }
.conv-editor[data-state='bad'] { box-shadow: inset 0 0 0 2px var(--cinnabar); }

/* The compiler talking back: one row per error, each a button that puts the caret there. */
.tray { flex-wrap: wrap; }
.tray:empty::after { content: 'Compiles. Every line is understood.'; color: var(--leaf); font-size: 13px; }
.conv-error {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  border: 2px solid var(--cinnabar);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font: inherit; font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.conv-error b { color: var(--cinnabar); flex: none; }

/* The cheat sheet: the format, lifted from docs/handoff/dialogue.md, beside the text. */
.cheat {
  margin: 0;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}
.cheat i { color: var(--ink-soft); font-style: italic; }
.cheat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cheat-table td { padding: 3px 6px 3px 0; vertical-align: top; border-top: 1px solid var(--line); }
.cheat-table td:first-child { white-space: nowrap; }
.cheat-table code, .inspector p code { font-size: 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; }