:root.has-open-dialog {
	height: 100vh;
	overflow-y: hidden;
}

.avatar-entry {
	font-size: var(--text-sm);
	color: var(--color-gray-950);

	.dark & {
		color: var(--color-white);
	}

	&:has(.fi-avatar) {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 2);
	}

	.avatar-entry__email {
		word-wrap: break-word;
	}

	.avatar-entry__description {
		font-size: var(--text-xs);
		color: var(--color-gray-500);

		.dark & {
			color: var(--color-gray-400);
		}
	}
}

.fi-resource-edit-record-page:where(.fi-resource-tickets) {
	.fi-fo-modal-table-select-badges-ctn {
		flex-direction: column;
		justify-content: start;
		gap: .25rem;

		& > .fi-badge {
			all: revert;
		}
	}

	.fi-fo-modal-table-select {
		flex-direction: column;

		button {
			display: flex;
			margin-top: calc(var(--spacing) * 2);
			margin-left: auto;
		}
	}
}

[wire\:key*="create-linked-ticket.modal"] .tiptap {
	min-height: 6em;
	min-height: 4lh;
}

.ticket-card {
	--border-color: var(--color-black);

	width: 100%;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-normal);

	padding-block: var(--spacing);
	padding-inline: calc(var(--spacing) * 2);
	border: 1px solid color-mix(in srgb, var(--border-color) 20%, transparent);
	border: 1px solid rgba(from var(--border-color) r g b / 0.2);
	border-radius: var(--radius-md);

	.dark & {
		--border-color: var(--color-white);
	}

	.ticket-card__details {
		margin-top: var(--spacing);
		white-space: normal;
		overflow-wrap: anywhere;
		font-size: var(--text-xs);
		color: var(--color-gray-500);

		.dark & {
			color: var(--color-gray-400);
		}
	}

	.ticket-card__subject {
		margin-top: var(--spacing);

		a {
			display: flex;
			flex-wrap: wrap;
			gap: var(--spacing);

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}

		svg {
			margin-left: auto;
		}
	}
}

.pad-ti-transcript {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 6);
	font-size: var(--text-sm);

	.pad-ti-transcript__header {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 2);
		padding-bottom: calc(var(--spacing) * 3);
		border-bottom: 1px solid var(--color-gray-200);

		.dark & {
			border-color: var(--color-white-10, rgba(255, 255, 255, 0.1));
		}
	}

	.pad-ti-transcript__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(var(--spacing) * 2);
		font-weight: var(--font-weight-semibold);
	}

	.pad-ti-transcript__people {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(var(--spacing) * 2);

		dt {
			font-size: var(--text-xs);
			color: var(--color-gray-500);
		}
	}

	.pad-ti-transcript__messages {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
		margin-top: calc(var(--spacing) * 3);
	}

	/* A white card, so a message stands apart from the gray panel it sits on. */
	.pad-ti-transcript__message {
		padding: calc(var(--spacing) * 3);
		border-radius: var(--radius-lg);
		background: white;
		box-shadow: inset 0 0 0 1px var(--color-gray-200), 0 1px 2px 0
			rgba(0, 0, 0, 0.05);

		.dark & {
			background: rgba(255, 255, 255, 0.05);
			box-shadow: none;
		}
	}

	.pad-ti-transcript__message--internal {
		border-left: 3px solid var(--color-warning-500, #f59e0b);
	}

	.pad-ti-transcript__meta,
	.pad-ti-transcript__muted,
	.pad-ti-transcript__event {
		font-size: var(--text-xs);
		color: var(--color-gray-500);

		.dark & {
			color: var(--color-gray-400);
		}
	}

	.pad-ti-transcript__event {
		font-style: italic;
		text-align: center;
	}

	.pad-ti-transcript__content {
		margin-top: var(--spacing);

		ul {
			list-style: disc;
			padding-left: 1.25rem;
		}

		ol {
			list-style: decimal;
			padding-left: 1.25rem;
		}

		a {
			text-decoration: underline;
		}
	}
}

