/* Papier — Claude's dark theme.
   Anthropic's own typefaces are proprietary and are not shipped; they are named
   first so they are used when installed, with close open faces behind them. */

:root {
  --bg-0: #30302e;
  --bg-1: #262624;
  --bg-2: #1f1e1d;
  --bg-3: #141413;
  --canvas: #181817;
  --text-1: #faf9f5;
  --text-2: #c2c0b6;
  --text-3: #9c9a92;
  --line: rgba(222, 220, 209, 0.15);
  --line-2: rgba(222, 220, 209, 0.3);
  --hover: rgba(250, 249, 245, 0.07);
  --accent: #d97757;
  --accent-strong: #c96442;
  --blue: #6a9bcc;
  --green: #788c5d;
  --danger: #e5604d;
  --font-sans: "Anthropic Sans", "Styrene B", "Styrene A", "DM Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-serif: "Anthropic Serif", "Tiempos Text", "Copernicus", "Source Serif 4", ui-serif, Georgia, serif;
  --rail: 168px;
  --claude: 392px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --inv: 1;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-1);
  color: var(--text-1);
  font: 14px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  scrollbar-color: rgba(222, 220, 209, 0.22) transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: 0.35; cursor: default; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ic { display: block; flex: none; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

#app { height: 100%; height: 100dvh; display: grid; grid-template-rows: 48px minmax(0, 1fr); }
#body {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--claude);
  min-height: 0;
  transition: grid-template-columns 0.36s var(--ease);
}
#app.no-rail #body { grid-template-columns: 0 minmax(0, 1fr) var(--claude); }
#app.no-claude #body { grid-template-columns: var(--rail) minmax(0, 1fr) 0; }
#app.no-rail.no-claude #body { grid-template-columns: 0 minmax(0, 1fr) 0; }
#app.no-rail #rail, #app.no-claude #claude { border: 0; }

/* ── top bar ── */
#topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; }
.brand-name { font: 500 18px/1 var(--font-serif); letter-spacing: -0.01em; }
#brand-mark { display: flex; }
.tb {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, transform 0.1s ease-out;
}
.tb.icon { width: 32px; padding: 0; justify-content: center; }
.tb:hover:not(:disabled) { background: var(--hover); color: var(--text-1); }
.tb:active:not(:disabled) { transform: scale(0.96); }
.tb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
#docname {
  flex: 1;
  min-width: 60px;
  max-width: 380px;
  margin: 0 auto;
  height: 30px;
  padding: 0 10px;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13.5px;
  text-overflow: ellipsis;
}
#docname:hover { background: var(--hover); }
#docname:focus { outline: none; background: var(--bg-3); border-color: var(--line-2); color: var(--text-1); }
#btn-export { background: var(--text-1); color: var(--bg-2); font-weight: 500; margin-left: 4px; }
#btn-export:hover:not(:disabled) { background: #fff; color: var(--bg-3); }
.claude-toggle { border: 1px solid var(--line); margin-left: 4px; color: var(--text-1); }
#app:not(.no-claude) .claude-toggle { background: rgba(217, 119, 87, 0.13); border-color: rgba(217, 119, 87, 0.42); }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg-3); margin: 0 4px; }
.seg button { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--text-3); }
.seg button.on { background: var(--bg-0); color: var(--text-1); }

/* ── page rail ── */
#rail { background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.rail-head { display: flex; justify-content: center; gap: 4px; padding: 8px; width: var(--rail); }
#thumbs { flex: 1; overflow-y: auto; padding: 4px 0 24px; width: var(--rail); scrollbar-width: thin; }
.thumb { position: relative; width: 122px; margin: 0 auto 14px; cursor: pointer; touch-action: none; user-select: none; }
.thumb.drag { z-index: 2; cursor: grabbing; }
.thumb:not(.drag) { transition: transform 0.22s var(--ease); }
.tpaper { background: #fff; border-radius: 3px; overflow: hidden; outline: 2px solid transparent; outline-offset: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: outline-color 0.15s; }
.thumb.active .tpaper { outline-color: var(--accent); }
.thumb.drag .tpaper { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); }
.tpaper canvas { display: block; width: 100%; height: 100%; }
.tnum { display: block; text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.thumb.active .tnum { color: var(--text-1); }
.tacts { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity 0.12s; }
.thumb:hover .tacts, .thumb:focus-within .tacts { opacity: 1; }
.thumb.drag .tacts { opacity: 0; }
.tacts button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(31, 30, 29, 0.88); color: var(--text-1); }
.tacts button:hover { background: var(--accent-strong); }

