packages/commenting/src/ui/comments.css - main - githubmirror/tldraw

packages/commenting/src/ui/comments.css
967 строк29 KB
Mime Čuvalo
feat: commenting followups, pt 2 (#9850)
05 авг 2026, 12:17
05 авг 2026, 12:17c767553
/* Real comment UI components. Co-located so styles travel to any view (studio,
   canvas), and themed via tldraw's --tl-color tokens so they follow light/dark. */
.tlui-cmt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	width: 260px;
	background: var(--tl-color-panel);
	border: 1px solid var(--tl-color-divider);
	border-radius: var(--tl-radius-3);
}

/* The avatar lives in the byline row (see Byline), so the body text below indents to line up with
   the name — the avatar's width plus the head's gap. */
.tlui-cmt-body {
	padding-left: calc(28px + 6px);
}

/* hover-revealed controls (edit, react…) stacked at the card's top-right */
.tlui-cmt-card__actions {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 0;
	opacity: 0;
}
.tlui-cmt-card:hover .tlui-cmt-card__actions,
.tlui-cmt-card:focus-within .tlui-cmt-card__actions,
/* an open menu is portaled out of the card, so neither :hover nor :focus-within survives moving
   the pointer into it — keep the controls up while their menu is open */
.tlui-cmt-card__actions:has([data-state='open']) {
	opacity: 1;
}

.tlui-cmt-body {
	flex: 1;
	min-width: 0;
}

.tlui-cmt-head {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tlui-cmt-author {
	font-weight: 500;
	font-size: 12px;
	color: var(--tl-color-text-1);
	/* a long name ellipsizes rather than pushing the time out or running under the actions */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tlui-cmt-time {
	font-size: 12px;
	color: var(--tl-color-text-3);
	flex-shrink: 0;
	white-space: nowrap;
}

/* In the hover preview a long comment truncates with an ellipsis rather than growing the card —
   ~7 lines (≈120px at this line height). Preview only. */
.tlui-cmt-canvas-preview--thread .tlui-cmt-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	overflow: hidden;
}

.tlui-cmt-text {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tl-color-text-1);
	/* Break long unbroken strings (URLs, keyboard-mashing) so they wrap inside the card instead of
	   overflowing it. `anywhere` also lets the flex body shrink to the card width. */
	overflow-wrap: anywhere;
}

/* A comment body is read-only but its text must stay selectable so it can be copied. tldraw's
   container sets `user-select: none` on every descendant (`.tl-container *`) to keep canvas gestures
   from selecting UI text, so the body and its rendered children have to opt back in. */
.tlui-cmt-text,
.tlui-cmt-text * {
	-webkit-user-select: text;
	user-select: text;
}

.tlui-cmt-edited {
	font-style: italic;
}

/* rendered rich text inside a comment body — bare tags emitted by the comment renderer
   (paragraphs, lists, code, highlight, links), matching the limited comment extension set. */
.tlui-cmt-text p {
	margin: 0;
}

.tlui-cmt-text p + p,
.tlui-cmt-text p + ul,
.tlui-cmt-text p + ol,
.tlui-cmt-text ul + p,
.tlui-cmt-text ol + p {
	margin-top: 6px;
}

.tlui-cmt-text ul,
.tlui-cmt-text ol {
	margin: 0;
	padding-left: 18px;
}

.tlui-cmt-text code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.92em;
	background: var(--tl-color-muted-2);
	border-radius: 3px;
	padding: 0 3px;
}

.tlui-cmt-text mark {
	background: color-mix(in srgb, #ffeb3b 60%, transparent);
	color: inherit;
	border-radius: 2px;
}

.tlui-cmt-text a {
	color: var(--tl-color-selected);
	text-decoration: underline;
}

/* Avatar and mention styles live in @tldraw/mentions (src/mention.css) and are bundled into
   commenting.css by copy-css-files.mjs. */

/* composer — an avatar beside a rounded-rect field holding the rich-text input and the send button.
   Formatting is applied via markdown and keyboard shortcuts (no toolbar). The avatar aligns to the
   top so it stays put as the field grows to multiple lines. */
.tlui-cmt-composer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 4px 0 8px 4px;
}