.pad-ti-link {
	font-weight: var(--font-weight-semibold);
	color: var(--primary-600);
	text-decoration: underline;

	.dark & {
		color: var(--primary-400);
	}
}

.pad-ti-escalation-status {
	padding: calc(var(--spacing) * 4);
	border-bottom: 1px solid var(--color-gray-200);

	.dark & {
		border-color: rgba(255, 255, 255, 0.1);
	}
}

.pad-ti-escalation-actions .fi-ac {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	& > * {
		width: 100%;
	}
}

@keyframes pad-ti-highlight {
	from {
		box-shadow: 0 0 0 2px var(--primary-500);
	}

	to {
		box-shadow: 0 0 0 2px transparent;
	}
}

.pad-ti-transcript--highlight {
	animation: pad-ti-highlight 2.5s ease-out;
}

.pad-ti-ticket-number {
	font-size: var(--text-sm);
	color: var(--color-gray-500);
	font-variant-numeric: tabular-nums;

	.dark & {
		color: var(--color-gray-400);
	}
}

.pad-ti-field-help {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 4);
	font-size: var(--text-sm);

	dt {
		font-weight: var(--font-weight-semibold);
	}

	dd {
		margin-top: var(--spacing);
		color: var(--color-gray-600);

		.dark & {
			color: var(--color-gray-400);
		}
	}
}

.pad-ti-details .fi-sc-icon[x-tooltip] {
	width: calc(var(--spacing) * 3.5);
	height: calc(var(--spacing) * 3.5);
	color: var(--color-gray-400);
	opacity: 0.7;

	&:hover {
		opacity: 1;
	}

	.dark & {
		color: var(--color-gray-500);
	}
}

.pad-ti-help-label {
	cursor: help;
	text-decoration: underline dotted;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.2em;
	border-radius: var(--radius-sm);

	&:focus-visible {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}
}

:root {
	--pad-ti-drawer-width: min(44vw, 640px);
}

.pad-ti-linked {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 3);
	padding: calc(var(--spacing) * 4);
	border-radius: var(--radius-xl);
	background: var(--color-gray-50);
	box-shadow: inset 0 0 0 1px var(--color-gray-200);

	.dark & {
		background: rgba(255, 255, 255, 0.03);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	}

	.pad-ti-linked__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: calc(var(--spacing) * 3);
	}

	.pad-ti-linked__header-link {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.pad-ti-linked__eyebrow {
		font-size: var(--text-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-gray-500);
	}

	.pad-ti-linked__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(var(--spacing) * 2);
		font-weight: var(--font-weight-semibold);
	}

	/* Who handles the ticket stays in view; only its messages scroll. */
	.pad-ti-linked__body {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 60svh;
		overflow: hidden;

		.pad-ti-transcript,
		.pad-ti-transcript__ticket {
			display: flex;
			flex-direction: column;
			flex: 1;
			min-height: 0;
		}

		.pad-ti-transcript__messages {
			flex: 1;
			min-height: 0;
			overflow-y: auto;
		}
	}
}

.pad-ti-linked--drawer {
	position: fixed;
	inset-block: 4rem 0;
	inset-inline-end: 0;
	z-index: 20;
	width: var(--pad-ti-drawer-width);
	border-radius: 0;
	background: white;
	box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.25), inset 1px 0 0
		var(--color-gray-200);

	.dark & {
		background: var(--color-gray-900);
		box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.6), inset 1px 0 0
			rgba(255, 255, 255, 0.1);
	}

	.pad-ti-linked__body {
		max-height: none;
		flex: 1;
	}
}

.pad-ti-pinned-linked {
	margin: calc(var(--spacing) * 3);

	.pad-ti-transcript {
		max-height: 40svh;
		overflow-y: auto;
	}
}

/*
 * The chat column sets the row's height; the linked panel fills the same
 * height and scrolls inside it, so both columns line up.
 */
.fi-grid-col:has(> .fi-sc-component > .pad-ti-linked-col) {
	order: -1;
	position: relative;

	& > .fi-sc-component {
		position: absolute;
		inset: 0;
	}

	.pad-ti-linked {
		position: absolute;
		inset: 0;
	}

	.pad-ti-linked__body {
		flex: 1;
		min-height: 0;
		max-height: none;
	}
}

