/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */
/* This file is created by the copy-css-files.mjs script in packages/commenting. */
/* It combines the commenting package's ui and canvas stylesheets. */

/* avatar — a person's image, or a single-initial coloured circle. Shared by the mention picker and,
   via @tldraw/commenting, the comment UI. */
.tlui-cmt-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tl-color-selected);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
}

.tlui-cmt-avatar--image {
	object-fit: cover;
	background: none;
}

/* mention pill */
.tlui-cmt-mention {
	color: var(--tl-color-selected);
	font-weight: 600;
	background: color-mix(in srgb, var(--tl-color-selected) 12%, transparent);
	padding: 0 4px;
	border-radius: 4px;
}

/* mention picker */
.tlui-cmt-mention-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px;
	width: 100%;
	box-sizing: border-box;
	max-height: 260px;
	overflow-y: auto;
	color: var(--tl-color-text-1, #1d1d1d);
	background: var(--tl-color-panel, #fff);
	border-radius: 10px;
	/* shadow-3 (like the context menu) already carries a 1px inset edge — a separate `border`
	   on top of it double-outlines the popup. */
	box-shadow: var(--tl-shadow-3, 0 2px 12px rgba(0, 0, 0, 0.14));
}

.tlui-cmt-mention-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
	color: var(--tl-color-text-1);
	font: inherit;
}

.tlui-cmt-mention-list__item--active,
.tlui-cmt-mention-list__item:hover {
	background: var(--tl-color-muted-2, rgba(0, 0, 0, 0.06));
}