.tlui-cmt-composer__field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 3px 3px 8px;
	background: var(--tl-color-muted-0);
	border: 1px solid var(--tl-color-divider);
	border-radius: var(--tl-radius-2);
	/* The whole field reads as the text input — clicking its empty area focuses the editor
	   (see CommentComposer). The send button restores its own pointer cursor. */
	cursor: text;
}

.tlui-cmt-composer__field:focus-within {
	border-color: var(--tl-color-selected);
	background: var(--tl-color-panel);
}

/* Expanded: the content no longer fits on one line beside the send button, so the input takes
   the full width and the send button drops to its own row, right-aligned. */
.tlui-cmt-composer__field--expanded {
	flex-wrap: wrap;
	/* No vertical gap between the input and the send-button row it wraps onto. */
	row-gap: 0;
}
.tlui-cmt-composer__field--expanded .tlui-cmt-composer__input-wrap {
	flex-basis: 100%;
	/* The field pads 8px left but only 3px right (the send button's inset). With the input
	   spanning the full width, give the text the same 8px on the right. */
	padding-right: 5px;
}
.tlui-cmt-composer__field--expanded .tlui-cmt-send {
	margin-left: auto;
}

/* the editable area, with the placeholder overlaid while it's empty */
.tlui-cmt-composer__input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	/* Frames the input's line height symmetrically so the text sits centred in the field. Paired
	   with the input's min-height, which equals its line height (no gap for the text to top-align
	   into). Keeps the field's overall height. */
	padding: 4.5px 0;
}

/* The hidden single-line measuring clone of the editor's content (see CommentComposer). */
.tlui-cmt-composer__mirror {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	width: max-content;
}

.tlui-cmt-input {
	font: inherit;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tl-color-text-1);
	outline: none;
	min-height: 17px;
	white-space: pre-wrap;
	word-break: break-word;
}

.tlui-cmt-input p {
	margin: 0;
}

.tlui-cmt-input p + p,
.tlui-cmt-input p + ul,
.tlui-cmt-input p + ol {
	margin-top: 4px;
}

.tlui-cmt-input ul,
.tlui-cmt-input ol {
	margin: 0;
	padding-left: 18px;
}

.tlui-cmt-input__placeholder {
	position: absolute;
	top: 4.5px;
	left: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tl-color-text-3);
	pointer-events: none;
}

/* iOS Safari zooms the whole page in when a text input with a sub-16px font takes focus, and doesn't
   zoom back out. Raising the font to 16px on touch devices suppresses that without disabling
   pinch-zoom of the canvas (which a `maximum-scale` viewport lock would). Must come after both base
   rules above: a media query adds no specificity, so it only wins the placeholder on source order. */
@media (pointer: coarse) {
	.tlui-cmt-input,
	.tlui-cmt-input__placeholder {
		font-size: 16px;
	}
}

/* A bare up-arrow icon button (matching the placement composer): no fill by default, a grey square
   on hover, grey while there's nothing to send and dark once there is. */
.tlui-cmt-send {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--tl-radius-2);
	background: transparent;
	color: var(--tl-color-text-3);
	cursor: pointer;
	align-self: center;
}

.tlui-cmt-send:not(:disabled) {
	color: var(--tl-color-text-1);
}

.tlui-cmt-send:hover:not(:disabled) {
	background: var(--tl-color-muted-2);
}

.tlui-cmt-send:active:not(:disabled),
.pseudo-active .tlui-cmt-send:not(:disabled) {
	background: var(--tl-color-muted-1);
}

.tlui-cmt-send:focus-visible,
.pseudo-focus-visible .tlui-cmt-send {
	outline: 2px solid var(--tl-color-selected);
	outline-offset: 2px;
}

.tlui-cmt-send:disabled {
	background: transparent;
	color: var(--tl-color-text-3);
	cursor: not-allowed;
}

/* The shared marker treatment. To the pointer a comment pin and a count badge are the same
   object — a token sitting on the canvas — so they rest and lift identically; everything shared
   lives here so the two can't drift apart. */
.tlui-cmt-marker {
	box-shadow: var(--tlui-cmt-marker-shadow);
	cursor: pointer;
	transition:
		transform var(--tlui-cmt-marker-transition),
		box-shadow var(--tlui-cmt-marker-transition);
}