.pad-ti-more {
	cursor: help;
	font-weight: var(--font-weight-medium);
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
}

.pad-ti-confirm {
	width: min(26rem, calc(100vw - 2rem));
	margin: auto;
	padding: calc(var(--spacing) * 6);
	border: 0;
	border-radius: var(--radius-xl);
	background: white;
	color: var(--gray-950);
	box-shadow: var(--shadow-xl);

	&::backdrop {
		background: rgb(3 7 18 / 0.5);
	}

	.dark & {
		background: var(--gray-900);
		color: white;
		box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
	}
}

.pad-ti-confirm__heading {
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
}

.pad-ti-confirm__description {
	margin-top: calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	color: var(--gray-500);

	.dark & {
		color: var(--gray-400);
	}
}

.pad-ti-confirm__actions {
	display: flex;
	justify-content: flex-end;
	gap: calc(var(--spacing) * 3);
	margin-top: calc(var(--spacing) * 6);
}

/* A list marker wraps rather than cut its words off in a narrow Subject cell. */
.pad-ti-marker.fi-badge,
.pad-ti-marker .fi-badge-label {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/*
 * The ticket list's stat cards sit level: each card is its own widget, and a
 * longer description, such as Needs You's, would otherwise leave it taller
 * than its neighbours. The row already stretches every widget; this passes
 * that height down to the card.
 */
.fi-resource-tickets
	.fi-wi-stats-overview
	:is(
		.fi-grid,
		.fi-grid-col,
		.fi-sc-component,
		.fi-sc-section,
		.fi-section,
		.fi-section-content-ctn,
		.fi-section-content,
		.fi-wi-stats-overview-stat
	) {
	height: 100%;
}

/*
 * New ticket's first choice: a Filament Radio drawn as stacked cards, each
 * with an icon on the left and its radio on the right. The selectors repeat
 * Filament's own classes to outrank its radio list spacing.
 */
.fi-fo-radio.pad-ti-start-choice:not(.fi-inline) {
	display: grid;
	gap: calc(var(--spacing) * 3);
	margin-top: 0;
}

.fi-fo-radio.pad-ti-start-choice:not(.fi-inline) > .fi-fo-radio-label {
	position: relative;
	display: block;
	padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 12)
		calc(var(--spacing) * 3.5) calc(var(--spacing) * 15.5);
	border-radius: var(--radius-xl);
	background-color: var(--color-white);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent), 0
		1px 2px 0 rgb(0 0 0 / 0.05);
	cursor: pointer;
}

.fi-fo-radio.pad-ti-start-choice:not(.fi-inline) > .fi-fo-radio-label:hover {
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 20%, transparent), 0
		1px 2px 0 rgb(0 0 0 / 0.05);
}

.fi-fo-radio.pad-ti-start-choice:not(.fi-inline)
	> .fi-fo-radio-label:has(:checked) {
	background-color: color-mix(in oklab, var(--primary-50) 70%, white);
	box-shadow: 0 0 0 2px var(--primary-600);
}

.fi-fo-radio.pad-ti-start-choice:not(.fi-inline)
	> .fi-fo-radio-label
	> .fi-radio-input {
	position: absolute;
	top: 50%;
	right: calc(var(--spacing) * 4);
	margin: calc(var(--spacing) * -2) 0 0;
}

.fi-fo-radio.pad-ti-start-choice:not(.fi-inline)
	> .fi-fo-radio-label
	> .fi-fo-radio-label-text {
	display: block;
}

.pad-ti-start-choice__icon {
	position: absolute;
	top: 50%;
	left: calc(var(--spacing) * 3.5);
	display: grid;
	place-items: center;
	width: calc(var(--spacing) * 9);
	height: calc(var(--spacing) * 9);
	margin-top: calc(var(--spacing) * -4.5);
	border-radius: var(--radius-lg);
	background-color: var(--gray-100);
	color: var(--gray-500);
}