.tlui-cmt-mention-list__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.tlui-cmt-mention-list__name {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlui-cmt-mention-list__you {
	margin-left: 4px;
	font-weight: 400;
	color: var(--tl-color-text-3);
}

.tlui-cmt-mention-list__secondary {
	font-size: 12px;
	color: var(--tl-color-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlui-cmt-mention-list--empty {
	padding: 8px 10px;
	width: 100%;
	box-sizing: border-box;
	color: var(--tl-color-text-3);
	font-size: 13px;
}

/* the @-picker popup — anchored under the editor field, positioned by the suggestion plugin */
.tlui-cmt-mention-popup {
	position: fixed;
	z-index: var(--tl-layer-menus);
}

/* 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);
}

/* The comments layer renders through `EditorPortal`, so its pieces can pick their own layer rather
   than the one the component is mounted in. Pins live in the canvas-in-front layer (beneath the UI
   panels at z-index 300), so the toolbar and style panel draw over them; the open thread's popover
   goes to the menus layer instead (`.tlui-cmt-canvas-popover`) so it isn't clipped. Click-through
   except on its own children. */
.tlui-cmt-canvas-layer {
	position: absolute;
	inset: 0;
	/* Just below the collaborator cursor layer, so cursors ride over the pins — and below the
	   in-front content (250), so active tool UI covers both. Derived, not a literal, so the
	   ordering can't silently drift if the cursor slot moves. */
	z-index: calc(var(--tl-layer-collaborators) - 5);
	pointer-events: none;
}

.tlui-cmt-canvas-pin,
.tlui-cmt-canvas-cluster,
.tlui-cmt-canvas-composer {
	position: absolute;
}

.tlui-cmt-canvas-composer {
	pointer-events: auto;
}

/* The pin's only interactive surface is the square hit layer below — the wrapper itself is
   inert. Its box sits at the anchor point, not over the (translated) visual, so letting it take
   events would put a phantom hit zone beside the pin. */
.tlui-cmt-canvas-pin {
	pointer-events: none;
}

.tlui-cmt-button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
}

/* Anchored by its bottom-left corner like a pin, so the badge sits up-and-right of the cluster's
   centroid — the same visual-to-anchor relationship a single comment pin has. */
.tlui-cmt-canvas-cluster {
	transform: translate(0, -100%);
	pointer-events: auto;
	cursor: pointer;
}

/* Keyboard focus has to be visible on the canvas, where there's no surrounding chrome to imply
   it. The ring goes on the marker visual (the rounded pin/badge), not the button box, so it
   traces the shape rather than a rectangle around it; the button's own outline is suppressed
   because its box is offset from what you see. */
.tlui-cmt-canvas-pin__marker:focus-visible,
.tlui-cmt-canvas-cluster:focus-visible {
	outline: none;
}
.tlui-cmt-canvas-pin__marker:focus-visible .tlui-cmt-marker,
.tlui-cmt-canvas-cluster:focus-visible .tlui-cmt-marker {
	outline: 2px solid var(--tl-color-selected);
	outline-offset: 2px;
}
/* Focus should read like hover, so the pin lifts the same way when tabbed to. */
.tlui-cmt-canvas-pin__marker:focus-visible .tlui-cmt-marker {
	transform: scale(var(--tlui-cmt-marker-hover-scale));
}

.tlui-cmt-cluster-fade {
	opacity: 1;
	transition: opacity 150ms ease;
}

.tlui-cmt-cluster-fade--entering {
	opacity: 0;
}

.tlui-cmt-cluster-fade--present {
	opacity: 1;
}

.tlui-cmt-cluster-fade--exiting {
	opacity: 0;
}

.tlui-cmt-cluster-fade--entering *,
.tlui-cmt-cluster-fade--exiting * {
	pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.tlui-cmt-cluster-fade {
		transition: none;
	}
}

/* The open thread (its pin + popover) sits above the other pins, so nearby markers don't
   overlap its popover — they tuck behind it. */
.tlui-cmt-canvas-pin--open {
	z-index: 1;
}

/* The count badge standing in for a stack of coincident pins — same face as a cluster badge,
   but clicking opens the stack's thread list rather than zooming (no zoom can separate them).
   Re-enables pointer events: the badge lives inside `.tlui-cmt-canvas-pin`, which is inert
   (`pointer-events: none`) so its box doesn't shadow the canvas — without this the badge renders
   but can't be hovered or clicked, like the cluster badge's own `pointer-events: auto`. */
.tlui-cmt-canvas-stack-badge {
	/* Bottom-left anchored like the pins it stands in for, and like the cluster badge. */
	transform: translate(0, -100%);
	width: max-content;
	pointer-events: auto;
	cursor: pointer;
}

.tlui-cmt-canvas-stack-badge:focus-visible {
	outline: none;
}
.tlui-cmt-canvas-stack-badge:focus-visible .tlui-cmt-marker {
	outline: 2px solid var(--tl-color-selected);
	outline-offset: 2px;
	transform: scale(var(--tlui-cmt-marker-hover-scale));
}

/* The stack's popover content: one card per thread, the expanded thread inline among them. */
.tlui-cmt-stack-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The expanded thread is the only entry with pills floating above its panel — its header actions,
   and its first comment's hover actions. Those reach ~15px up, past the list's 10px gap, so give
   this one entry extra room: without it the pills land on the card above, and against the scroll
   box's clip edge. Collapsed cards keep their own actions inside, so they need none of this. */
.tlui-cmt-stack-list__thread {
	margin-top: 8px;
}

/* Collapsed entries match the expanded thread's surface (same width, panel, elevation) so the
   list reads as one column of cards with one of them opened up. */
.tlui-cmt-stack-list__card {
	box-sizing: border-box;
	position: relative;
	width: 300px;
	background: var(--tl-color-panel);
	border-radius: 12px;
	box-shadow: var(--tl-shadow-3);
	padding: 2px 12px 10px;
	cursor: pointer;
	text-align: left;
	display: block;
}

/* The card's keyboard affordance, covering the whole surface so it's one target rather than a
   control tucked in a corner. It's laid under the card's content instead of wrapping it: a comment
   body renders its links as anchors, which can't be nested inside a button (see the note in
   `StackThreadCard`). Pointer clicks anywhere still reach the card's own handler by bubbling. */
.tlui-cmt-stack-list__card-action {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	cursor: pointer;
}

.tlui-cmt-stack-list__card-action:focus-visible {
	outline: 2px solid var(--tl-color-selected);
	outline-offset: 2px;
}

/* The wrapper is the card's surface — inside it the comment is plain content, mirroring how the
   thread panel flattens its own cards. Stacked above the action overlay so the body's links stay
   clickable. */
.tlui-cmt-stack-list__card .tlui-cmt-card {
	position: relative;
	width: 100%;
	gap: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* The hover preview, shown for any marker — a pin, a coincident stack, or a cluster badge. Live,
   not a tooltip: the pointer travels into it to hover and click the cards.

   Two elements, deliberately: this root is the hover *region* (it reaches back over the marker via
   the bridge below), and `__panel` inside it is the visible surface. A pseudo-element's hover
   counts as its host's, so a surface on this root would light up whenever the pointer was on the
   marker — the pin would appear pressed just for being hovered. */
.tlui-cmt-canvas-preview {
	position: absolute;
	z-index: var(--tl-layer-menus);
	pointer-events: auto;
}

/* The bridge over the gap between the marker and the panel. Moving right off the pin would
   otherwise cross bare canvas, and that leave would retract the panel before the pointer arrived.
   Invisible, part of the panel's hover region, and only present while the panel is.

   It spans the gap and stops there. Reaching any further would put it over the marker itself, and
   since it sits in the menus layer — above the pins — it would take the marker's hover and clicks:
   the pin would go dead exactly where it looks most alive. The marker needs no covering anyway, as
   it carries the same hover handlers.

   The gap is the panel's own offset (`--tlui-cmt-preview-offset`, set from `POPOVER_OFFSET` so
   there's one source) less however far the marker reaches toward it, per variant below. */
.tlui-cmt-canvas-preview::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: max(0px, var(--tlui-cmt-preview-bridge, 0px));
}

/* A pin is anchored at its bottom-left corner, so its full width lies between anchor and panel.
   The popover and preview share a first-comment position now that the actions float outside the
   panel rather than reserving a header row, so no vertical shift is needed. */
.tlui-cmt-canvas-preview--thread {
	--tlui-cmt-preview-bridge: calc(var(--tlui-cmt-preview-offset) - var(--tlui-cmt-pin-size));
}

/* A badge is anchored at its bottom-left corner like a pin, so its full width does too. */
.tlui-cmt-canvas-preview--list {
	--tlui-cmt-preview-bridge: calc(var(--tlui-cmt-preview-offset) - var(--tlui-cmt-marker-size));
}

.tlui-cmt-canvas-preview__panel {
	display: flex;
	flex-direction: column;
}

/* Previewing a single pin: the thread panel itself, minus the header — the same surface, width,
   and flattened comment (see `.tlui-cmt-thread .tlui-cmt-card`), so the hover shows exactly what
   the click opens. */
.tlui-cmt-canvas-preview__panel--thread {
	box-sizing: border-box;
	width: 300px;
	gap: var(--tlui-cmt-thread-gap);
	/* Top/bottom only — the card pads its own sides now (12px), matching the expanded thread. A
	   little extra below so the (often truncated) last line doesn't sit against the rounded edge. */
	padding: 4px 0 8px;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-4);
	box-shadow: var(--tl-shadow-3);
}
/* The reply count is a short line that sits closer to the edge than a wrapped comment does, so give
   it more room below when it's the panel's last line. */
.tlui-cmt-canvas-preview__panel--thread:has(.tlui-cmt-card__replies) {
	padding-bottom: 12px;
}

/* Previewing a stack or cluster: one card per thread, matching the card list a click opens. */
.tlui-cmt-canvas-preview__panel--list {
	gap: 8px;
	padding: 4px 0 8px;
}

/* Matches the stack list's card surface, so a preview and the list it previews read as the same
   object seen twice — once on hover, once opened. */
.tlui-cmt-preview-card {
	box-sizing: border-box;
	width: 300px;
	background: var(--tl-color-panel);
	border-radius: 12px;
	box-shadow: var(--tl-shadow-3);
	/* A 2px nudge above the byline's centring — a boxed card reads a touch better with it than the
	   single preview's flat card, which pads 0 vertically and leans on the panel + byline. */
	padding: 2px 12px 10px;
}

.tlui-cmt-preview-card--selectable {
	cursor: pointer;
}

/* Every card surface that tints on hover — a collapsed thread in a stack list, a preview card, and
   the single-comment preview panel. One rule, because they're the same object to the eye.

   The opaque low-surface token, not a translucent muted one: these float directly over the canvas,
   where a translucent fill would let shapes show through.

   The second line is why this isn't a one-liner. `--tl-shadow-3` ends with a 1px *inset* ring in
   `--tl-color-panel-contrast` — pure white in light mode — and an inset shadow paints over the
   background. At rest that's invisible (the panel is 99% white under a 100% white ring), but tint
   the background to grey and the ring stays white, hugging the edge as a pale outline. Re-tinting
   `--tl-color-panel-contrast` here wouldn't reach it: `--tl-shadow-3` is declared on the container,
   so its var() was already substituted there and the white is baked into what we inherit. Instead
   lay a ring of the new surface over the old one — first shadow in the list paints on top. */
.tlui-cmt-stack-list__card:hover,
.tlui-cmt-preview-card--selectable:hover,
.tlui-cmt-canvas-preview__panel--thread.tlui-cmt-canvas-preview__panel--selectable:hover {
	--tlui-cmt-preview-hover-surface: color-mix(
		in srgb,
		var(--tl-color-low) 50%,
		var(--tl-color-panel)
	);
	background: var(--tlui-cmt-preview-hover-surface);
	box-shadow:
		inset 0 0 0 1px var(--tlui-cmt-preview-hover-surface),
		var(--tl-shadow-3);
	cursor: pointer;
}

.tlui-cmt-preview-card .tlui-cmt-card {
	width: 100%;
	gap: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* A preview is a glance, not a list — past a few cards it says how many were left out rather than
   growing to the height of the cluster. */
.tlui-cmt-preview-more {
	box-sizing: border-box;
	width: 300px;
	padding: 6px 14px;
	border-radius: 12px;
	background: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
	color: var(--tl-color-text-3);
	font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
	.tlui-cmt-canvas-preview {
		animation: tlui-cmt-preview-in 120ms ease;
	}
	@keyframes tlui-cmt-preview-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}

/* A region anchor's area: a dashed box under the pins, non-interactive so canvas events pass
   through. Drawn for the live drag draft and for a region thread while hovered or open. */
.tlui-cmt-canvas-region {
	position: absolute;
	pointer-events: none;
	border: 2px dashed var(--tl-color-selected);
	border-radius: 6px;
	background: color-mix(in srgb, var(--tl-color-selected) 10%, transparent);
}

/* Corner resize handles on a region box (three corners; the pin corner is the move handle). */
.tlui-cmt-canvas-region-handle {
	position: absolute;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%);
	background: var(--tl-color-panel);
	border: 1.5px solid var(--tl-color-selected);
	border-radius: 2px;
	pointer-events: auto;
	touch-action: none;
}

/* Anchor the pin by its bottom-left corner, so the marker's one sharp corner (the pin shape's
   3px bottom-left) points at the exact anchor point. */
.tlui-cmt-canvas-pin__marker {
	position: relative;
	width: max-content;
	transform: translate(0, -100%);
	/* Default at rest, like hovering a shape; the editor's move cursor while dragging (below). */
	cursor: var(--tl-cursor-default);
	touch-action: none;
	pointer-events: none;
}

/* Dragging a pin shows the same move cursor as dragging a shape. */
.tlui-cmt-canvas-pin--dragging .tlui-cmt-canvas-pin__marker {
	cursor: var(--tl-cursor-move);
}

/* The predictable hit area: a fixed square over the marker's box, and the only part of the pin
   that takes pointer events. Events over it target the marker (a pseudo-element's events report
   its originating element), so the marker's handlers and :hover keep working — but the hit area
   no longer stretches with pin content or scales with the hover transform. */
.tlui-cmt-canvas-pin__marker::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: auto;
}