.tlui-cmt-marker:hover {
	transform: scale(var(--tlui-cmt-marker-hover-scale));
}

/* The hover shadow is for closed markers only — an open one keeps its selection ring, which this
   box-shadow would otherwise override (the hover selector outranks the --open rule). */
.tlui-cmt-marker:not(.tlui-cmt-marker--open):hover {
	box-shadow: var(--tlui-cmt-marker-shadow-hover);
}

/* Count badges don't react to hover — no scale, no shadow lift. Only pins do. */
.tlui-cmt-count-badge:hover {
	transform: none;
	box-shadow: var(--tlui-cmt-marker-shadow);
}

/* Pins don't scale on hover — only the shadow lifts. */
.tlui-cmt-pin:hover {
	transform: none;
}

/* open: the thread (or a stack's list) is showing — the active marker just keeps its lift shadow,
   no selection ring. */
.tlui-cmt-marker--open {
	box-shadow: var(--tlui-cmt-marker-shadow);
}

/* pin — a canvas marker: a white teardrop holding the author's avatar circle, so a thread is
   identifiable at a glance. */
.tlui-cmt-pin {
	--tlui-cmt-marker-size: var(--tlui-cmt-pin-size);
	width: var(--tlui-cmt-marker-size);
	height: var(--tlui-cmt-marker-size);
	border-radius: 50% 50% 50% 0;
	background: var(--tl-color-panel);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
}
/* The pin holds the author's 22px avatar circle, centred in its 28px face. */
.tlui-cmt-pin .tlui-cmt-avatar {
	width: 22px;
	height: 22px;
}

/* resolved: a solid, muted grey (the default --tl-color-muted-1 is 10% black, so it goes
   translucent over the canvas). Dark mode gets its own grey — the token's dark value is near-black. */
.tlui-cmt-pin--resolved {
	background: #dfe0e1;
	color: hsl(214, 8%, 42%);
}
.tl-theme__dark .tlui-cmt-pin--resolved {
	background: hsl(240, 5%, 30%);
	color: hsl(0, 0%, 72%);
}

/* count badge — the same marker as a pin. */
.tlui-cmt-count-badge {
	width: var(--tlui-cmt-marker-size);
	height: var(--tlui-cmt-marker-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tl-color-text-1);
	color: var(--tl-color-panel);
	font-size: 12px;
	font-weight: 700;
	user-select: none;
}

/* thread */
.tlui-cmt-thread {
	display: flex;
	flex-direction: column;
	width: 300px;
}

.tlui-cmt-thread__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tl-color-text-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tlui-cmt-badge {
	font-size: 10px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	background: var(--tl-color-muted-1);
	padding: 1px 6px;
	border-radius: 999px;
}

/* reactions */
.tlui-cmt-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.tlui-cmt-reaction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border: none;
	border-radius: var(--tl-radius-1);
	background: var(--tl-color-muted-2);
	font: inherit;
	font-size: 10px;
	font-weight: 400;
	color: var(--tl-color-text-1);
}

/* An inert pill renders as a span (e.g. in a notification row); only the button variant is
   clickable, so only it gets the pointer cursor and hover shade. */
button.tlui-cmt-reaction {
	cursor: pointer;
}

/* Hover deepens the grey — no border to tint now. Mixing toward the text colour is theme-aware:
   it darkens the fill in light mode and lightens it in dark, tracking the pill's own contrast. */
button.tlui-cmt-reaction:hover {
	background: var(--tl-color-muted-1);
}

/* a reaction you're part of fills with the selection colour, so "I reacted with this" stands out
   from the grey pills of reactions you haven't joined. */
.tlui-cmt-reaction--active {
	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
}

button.tlui-cmt-reaction--active:hover {
	background: color-mix(in srgb, var(--tl-color-selected) 38%, var(--tl-color-panel));
}

/* The emoji renders larger than the 10px count, but its pinned line-height keeps the pill the
   count's height — the glyph overflows the line box rather than growing it. */
.tlui-cmt-reaction__emoji {
	font-size: 13px;
	line-height: 10px;
}