/* ── work area ── */
#work { position: relative; overflow: hidden; background: var(--canvas); min-width: 0; }
#scroller { position: absolute; inset: 0; overflow: auto; }
#content { position: relative; width: max-content; min-width: 100%; min-height: 100%; padding: 76px 84px 110px; }
#stage { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 14px 44px rgba(0, 0, 0, 0.4); touch-action: none; }
.layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.layer > canvas { position: absolute; left: 0; top: 0; display: block; }
.lines, .objs, .sel { position: absolute; inset: 0; }
.sel, .lines, .objs { pointer-events: none; }
.pnum { position: absolute; left: 0; top: calc(100% + 6px); font-size: 11.5px; color: var(--text-3); pointer-events: none; }

.obj { position: absolute; pointer-events: none; }
.obj svg { display: block; overflow: visible; pointer-events: none; }
.obj svg path { pointer-events: all; }
.obj svg path.hit { pointer-events: stroke; }
.obj img { display: block; width: 100%; height: 100%; pointer-events: auto; user-select: none; -webkit-user-drag: none; }
.obj.highlight { mix-blend-mode: multiply; }
.cover { position: absolute; pointer-events: none; }
/* Page text: identical rules for the on-page node and the hidden measuring box.
   Kerning and ligatures are off because the exported PDF draws one glyph per
   character at its plain advance; this keeps every line the same width in both. */
.txt, #measure {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "kern" 0;
  word-break: normal;
  overflow-wrap: break-word;
  tab-size: 4;
}
.txt { pointer-events: auto; cursor: default; outline: none; min-width: 2px; min-height: 1em; user-select: none; }
.txt.editing { cursor: text; user-select: text; caret-color: var(--accent-strong); }
#measure { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }

#stage[data-tool="select"] .obj :is(.txt, img, path) { cursor: move; }
#stage:is([data-tool="rect"], [data-tool="ellipse"], [data-tool="line"], [data-tool="arrow"], [data-tool="triangle"], [data-tool="polygon"], [data-tool="star"], [data-tool="pen"], [data-tool="highlight"], [data-tool="whiteout"]) .page,
#stage:is([data-tool="rect"], [data-tool="ellipse"], [data-tool="line"], [data-tool="arrow"], [data-tool="triangle"], [data-tool="polygon"], [data-tool="star"], [data-tool="pen"], [data-tool="highlight"], [data-tool="whiteout"]) .obj * { cursor: crosshair; }
#stage:is([data-tool="text"], [data-tool="edit"]) .page { cursor: text; }
#stage[data-tool="edit"] .obj .txt { cursor: text; }
#scroller.panning, #scroller.panning * { cursor: grabbing !important; }

/* PDF text lines, shown as targets while the edit-text tool is active. */
#stage[data-tool="edit"] .lines { pointer-events: auto; }
.tl { position: absolute; border-radius: 2px; display: none; }
#stage[data-tool="edit"] .tl { display: block; cursor: text; outline: calc(1px * var(--inv)) dashed rgba(106, 155, 204, 0.6); }
#stage[data-tool="edit"] .tl:hover { outline: calc(1.5px * var(--inv)) solid var(--accent-strong); background: rgba(217, 119, 87, 0.14); }