.pad-ti-start-choice__icon svg {
	width: calc(var(--spacing) * 5);
	height: calc(var(--spacing) * 5);
}

.pad-ti-start-choice
	.fi-fo-radio-label:has(:checked)
	.pad-ti-start-choice__icon {
	background-color: var(--primary-100);
	color: var(--primary-700);
}

.pad-ti-start-choice__title {
	display: block;
	font-size: var(--text-sm);
	line-height: calc(var(--spacing) * 5);
	font-weight: var(--font-weight-semibold);
	color: var(--gray-950);
}

.fi-fo-radio.pad-ti-start-choice .fi-fo-radio-label-description {
	margin-top: calc(var(--spacing) * 0.5);
	line-height: calc(var(--spacing) * 5);
}

.dark .fi-fo-radio.pad-ti-start-choice:not(.fi-inline) > .fi-fo-radio-label {
	background-color: color-mix(in oklab, white 5%, transparent);
	box-shadow: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
}

.dark
	.fi-fo-radio.pad-ti-start-choice:not(.fi-inline)
	> .fi-fo-radio-label:hover {
	box-shadow: 0 0 0 1px color-mix(in oklab, white 20%, transparent);
}

.dark
	.fi-fo-radio.pad-ti-start-choice:not(.fi-inline)
	> .fi-fo-radio-label:has(:checked) {
	background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
	box-shadow: 0 0 0 2px var(--primary-500);
}

.dark .pad-ti-start-choice__icon {
	background-color: color-mix(in oklab, white 5%, transparent);
	color: var(--gray-400);
}

.dark
	.pad-ti-start-choice
	.fi-fo-radio-label:has(:checked)
	.pad-ti-start-choice__icon {
	background-color: color-mix(in oklab, var(--primary-500) 20%, transparent);
	color: var(--primary-400);
}

.dark .pad-ti-start-choice__title {
	color: var(--color-white);
}

/* A rule between the choice and the fields of the side it picked. */
.pad-ti-start-fields {
	padding-top: calc(var(--spacing) * 6);
	border-top: 1px solid color-mix(in oklab, var(--gray-950) 5%, transparent);
}

.dark .pad-ti-start-fields {
	border-top-color: color-mix(in oklab, white 10%, transparent);
}

/* The requester's email beside their name, in the picker and its options. */
.pad-ti-start-email {
	margin-inline-start: calc(var(--spacing) * 1.5);
	color: var(--gray-500);
}

.dark .pad-ti-start-email {
	color: var(--gray-400);
}

/*
 * A sidebar field that can be changed has a pencil right after its label
 * (ViewTicket::editBesideLabel()). It sits in Filament's slot before the
 * label, so it is moved after the label here, ahead of the hints.
 */
.pad-ti-edit-entry
	.fi-in-entry-label-ctn
	> :first-child:not(.fi-in-entry-label) {
	order: 1;
	margin-inline-start: calc(var(--spacing) * -1);
}

.pad-ti-edit-entry .fi-in-entry-label-ctn > .fi-in-entry-label ~ * {
	order: 2;
}

/* The host's person actions, such as Impersonate, right after the original ticket's requester. */
.pad-ti-transcript__person-actions {
	display: inline-flex;
	vertical-align: middle;
	margin-inline-start: calc(var(--spacing) * 1);
}

/*
 * The escalation box's originals as quiet rows (escalation-originals.blade.php).
 * A row opens its original; its × shows on hover or focus, and always where
 * there is no hover, so touch can reach it.
 */
.pad-ti-originals__label {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 1);
	margin-bottom: calc(var(--spacing) * 1);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--gray-950);
}

.dark .pad-ti-originals__label {
	color: var(--color-white);
}

.pad-ti-originals__empty {
	font-size: var(--text-sm);
	color: var(--gray-500);
}

.pad-ti-originals__list {
	display: flex;
	flex-direction: column;
	margin-inline: calc(var(--spacing) * -2);
}

.pad-ti-originals__row {
	position: relative;
	border-radius: var(--radius-lg);
}