.tlui-cmt-reaction__count {
	color: var(--tl-color-text-3);
	font-variant-numeric: tabular-nums;
}

.tlui-cmt-reaction--active .tlui-cmt-reaction__count {
	color: var(--tl-color-text-1);
}

/* emoji picker */
.tlui-cmt-emoji-picker {
	display: grid;
	grid-template-columns: repeat(5, 40px);
	gap: 0;
	padding: 4px;
}

.tlui-cmt-emoji-picker__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}

/* Inset wash behind the glyph — the 40px hit cells tile edge-to-edge, the squares sit 4px apart,
   like the thread action buttons. Sits under the emoji so an opaque selected fill can't hide it. */
.tlui-cmt-emoji-picker__item::after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: -1;
	border-radius: var(--tl-radius-2);
}
.tlui-cmt-emoji-picker__item:hover {
	z-index: 1;
}
.tlui-cmt-emoji-picker__item:hover::after {
	background: var(--tl-color-muted-2);
}

.tlui-cmt-emoji-picker__item--active::after {
	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
}

/* empty state */
.tlui-cmt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	width: 240px;
}

.tlui-cmt-empty__icon {
	font-size: 28px;
}

.tlui-cmt-empty__message {
	margin: 0;
	color: var(--tl-color-text-3);
	font-size: 12px;
	line-height: 1.4;
}

/* a comment thread: an elevated panel holding a header, an optional resolved banner, the
   comments, and a reply composer */
/* The thread panel's layout metrics live on the container because two separate portals need them:
   the panel itself, and the canvas hover preview, which has to land its first comment on exactly
   the pixel the panel would. Deriving the preview's offset from these means the two can't drift —
   retune the padding or the header here and the preview follows. */
.tl-container {
	/* Everything that has to line up against a pin — its preview's bridge, the draft composer's
	   offsets, `PIN_SIZE` in thread-view.tsx — derives from this, so the pin's size stays one
	   number. */
	--tlui-cmt-pin-size: 28px;
	/* A cluster badge and a stack badge are this square — the same size as a pin, so the marker
	   kinds read as one family. The hover preview measures its bridge against it, so the bridge
	   stops at the marker's edge instead of covering it. Mirrored by `MARKER_SIZE` in
	   thread-view.tsx. */
	--tlui-cmt-marker-size: var(--tlui-cmt-pin-size);
	/* How a marker sits, lifts, and rings. Shared so a pin and a badge respond identically.
	   shadow-3's depth without its `inset 1px panel-contrast` edge — that inset reads as a white
	   border on a coloured pin (it's invisible on the panel-white menus shadow-3 is meant for). */
	--tlui-cmt-marker-shadow: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%);
	--tlui-cmt-marker-shadow-hover: var(--tlui-cmt-marker-shadow);
	--tlui-cmt-marker-hover-scale: 1.08;
	--tlui-cmt-marker-transition: 0.08s ease;
	--tlui-cmt-thread-padding: 12px;
	--tlui-cmt-thread-gap: 0px;
	/* Hit-area width of one .tlui-cmt-thread__action button (drawn as a 32px square inset 4px). */
	--tlui-cmt-thread-action-size: 40px;
	/* A floating pill's edge — its hairline ring is the only thing separating it from the panel it
	   overlaps, so the ring is a theme token rather than a literal black: a near-black hairline
	   vanishes on a dark panel, where the divider token lightens instead. The drop below it stays
	   literal; a soft dark blur reads on both themes. */
	--tlui-cmt-pill-shadow: 0 0 0 1px var(--tl-color-divider), 0 1px 3px hsl(0, 0%, 0%, 0.05);
}

.tlui-cmt-thread {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 300px;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-4);
	box-shadow: var(--tl-shadow-3);
}
/* A pill of its own, floating above the panel's top-right corner and overlapping its top edge. */
.tlui-cmt-thread__header {
	position: absolute;
	right: 10px;
	bottom: calc(100% - 15px);
	display: flex;
	gap: 2px;
	padding: 2px;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-3);
	box-shadow: var(--tlui-cmt-pill-shadow);
	transition: opacity 0.1s ease;
}
/* The first comment's hover actions surface right where the header pill sits, so hide the pill
   while that comment is hovered — one pill in the corner, never two stacked. */