/* With the hit layer targeting the marker, the pin visual is never the hovered element itself
   (`:hover` matches the target and its ancestors, and the pin is the marker's child) — so the
   canvas pin's hover has to key off the hit layer instead of the marker's own `:hover`. Only the
   selector differs: the values come from the same tokens the shared rule uses, so a pin on the
   canvas and a badge (which is hovered directly) lift by exactly the same amount. */
.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-marker {
	transform: scale(var(--tlui-cmt-marker-hover-scale));
}
.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-marker:not(.tlui-cmt-marker--open) {
	box-shadow: var(--tlui-cmt-marker-shadow-hover);
}
/* The comment pin doesn't scale on hover — only the shadow lifts (badges still scale). */
.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-pin {
	transform: none;
}

/* The open thread's popover — portaled to the menus layer (above the UI), positioned at the pin. */
.tlui-cmt-canvas-popover {
	position: absolute;
	z-index: var(--tl-layer-menus);
	pointer-events: auto;
}

/* The placement composer — a distinct floating view (portaled to the menus layer, below the click
   point): a draft avatar pin beside a pill field that is itself the surface (no wrapping panel).
   Scoped here so the in-thread reply composer keeps its own squarer look. */
.tlui-cmt-canvas-composer {
	position: absolute;
	z-index: var(--tl-layer-menus);
	pointer-events: auto;
	/* Anchor the draft avatar bottom-left like the pins it becomes: it is a pin wide and sits 4px
	   into the row, so its bottom-left corner is 4px right of and 4px + a pin below the composer's
	   top-left corner. */
	transform: translate(-4px, calc(-4px - var(--tlui-cmt-pin-size)));
}

