heyquilt 0.0.1 → 0.3.106

package/src/ui/loom.css

@@ -0,0 +1,365 @@
+/* The Loom (src/ui/loom.js): everyone's AI conversations at once. A lane per
+   person runs down the page as a stitched thread in their color; each AI turn,
+   chat message and task note is a patch on it. Threads between lanes join work
+   on the same file. Uses the tokens in app.css. */
+
+.loom { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
+/* The Everyone tab has no close button, so it needs its own room on the right (tabs leave 4px for the ×). */
+.ws-tab.loom-tab { padding-right: 12px; }
+
+/* ---------- bar ---------- */
+.loom-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--border); flex: none; }
+.loom-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.loom-title b { font-weight: 600; font-size: 14px; }
+.loom-title .hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
+.loom-live { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
+.loom-live .pulse { width: 7px; height: 7px; }
+.loom-bar .spacer { flex: 1; }
+.loom-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; }
+.loom-seg .loom-chip { border: 0; border-radius: 0; }
+.loom-seg .loom-chip + .loom-chip { border-left: 1px solid var(--border-strong); }
+.loom-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; font-size: 12px; font-weight: 500; background: var(--panel); color: var(--muted); border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer; }
+.loom-chip svg { width: 13px; height: 13px; }
+.loom-chip:hover { color: var(--text); }
+.loom-chip.on { background: var(--panel-2); color: var(--text); }
+.loom-chip.off { border-style: dashed; }
+
+/* ---------- lanes ---------- */
+.loom-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; } /* lanes fold to fit, so never sideways */
+.loom-heads, .loom-grid { display: grid; column-gap: 18px; padding: 0 18px; min-width: min-content; }
+.loom-heads { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); padding-top: 8px; padding-bottom: 8px; }
+.loom-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px 4px 4px; border-radius: 6px; border-bottom: 3px solid var(--c); background: var(--panel); box-shadow: var(--lift); }
+/* From nothing up to the name's width: when the head wraps (a row of conversations), a long name is cut short
+   on the first row instead of pushing the pin and ✕ (unseen until hover) onto an empty row of their own. */
+.lh-who { display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; max-width: max-content; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
+.lh-who .avatar { width: 26px; height: 26px; font-size: 11px; }
+.lh-who .avatar.online::after { width: 9px; height: 9px; }
+.lh-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lh-who:hover .lh-name { text-decoration: underline; text-underline-offset: 3px; }
+.lh-tool .tool-logo svg, .lh-tool .tool-logo img { width: 14px; height: 14px; }
+.lh-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
+.lh-st { display: inline-flex; align-items: center; gap: 5px; }
+.lh-st.live { color: var(--accent); font-weight: 600; }
+.lh-st.live .pulse { width: 7px; height: 7px; }
+.lh-st.paused { color: var(--warn); }
+.lh-st.off { color: var(--faint); }
+.lh-holds { color: var(--edit); border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
+.lh-holds:hover, .lh-holds:focus-visible, .lh-holds[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; outline: none; }
+.lh-since { font-variant-numeric: tabular-nums; cursor: default; }
+/* A narrow lane keeps the name: the stitching time stands in for "working" or "idle" (the pulse still says which). */
+.loom-head:not(.strip):not(.crowd) { container-type: inline-size; }
+@container (max-width: 300px) { .lh-meta:has(.lh-since) .lh-word { display: none; } }
+.lh-hide { border: 0; background: none; padding: 2px; color: var(--faint); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
+.lh-hide svg { width: 13px; height: 13px; }
+.loom-head:hover .lh-hide, .lh-hide:focus-visible { opacity: 1; }
+
+.loom-grid { position: relative; row-gap: 10px; padding-top: 14px; padding-bottom: 48px; align-items: start; }
+/* A lane's thread: a running stitch in the person's color down the middle of its column. */
+.loom-thread { justify-self: center; width: 2px; height: 100%; margin-top: -14px; background: repeating-linear-gradient(to bottom, var(--c) 0 7px, transparent 7px 12px); opacity: .45; z-index: 0; pointer-events: none; }
+.loom-thread.paused { opacity: .2; }
+.loom-thread.live { animation: loom-sew 1.1s linear infinite; }
+/* Ends on the row above the needle, then reaches across the -14px top, the row gap and the needle's
+   padding to the top of the piece waiting to drop in (lq-m*: 2 of the svg's 60 units of width down),
+   so the piece hangs from it. */
+.loom-thread.to-needle { height: calc(100% + 14px + 10px + 2px + 30px * 2 / 60); }
+.loom-thread.to-needle.strip { height: calc(100% + 14px + 10px + 4px + 22px * 2 / 60); }
+.loom-thread.merged { justify-self: start; margin-left: 15px; background: repeating-linear-gradient(to bottom, var(--border-strong) 0 7px, transparent 7px 12px); }
+@keyframes loom-sew { to { background-position: 0 12px; } }
+
+.loom-gap { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11.5px; margin: 6px 0; }
+.loom-gap::before, .loom-gap::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }
+.loom-gap span { background: var(--bg); padding: 0 6px; }
+
+/* ---------- cards ---------- */
+.lc { position: relative; z-index: 2; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 6px; padding: 8px 11px 9px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--c) 18%, transparent); transition: opacity .15s, box-shadow .15s, border-color .15s, transform .15s; }
+.lc-turn { cursor: pointer; }
+.lc-turn:hover { box-shadow: 3px 3px 0 color-mix(in srgb, var(--c) 32%, transparent); }
+.lc.open { cursor: auto; border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 4px 4px 0 color-mix(in srgb, var(--c) 28%, transparent); z-index: 3; }
+/* A turn whose task is done is hemmed: a stitched edge inside the card. */
+.lc.hemmed::after { content: ""; position: absolute; inset: 3px; border: 1px dashed color-mix(in srgb, var(--ok) 55%, transparent); border-radius: 4px; pointer-events: none; }
+.lc-new { animation: loom-in .5s ease-out; }
+@keyframes loom-in { from { opacity: 0; transform: translateY(8px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); } }
+
+.lc-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
+.lc-head time { margin-left: auto; white-space: nowrap; color: var(--faint); }
+.lc-who { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
+.lc-who .avatar { width: 18px; height: 18px; font-size: 9px; }
+.lc-tool { display: inline-flex; flex: none; }
+.lc-tool .tool-logo svg, .lc-tool .tool-logo img { width: 13px; height: 13px; }
+.lc-kind { display: inline-flex; color: var(--c); flex: none; }
+.lc-kind svg { width: 13px; height: 13px; }
+.lc-label { font-weight: 600; color: var(--text); }
+.lc-dm { color: var(--violet); }
+.lc-conv { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: left; }
+.lc-conv:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+
+/* ---------- several conversations in one lane ----------
+   Each has a piece of the mark (.cm: the Q with its slot lit, in the lane's colour) on its cards and in
+   the lane's head. Following one opens its name there and dims everything else in the Loom. */
+.cm { width: 14px; height: 14px; flex: none; display: inline-block; }
+/* The unlit pieces: a little stronger in light mode, where 16% ink on white all but vanished. */
+.cm .cm-p, .cm .cm-a { fill: light-dark(color-mix(in srgb, var(--text) 30%, transparent), color-mix(in srgb, var(--text) 16%, transparent)); }
+.cm .cm-p.on { fill: color-mix(in srgb, var(--c) 82%, var(--text)); opacity: 1; }
+.cm .cm-a.on { fill: var(--mark-accent); opacity: 1; }
+/* A conversation working now (something in the last 3 minutes, loom-model.js): its piece runs a lap of
+   the Q, clockwise from its slot, and rests at home for two seconds; 110 ms a step, 2.86 s round. The
+   runner (.cm-run) is hidden and the home piece lit at rest, so without motion it simply stays home.
+   --cm-ph is the phase from the clock (phaseNeedles), so a redraw doesn't restart the lap. */
+.cm .cm-run { fill: color-mix(in srgb, var(--c) 82%, var(--text)); opacity: 0; }
+.cm-live .cm-run, .cm-live .cm-home { animation-duration: 2.86s; animation-iteration-count: infinite; animation-timing-function: step-end; animation-delay: var(--cm-ph, 0ms); }
+.cm-live .cm-home { animation-name: cm-rest; }
+@keyframes cm-lap0 { 0% { opacity: 1; transform: translate(20px, 0px); } 3.85% { opacity: 1; transform: translate(40px, 0px); } 7.69% { opacity: 1; transform: translate(40px, 20px); } 11.54% { opacity: 1; transform: translate(40px, 40px); } 15.38% { opacity: 1; transform: translate(20px, 40px); } 19.23% { opacity: 1; transform: translate(0px, 40px); } 23.08% { opacity: 1; transform: translate(0px, 20px); } 26.92% { opacity: 1; transform: translate(0px, 0px); } 30.77%, 100% { opacity: 0; transform: translate(0px, 0px); } }
+.cm-run0 { animation-name: cm-lap0; }
+@keyframes cm-lap1 { 0% { opacity: 1; transform: translate(40px, 0px); } 3.85% { opacity: 1; transform: translate(40px, 20px); } 7.69% { opacity: 1; transform: translate(40px, 40px); } 11.54% { opacity: 1; transform: translate(20px, 40px); } 15.38% { opacity: 1; transform: translate(0px, 40px); } 19.23% { opacity: 1; transform: translate(0px, 20px); } 23.08% { opacity: 1; transform: translate(0px, 0px); } 26.92% { opacity: 1; transform: translate(20px, 0px); } 30.77%, 100% { opacity: 0; transform: translate(20px, 0px); } }
+.cm-run1 { animation-name: cm-lap1; }
+@keyframes cm-lap2 { 0% { opacity: 1; transform: translate(40px, 20px); } 3.85% { opacity: 1; transform: translate(40px, 40px); } 7.69% { opacity: 1; transform: translate(20px, 40px); } 11.54% { opacity: 1; transform: translate(0px, 40px); } 15.38% { opacity: 1; transform: translate(0px, 20px); } 19.23% { opacity: 1; transform: translate(0px, 0px); } 23.08% { opacity: 1; transform: translate(20px, 0px); } 26.92% { opacity: 1; transform: translate(40px, 0px); } 30.77%, 100% { opacity: 0; transform: translate(40px, 0px); } }
+.cm-run2 { animation-name: cm-lap2; }
+@keyframes cm-lap3 { 0% { opacity: 1; transform: translate(40px, 40px); } 3.85% { opacity: 1; transform: translate(20px, 40px); } 7.69% { opacity: 1; transform: translate(0px, 40px); } 11.54% { opacity: 1; transform: translate(0px, 20px); } 15.38% { opacity: 1; transform: translate(0px, 0px); } 19.23% { opacity: 1; transform: translate(20px, 0px); } 23.08% { opacity: 1; transform: translate(40px, 0px); } 26.92% { opacity: 1; transform: translate(40px, 20px); } 30.77%, 100% { opacity: 0; transform: translate(40px, 20px); } }
+.cm-run3 { animation-name: cm-lap3; }
+@keyframes cm-lap4 { 0% { opacity: 1; transform: translate(0px, 40px); } 3.85% { opacity: 1; transform: translate(0px, 20px); } 7.69% { opacity: 1; transform: translate(0px, 0px); } 11.54% { opacity: 1; transform: translate(20px, 0px); } 15.38% { opacity: 1; transform: translate(40px, 0px); } 19.23% { opacity: 1; transform: translate(40px, 20px); } 23.08% { opacity: 1; transform: translate(40px, 40px); } 26.92% { opacity: 1; transform: translate(20px, 40px); } 30.77%, 100% { opacity: 0; transform: translate(20px, 40px); } }
+.cm-run4 { animation-name: cm-lap4; }
+@keyframes cm-lap5 { 0% { opacity: 1; transform: translate(0px, 20px); } 3.85% { opacity: 1; transform: translate(0px, 0px); } 7.69% { opacity: 1; transform: translate(20px, 0px); } 11.54% { opacity: 1; transform: translate(40px, 0px); } 15.38% { opacity: 1; transform: translate(40px, 20px); } 19.23% { opacity: 1; transform: translate(40px, 40px); } 23.08% { opacity: 1; transform: translate(20px, 40px); } 26.92% { opacity: 1; transform: translate(0px, 40px); } 30.77%, 100% { opacity: 0; transform: translate(0px, 40px); } }
+.cm-run5 { animation-name: cm-lap5; }
+@keyframes cm-lap6 { 0% { opacity: 1; transform: translate(0px, 0px); } 3.85% { opacity: 1; transform: translate(20px, 0px); } 7.69% { opacity: 1; transform: translate(40px, 0px); } 11.54% { opacity: 1; transform: translate(40px, 20px); } 15.38% { opacity: 1; transform: translate(40px, 40px); } 19.23% { opacity: 1; transform: translate(20px, 40px); } 23.08% { opacity: 1; transform: translate(0px, 40px); } 26.92% { opacity: 1; transform: translate(0px, 20px); } 30.77%, 100% { opacity: 0; transform: translate(0px, 20px); } }
+.cm-run6 { animation-name: cm-lap6; }
+@keyframes cm-lap7 { 0% { opacity: 1; transform: translate(20px, 40px); } 3.85% { opacity: 1; transform: translate(0px, 40px); } 7.69% { opacity: 1; transform: translate(0px, 20px); } 11.54% { opacity: 1; transform: translate(0px, 0px); } 15.38% { opacity: 1; transform: translate(20px, 0px); } 19.23% { opacity: 1; transform: translate(40px, 0px); } 23.08% { opacity: 1; transform: translate(40px, 20px); } 26.92% { opacity: 1; transform: translate(40px, 40px); } 30.77%, 100% { opacity: 0; transform: translate(40px, 40px); } }
+.cm-run7 { animation-name: cm-lap7; }
+@keyframes cm-rest { 0% { opacity: .16; } 30.77%, 100% { opacity: 1; } }
+.lc-conv.marked { display: inline-flex; align-items: center; gap: 5px; }
+.lc-conv.marked > span { overflow: hidden; text-overflow: ellipsis; }
+.lc-conv.marked[aria-pressed="true"] { color: var(--c); }
+.lc-dim { opacity: .22; }
+.loom.following .loom-knot, .loom.following .loom-stitches { opacity: .2; }
+.lc-dim:hover, .lc-dim:focus-within { opacity: .6; }
+.loom-heads { align-items: start; }
+.loom-head:has(.lh-convs) { flex-wrap: wrap; }
+/* One row: each conversation is its piece of the Q; the one followed opens out to its name. */
+.lh-convs { flex-basis: 100%; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; padding: 5px 0 2px 2px; }
+.lh-conv { display: inline-flex; align-items: center; flex: none; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); }
+.lh-conv.on { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
+.lh-conv.quiet { color: var(--faint); }
+.lh-conv.quiet .cm { filter: grayscale(1); opacity: .7; }
+.lh-conv.on { flex: 0 1 auto; min-width: 0; }
+.lh-conv:not(.on) .lh-conv-name, .lh-conv:not(.on) .lh-conv-ren { display: none; }
+.lh-conv:not(.on) .lh-conv-btn { padding: 4px 6px; }
+.lh-conv-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 3px 2px 6px; border: 0; background: none; font: inherit; font-size: 11.5px; color: inherit; cursor: pointer; }
+.lh-conv-name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lh-conv-ren { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
+.lh-conv-ren svg { width: 12px; height: 12px; }
+.lh-conv-ren { opacity: .7; }
+.lh-conv-ren:focus-visible { opacity: 1; }
+.lh-conv-ren:hover { color: var(--text); background: var(--panel-2); }
+.lh-conv.editing { flex: 0 1 auto; min-width: 0; gap: 5px; padding-left: 6px; border-color: var(--c); }
+.lh-conv-edit { flex: 1 1 auto; width: 170px; max-width: 100%; min-width: 60px; height: 22px; padding: 0 6px 0 0; border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--text); outline: none; }
+/* Following one: it leads and its name has the room; the rest condense to bare marks after it, and fold
+   into "+N" when even that leaves the name too little (.packed, set by packConvs in loom.js). */
+.lh-convs.following { overflow: visible; gap: 6px; }
+.lh-convs.following .lh-conv-name { max-width: none; }
+.lh-others { position: relative; display: inline-flex; align-items: center; flex: none; }
+.lh-pop { display: inline-flex; align-items: center; gap: 1px; }
+.lh-pop .lh-conv { border-color: transparent; background: none; }
+.lh-pop .lh-conv-btn { padding: 3px; border-radius: 4px; }
+.lh-pop .lh-conv-btn:hover, .lh-pop .lh-conv-btn:focus-visible { background: var(--panel-2); }
+.lh-more { display: none; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
+.lh-more:hover, .lh-others.open .lh-more { color: var(--text); border-color: var(--border-strong); }
+.lh-convs.packed .lh-more { display: inline-flex; }
+.lh-convs.packed .lh-pop { display: none; position: absolute; top: 100%; right: 0; z-index: 6; gap: 2px; margin-top: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-pop); }
+.lh-convs.packed .lh-others::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 4px; } /* keeps the hover across the gap */
+.lh-convs.packed .lh-others:is(:hover, :focus-within, .open) .lh-pop { display: inline-flex; }
+
+.lc-prompt { font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.lc-reply { margin-top: 4px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-left: 8px; border-left: 2px solid var(--border); }
+.lc.open .lc-prompt { -webkit-line-clamp: unset; display: block; background: var(--mine); padding: 6px 9px; border-radius: 6px; margin: 2px 0 6px; }
+.lc-replies { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
+.lc-replies .md { padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--c) 40%, var(--border)); }
+.lc-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.lc-text .mention { color: var(--accent); font-weight: 600; }
+.lc-text .mention.me { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 3px; padding: 0 2px; }
+
+.lc-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
+.lc-file { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-family: var(--mono); font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 3px; border: 1px dashed color-mix(in srgb, var(--c) 55%, var(--border-strong)); background: color-mix(in srgb, var(--c) 7%, var(--panel)); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lc-file svg { width: 11px; height: 11px; flex: none; }
+.lc-file:hover, .lc-file.lit { border-style: solid; background: color-mix(in srgb, var(--c) 18%, var(--panel)); }
+.lc-file.plain { cursor: default; }
+.lc-more { font-size: 11px; color: var(--faint); align-self: center; }
+.lc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
+.lc-taskchip, .lc-tasklink { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 0; background: var(--panel-2); color: var(--text); font: inherit; font-size: 11.5px; padding: 2px 7px; border-radius: 3px; cursor: pointer; text-align: left; }
+.lc-taskchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lc-taskchip svg { width: 11px; height: 11px; flex: none; }
+.lc-taskchip.c-done { color: var(--ok); }
+.lc-tasklink { font-size: 13px; font-weight: 500; background: none; padding: 0; margin: 2px 6px 2px 0; }
+.lc-tasklink:hover { color: var(--accent); text-decoration: underline; }
+.lc-col { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-2); padding: 1px 6px; border-radius: 3px; }
+.lc-col.c-done { color: var(--ok); }
+.lc-col.c-doing { color: var(--edit); } /* the board's In progress colour */
+.lc-chat { background: color-mix(in srgb, var(--c) 5%, var(--panel)); border-radius: 10px 10px 10px 2px; }
+.lc-task { border-left-style: dashed; }
+.lc-actions { margin: 8px 0 0; padding: 6px 0 0 18px; border-top: 1px dashed var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--muted); max-height: 220px; overflow: auto; }
+.lc-actions li { overflow-wrap: anywhere; }
+.lc-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
+.lc-foot .btn svg { width: 14px; height: 14px; }
+.lc-mark { position: relative; z-index: 2; justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--warn); background: var(--bg); border: 1px dashed var(--warn); border-radius: 999px; padding: 1px 10px; }
+
+.loom[data-density="compact"] .lc { padding: 5px 9px 6px; }
+.loom[data-density="compact"] .lc-prompt, .loom[data-density="compact"] .lc-text { -webkit-line-clamp: 1; }
+.loom[data-density="compact"] .lc.open .lc-prompt { -webkit-line-clamp: unset; }
+.loom[data-density="compact"] .lc-meta { margin-top: 3px; }
+
+/* ---------- the needle: a working AI pieces its lane's quilt ----------
+   A patch is pieced on the lane's thread above the Q (a seam runs round it, then it fills in), travels down
+   the thread and slides into its slot: clockwise from the top left, the vermilion corner last, then the
+   whole Q fades and starts again (brand/SPEC.md, motion). 10.8 s: 1.2 s a patch, then a hold. Each piece
+   has its own keyframes below (made from the slots in mark.js; regenerate them if the timing changes), and
+   --lq-ph is the phase, set from the clock after each render (phaseNeedles in loom.js), so a re-render
+   carries on where it was. Without motion, the finished Q. */
+.loom-needle { position: relative; z-index: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--c); font-weight: 600; padding-top: 2px; }
+.loom-needle > span { text-align: center; max-width: 100%; overflow-wrap: anywhere; }
+.loom-needle code { font-size: 11px; font-weight: 500; color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--panel)); border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent); border-radius: 3px; padding: 0 5px; }
+.lq { width: 30px; height: auto; overflow: visible; }
+.lq .lq-f { fill: var(--c); }
+.lq .lq-a { fill: var(--mark-accent); }
+.lq .lq-s { fill: none; stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 60 60; opacity: 0; }
+.lq .lq-o { fill: none; stroke: color-mix(in srgb, var(--c) 50%, transparent); stroke-width: 1; stroke-dasharray: 2 1.6; opacity: 0; }
+.lq .lq-p, .lq .lq-p .lq-f, .lq .lq-p .lq-s, .lq .lq-o { animation-duration: 10.8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: var(--lq-ph, 0ms); }
+@keyframes lq-m0 { 0% { opacity: 1; transform: translate(20px, -38px); } 6.94% { transform: translate(20px, -38px); } 8.8% { transform: translate(20px, -4px); } 10.65% { transform: translate(0px, 0px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(0px, 0px); } }
+@keyframes lq-f0 { 0%, 4.17% { opacity: 0; } 6.02%, 100% { opacity: 1; } }
+@keyframes lq-s0 { 0%, 0% { stroke-dashoffset: 60; opacity: 1; } 4.17% { stroke-dashoffset: 0; opacity: 1; } 6.48%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o0 { 0%, 10.56% { opacity: 1; } 10.65%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p0 { animation-name: lq-m0; } .lq-p0 .lq-f { animation-name: lq-f0; } .lq-p0 .lq-s { animation-name: lq-s0; } .lq-o0 { animation-name: lq-o0; }
+@keyframes lq-m1 { 0% { opacity: 0; transform: translate(20px, -38px); } 11.02% { opacity: 0; } 11.11% { opacity: 1; transform: translate(20px, -38px); } 18.06% { transform: translate(20px, -38px); } 19.91% { transform: translate(20px, -4px); } 21.76% { transform: translate(20px, 0px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(20px, 0px); } }
+@keyframes lq-f1 { 0%, 15.28% { opacity: 0; } 17.13%, 100% { opacity: 1; } }
+@keyframes lq-s1 { 0%, 11.11% { stroke-dashoffset: 60; opacity: 1; } 15.28% { stroke-dashoffset: 0; opacity: 1; } 17.59%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o1 { 0%, 21.67% { opacity: 1; } 21.76%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p1 { animation-name: lq-m1; } .lq-p1 .lq-f { animation-name: lq-f1; } .lq-p1 .lq-s { animation-name: lq-s1; } .lq-o1 { animation-name: lq-o1; }
+@keyframes lq-m2 { 0% { opacity: 0; transform: translate(20px, -38px); } 22.13% { opacity: 0; } 22.22% { opacity: 1; transform: translate(20px, -38px); } 29.17% { transform: translate(20px, -38px); } 31.02% { transform: translate(20px, -4px); } 32.87% { transform: translate(40px, 0px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(40px, 0px); } }
+@keyframes lq-f2 { 0%, 26.39% { opacity: 0; } 28.24%, 100% { opacity: 1; } }
+@keyframes lq-s2 { 0%, 22.22% { stroke-dashoffset: 60; opacity: 1; } 26.39% { stroke-dashoffset: 0; opacity: 1; } 28.7%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o2 { 0%, 32.78% { opacity: 1; } 32.87%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p2 { animation-name: lq-m2; } .lq-p2 .lq-f { animation-name: lq-f2; } .lq-p2 .lq-s { animation-name: lq-s2; } .lq-o2 { animation-name: lq-o2; }
+@keyframes lq-m3 { 0% { opacity: 0; transform: translate(20px, -38px); } 33.24% { opacity: 0; } 33.33% { opacity: 1; transform: translate(20px, -38px); } 40.28% { transform: translate(20px, -38px); } 42.13% { transform: translate(20px, -4px); } 43.98% { transform: translate(40px, 20px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(40px, 20px); } }
+@keyframes lq-f3 { 0%, 37.5% { opacity: 0; } 39.35%, 100% { opacity: 1; } }
+@keyframes lq-s3 { 0%, 33.33% { stroke-dashoffset: 60; opacity: 1; } 37.5% { stroke-dashoffset: 0; opacity: 1; } 39.81%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o3 { 0%, 43.89% { opacity: 1; } 43.98%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p3 { animation-name: lq-m3; } .lq-p3 .lq-f { animation-name: lq-f3; } .lq-p3 .lq-s { animation-name: lq-s3; } .lq-o3 { animation-name: lq-o3; }
+@keyframes lq-m4 { 0% { opacity: 0; transform: translate(20px, -38px); } 44.35% { opacity: 0; } 44.44% { opacity: 1; transform: translate(20px, -38px); } 51.39% { transform: translate(20px, -38px); } 53.24% { transform: translate(20px, -4px); } 55.09% { transform: translate(20px, 40px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(20px, 40px); } }
+@keyframes lq-f4 { 0%, 48.61% { opacity: 0; } 50.46%, 100% { opacity: 1; } }
+@keyframes lq-s4 { 0%, 44.44% { stroke-dashoffset: 60; opacity: 1; } 48.61% { stroke-dashoffset: 0; opacity: 1; } 50.93%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o4 { 0%, 55% { opacity: 1; } 55.09%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p4 { animation-name: lq-m4; } .lq-p4 .lq-f { animation-name: lq-f4; } .lq-p4 .lq-s { animation-name: lq-s4; } .lq-o4 { animation-name: lq-o4; }
+@keyframes lq-m5 { 0% { opacity: 0; transform: translate(20px, -38px); } 55.46% { opacity: 0; } 55.56% { opacity: 1; transform: translate(20px, -38px); } 62.5% { transform: translate(20px, -38px); } 64.35% { transform: translate(20px, -4px); } 66.2% { transform: translate(0px, 40px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(0px, 40px); } }
+@keyframes lq-f5 { 0%, 59.72% { opacity: 0; } 61.57%, 100% { opacity: 1; } }
+@keyframes lq-s5 { 0%, 55.56% { stroke-dashoffset: 60; opacity: 1; } 59.72% { stroke-dashoffset: 0; opacity: 1; } 62.04%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o5 { 0%, 66.11% { opacity: 1; } 66.2%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p5 { animation-name: lq-m5; } .lq-p5 .lq-f { animation-name: lq-f5; } .lq-p5 .lq-s { animation-name: lq-s5; } .lq-o5 { animation-name: lq-o5; }
+@keyframes lq-m6 { 0% { opacity: 0; transform: translate(20px, -38px); } 66.57% { opacity: 0; } 66.67% { opacity: 1; transform: translate(20px, -38px); } 73.61% { transform: translate(20px, -38px); } 75.46% { transform: translate(20px, -4px); } 77.31% { transform: translate(0px, 20px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(0px, 20px); } }
+@keyframes lq-f6 { 0%, 70.83% { opacity: 0; } 72.69%, 100% { opacity: 1; } }
+@keyframes lq-s6 { 0%, 66.67% { stroke-dashoffset: 60; opacity: 1; } 70.83% { stroke-dashoffset: 0; opacity: 1; } 73.15%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o6 { 0%, 77.22% { opacity: 1; } 77.31%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p6 { animation-name: lq-m6; } .lq-p6 .lq-f { animation-name: lq-f6; } .lq-p6 .lq-s { animation-name: lq-s6; } .lq-o6 { animation-name: lq-o6; }
+@keyframes lq-m7 { 0% { opacity: 0; transform: translate(20px, -38px); } 77.69% { opacity: 0; } 77.78% { opacity: 1; transform: translate(20px, -38px); } 84.72% { transform: translate(20px, -38px); } 86.57% { transform: translate(20px, -4px); } 88.43% { transform: translate(40px, 40px); } 95.37% { opacity: 1; } 98.15%, 100% { opacity: 0; transform: translate(40px, 40px); } }
+@keyframes lq-f7 { 0%, 81.94% { opacity: 0; } 83.8%, 100% { opacity: 1; } }
+@keyframes lq-s7 { 0%, 77.78% { stroke-dashoffset: 60; opacity: 1; } 81.94% { stroke-dashoffset: 0; opacity: 1; } 84.26%, 100% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes lq-o7 { 0%, 88.33% { opacity: 1; } 88.43%, 98.15% { opacity: 0; } 100% { opacity: 1; } }
+.lq-p7 { animation-name: lq-m7; } .lq-p7 .lq-f { animation-name: lq-f7; } .lq-p7 .lq-s { animation-name: lq-s7; } .lq-o7 { animation-name: lq-o7; }
+
+/* ---------- stitches between lanes ---------- */
+.loom-stitches { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
+.loom-stitches .st { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .3; transition: opacity .15s, stroke-width .15s; }
+.loom-stitches .st.collide { opacity: .55; }
+.loom-stitches .knot circle { fill: var(--panel); stroke: var(--warn); stroke-width: 1.5; }
+.loom-stitches .knot path { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
+.loom-stitches .mention-line { fill: none; stroke: var(--c); stroke-width: 1.25; stroke-dasharray: 2 3; opacity: .35; }
+.loom-stitches .mention-dot { fill: var(--c); opacity: .5; }
+
+/* Pointer on a card: its stitches and the cards at their other end stand out. */
+.loom.tracing .loom-stitches .traced { opacity: .95; stroke-width: 2.25; }
+.loom.tracing .lc.traced { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 3px 3px 0 color-mix(in srgb, var(--c) 30%, transparent); }
+
+/* A file in focus (a chip, or the file tree): everything else steps back. */
+.loom.focusing .lc:not(.lit), .loom.focusing .lc-mark { opacity: .28; }
+.loom.focusing .loom-stitches > *:not(.lit) { opacity: .06; }
+.loom.focusing .loom-stitches .lit { opacity: 1; stroke-width: 2.5; }
+.loom.focusing .lc.lit { box-shadow: 0 0 0 2px var(--c), 4px 4px 0 color-mix(in srgb, var(--c) 30%, transparent); transform: translateX(1px); }
+
+.loom-empty { position: relative; z-index: 2; justify-self: center; max-width: 440px; text-align: center; padding: 48px 20px; }
+.loom-empty .t { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
+.loom-empty .hint { color: var(--muted); }
+
+/* Centred with margins, not a transform: .btn:active's press would replace it and slide the button off the pointer. */
+.loom-jump { position: absolute; bottom: 16px; left: 0; right: 0; width: max-content; margin: 0 auto; z-index: 6; box-shadow: var(--shadow-pop); }
+.loom-jump svg { width: 14px; height: 14px; }
+
+.loom-tip { position: fixed; z-index: 50; max-width: 340px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-pop); padding: 8px 11px; font-size: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
+.loom-tip b { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
+.loom-tip .warn { color: var(--warn); font-weight: 600; }
+.loom-tip .hint { color: var(--faint); font-size: 11px; }
+
+/* One column: the person shows on each card, the threads arc on the right. */
+.loom.merged .loom-grid { padding-left: 34px; padding-right: 70px; max-width: 920px; margin: 0 auto; }
+
+@media (prefers-reduced-motion: reduce) {
+  .loom-thread.live, .lq .lq-p, .lq .lq-p .lq-f, .lq .lq-p .lq-s, .lq .lq-o, .lc-new { animation: none; }
+  .cm-live .cm-run, .cm-live .cm-home { animation: none; }
+}
+
+/* ---------- folded lanes: strips of knots, and the crowd ---------- */
+.lh-pin { border: 0; background: none; padding: 2px; color: var(--faint); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s, color .15s; }
+.lh-pin svg { width: 13px; height: 13px; }
+.lh-pin.on { opacity: 1; color: var(--c); }
+.lh-pin.on svg { fill: currentColor; }
+.loom-head:hover .lh-pin, .lh-pin:focus-visible { opacity: 1; }
+.loom-head:hover .lh-pin:not(.on):hover { color: var(--text); }
+
+.loom-head.strip { justify-content: center; padding: 4px 0; border: 0; border-bottom: 3px solid var(--c); cursor: pointer; position: relative; font: inherit; color: inherit; }
+.loom-head.strip .avatar { width: 26px; height: 26px; font-size: 11px; }
+.loom-head.strip .avatar.online::after { width: 9px; height: 9px; }
+.loom-head.strip .pulse { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; }
+.loom-head.strip:hover { background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
+.loom-thread.strip { opacity: .3; }
+.loom-thread.crowd { opacity: .35; }
+
+.loom-head.crowd { position: relative; justify-content: center; padding: 0; border-bottom: 3px solid var(--border-strong); }
+.lcw-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: 3px 0 2px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); border-radius: 6px; position: relative; }
+.lcw-btn:hover, .loom-head.crowd.open .lcw-btn { background: var(--panel-2); color: var(--text); }
+.lcw-stack { display: flex; }
+.lcw-stack .avatar { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 2px var(--panel); }
+.lcw-stack .avatar + .avatar { margin-left: -7px; }
+.lcw-n { font-size: 11px; font-weight: 600; line-height: 1.2; }
+.lcw-btn .pulse { position: absolute; top: 2px; right: 4px; width: 7px; height: 7px; }
+.lcw-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 8; width: 240px; max-height: 340px; overflow: auto; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-pop); padding: 4px; }
+.lcw-title { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px; }
+.lcw-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
+.lcw-row:hover, .lcw-row:focus-visible { background: var(--panel-2); }
+.lcw-row .avatar { width: 22px; height: 22px; font-size: 10px; }
+.lcw-row .avatar.online::after { width: 8px; height: 8px; }
+.lcw-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
+.lcw-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
+.lcw-st .pulse { width: 6px; height: 6px; }
+
+/* A knot: what a folded lane did around this row. */
+.loom-knot { position: relative; z-index: 2; justify-self: center; align-self: start; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
+.kn-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px color-mix(in srgb, var(--c) 45%, transparent); transition: transform .15s; }
+.loom-knot:hover .kn-dot, .loom-knot.lit .kn-dot, .loom-knot.traced .kn-dot { transform: scale(1.35); }
+.kn-n { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 60%, var(--border)); font-size: 9.5px; font-weight: 700; line-height: 13px; color: var(--text); }
+.kn-new .kn-dot { animation: loom-knot-in 1.6s ease-out 2; }
+@keyframes loom-knot-in { 0% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--c); } 60% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 12px color-mix(in srgb, var(--c) 0%, transparent); } }
+.loom.focusing .loom-knot:not(.lit) { opacity: .25; }
+.loom-tip .kt-who { font-family: var(--sans); font-size: 12px; }
+.loom-tip .kt-line { overflow-wrap: anywhere; }
+
+.loom-needle.mini { padding-top: 4px; }
+.loom-needle.mini .lq { width: 22px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .kn-new .kn-dot { animation: none; }
+}
+
+/* Light mode (--light, app.css): cards lift like the rest of the app, with a hairline and a soft drop;
+   the lane's colour stays as the left edge. */
+@container style(--light: 1) {
+  .lc { border-color: transparent; border-left-color: var(--c); box-shadow: var(--card); }
+  .lc-turn:hover { box-shadow: var(--card-hover); }
+  .lc.open { border-color: color-mix(in srgb, var(--c) 45%, transparent); border-left-color: var(--c); box-shadow: var(--card-hover); }
+  .loom.tracing .lc.traced { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), var(--card-hover); }
+  .loom.focusing .lc.lit { box-shadow: 0 0 0 2px var(--c), var(--card-hover); }
+}