/* EditPilot Agent — design tokens (white / black / red) */
:root {
  --bg: #ffffff; --panel: #f7f7f7; --panel2: #efefef; --ink: #141414; --muted: #666666;
  --line: #e8e8e8; --faint: #9e9e9e; --red: #E00000; --mid: #CC0000; --deep: #990000;
  --ok: #1f9e54; --noteBg: rgba(255,0,0,.05); --okBg: rgba(40,160,90,.08);
  --stage-bg: radial-gradient(900px 540px at 80% -12%, #fff2f2 0%, #ffffff 58%);
  --shadow: 0 10px 30px rgba(20,20,20,.09), 0 1px 3px rgba(20,20,20,.05);
  --surround: #f2f2f2; --code: #fafafa;
  --f-head: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Thai", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000; --panel: #161616; --panel2: #1f1f1f; --ink: #fff; --muted: #9e9e9e; --line: #2a2a2a;
    --faint: #666; --red: #FF2A2A; --ok: #46d17e; --noteBg: rgba(255,0,0,.09); --okBg: rgba(70,209,126,.10);
    --stage-bg: radial-gradient(900px 540px at 80% -12%, #1a0b0c 0%, #000 60%);
    --shadow: 0 12px 36px rgba(0,0,0,.46), 0 1px 3px rgba(0,0,0,.4); --surround: #0a0a0a; --code: #111;
  }
}
:root[data-theme="dark"] {
  --bg: #000; --panel: #161616; --panel2: #1f1f1f; --ink: #fff; --muted: #9e9e9e; --line: #2a2a2a;
  --faint: #666; --red: #FF2A2A; --ok: #46d17e; --noteBg: rgba(255,0,0,.09); --okBg: rgba(70,209,126,.10);
  --stage-bg: radial-gradient(900px 540px at 80% -12%, #1a0b0c 0%, #000 60%);
  --shadow: 0 12px 36px rgba(0,0,0,.46), 0 1px 3px rgba(0,0,0,.4); --surround: #0a0a0a; --code: #111;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.red { color: var(--red); }
.mono { font-family: var(--f-mono); }

/* ---------- shared bits ---------- */
.kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 12px; font-weight: 700; }
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--red); border-radius: 2px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; font-weight: 600; }
.chip svg { width: 16px; height: 16px; color: var(--red); flex: none; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; text-decoration: none; border: 0; box-shadow: 0 10px 24px rgba(224,0,0,.28); }
.btn:hover { background: var(--mid); }
.btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; opacity: .9; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 600; }
.pill svg { width: 15px; height: 15px; }

/* setup visibility: hide content for the other agent / OS */
body[data-agent="claude"] [data-agent="codex"],
body[data-agent="codex"] [data-agent="claude"],
body[data-os="win"] [data-os="mac"],
body[data-os="mac"] [data-os="win"] { display: none !important; }

/* segmented setup picker */
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); gap: 4px; }
.seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(224,0,0,.25); }
.seg button svg { width: 16px; height: 16px; }
.setup-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.setup-label { font-size: 13px; color: var(--muted); font-weight: 600; min-width: 64px; }

/* tags that mark variant-only content */
.tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--red); color: #fff; vertical-align: middle; }
.tag.os { background: var(--ink); color: var(--bg); }

/* prompt box */
.pbox { border: 1px solid var(--line); border-radius: 14px; background: var(--code); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pbox-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 0 14px; }
.plabel { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; font-weight: 700; color: #fff; background: var(--red); padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.cpy { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px; }
.cpy svg { width: 14px; height: 14px; }
.cpy.done { background: var(--ok); }
.prompt { margin: 0; padding: 12px 16px 16px; font-family: var(--f-mono); font-size: 13.4px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; overflow: auto; color: var(--ink); }

.note { border-left: 3px solid var(--red); background: var(--noteBg); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; }
.okbox { border-left: 3px solid var(--ok); background: var(--okBg); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; }
.hand { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--panel); border: 1px dashed var(--faint); font-size: 15px; line-height: 1.55; }
.hand b.h { flex: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; background: var(--ink); color: var(--bg); padding: 4px 8px; border-radius: 6px; margin-top: 2px; }

/* lightbox */
.lb { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 999; padding: 28px; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-x { position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; }
img.zoom { cursor: zoom-in; }

/* theme toggle icons */
.toggle .sun { display: none; }
:root[data-theme="dark"] .toggle .sun { display: block; }
:root[data-theme="dark"] .toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toggle .sun { display: block; }
  :root:not([data-theme="light"]) .toggle .moon { display: none; }
}