/* A region placement centres the draft avatar on the region's pin corner — the pin it becomes
   straddles that corner. The avatar's centre sits 4px + half a pin into the composer. */
.tlui-cmt-canvas-composer--region {
	--tlui-cmt-draft-avatar-centre: calc(4px + var(--tlui-cmt-pin-size) / 2);
	transform: translate(
		calc(-1 * var(--tlui-cmt-draft-avatar-centre)),
		calc(-1 * var(--tlui-cmt-draft-avatar-centre))
	);
}

/* Fallback placement (no composer to show): no draft avatar to anchor by, so no offset — a small
   panel hanging off the click point, sized to its content (e.g. the host's sign-in prompt). */
.tlui-cmt-canvas-composer--fallback {
	transform: none;
	width: auto;
	display: flex;
	flex-direction: column;
	padding: 8px;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-4);
	box-shadow: var(--tl-shadow-3);
}
.tlui-cmt-canvas-composer .tlui-cmt-composer {
	gap: 6px;
}
/* The card: a fixed 300×42 surface whose uniform 3px padding derives the 294×36 focusable input. */
.tlui-cmt-canvas-composer .tlui-cmt-composer__field {
	position: relative;
	flex: none;
	width: 300px;
	min-height: 42px;
	padding: 3px;
	border: none;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-3);
	box-shadow: var(--tl-shadow-2);
	/* The pin is anchored by its bottom corner at the click point and can't move; raise the taller
	   card onto the shorter pin's centre instead. */
	margin-top: -6px;
}
/* Focused (the placement composer autofocuses on mount): a selection-blue ring inset 3px from the
   card edge, so the card frames a bordered input rather than the border sitting on the card edge. */