.pad-ti-originals__row + .pad-ti-originals__row::before,
.pad-ti-originals__fold::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--spacing) * 2);
	right: calc(var(--spacing) * 2);
	border-top: 1px solid var(--gray-100);
}

.dark .pad-ti-originals__row + .pad-ti-originals__row::before,
.dark .pad-ti-originals__fold::before {
	border-color: rgba(255, 255, 255, 0.07);
}

.pad-ti-originals__fold + .pad-ti-originals__row::before {
	display: none;
}

.pad-ti-originals__open {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto calc(var(--spacing) * 4);
	column-gap: calc(var(--spacing) * 2);
	row-gap: 2px;
	width: 100%;
	padding: 10px calc(var(--spacing) * 1) 10px calc(var(--spacing) * 2);
	border-radius: var(--radius-lg);
	text-align: start;
}

button.pad-ti-originals__open,
a.pad-ti-originals__open {
	cursor: pointer;
}

.pad-ti-originals__row:hover .pad-ti-originals__open,
.pad-ti-originals__open:focus-visible {
	background-color: var(--gray-50);
}

.dark .pad-ti-originals__row:hover .pad-ti-originals__open,
.dark .pad-ti-originals__open:focus-visible {
	background-color: rgba(255, 255, 255, 0.05);
}

.pad-ti-originals__row:hover::before,
.pad-ti-originals__row:hover + .pad-ti-originals__row::before {
	opacity: 0;
}

.pad-ti-originals__subject {
	font-size: var(--text-sm);
	line-height: calc(var(--spacing) * 5);
	font-weight: var(--font-weight-medium);
	color: var(--gray-950);
}

.dark .pad-ti-originals__subject {
	color: var(--color-white);
}

.pad-ti-originals__badge {
	grid-row: 1;
	grid-column: 2;
	padding-top: 1px;
}

.pad-ti-originals__meta,
.pad-ti-originals__state,
.pad-ti-originals__relay {
	grid-column: 1 / 3;
	font-size: var(--text-xs);
	line-height: calc(var(--spacing) * 4);
	color: var(--gray-500);
}

.pad-ti-originals__state {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: calc(var(--spacing) * 1);
	color: var(--gray-700);
}

.dark .pad-ti-originals__meta {
	color: var(--gray-400);
}

.dark .pad-ti-originals__state {
	color: var(--gray-300);
}

.pad-ti-originals__avatar {
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
}

.pad-ti-originals__relay {
	margin-top: calc(var(--spacing) * 1);
}

.pad-ti-originals__chevron {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	display: flex;
	color: var(--gray-400);
}

.dark .pad-ti-originals__chevron {
	color: var(--gray-500);
}

.pad-ti-originals__row.is-closed .pad-ti-originals__subject {
	font-weight: var(--font-weight-normal);
	color: var(--gray-500);
}

.pad-ti-originals__row.is-closed .pad-ti-originals__state {
	margin-top: 0;
	color: var(--gray-500);
}

.pad-ti-originals__remove {
	position: absolute;
	top: 34px;
	right: calc(var(--spacing) * 5);
	opacity: 0;
}

.pad-ti-originals__row:hover .pad-ti-originals__remove,
.pad-ti-originals__row:focus-within .pad-ti-originals__remove {
	opacity: 1;
}

@media (hover: none) {
	.pad-ti-originals__remove {
		opacity: 1;
	}
}

.pad-ti-originals__fold {
	position: relative;
}

.pad-ti-originals__fold button {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--gray-700);
}

.dark .pad-ti-originals__fold button {
	color: var(--gray-300);
}

.pad-ti-originals__fold .fi-icon {
	color: var(--gray-400);
}

/*
 * The Original ticket panel's header: which original of how many, stepped
 * through or picked from a list, then its title and its people.
 */
.pad-ti-linked__header--original {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.pad-ti-linked__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	min-height: calc(var(--spacing) * 7);
	font-size: var(--text-xs);
	color: var(--gray-500);
}

