/* The marking workspace: the script, the comments beside it, the marks under it and the copilot next to it.
   Loaded after tokens.css and app.css. It is also what the website's guided demo shows, so it leans only on the tokens
   and on its own classes (ws-), never on the page around it.

   Top to bottom: header (who, state, save, previous and next), then two columns. Left: a fixed toolbar, the document
   with its comment gutter in one scrolling area that shares one set of coordinates, and a fixed marks and actions bar.
   Right: the copilot, with its own fixed header and composer and its own scrolling history. */
.ws { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); --chat-w: var(--ws-chat); --gutter-w: var(--ws-gutter); --lane: 20px; }
.ws-attn { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ header */
.ws-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; min-height: 44px; }
.ws-id { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; flex: 1 1 320px; }
.ws-id .crumb { margin: 0; font-size: var(--fs-sm); }
.ws-id h1 { margin: 0; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.ws-facts { flex-basis: 100%; }
.ws-head-r { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.ws-step { display: inline-flex; align-items: center; gap: 6px; }
.ws-chat-btn[aria-expanded="true"] { background: var(--green-fill); border-color: var(--green-line); color: var(--green-ink); }
.savestate[data-state="locked"]::before { background: var(--muted); }
.ws-views { display: none; }

/* ------------------------------------------------------------------ the two columns */
.ws-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ws-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; }

/* toolbar: what the document shows, the marking tools, zoom and pages. Fixed above the document. */
.ws-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 6; }
.ws-sp { flex: 1; }
.ws-file { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; min-height: 28px; }
.ws-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface-2); }
.ws-seg button { min-height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 500 var(--fs-sm)/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast); }
.ws-seg button:hover { color: var(--ink); }
.ws-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.ws-tg { display: inline-flex; align-items: center; gap: 2px; }
.ws-tg + .ws-tg, .ws-seg + .ws-tg { padding-left: 8px; border-left: 1px solid var(--line); }
.tl { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--ink-2);
  font: 500 var(--fs-sm)/1 var(--font); white-space: nowrap; cursor: pointer; list-style: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.tl::-webkit-details-marker { display: none; }