.tlui-cmt-canvas-composer .tlui-cmt-composer__field:focus-within::before {
	content: '';
	position: absolute;
	inset: 3px;
	border: 1px solid var(--tl-color-selected);
	border-radius: var(--tl-radius-2);
	pointer-events: none;
}
/* The text sits 12px in from the focus ring rather than against it. The placeholder is absolutely
   positioned (it ignores the wrap's padding), so it carries the same offset itself. */
.tlui-cmt-canvas-composer .tlui-cmt-composer__input-wrap {
	padding: 4.5px 12px;
}
.tlui-cmt-canvas-composer .tlui-cmt-composer__field--expanded .tlui-cmt-composer__input-wrap {
	/* The base expanded rule re-pads the right edge for the squarer composer's geometry; here the
	   12px is already symmetric. */
	padding-right: 12px;
}
.tlui-cmt-canvas-composer .tlui-cmt-input__placeholder {
	left: 12px;
}
/* The draft avatar previews the pin it becomes — a white 28px pin holding the author's 22px avatar
   circle — sharing the composer's lift. Not interactive: it drops the pin's pointer cursor and
   hover affordances (scale + shadow bump), but keeps a 40×40 hit area (the ::after below). */
.tlui-cmt-canvas-composer .tlui-cmt-pin {
	position: relative;
	box-shadow: var(--tl-shadow-2);
	cursor: default;
}
.tlui-cmt-canvas-composer .tlui-cmt-pin::after {
	content: '';
	position: absolute;
	inset: -6px;
}
.tlui-cmt-canvas-composer .tlui-cmt-pin:hover {
	transform: none;
	box-shadow: var(--tl-shadow-2);
}
/* The placement composer's send button — a bare arrow, no pill: grey while empty, black once
   there's something to send. A 28px square centred in the 36px input height, so its hover wash
   clears the focus ring rather than butting against it; the ::after keeps a 40×40 hit area. */
