@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/comments.css

@@ -0,0 +1,1435 @@
+/* COMMENTS (Paper page 20) and the Viewer's chrome (page 21, "View only").
+ *
+ * The composer, the @ menu, a thread, the Comments tab, the inbox, the strip
+ * and scrubber badges, and the View only pill. Sizes and radii are Paper's;
+ * colours are the house tokens Paper's swatches name. */
+
+/* ---- shared pieces ------------------------------------------------------- */
+.comment-avatar {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  color: var(--on-accent);
+  font-weight: 700;
+  line-height: normal;
+  overflow: hidden;
+}
+
+/* The tailed avatar of a thread row and an inbox item: a speech bubble. */
+.comment-avatar.is-tailed {
+  border-bottom-left-radius: var(--radius-2xs);
+}
+
+.comment-mention {
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-xs);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: var(--weight-medium);
+}
+
+.comment-guest {
+  flex: none;
+  padding: 1px var(--space-2);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+}
+
+.comment-via-agent {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 18px;
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-full);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  line-height: var(--leading-none);
+}
+
+.comment-thread-spacer {
+  flex: 1 1 auto;
+}
+
+.comment-refusal {
+  margin: 0;
+  padding: var(--space-3) var(--space-6);
+  color: var(--danger-ink);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.comments-unread-dot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+}
+
+/* ---- the composer -------------------------------------------------------- */
+/* THE COLUMN'S WIDTH, IN THE CARD IT SITS IN. The composer is only ever a
+   draft at the top of the Comments tab (`PanelDraft`), inside a
+   `.comment-thread.is-inline` that already draws the card. It kept the
+   340px, the edge and the shadow of the floating composer it began as, so in
+   a narrower column the card ran past the panel: the panel scrolled sideways
+   and cut the text at both edges. `min-width: 0` lets it shrink with the
+   column; the field wraps inside it. Positioned for its @ menu. */
+.comment-composer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.comment-composer-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-6) 0;
+  min-width: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+
+.comment-composer-number {
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+.comment-composer-shot {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ink-2);
+  font-weight: var(--weight-medium);
+}
+
+.comment-composer-dim {
+  color: var(--ink-3);
+}
+
+.comment-composer-field {
+  padding: var(--space-5) var(--space-6) var(--space-6);
+}
+
+.comment-field {
+  display: block;
+  width: 100%;
+  min-height: 21px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-title);
+  line-height: var(--leading-md);
+  caret-color: var(--accent);
+  field-sizing: content;
+  max-height: 168px;
+}
+
+.comment-field::placeholder {
+  color: var(--ink-3);
+}
+
+.comment-composer-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
+  border-top: 1px solid var(--line);
+}
+
+.comment-composer-hints {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  min-width: 0;
+}
+
+.comment-at {
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: var(--type-title);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-sm);
+  cursor: pointer;
+}
+
+.comment-hint {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.comment-counter {
+  flex: none;
+  color: var(--ink-3);
+  font-family: var(--font-numeric);
+  font-size: var(--type-sm);
+}
+
+.comment-counter.is-over {
+  color: var(--danger-ink);
+}
+
+.comment-post {
+  flex: none;
+  height: 28px;
+  padding: 0 var(--space-6);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: inherit;
+  font-size: var(--type-lg);
+  font-weight: 600;
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.comment-post:disabled {
+  background: var(--surface-secondary);
+  color: var(--ink-3);
+  cursor: default;
+}
+
+/* The thread's reply footer. */
+.comment-reply {
+  position: relative;
+  background: var(--surface-sunken);
+  border-top: 1px solid var(--line);
+}
+
+.comment-reply-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
+}
+
+.comment-reply .comment-field {
+  flex: 1 1 auto;
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  min-height: 16px;
+}
+
+.comment-reply .comment-at {
+  font-size: var(--type-lg);
+  color: var(--ink-3);
+}
+
+.comment-reply .comment-post {
+  height: 26px;
+  font-size: var(--type-md);
+}
+
+/* ---- the @ menu ---------------------------------------------------------- */
+.mention-menu {
+  position: absolute;
+  z-index: 1;
+  left: 8px;
+  top: 100%;
+  margin-top: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  /* Its 300px, but never past the composer's own edges, 8px in on each
+     side: the column goes down to 264. */
+  width: min(300px, calc(100% - 16px));
+  padding: var(--space-3);
+  background: var(--surface-panel);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-popover);
+}
+
+/* A reply's menu opens upward: the footer is the thread's last row. */
+.comment-reply > .mention-menu {
+  top: auto;
+  bottom: 100%;
+  margin: 0 0 var(--space-2);
+}
+
+.mention-section {
+  padding: var(--space-3) var(--space-4) var(--space-2);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.mention-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  height: 40px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-tab);
+  cursor: pointer;
+}
+
+.mention-row.is-active {
+  background: var(--surface-secondary);
+}
+
+.mention-row .comment-avatar {
+  font-weight: 600;
+}
+
+.mention-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+}
+
+.mention-role {
+  flex: none;
+  width: 70px;
+  text-align: right;
+  color: var(--ink-3);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.mention-outside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-top: var(--space-1);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--line);
+}
+
+.mention-row.is-outside .comment-avatar {
+  background: var(--surface-secondary) !important;
+  border: 1px dashed var(--line-strong);
+  color: var(--ink-2);
+}
+
+.mention-row.is-outside .mention-name {
+  color: var(--ink-2);
+}
+
+.mention-share {
+  flex: none;
+  color: var(--accent-ink);
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+}
+
+.mention-empty,
+.mention-note {
+  margin: 0;
+  padding: var(--space-3) var(--space-4) var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+}
+
+/* ---- a thread ------------------------------------------------------------ */
+.comment-thread {
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  max-height: 100%;
+  overflow: hidden;
+  background: var(--surface-panel);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-popover);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+/* In the Comments tab, under its row: the column's width, no float. */
+.comment-thread.is-inline {
+  width: auto;
+  margin: var(--space-2) 0 var(--space-4);
+  box-shadow: none;
+  overflow: visible;
+}
+
+.comment-thread-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.comment-thread-where {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.comment-thread-resolve {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 26px;
+  padding: 0 var(--space-5) 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.comment-thread-resolve svg {
+  color: var(--ink-2);
+}
+
+.comment-thread-more,
+.comment-message-more {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: var(--type-title);
+  line-height: var(--leading-sm);
+  cursor: pointer;
+}
+
+.comment-thread-more:hover,
+.comment-message-more:hover,
+.comment-thread-resolve:hover {
+  background: var(--fill-hover);
+}
+
+.comment-thread-meta {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+}
+
+.comment-thread-meta-label {
+  flex: none;
+  width: 58px;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.comment-assignee {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 24px;
+  padding: 0 var(--space-4) 0 var(--space-1);
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.comment-assignee:disabled {
+  cursor: default;
+}
+
+.comment-assignee .comment-avatar {
+}
+
+.comment-assignee svg {
+  color: var(--ink-3);
+}
+
+.comment-assignee-none {
+  padding-left: var(--space-2);
+  color: var(--ink-2);
+}
+
+.comment-status {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+}
+
+.comment-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--warn);
+}
+
+.comment-status.is-resolved .comment-status-dot {
+  background: var(--success);
+}
+
+.comment-thread-snapshot {
+  display: block;
+  margin: 0 var(--space-6) var(--space-5);
+  max-width: calc(100% - 28px);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+}
+
+.comment-thread-messages {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-2) var(--space-6) var(--space-6);
+}
+
+.comment-message {
+  display: flex;
+  gap: var(--space-5);
+}
+
+.comment-message-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.comment-message-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.comment-message-head .comment-message-more {
+  margin-left: auto;
+  height: 18px;
+  opacity: 0;
+}
+
+.comment-message:hover .comment-message-more,
+.comment-message-more:focus-visible {
+  opacity: 1;
+}
+
+.comment-message-name {
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  font-weight: 600;
+}
+
+.comment-message-time {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.comment-message-body {
+  margin: 0;
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  line-height: var(--leading-md);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.comment-message-body.is-deleted {
+  color: var(--ink-3);
+  font-style: italic;
+}
+
+.comment-message-edit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.comment-message-edit .comment-field {
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  font-size: var(--type-lg);
+  line-height: var(--leading-md);
+}
+
+.comment-message-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.comment-message-edit-actions .comment-post {
+  height: 26px;
+  font-size: var(--type-md);
+}
+
+.comment-thread-agent {
+  flex: none;
+  padding: 0 var(--space-6) var(--space-6);
+}
+
+.comment-agent-button,
+.comments-agent-all {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  height: 28px;
+  padding: 0 var(--space-5);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.comment-agent-button:hover,
+.comments-agent-all:hover {
+  background: var(--fill-state-soft);
+}
+
+/* ---- the board frame's popover ------------------------------------------- */
+.frame-comment-pop {
+  position: absolute;
+  z-index: var(--z-float);
+  display: flex;
+  pointer-events: auto;
+}
+
+/* ---- the Comments tab ---------------------------------------------------- */
+.inspector-column > .comments-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.comments-panel {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.comments-filters {
+  flex: none;
+  display: flex;
+  /* Four pills need about 280px on one line, and the column goes down to
+     264: the last ones take a second line rather than push the panel wide. */
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding: var(--space-6) var(--space-6) var(--space-5);
+}
+
+.comments-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 26px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.comments-filter.is-active {
+  border-color: transparent;
+  background: var(--ink-1);
+  color: var(--surface-sunken);
+  font-weight: 600;
+}
+
+.comments-filter-count {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  font-weight: 600;
+}
+
+.comments-filter.is-active .comments-filter-count {
+  color: color-mix(in srgb, var(--surface-sunken) 65%, transparent);
+}
+
+.comments-filter .comments-unread-dot {
+  width: 6px;
+  height: 6px;
+}
+
+.comments-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: 0 var(--space-4);
+}
+
+.comments-empty {
+  margin: 0;
+  padding: var(--space-7) var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+}
+
+.comments-shot.is-later {
+  margin-top: var(--space-3);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.comments-shot-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-4) var(--space-3);
+}
+
+.comments-shot-number {
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  color: var(--accent-ink);
+}
+
+.comments-shot-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-weight: 600;
+}
+
+.comments-shot-open {
+  flex: none;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.comments-frame-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-1) var(--space-4) var(--space-2);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.comments-frame-head.is-later {
+  padding-top: var(--space-4);
+}
+
+.comments-frame-thumb {
+  flex: none;
+  width: 32px;
+  height: 18px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-2xs);
+  overflow: hidden;
+}
+
+.comments-frame-thumb.is-removed {
+  border-style: dashed;
+}
+
+.comments-frame-label {
+  color: var(--ink-2);
+}
+
+.comments-frame-removed {
+  color: var(--warn);
+  font-weight: var(--weight-medium);
+}
+
+.comments-frame-was {
+  color: var(--ink-3);
+}
+
+.comments-thread {
+  display: flex;
+  gap: var(--space-5);
+  width: 100%;
+  padding: var(--space-5) var(--space-4);
+  border: 0;
+  border-radius: var(--radius-tab);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.comments-thread:hover {
+  background: var(--fill-hover);
+}
+
+.comments-thread.is-active {
+  background: var(--surface-secondary);
+}
+
+.comments-thread .comment-avatar {
+}
+
+.comments-thread-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.comments-thread-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.comments-thread-name {
+  color: var(--ink-1);
+  font-weight: 600;
+}
+
+.comments-thread-time,
+.comments-thread-meta {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.comments-thread-body {
+  color: var(--ink-1);
+  line-height: var(--leading-sm);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+
+.comments-thread-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.comments-thread-assignee {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.comments-thread-assignee .comment-avatar {
+}
+
+.comments-thread-orphan {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.comments-today {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
+  padding: var(--space-6) var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.comments-today-label {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.comments-today-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-1) 0;
+  border: 0;
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.comments-today-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comments-foot {
+  flex: none;
+  display: flex;
+  padding: var(--space-6);
+  border-top: 1px solid var(--line);
+}
+
+.comments-agent-all {
+  flex: 1 1 auto;
+  height: 32px;
+  border-radius: var(--radius-tab);
+  font-weight: 600;
+}
+
+/* The Comments tab's open count. */
+.column-tab-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  margin-left: var(--space-3);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  line-height: var(--leading-none);
+}
+
+/* ---- the inbox ----------------------------------------------------------- */
+.inbox-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  margin-left: var(--space-2);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-tab);
+  background: none;
+  color: var(--ink-1);
+  cursor: pointer;
+}
+
+.inbox-button:hover,
+.inbox-button[aria-expanded="true"] {
+  background: var(--fill-hover);
+}
+
+.inbox-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--space-2);
+  border: 2px solid var(--surface-sunken);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--type-micro);
+  font-weight: 700;
+  line-height: var(--leading-none);
+  box-sizing: border-box;
+}
+
+.inbox {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  max-height: min(560px, calc(100vh - 80px));
+  overflow: hidden;
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-popover);
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+}
+
+.inbox-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.inbox-title {
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  font-weight: 600;
+}
+
+.inbox-toggle {
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+}
+
+.inbox-toggle > button {
+  padding: var(--space-1) var(--space-4);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--ink-3);
+  font: inherit;
+  font-size: var(--type-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.inbox-toggle > button[aria-checked="true"] {
+  background: var(--fill-state-soft);
+  color: var(--ink-1);
+  font-weight: 600;
+}
+
+.inbox-mark-all {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--accent-ink);
+  font: inherit;
+  font-size: var(--type-sm);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.inbox-mark-all:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.inbox-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.inbox-empty {
+  margin: 0;
+  padding: var(--space-7) var(--space-6);
+  color: var(--ink-3);
+}
+
+.inbox-item {
+  display: flex;
+  gap: var(--space-5);
+  width: 100%;
+  padding: var(--space-6) var(--space-6);
+  border: 0;
+  border-top: 1px solid var(--line);
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.inbox-item:first-child {
+  border-top: 0;
+}
+
+.inbox-item.is-unread {
+  background: var(--fill-rest);
+}
+
+.inbox-item:hover {
+  background: var(--fill-hover);
+}
+
+.inbox-item .comment-avatar.is-tailed {
+  border-bottom-left-radius: var(--radius-xs);
+}
+
+.inbox-agent {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-full);
+  background: var(--accent-soft);
+}
+
+.inbox-item-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.inbox-item-title {
+  color: var(--ink-2);
+}
+
+.inbox-item.is-unread .inbox-item-title {
+  color: var(--ink-1);
+}
+
+.inbox-item-quote {
+  color: var(--ink-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.inbox-item-where,
+.inbox-item-time {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.inbox-item-side {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-3);
+}
+
+.inbox-foot {
+  flex: none;
+  padding: var(--space-5) var(--space-6);
+  border-top: 1px solid var(--line);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+/* ---- the strip and the scrubber ------------------------------------------ */
+.story-comment-count {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: 14px;
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-size: var(--type-micro);
+  font-weight: 700;
+  line-height: var(--leading-none);
+}
+
+.story-still-comments {
+  position: absolute;
+  /* 3px in from the picture's bottom right: STRIP_STILL is 52px tall. */
+  top: calc(52px - 3px - 13px);
+  right: 3px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: 13px;
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-micro);
+  font-weight: 700;
+  line-height: var(--leading-none);
+  cursor: pointer;
+}
+
+.story-still-comments.is-unread {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+.frame-scrubber-comments {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 3px);
+  width: 6px;
+  height: 6px;
+  translate: -50% 0;
+  border-radius: var(--radius-full);
+  background: var(--ink-3);
+  pointer-events: none;
+}
+
+.frame-scrubber-comments.is-unread {
+  background: var(--accent);
+}
+
+/* ---- the Viewer's chrome (page 21) --------------------------------------- */
+.view-only-pill {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-left: var(--space-3);
+  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-full);
+  background: var(--surface-panel);
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+
+.view-only-pill svg {
+  color: var(--ink-3);
+}
+
+/* ── comments in two places (S5) ─────────────────────────────────────────── */
+
+/* The place bar: which place's threads the list holds. */
+.comments-place-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: var(--panel-head-h);
+  padding-inline: var(--space-6);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--line);
+}
+.comments-place-title {
+  flex: none;
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  font-weight: 600;
+}
+.comments-place-sub {
+  /* The first to give way: it is the place's gloss, the chip its facts. */
+  flex: 0 10 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font: 11px/14px var(--font-mono);
+}
+.comments-place-chip {
+  /* It shrinks with the column, the shot's name giving way and the open
+     count never: a long name used to push the whole panel sideways. */
+  flex: 0 1 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 24px;
+  padding-inline: var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+
+.comments-place-chip-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.comments-place-chip-count {
+  flex: none;
+}
+
+/* A card's open counts: its own threads, then the Studio's about it. */
+.card-comment-counts {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.card-comment-chip {
+  padding: var(--space-1) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+.card-comment-chip.is-board {
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+}
+.card-comment-chip.is-studio {
+  background: var(--accent-quiet);
+  color: var(--accent-ink);
+}
+.comments-card-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-md);
+  font-weight: 500;
+}
+
+/* A Studio row's lead line: the pin's number, the moment, the layer. */
+.comments-thread-where {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  margin-bottom: var(--space-1);
+}
+.comments-studio-pin {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-tab) var(--radius-tab) var(--radius-tab) var(--radius-2xs);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--type-micro);
+  line-height: var(--leading-none);
+  font-weight: 600;
+}
+.comments-studio-time,
+.comment-thread-time,
+.comment-note-time {
+  flex: none;
+  color: var(--accent-ink);
+  font: 11px/16px Consolas, var(--font-mono);
+}
+.comments-thread-where-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  font-weight: 500;
+}
+
+/* A thread's head: "On card · 02 Cards gather", or the Studio's
+   "00:01.10 · Layer · Card back". */
+.comment-thread[data-kind="card"] .comment-thread-where,
+.comment-thread[data-kind="studio"] .comment-thread-where {
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: 500;
+}
+.comment-thread-dot {
+  flex: none;
+  color: var(--ink-3);
+}
+.comment-thread[data-kind="card"] .comment-thread-resolve,
+.comment-thread[data-kind="studio"] .comment-thread-resolve {
+  color: var(--ink-3);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+/* The other place's note about this thread. */
+.comment-note {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  margin: var(--space-3) var(--space-5) 0;
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid var(--accent-soft);
+  border-radius: var(--radius-md);
+  background: var(--accent-quiet);
+}
+.comment-note-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+.comment-note-open {
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: 500;
+  cursor: pointer;
+}
+.comment-note-open:hover {
+  text-decoration: underline;
+}
+.comment-note-open:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-2xs);
+}
+
+/* A card or Studio draft above its place's list. */
+.comments-draft {
+  margin: 0 var(--space-5) var(--space-5);
+}