.tlui-cmt-thread:has(.tlui-cmt-thread__list > :first-child:hover)
	.tlui-cmt-thread__header:not(:has(.tlui-cmt-thread__title)) {
	opacity: 0;
	pointer-events: none;
}
/* A title puts the header back in the panel, in flow. The pill above is tuned for the actions-only
   case tldraw itself uses: right-anchored and only as wide as its buttons, so a title inside it
   would grow leftwards off the panel's edge and float over whatever sits above. `header` is public
   API (see `CommentThreadProps`), so it has to keep laying out sensibly for anyone passing one. */
.tlui-cmt-thread__header:has(.tlui-cmt-thread__title) {
	position: static;
	align-items: center;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
.tlui-cmt-thread__title {
	padding: 10px 12px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--tl-color-text-1);
}
.tlui-cmt-thread__actions {
	display: flex;
	gap: 0;
	/* Right-align the actions whether or not the header has a title (it currently has none, so
	   space-between alone would leave them at the left). */
	margin-left: auto;
}
/* These are TldrawUiButtons (type="icon"), so the 40px box, the 32px ::after square carrying the
   hover wash, and the hover z-index flip all come from .tlui-button — the hit area (not the
   ::after) is what's clickable, and it never reaches past its row. Only the bits that differ from
   a toolbar button are set here, at .tlui-button's specificity + 1 so stylesheet order can't
   decide the winner. */
.tlui-button.tlui-cmt-thread__action {
	width: 40px;
	padding: 0;
	border-radius: 6px;
	color: var(--tl-color-text-3);
	font-size: 14px;
	line-height: 1;
}
/* Overlap each button 4px into the previous so the 32px visual squares sit 4px apart, not 8px.
   Left-only, so the last button's hit area still stops at its row's right edge. */
.tlui-cmt-thread__action + .tlui-cmt-thread__action {
	margin-left: -4px;
}
.tlui-button.tlui-cmt-thread__action:hover {
	color: var(--tl-color-text-1);
}
.tlui-button.tlui-cmt-thread__action--danger:hover {
	color: var(--tl-color-danger);
}
.tlui-cmt-thread__resolved {
	margin: 4px 12px;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--tl-color-muted-2);
	font-size: 12px;
	color: var(--tl-color-text-3);
}
.tlui-cmt-thread__list {
	display: flex;
	flex-direction: column;
	gap: var(--tlui-cmt-thread-gap);
}
/* When nothing follows the list (a resolved thread has no composer or footer) the last comment
   would sit against the panel's rounded bottom — restore the trailing inset the composer supplies. */
.tlui-cmt-thread__list:last-child {
	padding-bottom: 12px;
}
/* The footer slot sits where the composer would — its content (e.g. a sign-in prompt) sits at
   the thread's trailing edge, like the composer's send button. */
.tlui-cmt-thread__footer {
	display: flex;
	justify-content: flex-end;
	padding: 4px 2px 2px;
}
/* Inside a thread, author identity is a small colour dot, no initial — the letter doesn't fit
   at this size. */
.tlui-cmt-thread .tlui-cmt-avatar,
.tlui-cmt-canvas-preview--thread .tlui-cmt-avatar,
.tlui-cmt-canvas-preview--list .tlui-cmt-avatar,
.tlui-cmt-stack-list .tlui-cmt-avatar {
	width: 12px;
	height: 12px;
	font-size: 0;
}

.tlui-cmt-thread .tlui-cmt-composer {
	padding: 12px;
}
.tlui-cmt-thread .tlui-cmt-composer .tlui-cmt-avatar {
	display: none;
}

/* The sidebar's rows use the same small colour dot as the thread view. */
.tlui-cmt-list .tlui-cmt-avatar {
	width: 14px;
	height: 14px;
	font-size: 0;
	margin-top: 2px;
}
/* The sidebar row already leads with its own avatar (the flex row's first column); the byline's
   avatar — added for the canvas thread views — would double it, so hide the byline's inside a row. */
.tlui-cmt-list .tlui-cmt-head .tlui-cmt-avatar {
	display: none;
}