.dark .pad-ti-linked__nav {
	color: var(--gray-400);
}

.pad-ti-linked__counter-wrap {
	position: relative;
}

.pad-ti-linked__counter {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 6px;
	margin-left: -2px;
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	color: var(--gray-700);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pad-ti-linked__counter:hover,
.pad-ti-linked__counter[aria-expanded="true"] {
	background: color-mix(in oklab, var(--gray-200) 55%, transparent);
}

.dark .pad-ti-linked__counter {
	color: var(--gray-200);
}

.dark .pad-ti-linked__counter:hover,
.dark .pad-ti-linked__counter[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.08);
}

.pad-ti-linked__counter .fi-icon {
	color: var(--gray-400);
}

.pad-ti-linked__arrows {
	display: inline-flex;
	margin-inline: -4px 4px;
}

.pad-ti-linked__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: -2px;
	width: 270px;
	padding: calc(var(--spacing) * 1);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	color: var(--gray-950);
	box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--gray-200);
}

.dark .pad-ti-linked__menu {
	background: var(--gray-900);
	color: var(--color-white);
	box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px
		rgba(255, 255, 255, 0.1);
}

.pad-ti-linked__option {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	width: 100%;
	padding: 7px calc(var(--spacing) * 2);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	text-align: start;
}

.pad-ti-linked__option:hover,
.pad-ti-linked__option.is-active {
	background: var(--gray-50);
}

.dark .pad-ti-linked__option:hover,
.dark .pad-ti-linked__option.is-active {
	background: rgba(255, 255, 255, 0.05);
}

.pad-ti-linked__check {
	display: flex;
	width: calc(var(--spacing) * 4);
	color: var(--primary-600);
}

.dark .pad-ti-linked__check {
	color: var(--primary-300);
}

.pad-ti-linked__option-name {
	flex: 1;
	white-space: nowrap;
}

.pad-ti-linked__num,
.pad-ti-linked__title-number {
	font-weight: var(--font-weight-normal);
	color: var(--gray-500);
}

.dark .pad-ti-linked__num,
.dark .pad-ti-linked__title-number {
	color: var(--gray-400);
}

.pad-ti-linked__nav > .fi-badge {
	flex-shrink: 0;
}

.pad-ti-linked__readonly {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 1);
	margin-left: auto;
	white-space: nowrap;
}

.pad-ti-linked__header--original .pad-ti-linked__title {
	margin-top: calc(var(--spacing) * 1);
	font-size: var(--text-base);
	line-height: calc(var(--spacing) * 6);
	font-weight: var(--font-weight-semibold);
}

.pad-ti-linked__people {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: calc(var(--spacing) * 4);
	row-gap: calc(var(--spacing) * 1);
	margin: calc(var(--spacing) * 3) 0 0;
}

.pad-ti-linked__people dt {
	font-size: var(--text-xs);
	color: var(--gray-500);
}

.dark .pad-ti-linked__people dt {
	color: var(--gray-400);
}

.pad-ti-linked__people dd {
	display: flex;
	align-items: center;
	min-height: calc(var(--spacing) * 7);
	margin: 0;
	font-size: var(--text-sm);
}

.pad-ti-linked__person {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.pad-ti-linked__avatar {
	width: calc(var(--spacing) * 5);
	height: calc(var(--spacing) * 5);
}

.pad-ti-linked__header--original .pad-ti-linked__header-link {
	margin-top: calc(var(--spacing) * 2);
	align-self: flex-start;
}

.pad-ti-chat-pills > .fi-grid {
	justify-items: end;
	row-gap: 0.375rem;
}

/* A long Waiting on name would otherwise squeeze the heading into a narrow column. */
.pad-ti-chat-section > .fi-section > .fi-section-header {
	flex-wrap: wrap;
}

.pad-ti-chat-section
	> .fi-section
	> .fi-section-header
	> .fi-section-header-text-ctn {
	flex: 1 1 18rem;
}

.pad-ti-chat-section
	> .fi-section
	> .fi-section-header
	> .fi-section-header-after-ctn {
	margin-inline-start: auto;
}