.tl:hover { background: var(--surface-2); color: var(--ink); }
.tl:active { background: var(--surface-3); }
.tl.on, .tl[aria-pressed="true"] { background: var(--green-fill); border-color: var(--green-line); color: var(--green-ink); }
.tl .ic { width: 16px; height: 16px; }
.ws-tools select { width: auto; max-width: 132px; min-height: 28px; padding: 0 24px 0 8px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.ws-tools output { min-width: 40px; text-align: center; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ws[data-view="text"] [data-for="scan"] { display: none; }
/* The marking tools show as icons, each with its name for screen readers and as a tip; the names are written out when
   there is room. The script measures the column and sets data-w (xl, l, m, s): a container query would do it too, but it
   would also trap the note that rises from the bottom edge on a phone inside this column. */
.ws-tg[role="toolbar"] .tl span, .ws[data-w="m"] .ws-tools > .tl span, .ws[data-w="m"] .ws-tools > details .tl span, .ws[data-w="s"] .ws-tools > .tl span, .ws[data-w="s"] .ws-tools > details .tl span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ws[data-w="xl"] .ws-tg[role="toolbar"] .tl span { position: static; width: auto; height: auto; clip-path: none; }
.ws[data-w="m"] .ws-tools select { max-width: 104px; }
.ws[data-w="s"] .ws-tools select { max-width: 72px; } .ws[data-w="s"] .ws-seg button { padding: 0 7px; } .ws[data-w="s"] .ws-tools output { min-width: 34px; }

/* ------------------------------------------------------------------ the document and its gutter: one scrolling area, one set of coordinates */
.ws-doc { flex: 1; min-height: 0; overflow: auto; background: var(--bg); overscroll-behavior: contain; }
.ws-doc:focus-visible { outline-offset: -2px; }
/* The page and its gutter sit together in the middle. At 100% a page is as wide as the room allows up to a comfortable
   reading width; zooming scales from there, and past the edge the gutter stays in view at the right. */
.ws-canvas { position: relative; display: flex; align-items: stretch; justify-content: center; width: max-content; min-width: 100%; min-height: 100%; --page-w: 820px; }
.ws-sheet { flex: none; width: calc(min(var(--doc-w, 60vw) - var(--gutter-w), var(--page-w) + 28px) * var(--z, 1)); padding: var(--sp-4) var(--sp-3) var(--sp-10) var(--sp-4); }
.ws[data-view="text"] .ws-sheet { width: min(var(--doc-w, 60vw) - var(--gutter-w), var(--page-w) + 28px); }
.ws-sheet > .note, .ws-pages > .note, .ws-text > .note { margin-bottom: var(--sp-3); }
.ws-q { margin-bottom: var(--sp-3); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--fs-sm); color: var(--ink-2); }
.ws[data-view="text"] .ws-pages, .ws:not([data-view="text"]) .ws-text { display: none; }
.ws:not([data-view="ai"]) .ws-ai-note { display: none; }
.ws-pg { position: relative; margin: 0 0 var(--sp-3); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ws-pg img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.ws-pg .ov, .ws-pg .pl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-pg .pl { pointer-events: none; }
.ws-pg .ov { touch-action: pan-x pan-y; }
.ws-pages[data-tool="draw"] .ov, .ws-pages[data-tool="tick"] .ov, .ws-pages[data-tool="cross"] .ov, .ws-pages[data-tool="text"] .ov, .ws-pages[data-tool="code"] .ov { touch-action: none; cursor: crosshair; }
.ws-pages[data-tool="erase"] .ov, .ws-pages[data-tool="move"] .ov { touch-action: none; cursor: pointer; }
.ws-codes { padding: 4px 2px 0; line-height: 1.6; }
.ws-text { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3) var(--sp-4) var(--sp-4); max-width: 86ch; }
.ws-text .script { padding: 4px 0; line-height: var(--lh-read); }
.ws-text .script.zh { line-height: 2; }
.ws-fix { margin-top: var(--sp-2); }
.ws-fix form { margin-top: var(--sp-2); }

/* A comment on the script: a wash over its words in the hue of its kind, and a 4 px marker at its start. Selecting it turns
   the wash pale green. Hue never says reviewed or not: that is written on the note. */
.ws .ov .hl { fill: var(--cat-content); fill-opacity: 0.1; stroke: none; cursor: pointer; transition: fill-opacity var(--t-fast), fill var(--t-fast); }
.ws .ov .hl.cat-language { fill: var(--cat-language); } .ws .ov .hl.cat-strength { fill: var(--cat-strength); }
.ws .ov .hl.is-hover { fill-opacity: 0.2; }
.ws .ov .hl.is-selected { fill: var(--green); fill-opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: ws-pick var(--t-select) var(--ease-out); }
.ws .ov .mkr { fill: none; stroke: var(--cat-content); stroke-width: 4px; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: stroke-width var(--t-fast), stroke var(--t-fast); }
.ws .ov .mkr.cat-language { stroke: var(--cat-language); } .ws .ov .mkr.cat-strength { stroke: var(--cat-strength); }
.ws .ov .mkr.is-hover, .ws .ov .mkr.is-selected { stroke-width: 5px; }
.ws .ov .mkr.is-selected { stroke: var(--green); }
.ws .ov .un { fill: none; stroke: var(--warn); stroke-opacity: 0.8; stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ws .ov .stroke { fill: none; stroke: #d92d20; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ws .ov .note { fill: #d92d20; font-size: 24px; font-weight: 600; font-family: var(--font); }
.ws .ov .band { fill: hsl(146 68% 32% / 0.12); stroke: var(--green); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.ws.no-marks .ov .cmts, .ws.no-marks .ov .unclear, .ws.no-marks .ws-links { display: none; }
.ws .script mark { background: var(--cat-content-fill); border-bottom: 2px solid var(--cat-content); border-radius: 2px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.ws .script mark.cat-language { background: var(--cat-language-fill); border-color: var(--cat-language); }
.ws .script mark.cat-strength { background: var(--cat-strength-fill); border-color: var(--cat-strength); }
.ws .script mark.is-hover { filter: brightness(0.96); }
.ws .script mark.is-selected { background: hsl(146 50% 86%); border-color: var(--green); outline: 0; }
.ws.no-marks .script mark { background: none; border-color: transparent; }
@keyframes ws-pick { from { transform: scale(0.98); fill-opacity: 0.08; } }

/* the gutter: one compact pill for each comment, level with its words where there is room, and one opened note */
.ws-gutter { position: sticky; right: 0; z-index: 3; flex: none; width: var(--gutter-w); background: var(--bg); }
.ws-gutter-h { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; padding: 10px 8px 6px var(--lane); background: var(--bg); line-height: 1.3; }
.ws-notes { position: relative; padding-bottom: var(--sp-6); }
.ws-note { margin: 0 8px 6px var(--lane); }
.ws.is-laid .ws-note { position: absolute; left: var(--lane); right: 8px; top: 0; margin: 0; }
.ws-notes .empty { padding: var(--sp-4) 8px var(--sp-4) var(--lane); text-align: left; font-size: var(--fs-sm); }
.ws-unplaced { position: absolute; left: var(--lane); right: 8px; font-size: var(--fs-xs); color: var(--muted); }
.ws-pill { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2);
  font: 400 var(--fs-xs)/1 var(--font); text-align: left; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.ws-pill:hover, .ws-note.is-hover .ws-pill { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.ws-pill:focus-visible { border-radius: var(--r-pill); }
.ws-n { flex: none; display: inline-block; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cat-content-fill); color: var(--cat-content); font-size: var(--fs-2xs); font-weight: 600;
  line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ws-note[data-cat="language"] .ws-n { background: var(--cat-language-fill); color: var(--cat-language); }
.ws-note[data-cat="strength"] .ws-n { background: var(--cat-strength-fill); color: var(--cat-strength); }
.ws-type { flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.ws-st { flex: none; display: inline-flex; color: var(--muted); }
.ws-st i { display: none; }
.ws-note[data-status="suggested"] .ws-st [data-g="suggested"], .ws-note[data-status="accepted"] .ws-st [data-g="accepted"], .ws-note[data-status="edited"] .ws-st [data-g="edited"],
.ws-note[data-status="added"] .ws-st [data-g="added"], .ws-note[data-status="rejected"] .ws-st [data-g="rejected"] { display: inline-flex; }
.ws-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ws-note[data-status="rejected"] .ws-pill { background: none; border-style: dashed; }
.ws-note[data-status="rejected"] .ws-type, .ws-note[data-status="rejected"] .ws-snip { text-decoration: line-through; color: var(--faint); }
.ws-note.has-attn .ws-pill { border-color: var(--warn-line); background: var(--warn-bg); }
.ws-note.is-open .ws-pill { display: none; }
.ws-note-b { background: var(--surface); border: 1px solid var(--green-line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 10px 12px 12px; max-height: min(64vh, 560px); overflow: auto;
  animation: mk-enter var(--t-enter) var(--ease-out) both; }
.ws-note-b .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-xs); color: var(--muted); }
.ws-note-b .ws-close { margin-left: auto; width: 24px; height: 24px; }
.chip.cat-content { background: var(--cat-content-fill); color: var(--cat-content); }
.chip.cat-language { background: var(--cat-language-fill); color: var(--cat-language); }
.chip.cat-strength { background: var(--cat-strength-fill); color: var(--cat-strength); }
.ws-state { margin: 4px 0 6px; }
.ws-note-b .quote { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid var(--line-2); font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.ws-note-b .txt { font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-note-b textarea { margin-top: 6px; font-size: var(--fs-sm); min-height: 84px; }
.ws-note-b .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ws-note-b .acts:empty { display: none; }
.ws-note-b .acts .ws-ask { margin-left: auto; }
.ws-note-b .chat-log { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.ws-note-b .chat-log > summary { font-size: var(--fs-xs); }
.ws-note-b .chat-log .chat-msgs { margin-top: 8px; }
.ws-gone { margin: var(--sp-3) 8px 0 var(--lane); padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: var(--fs-sm); }
.ws.is-laid .ws-gone { position: absolute; left: var(--lane); right: 8px; margin: 0; }

/* connectors: from the words to their pill, drawn in the same coordinates as both. Quiet until one is selected. */
.ws-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.ws-links path { fill: none; stroke: var(--line-2); stroke-width: 1px; transition: stroke var(--t-fast), stroke-width var(--t-fast); }
.ws-links circle { fill: var(--line-2); transition: fill var(--t-fast); }
.ws-links .is-hover path { stroke: var(--muted); } .ws-links .is-hover circle { fill: var(--muted); }
.ws-links .is-selected path { stroke: var(--green); stroke-width: 1.5px; } .ws-links .is-selected circle { fill: var(--green); }
.ws-links .lead { stroke-dasharray: 2 3; }

/* ------------------------------------------------------------------ marks, feedback and approval: fixed under the document */
.ws-grade { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); position: relative; z-index: 6; }
.ws-marks { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.ws-mark.mk { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.ws-mark label { margin: 0; white-space: nowrap; }
.ws-mark input { width: 56px; min-height: 30px; padding: 2px 4px; text-align: center; font-weight: 600; font-size: var(--fs-lg); }
.ws-mark .of, .ws-total .of { color: var(--muted); white-space: nowrap; }
.ws-total { white-space: nowrap; padding-left: 16px; border-left: 1px solid var(--line); }
.ws-total b { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ws-more { display: inline-flex; gap: 2px; }
.ws-more .btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.ws-more .n, .ws-panel .tabs .n, .ws-views .n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 600; line-height: 16px; text-align: center; }
.ws-acts { margin-left: auto; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 8px; padding-bottom: 16px; }
.ws-rule { position: absolute; right: 0; bottom: -1px; font-size: var(--fs-2xs); line-height: 1.3; white-space: nowrap; }      /* a caption under the buttons, so the bar stays one row */
details.menu.up .menu-list { top: auto; bottom: calc(100% + 4px); }
.menu-list form { display: contents; }
.ws-panel { flex: none; display: flex; flex-direction: column; max-height: min(54%, 460px); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -8px 20px hsl(60 10% 10% / 0.06); position: relative; z-index: 5; }
.ws-panel[hidden] { display: none; }
.ws-panel .tabs { flex: none; align-items: center; padding: 0 8px; }
.ws-panel-b { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; }
.ws-panel-b .marks { padding: 0 0 8px; border: 0; max-width: 720px; }
.ws-panel-b h3 { margin-top: 12px; } .ws-panel-b h3:first-child { margin-top: 0; }
.ws-panel-b .logline { padding-left: 0; padding-right: 0; }
.ws-panel-b form { max-width: 760px; }
.ws-pop { position: fixed; z-index: 80; width: min(320px, calc(100vw - 16px)); display: block; padding: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-3); }
.ws-pop[hidden] { display: none; }
.ws-pop select, .ws-pop textarea { margin-top: 6px; }
.ws-pop .acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* ------------------------------------------------------------------ the copilot: its own pane, fixed header and composer, scrolling history */
.ws-resize { flex: none; width: 12px; cursor: col-resize; position: relative; touch-action: none; }
.ws-resize::after { content: ""; position: absolute; left: 5px; top: 20%; bottom: 20%; width: 2px; border-radius: 1px; background: transparent; transition: background var(--t-fast); }
.ws-resize:hover::after, .ws-resize:focus-visible::after, .ws-resize.is-drag::after { background: var(--line-2); }
.ws-chat { flex: none; width: var(--chat-w); display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: width var(--t-pane) var(--ease-inout), opacity var(--t-pane) var(--ease-inout), margin var(--t-pane) var(--ease-inout); }
.ws-chat > * { min-width: calc(var(--chat-w) - 2px); }
.ws:not(.is-chat) .ws-chat { width: 0; opacity: 0; border-width: 0; visibility: hidden; transition: width var(--t-pane) var(--ease-inout), opacity var(--t-pane) var(--ease-inout), visibility 0s linear var(--t-pane); }
.ws.is-dragging .ws-chat { transition: none; }
.ws-chat-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); }
.ws-chat-h h2 { margin: 0; font-size: var(--fs-md); display: inline-flex; align-items: center; gap: 6px; }
.ws-chat-h > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ws-chat-ctx { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.ws-chat-ctx[hidden] { display: none; }
.ws-chat .chat-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; scroll-behavior: auto; }
.ws-chat .chat-err { flex: none; margin: 0 12px 8px; }
.ws-chat .chat-form { flex: none; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.ws-chat .chat-form textarea { min-height: 56px; max-height: 180px; }
.ws-chat .chat-starts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ws-chat .chat-starts .filter { white-space: normal; text-align: left; height: auto; min-height: 28px; padding: 5px 11px; line-height: 1.3; }
.ws-chat .chat-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 112px; z-index: 3; box-shadow: var(--shadow-2); }
.ws-chat { position: relative; }
.ctx-chip { display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 4px 0 4px; border: 1px solid var(--green-line); border-radius: var(--r-pill); background: var(--green-fill); color: var(--green-ink); font-size: var(--fs-xs); }
.ctx-chip > button.ctx-go { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.ctx-chip .ws-n { background: var(--surface); color: var(--green-ink); }
.ctx-chip .ctx-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-chip .ibtn { width: 22px; height: 22px; color: inherit; }
.chat-msg .ctx-chip { margin: 0 0 4px; min-height: 22px; border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }

/* a reply while it arrives: the steps that have really happened, then the words. One entrance for the message; the words that follow are simply added. */
.chat-steps { list-style: none; margin: 0 0 4px; padding: 0; font-size: var(--fs-xs); color: var(--muted); }
.chat-steps:empty { display: none; }
.chat-steps li { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.chat-steps li.done .ic { color: var(--green); }
.chat-steps li.bad { color: var(--warn); }
.chat-steps .spinner { width: 12px; height: 12px; }
.chat-msg.is-live .body:empty { display: none; }
.chat-tag { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.chat-tag.is-bad, .prop-state.is-bad { color: var(--bad); }
.chat-sources { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: var(--fs-xs); }
.chat-sources ol { margin: 2px 0 0; padding-left: 20px; }
.chat-sources a { overflow-wrap: anywhere; }
.ws-chat .chat-msg { max-width: 100%; border-radius: var(--r); }
.ws-chat .chat-msg.ai { align-self: stretch; background: none; border-color: transparent; padding-left: 0; padding-right: 0; }
.ws-chat .chat-msg.me { background: var(--surface-2); border-color: transparent; max-width: 92%; }
.ws-chat.is-busy .chat-send { border-color: var(--line-2); }
/* a suggested wording: what the comment says now, what is suggested, then Apply or Dismiss */
.prop { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.prop.is-quiet { opacity: 0.72; }
.prop-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 8px; }
.prop-h .ctx-chip { min-height: 22px; border-color: var(--line-2); background: var(--surface); color: var(--ink-2); flex: 0 1 auto; }
.prop-diff { display: grid; gap: 6px; }
.prop-was, .prop-now { padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.45; }
.prop-was { background: var(--surface-2); color: var(--muted); }
.prop-now { background: var(--green-fill); color: var(--ink); }
.prop[data-status="open"] .prop-was p { text-decoration: line-through; text-decoration-color: var(--faint); }
.prop-was p, .prop-now p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.prop-lab { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.prop-now .prop-lab { color: var(--green-ink); }
.prop-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prop-state { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.prop[data-status="applied"] .prop-state .ic { color: var(--green); }

/* ------------------------------------------------------------------ a student's own marked work: the same document and gutter, read only,
   with the marks and the teacher's feedback where the copilot would be */
.ws-side { flex: none; width: 340px; margin-left: var(--sp-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ws-side .card:last-child { margin-bottom: 0; }
.ws-side .hbar { font-size: var(--fs-sm); }
.ws-student .ws-total { border: 0; padding: 0; }
.ws-note-b .chat-askrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 8px; }
.ws-note-b .chat-thread { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); }

/* ------------------------------------------------------------------ full screen, narrower windows, phones */
.ws.is-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: var(--sp-2) var(--sp-3); }
body.ws-full { overflow: hidden; }
@media (max-width: 1119px) {
  /* not enough room for three columns: the copilot floats over the right of the document when it is opened */
  .ws-chat { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; width: min(var(--chat-w), 92vw); box-shadow: var(--shadow-3); }
  .ws:not(.is-chat) .ws-chat { width: min(var(--chat-w), 92vw); }
  .ws-chat { transition: opacity var(--t-pane) var(--ease-inout); }
  .ws-resize { display: none; }
  .wrap.wide { height: 100vh; height: 100dvh; display: flex; padding-bottom: var(--sp-2); }
}
@media (max-width: 1119px) {
  /* a student has two parts here, Script (with its comments) and Feedback, and a third, Comments, on a phone */
  .ws-student .ws-views { display: flex; flex: none; }
  .ws-student .ws-views > button { flex: 1; }
  .ws-student .ws-views [data-pane="notes"] { display: none; }
  .ws-student .ws-side { display: none; width: auto; flex: 1; margin: 0; }
  .ws-student[data-pane="side"] .ws-main { display: none; }
  .ws-student[data-pane="side"] .ws-side { display: block; }
}
@media (max-width: 900px) {
  .wrap.wide { height: calc(100vh - 53px); height: calc(100dvh - 53px); min-height: 480px; }
  .is-student .wrap.wide { height: calc(100vh - 53px - 57px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 53px - 57px - env(safe-area-inset-bottom, 0px)); padding-bottom: var(--sp-2); }
  .ws.is-full { padding: var(--sp-1); }
}
@media (max-width: 760px) {
  /* A phone shows one part at a time: Script, Feedback, Chat. Selection, drafts and reading position are kept across them. */
  .ws { gap: var(--sp-1); --gutter-w: 0px; }
  .ws-views { display: flex; flex: none; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
  .ws-student .ws-views [data-pane="notes"] { display: block; }
  .ws-student .ws-head-r { display: none; }
  .ws.ws-student[data-pane="doc"] .ws-note.is-open { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }      /* above the student's bottom tabs */
  .ws-views > button { flex: 1; }
  .ws-facts, .ws-chat-btn, .ws-rule, .ws-step .small, .ws-id .crumb, .savestate[data-state="idle"] { display: none; }
  .ws-head { min-height: 0; flex-wrap: nowrap; align-items: center; }
  .ws-id { flex: 1 1 auto; }
  .ws-head-r { flex: none; gap: var(--sp-2); }
  .ws-step .btn { font-size: 0; gap: 0; padding: 0 10px; }       /* previous and next keep their arrows and their names for screen readers */
  .ws-step .btn .ic { width: 18px; height: 18px; }
  .ws-sheet { padding: var(--sp-2) var(--sp-2) var(--sp-8); }
  .ws-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ws-tools .tl span { display: none; }
  .ws-tools .ws-sp { display: none; }
  .ws-gutter { position: static; z-index: auto; width: auto; flex: 1; display: none; }      /* no layer of its own, so the opened note can rise above the marks bar */
  .ws-links { display: none; }
  .ws.is-laid .ws-note, .ws-note { position: static; margin: 0 var(--sp-2) 6px; }
  .ws-gutter-h { position: static; padding: 10px var(--sp-2) 6px; }
  .ws-pill { height: 40px; font-size: var(--fs-sm); }
  .ws[data-pane="notes"] .ws-sheet { display: none; }
  .ws[data-pane="notes"] .ws-canvas { display: block; width: auto; min-width: 0; }      /* the list is as wide as the screen, never as wide as its longest line */
  .ws[data-pane="notes"] .ws-gutter { display: block; min-width: 0; }
  .ws[data-pane="notes"] .ws-tools { display: none; }
  .ws[data-pane="chat"] .ws-main { display: none; }
  .ws-chat, .ws:not(.is-chat) .ws-chat { position: static; width: auto; flex: 1; box-shadow: none; transform: none; opacity: 1; visibility: visible; border-width: 1px; display: none; }
  .ws-chat > * { min-width: 0; }
  .ws[data-pane="chat"] .ws-chat { display: flex; }
  /* on the script, a tapped comment rises from the bottom edge instead of sitting in a gutter there is no room for */
  .ws[data-pane="doc"] .ws-gutter { display: block; position: static; width: 0; flex: none; height: 0; overflow: visible; }
  .ws[data-pane="doc"] .ws-gutter-h, .ws[data-pane="doc"] .ws-note:not(.is-open), .ws[data-pane="doc"] .ws-gone, .ws[data-pane="doc"] .ws-notes .empty { display: none; }
  .ws[data-pane="doc"] .ws-note.is-open { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 50; margin: 0; }
  .ws[data-pane="doc"] .ws-note.is-open .ws-note-b { max-height: 56vh; box-shadow: var(--shadow-3); }
  .ws-grade { gap: 6px 10px; padding: 6px 8px; }
  .ws-acts { margin-left: auto; justify-content: flex-end; padding-bottom: 0; }
  /* beside the script the bar is one slim row (the total and the main action); the marks and the rest are under Feedback */
  .ws[data-pane="doc"] .ws-mark, .ws[data-pane="doc"] .ws-more, .ws[data-pane="doc"] .ws-acts > :not(form:last-of-type), .ws[data-pane="doc"] .ws-marks > .btn { display: none; }
  .ws[data-pane="doc"] .ws-total { border: 0; padding: 0; }
  .ws[data-pane="notes"] .ws-acts { width: 100%; justify-content: space-between; }
  .ws[data-pane="notes"] .ws-acts .btn { flex: 1 1 auto; }
  .ws-acts details.menu { flex: none; }
  .ws-panel { max-height: 70%; }
}
@media (pointer: coarse) {
  .ws-pill { height: 36px; }
  .tl { min-height: 36px; padding: 0 9px; }
  .ws-seg button { min-height: 32px; }
  .ws-mark input { width: 64px; min-height: 38px; }
}