/* The dot treatment is for colour-only identity — an image avatar stays full size. */
.tlui-cmt-thread .tlui-cmt-avatar--image,
.tlui-cmt-canvas-preview--thread .tlui-cmt-avatar--image,
.tlui-cmt-canvas-preview--list .tlui-cmt-avatar--image,
.tlui-cmt-stack-list .tlui-cmt-avatar--image {
	/* Match the 12px colour dot's width so the body's calc(12px + 6px) indent still lines up under
	   the byline name when the author has an image rather than a dot. */
	width: 12px;
	height: 12px;
	margin-top: 0;
}
.tlui-cmt-list .tlui-cmt-avatar--image {
	width: 24px;
	height: 24px;
	margin-top: 0;
}

/* inside the panel, comments are plain content — no surrounding box; the composer's field carries
   its own surface. The hover preview is the same panel without a header, so its comment is laid
   out by the same rule rather than a copy of it. */
.tlui-cmt-thread .tlui-cmt-card,
.tlui-cmt-canvas-preview--thread .tlui-cmt-card {
	width: 100%;
	gap: 0;
	padding: 0 var(--tlui-cmt-thread-padding);
	background: transparent;
	border: none;
}
/* The avatar is a 12px dot, so the body lines up 12px + the head's 6px gap in from the row. */
.tlui-cmt-thread .tlui-cmt-body,
.tlui-cmt-canvas-preview--thread .tlui-cmt-body,
.tlui-cmt-canvas-preview--list .tlui-cmt-body,
.tlui-cmt-stack-list .tlui-cmt-body {
	padding-left: calc(12px + 6px);
}
/* Inside a panel the actions float as their own pill — the same pill the thread header is, in the
   same corner (which is why the header hides while the first comment is hovered). It sits just
   above the card's top edge rather than on the byline. */
/* Line the card actions up with the header actions: flush to the full-width card's right edge (the
   panel edge, matching the header ✕) and flush on the 40px byline row, so the 40px buttons fill it. */
.tlui-cmt-thread .tlui-cmt-card .tlui-cmt-card__actions {
	top: 0;
	right: 0;
}
/* The byline row is 40px: on the opened thread it fits the action pills (react/edit/delete) that
   float in its corner without the text running underneath; previews and collapsed cards carry the
   same height so every comment row reads identically, solo or in a stack. */
.tlui-cmt-thread .tlui-cmt-card .tlui-cmt-head,
.tlui-cmt-canvas-preview--thread .tlui-cmt-card .tlui-cmt-head,
.tlui-cmt-canvas-preview--list .tlui-cmt-card .tlui-cmt-head,
.tlui-cmt-stack-list .tlui-cmt-card .tlui-cmt-head {
	min-height: 40px;
}
/* Reserve head room only for pills that actually rendered (one child / two children) — pill count
   is a permissions question (canModifyComment), not ownership, and empty slots (read-only viewers)
   keep the full row. Sized from the 40px hit areas (4px overlap), minus the card padding the
   right:0 pills sit over; text stops 4px shy of the visible square. */
.tlui-cmt-thread .tlui-cmt-card:has(.tlui-cmt-card__actions > *) .tlui-cmt-head {
	padding-right: calc(var(--tlui-cmt-thread-action-size) - var(--tlui-cmt-thread-padding));
}
.tlui-cmt-thread .tlui-cmt-card:has(.tlui-cmt-card__actions > * + *) .tlui-cmt-head {
	padding-right: calc(
		2 * var(--tlui-cmt-thread-action-size) - 4px - var(--tlui-cmt-thread-padding)
	);
}

/* comments list — thread summaries, one per row (used by the canvas sidebar) */
.tlui-cmt-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.tlui-cmt-list__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 2px 2px 14px;
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-cmt-list__header-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--tl-color-text-1);
}

/* An icon button in the sidebar header (filter funnel, overflow …). Sized like the thread actions:
   a TldrawUiButton (type="icon") left at its native 40px box, with .tlui-button's 32px ::after
   square carrying the hover wash. Only the bits that differ are set here, at .tlui-button's
   specificity + 1 so stylesheet order can't decide the winner. */