.tlui-cmt-canvas-composer .tlui-cmt-send {
	position: relative;
	width: 28px;
	height: 28px;
	margin-right: 4px;
	background: transparent;
	border-radius: var(--tl-radius-2);
	color: var(--tl-color-text-3);
}
.tlui-cmt-canvas-composer .tlui-cmt-send::after {
	content: '';
	position: absolute;
	inset: -6px;
}
.tlui-cmt-canvas-composer .tlui-cmt-send:not(:disabled) {
	color: var(--tl-color-text-1);
}
/* Hover and press wash grey behind the bare arrow (the same treatment as the thread actions),
   overriding the base button's blue fill. */
.tlui-cmt-canvas-composer .tlui-cmt-send:hover:not(:disabled) {
	background: var(--tl-color-muted-2);
}
.tlui-cmt-canvas-composer .tlui-cmt-send:active:not(:disabled) {
	background: var(--tl-color-muted-1);
}
/* In the expanded (multi-line) layout the send drops to the bottom-right corner; give it the same
   4px gap from the focus ring on the bottom that it already keeps on the right. */
.tlui-cmt-canvas-composer .tlui-cmt-composer__field--expanded .tlui-cmt-send {
	margin-bottom: 4px;
}

/* The comments list panel — a right-side surface shown while the comments sidebar is open. Below
   the popover layer, so an open thread still draws over it. Its top aligns flush with the style
   panel (48px from the top, clearing the share panel) and it sizes to its content, scrolling past
   max-height rather than stretching the full canvas height. */
.tlui-cmt-canvas-sidebar {
	position: absolute;
	top: 48px;
	right: 8px;
	width: 280px;
	max-height: calc(100% - 56px);
	z-index: var(--tl-layer-panels);
	pointer-events: auto;
	display: flex;
	background: var(--tl-color-panel);
	border-radius: var(--tl-radius-4);
	box-shadow: var(--tl-shadow-3);
	overflow: hidden;
}