/* selection */
.selbox { position: absolute; outline: calc(1.5px * var(--inv)) solid var(--accent-strong); }
.selbox.editing { outline-style: dashed; }
.selbox.multi { outline-color: rgba(201, 100, 66, 0.75); }
.h {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px;
  background: #fff;
  border: 1.5px solid var(--accent-strong);
  border-radius: 3px;
  transform: scale(var(--inv));
  pointer-events: auto;
  touch-action: none;
}
.h::after { content: ""; position: absolute; inset: -8px; } /* generous hit area */
.h-nw { left: 0; top: 0; cursor: nwse-resize; }
.h-n { left: 50%; top: 0; cursor: ns-resize; }
.h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.h-e { left: 100%; top: 50%; cursor: ew-resize; }
.h-se { left: 100%; top: 100%; cursor: nwse-resize; }
.h-s { left: 50%; top: 100%; cursor: ns-resize; }
.h-sw { left: 0; top: 100%; cursor: nesw-resize; }
.h-w { left: 0; top: 50%; cursor: ew-resize; }
.h-rot { left: 50%; top: calc(-26px * var(--inv)); border-radius: 50%; cursor: grab; }
.h-p1, .h-p2 { border-radius: 50%; cursor: crosshair; }
.marquee { position: absolute; background: rgba(217, 119, 87, 0.12); outline: calc(1px * var(--inv)) solid var(--accent-strong); }
.pen-live { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* What an agent just touched. */
.obj.flash > * { animation: flash 1s ease-out; }
@keyframes flash {
  0% { outline: 2px solid var(--c); outline-offset: 6px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}
.obj.ghost .txt::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: text-bottom; background: var(--c); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* agent pointers */
#cursors { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.acursor { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.25s; }
.acursor.off { opacity: 0; }
.acursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
.acursor span {
  position: absolute;
  left: 15px;
  top: 17px;
  padding: 2px 8px 3px;
  border-radius: 4px 10px 10px 10px;
  background: var(--c);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ── floating chrome ── */
.glass {
  background: rgba(40, 40, 38, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 34px rgba(0, 0, 0, 0.42);
}
#tools { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 15px; }
#tools button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); transition: background 0.12s, color 0.12s, transform 0.1s ease-out; }
#tools button:hover { background: var(--hover); color: var(--text-1); }
#tools button:active { transform: scale(0.92); }
#tools button.on { background: var(--accent-strong); color: #fff; }
.tool-sep { height: 1px; margin: 4px 7px; background: var(--line); }
.flyout-wrap { position: relative; }
.flyout {
  position: absolute;
  left: calc(100% + 12px);
  top: -6px;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transform-origin: 0 24px;
  transition: opacity 0.14s, transform 0.2s var(--ease);
}
.flyout.open { opacity: 1; pointer-events: auto; transform: none; }

#props { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 13px; max-width: calc(100% - 150px); overflow-x: auto; scrollbar-width: none; white-space: nowrap; animation: drop-in 0.22s var(--ease); }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -8px); } }
#props .pb { height: 30px; min-width: 30px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; color: var(--text-2); font-size: 13px; flex: none; }
#props .pb:hover { background: var(--hover); color: var(--text-1); }
#props .pb:active { transform: scale(0.95); }
#props .pb.on { background: rgba(250, 249, 245, 0.14); color: var(--text-1); }
#props .pb.font { max-width: 150px; justify-content: space-between; padding: 0 8px 0 10px; }
#props .pb.font span { overflow: hidden; text-overflow: ellipsis; }
#props .pb b, #props .pb i, #props .pb u { font: 600 14px/1 Georgia, serif; }
#props .pb i { font-style: italic; font-weight: 500; }
#props .psep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); flex: none; }
#props .num { width: 54px; height: 28px; padding: 0 2px 0 7px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px; font-size: 13px; flex: none; }
#props .num:focus { outline: none; border-color: var(--line-2); }
#props label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); flex: none; }
#props input[type="range"] { width: 70px; accent-color: var(--accent); }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(250, 249, 245, 0.55); flex: none; }
.sw.none, .cs.none { background: linear-gradient(to top right, transparent 44%, var(--danger) 45%, var(--danger) 55%, transparent 56%), var(--bg-3) !important; }
.sw.ring { background: transparent !important; border-width: 4px; border-color: var(--c, #fff); }

#zoombar { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; padding: 3px; border-radius: 11px; }
#zoombar button { height: 28px; min-width: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#zoombar button:hover { background: var(--hover); color: var(--text-1); }
#zoom-val { width: 52px; }

/* While Claude works: breathing edge, like Claude in Chrome's page frame. */
#glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.35s; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 34px rgba(217, 119, 87, 0.42); }
#work.busy #glow { opacity: 1; animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 14px rgba(217, 119, 87, 0.2); } }
#working { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 9px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); animation: rise 0.3s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } }
.working-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.1s steps(2) infinite; }
#working-stop { height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(20, 20, 19, 0.3); color: #fff; font-size: 12.5px; }
#working-stop:hover { background: rgba(20, 20, 19, 0.5); }

#empty { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
#app.has-doc #empty { display: none; }
#app:not(.has-doc) :is(#tools, #zoombar, #props) { display: none; }
#empty h1 { margin: 18px 0 0; font: 400 34px/1.1 var(--font-serif); letter-spacing: -0.02em; }
#empty p { max-width: 430px; margin: 6px 0 16px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.empty-actions { display: flex; gap: 10px; }
#work.dropping::after { content: ""; position: absolute; inset: 10px; z-index: 8; border: 2px dashed var(--accent); border-radius: 16px; background: rgba(217, 119, 87, 0.08); pointer-events: none; }
.btn { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text-1); font-size: 14px; transition: background 0.12s, transform 0.1s ease-out; }
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--text-1); color: var(--bg-2); border-color: transparent; font-weight: 500; }
.btn.primary:hover { background: #fff; }

#toast { position: absolute; left: 50%; top: 62px; transform: translate(-50%, -8px); z-index: 9; padding: 8px 14px; border-radius: 10px; background: var(--bg-0); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s var(--ease); max-width: 80%; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── popover (menus, colours, fonts) ── */
#pop { position: fixed; z-index: 40; min-width: 170px; padding: 6px; border-radius: 13px; animation: pop-in 0.18s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } }
.mi { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); text-align: left; }
.mi:hover, .mi.cur { background: var(--hover); color: var(--text-1); }
.mi.on { color: var(--text-1); }
.mi .ic { margin-left: auto; color: var(--accent); }
.mi small { margin-left: auto; color: var(--text-3); font-size: 11.5px; }
.mlabel { padding: 8px 10px 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.fsearch { width: 260px; height: 34px; margin-bottom: 4px; padding: 0 11px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; }
.fsearch:focus { outline: none; border-color: var(--line-2); }
.flist { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.cgrid { display: grid; grid-template-columns: repeat(8, 24px); gap: 6px; padding: 6px; }
.cs { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(250, 249, 245, 0.25); transition: transform 0.1s ease-out; }
.cs:hover { transform: scale(1.14); }
.cs.on { outline: 2px solid var(--text-1); outline-offset: 2px; }
.crow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.crow input[type="color"] { width: 30px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.crow input[type="text"] { width: 84px; height: 26px; padding: 0 8px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; }

/* ── Claude panel ── */
#claude { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg-1); border-left: 1px solid var(--line); }
#claude > * { width: var(--claude); }
.c-head { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.c-logo { display: flex; }
.c-title { font: 500 18px/1 var(--font-serif); letter-spacing: -0.01em; }
.c-cost { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.c-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 8px; scrollbar-width: thin; }
.c-empty { display: flex; flex-direction: column; align-items: center; padding-top: 9vh; text-align: center; }
.c-empty h2 { margin: 16px 0 20px; max-width: 290px; font: 400 25px/1.2 var(--font-serif); letter-spacing: -0.015em; }
.chips { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 300px; }
.chip { padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text-2); font-size: 13.5px; text-align: left; transition: background 0.12s, border-color 0.12s, transform 0.1s ease-out; }
.chip:hover { background: var(--hover); border-color: var(--line-2); color: var(--text-1); }
.chip:active { transform: scale(0.98); }

#c-log { display: flex; flex-direction: column; gap: 14px; }
.msg { animation: msg-in 0.28s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg.user { align-self: flex-end; max-width: 88%; padding: 9px 14px; border-radius: 14px; background: var(--bg-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.msg.user .live { display: block; margin-top: 4px; font-size: 11px; color: var(--accent); }
.msg.claude { font: 400 15.5px/1.6 var(--font-serif); color: var(--text-1); overflow-wrap: anywhere; }
.msg.claude p { margin: 0 0 0.6em; }
.msg.claude p:last-child { margin-bottom: 0; }
.msg.claude ul { margin: 0 0 0.6em; padding-left: 1.2em; }
.msg.claude code { font: 13px ui-monospace, Consolas, monospace; background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }
.msg.note { font-size: 12.5px; color: var(--text-3); text-align: center; }
.msg.note.err { color: var(--danger); }

.run { border: 1px solid var(--line); border-radius: 14px; background: rgba(20, 20, 19, 0.35); overflow: hidden; }
.run-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-3); }
.run-head .spin { width: 12px; height: 12px; border: 1.5px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.run-head button { margin-left: auto; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.run-head button:hover { background: var(--hover); color: var(--text-1); }
.agent { padding: 10px 12px 11px; border-top: 1px solid var(--line); }
.a-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.a-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.agent.working .a-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); }
.a-title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { flex: none; padding: 1px 7px 2px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.badge.sonnet { color: var(--accent); border-color: rgba(217, 119, 87, 0.45); }
.a-clawd { margin-left: auto; flex: none; display: flex; }
.a-task { margin: 3px 0 0 16px; font-size: 12.5px; color: var(--text-3); }
.a-feed { margin: 7px 0 0 16px; display: grid; gap: 3px; max-height: 260px; overflow-y: auto; scrollbar-width: none; font-size: 12.5px; color: var(--text-3); }
.a-feed:empty { display: none; }
.fl { display: flex; gap: 7px; align-items: baseline; }
.fl::before { content: ""; width: 4px; height: 4px; margin-top: 7px; border-radius: 50%; background: var(--c); opacity: 0.8; flex: none; align-self: flex-start; }
.fl.think { font-style: italic; opacity: 0.85; }
.fl.think::before { background: var(--text-3); }
.fl.err { color: var(--danger); }
.fl.now { color: var(--text-1); }
.fl.code { display: block; }
.fl.code::before { display: none; }
.fl.code > span { display: flex; gap: 7px; align-items: baseline; }
.fl.code > span::before { content: "</>"; font: 600 10px ui-monospace, Consolas, monospace; color: var(--c); }
.fl.code pre { margin: 5px 0 2px; max-height: 150px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2); font: 11.5px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; scrollbar-width: thin; }
.fl.code:not(.live) pre { max-height: 62px; opacity: 0.75; }
.a-text { margin: 8px 0 0 16px; font: 400 14.5px/1.55 var(--font-serif); color: var(--text-1); overflow-wrap: anywhere; }
.a-text:empty { display: none; }
.a-text p { margin: 0 0 0.5em; }
.a-text p:last-child { margin: 0; }
.a-text ul { margin: 0 0 0.5em; padding-left: 1.2em; }

.c-compose { flex: none; padding: 8px 12px 8px; }
.c-targets { display: flex; gap: 5px; margin: 0 2px 7px; flex-wrap: wrap; }
.c-targets button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.c-targets button.on { color: #fff; background: var(--c, var(--bg-0)); border-color: transparent; }
.c-box { padding: 11px 9px 8px 14px; border-radius: 18px; background: var(--bg-0); border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); transition: border-color 0.15s; }
.c-box:focus-within { border-color: var(--line-2); }
#c-input { display: block; width: 100%; max-height: 190px; padding: 0 4px 0 0; background: none; border: 0; outline: none; resize: none; font-size: 15px; line-height: 1.45; }
#c-input::placeholder { color: var(--text-3); }
.c-row { display: flex; align-items: center; gap: 2px; margin: 8px 0 0 -6px; }
.pick { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; font-size: 12.5px; color: var(--text-3); }
.pick:hover { background: var(--hover); color: var(--text-1); }
.pick b { font-weight: 500; color: var(--text-2); }
.c-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; transition: transform 0.1s ease-out, background 0.12s; }
.c-btn:active:not(:disabled) { transform: scale(0.92); }
.c-btn.send { background: var(--accent-strong); color: #fff; }
.c-btn.send:hover:not(:disabled) { background: var(--accent); }
.c-btn.stop { background: var(--text-1); color: var(--bg-2); margin-right: 6px; }
.c-foot { margin-top: 7px; text-align: center; font-size: 11px; color: rgba(156, 154, 146, 0.75); }

/* ── settings ── */
dialog { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); color: var(--text-1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
dialog[open] { animation: pop-in 0.22s var(--ease); }
dialog::backdrop { background: rgba(10, 10, 9, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 16px; font: 500 22px/1.2 var(--font-serif); letter-spacing: -0.01em; }
dialog label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
dialog label > input:not([type="checkbox"]) { display: block; width: 100%; height: 38px; margin-top: 6px; padding: 0 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
dialog label > input:focus { outline: none; border-color: var(--line-2); }
dialog small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.set-row { margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.set-row small::before { content: "● "; color: var(--green); }
.set-row small.bad::before { color: var(--danger); }
dialog label.check { display: flex; align-items: center; gap: 9px; color: var(--text-1); }
dialog label.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.set-note { margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1080px) {
  :root { --claude: 340px; --rail: 0px; }
  #rail { border: 0; }
  #btn-rail { display: none; }
}
@media (max-width: 760px) {
  :root { --claude: min(340px, 86vw); }
  #body { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  #claude { position: fixed; z-index: 20; top: 48px; right: 0; bottom: 0; width: var(--claude); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); transition: transform 0.36s var(--ease); }
  #app.no-claude #claude { transform: translateX(105%); }
  #docname, .brand-name, #btn-open span, #btn-export span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--bg-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(250, 249, 245, 0.45); --text-2: #eceae2; --text-3: #d5d2c8; }
  .glass { background: var(--bg-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
}