/* The session ergonomics of 22 Oct (Chris): a running summary over a work's thread (work-sum.js), quick replies over its
   box (quick-replies.js), handing work on from inside a thread (work-hand.js), a pinned work in the list, an ask answered
   on its card in Your sessions (mine.js), and Send beside the floating microphone (voice.js). Its own file: style.css and
   panel.css are at their ceilings. */

/* The summary: over the thread, outside its scroll, so it is there however far the thread is scrolled. */
.work-sum { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 8px 0 4px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.work-sum[hidden] { display: none; }
.work-sum-row { display: flex; align-items: center; gap: 6px; }
.work-sum-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; flex: 1 1 auto; min-width: 0; }
@media (max-width: 699px) {
  /* Sliding sideways: its far edge fades, so a chip cut there reads as more to see. */
  .work-sum-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .work-sum-chips::-webkit-scrollbar { display: none; }
}
.work-sum-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.work-sum-chip.warn { color: var(--warn); border-color: rgba(234, 167, 95, 0.5); }
.work-sum-state { color: var(--text); font-weight: 600; }
.work-sum-state::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.work-sum-state.t-working::before { background: var(--gold); }
.work-sum-state.t-waiting::before { background: var(--ok); }
.work-sum-state.t-trouble::before { background: #c86b4a; }
@media (prefers-reduced-motion: no-preference) { .work-sum-state.t-working::before { animation: work-beat 1.4s ease-in-out infinite; } }
.work-sum-nav { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: 12px; color: var(--muted); }
.work-sum-nav[hidden] { display: none; }
.detail .work-sum-go { min-width: 32px; min-height: 28px; margin: 0; padding: 0 8px; border-radius: 999px; border: 1px solid var(--pot-ring); background: #17110d; background-image: var(--pot-glaze); color: var(--pot-papyrus); font: 600 16px/1 var(--font); }
.work-sum-at { padding: 0 4px; white-space: nowrap; }
.detail .work-sum-line { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: 400 13px/1.35 var(--font); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detail .work-sum-line[hidden] { display: none; }
.detail .work-sum-line.asks { color: var(--warn); font-weight: 600; }
.work-sum-more { display: grid; gap: 3px; padding-top: 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.work-sum-more[hidden] { display: none; }
.work-sum-fact { margin: 0; overflow-wrap: anywhere; }
.work-sum-head { color: var(--faint); }
.work-sum-files { margin: 2px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 11.5px; max-height: 120px; overflow-y: auto; }
/* The edge that brings the list of works down is the thread's top, under the summary. */
.work-pane.has-sum .work-edge { top: var(--sum-h, 0px); }

/* Quick replies: each chip its whole phrase, on one line that slides sideways, just over the box. */
.work-dock > .work-quick { pointer-events: none; }
.work-quick { touch-action: pan-x; display: flex; gap: 6px; overflow-x: auto; padding: 1px 0 2px; scrollbar-width: none; justify-content: flex-start; }
.work-quick::-webkit-scrollbar { display: none; }
.work-quick[hidden], .work-quick-edit[hidden] { display: none; }
.work-quick > * { pointer-events: auto; }
.detail .work-quick-chip {
  flex: 0 0 auto; max-width: 240px; min-height: 30px; margin: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--pot-ring);
  background: #17110d; background-image: var(--pot-glaze); color: var(--pot-papyrus); font: 600 12.5px/1.3 var(--font); text-align: left; white-space: normal;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.detail .work-quick-chip:hover { border-color: var(--pot-gold); }
.detail .work-quick-chip.own { border-color: rgba(229, 175, 79, 0.55); }
.detail .work-quick-chip.edit { color: var(--gold); font-weight: 400; }
.detail .work-quick-chip.undo { background: var(--pot-clay); border-color: var(--pot-edge); color: var(--pot-ink); }
.work-quick-sending { align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.work-quick-edit { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); pointer-events: auto; }
.work-quick-own { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.work-quick-add { display: flex; gap: 6px; }
.work-quick-add input { flex: 1; min-width: 0; }
.work-quick-edit .msg:empty { display: none; }

/* Handing work on from inside a thread: a word to a crew member, or a new session for him to approve. */
.work-hand { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--gold); background: var(--panel); pointer-events: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.work-hand[hidden] { display: none; }
.work-hand-head { margin: 0; font-size: 14px; font-weight: 600; }
.work-hand .meta { margin: 0; font-size: 12.5px; }
.work-hand-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.work-hand textarea { width: 100%; min-height: 64px; }
.work-hand select { max-width: 100%; }
.work-hand .msg:empty { display: none; }

/* A pinned work in the list. */
.work-pin-mark { flex: none; display: inline-block; width: 18px; height: 18px; background: var(--gold); transform: rotate(35deg); filter: drop-shadow(0 0 4px rgba(229, 175, 79, 0.55));
  --p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 2.5l6 6-2.2.9-3.1 3.1.3 4.2-1.6 1.6-4.5-4.5-6 6-1.2-1.2 6-6-4.5-4.5 1.6-1.6 4.2.3 3.1-3.1z'/%3E%3C/svg%3E");
  -webkit-mask: var(--p) center / contain no-repeat; mask: var(--p) center / contain no-repeat; }
/* The model's picture at a card's top right. */
.work-strip-item { position: relative; }
.work-model-mark.work-strip-model { position: absolute; bottom: 8px; right: 10px; width: 20px; height: 20px; margin: 0; pointer-events: none; }
.work-strip-item:has(.work-strip-model) .work-strip-meta { padding-right: 24px; box-sizing: border-box; }

/* An ask waiting on him, under its card in Your sessions: answered there, as in its thread. */
.mine-ask { margin: -2px 0 10px; }
.mine-ask .work-ask { margin: 0; }

/* Send, beside the red microphone that floats while its box is out of sight. */
.voice-float-send {
  position: fixed; z-index: 90; right: calc(max(16px, env(safe-area-inset-right)) + 66px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 86px);
  min-height: 36px; margin: 0; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--pot-edge); background: var(--pot-clay); color: var(--pot-ink);
  font: 600 14px/1.2 var(--font); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); cursor: pointer;
}
.voice-float-send[hidden] { display: none; }

/* On a phone the dictation controls are Apple-style glass, and the caption is moved with a finger (voice.js). */
@media (pointer: coarse) {
  .voice-float, .voice-float-send {
    background: rgba(217, 69, 61, .42); color: #fff; border: 1px solid rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .12);
  }
  .voice-float-send { background: rgba(255, 255, 255, .2); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
  .voice-float-send[data-armed="1"] { background: rgba(217, 69, 61, .55); }
  .voice-caption { pointer-events: auto; background: rgba(20, 17, 15, .3); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
}
@media (pointer: fine) { .voice-caption { display: none; } }

/* The summary folded to a slim line he can swipe away and back (work-sum.js). */
.detail .work-sum-fold { flex: none; min-width: 28px; min-height: 28px; margin: 0; padding: 0 6px; border: 0; background: none; color: var(--faint); font: 600 15px/1 var(--font); }
.work-sum-handle[hidden] { display: none; }
.detail .work-sum-handle { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 24px; margin: 2px 0 2px; padding: 0 8px; border: 0; background: none; color: var(--faint); font: 400 12px/1.2 var(--font); }
.work-sum-grab { width: 28px; height: 4px; border-radius: 999px; background: var(--line); }
.work-sum-handle-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detail .work-sum-handle.asks { color: var(--warn); font-weight: 600; }
.detail .work-sum-handle.asks .work-sum-grab { background: var(--warn); }

/* Search over the Sessions list. */
.mine-search { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.mine-hits { display: grid; gap: 8px; margin: 0 0 14px; }
.mine-hits[hidden] { display: none; }
.mine-hits-count { margin: 0; }

/* A new session's start screen: his medallion, a greeting, a question. */
.mine-start-face, .work-hero-face { display: block; width: 84%; height: 84%; border-radius: 50%; overflow: hidden; }
.mine-start-face > *, .work-hero-face > * { display: block; width: 100%; height: 100%; }
.mine-start-ask { margin: 0; font-size: 14.5px; color: var(--muted); }

/* How full a session's context is on its lane card: "working · 53% · 12:39" (Chris, 25 Oct). */
.work-ctx { font-variant-numeric: tabular-nums; }
.work-ctx.warm { color: var(--warn, #d9a441); }
.work-ctx.hot { color: var(--bad, #e0624f); font-weight: 700; }

/* The deploy button among the quick replies: a terminal, since it ships code (Chris, 25 Oct). */
.work-quick-chip.deploy { background: #050a06; color: #3dff7a; border: 1px solid #1f8f45; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.02em; text-shadow: 0 0 6px rgba(61, 255, 122, 0.55); box-shadow: 0 0 10px rgba(61, 255, 122, 0.18), inset 0 0 8px rgba(61, 255, 122, 0.08); }
.work-quick-chip.deploy:disabled { opacity: 0.55; }

/* The model in use (Chris, 26 Oct): the thing Claude holds in each model's own picture, cut from it exactly (model-art/). Small, a mask in the
   text colour just before More; large, the whole picture, hand and all, on its own orange. */
.work-model-mark { flex: none; display: inline-block; width: 22px; height: 22px; margin: 0 2px 0 auto; background: currentColor; color: var(--muted);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.work-model-mark[hidden] { display: none; }
.work-model-mark + .work-more { margin-left: 0; }

/* The bar over the box (Chris, 5 Nov: More took a second line of its own where the row had room for it, beside the model's mark).
   Its first line is always where it stands, then the mark and More together (.work-bar-end), folded or open, so More never moves;
   the other controls come after them, on the lines below when they do not fit. On a narrow line the state's words give way first,
   cut short with an ellipsis, with what it changes to next; how full its context is never. Beside a button of its own (Start it
   again, Follow it) the state keeps its words whole and the button takes the next line. The follow link holds nothing on a session
   of his PC and is not drawn then: its glass made a stray dot, and its gap pushed More down. As a grid item of the dock the bar is
   never wider than the dock, so the state shrinks instead. */
.work-follow:empty { display: none; }
.work-dock > .work-bar { min-width: 0; }
.work-bar > .work-status { order: -2; flex: 1 1 0; min-width: 0; max-width: max-content; }
.work-bar:has(> .work-retry:not([hidden]), > .work-follow:not(:empty)) > .work-status { flex: 0 1 auto; }
.work-bar-end { order: -1; flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.work-bar-end:not(:has(> :not([hidden]))) { display: none; }
.work-status > :empty { display: none; }
.work-status > .ws-words, .work-status > .ws-next { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.work-status > .ws-next { flex: 1 1 0; max-width: max-content; }
.work-status > .ws-num { flex: none; white-space: nowrap; }
.m-sonnet { --m: url('/model-art/sonnet-object.png'); --art: url('/model-art/sonnet.png'); }
.m-haiku { --m: url('/model-art/haiku-object.png'); --art: url('/model-art/haiku.png'); }
.m-opus { --m: url('/model-art/opus-object.png'); --art: url('/model-art/opus.png'); }
.model-art { height: 120px; margin: 6px 0 2px; border-radius: 12px; background: #d37353 var(--art) center / contain no-repeat; }

/* Claude signed out on his PC (28 Oct): one compact card above the thread. It never shrinks, so the welcome layout cannot cut its button off. */
.work-login { flex: none; margin: 8px 0 0; padding: 12px 16px; border: 1px solid var(--gold); border-radius: 16px; background: var(--gold-soft); }
.work-login-kind { margin: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.work-login h4 { margin: 4px 0 6px; font-size: 16px; }
.work-login-text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.4; }
.work-login-acts { display: flex; gap: 8px; margin-top: 8px; }
.work-login .msg { margin: 6px 0 0; }