.tlui-button.tlui-cmt-header-btn {
	width: 40px;
	padding: 0;
	border-radius: 6px;
	color: var(--tl-color-text-2);
}
/* Overlap each button 4px into the previous so the 32px visual squares sit 4px apart, not 8px —
   the same tiling the thread actions use. */
.tlui-cmt-header-btn + .tlui-cmt-header-btn {
	margin-left: -4px;
}
.tlui-button.tlui-cmt-header-btn:hover,
.tlui-button.tlui-cmt-header-btn[data-state='open'] {
	color: var(--tl-color-text-1);
}
.tlui-cmt-list__header-actions {
	display: flex;
	align-items: center;
}

/* The commenting dropdowns' surface — a little air between the items and the menu edge. */
.tlui-cmt-menu {
	min-width: 100px;
	padding: 4px;
}

/* a menu row with a label and a right-aligned shortcut hint (overflow menu) */
.tlui-cmt-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 12px;
	color: var(--tl-color-text-1);
	cursor: pointer;
}
/* 36px visual inset within the 40px row — the hover wash the action and emoji buttons use. */
.tlui-cmt-menu-item::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: var(--tl-radius-2);
}
.tlui-cmt-menu-item:hover::after {
	background: var(--tl-color-muted-2);
}
/* Destructive menu entries (delete) — the same danger colour as tldraw's danger buttons. */
.tlui-cmt-menu-item--danger {
	color: var(--tl-color-danger);
}

.tlui-cmt-menu-item__shortcut {
	color: var(--tl-color-text-3);
	font-size: 12px;
}
.tlui-cmt-list__items {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.tlui-cmt-list__empty {
	padding: 20px 14px;
	color: var(--tl-color-text-3);
	font-size: 12px;
}
.tlui-cmt-list__item {
	position: relative;
	display: flex;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: none;
	border-bottom: 1px solid var(--tl-color-divider);
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
	/* rows can render as anchors (for open-in-new-tab); keep them looking like list rows */
	color: inherit;
	text-decoration: none;
}
/* The highlight is an inset, rounded wash like tldraw's buttons and menu items — not an
   edge-to-edge band — so a comment row lights up the same way every other interactive row does. */
.tlui-cmt-list__item::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	pointer-events: none;
}
.tlui-cmt-list__item:hover::after {
	background: var(--tl-color-muted-2);
}
/* Selected sits a step above hover so the open thread's row stays distinguishable while
   pointing at other rows — but only a step: the muted-1 token (10%) reads too heavy here.
   These rows sit on the opaque sidebar panel, so a translucent tint composes safely. */
.tlui-cmt-list__item--selected::after,
.tlui-cmt-list__item--selected:hover::after {
	background: hsl(0, 0%, 0%, 5%);
}
.tl-theme__dark .tlui-cmt-list__item--selected::after,
.tl-theme__dark .tlui-cmt-list__item--selected:hover::after {
	background: hsl(0, 0%, 100%, 5%);
}
/* resolved rows mute their content but keep the "Resolved" marker legible */
.tlui-cmt-list__item[data-resolved] .tlui-cmt-head,
.tlui-cmt-list__item[data-resolved] .tlui-cmt-list__item-preview {
	opacity: 0.55;
}
.tlui-cmt-list__item-body {
	flex: 1;
	min-width: 0;
}
.tlui-cmt-list__item-preview {
	margin-top: 2px;
	font-size: 12px;
	color: var(--tl-color-text-1);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* Long unbroken strings (URLs, mashed keys) wrap onto the clamped lines instead of clipping
	   mid-string — same treatment as the card body. */
	overflow-wrap: anywhere;
}
/* meta line under the preview: page label and/or a resolved marker */
.tlui-cmt-list__item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	font-size: 11px;
	color: var(--tl-color-text-3);
}
.tlui-cmt-list__item-resolved {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-weight: 600;
}
.tlui-cmt-list__item-page {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--tl-color-muted-2);
}
.tlui-cmt-list__item-replies {
	display: inline-flex;
	align-items: center;
}
/* reply count under a preview card's opening comment — the thread continues past what's shown */
.tlui-cmt-card__replies {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--tl-color-text-3);
}