/* Read-only booking cards and quiet group activity notices (SSOT 6/11/13/18). */
.talk-room .talk-message[data-booking-notice='true'] {
	--sonub-notice-ink: var(--wa-color-brand-on-quiet);
	--sonub-notice-fill: var(--wa-color-brand-fill-quiet);
	align-self: center;
	flex: none;
	box-sizing: border-box;
	inline-size: min(100%, 30rem);
	max-inline-size: 100%;
	gap: 0;
	padding: 0;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-s);
	overflow: hidden;
}
.talk-room .talk-message[data-booking-notice='true']:has([data-state='paid'], [data-state='trial']) {
	--sonub-notice-ink: var(--wa-color-success-on-quiet);
	--sonub-notice-fill: var(--wa-color-success-fill-quiet);
}
.talk-room .talk-message[data-booking-notice='true']:has([data-state='cancelled']) {
	--sonub-notice-ink: var(--wa-color-danger-on-quiet);
	--sonub-notice-fill: var(--wa-color-danger-fill-quiet);
}
.talk-room .talk-message[data-booking-notice='true']:has([data-state='attention']) {
	--sonub-notice-ink: var(--wa-color-warning-on-quiet);
	--sonub-notice-fill: var(--wa-color-warning-fill-quiet);
}
.talk-room .talk-booking-notice { min-inline-size: 0; }
.talk-room .talk-notice-heading {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-s);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-block-start: 3px solid var(--sonub-notice-ink);
	background: color-mix(in srgb, var(--sonub-notice-fill) 65%, var(--wa-color-surface-raised));
}
.talk-room .talk-notice-heading > div { flex: 1; min-inline-size: 0; line-height: 1.4; }
.talk-room .talk-notice-icon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--sonub-notice-ink) 18%, var(--wa-color-surface-border));
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	color: var(--sonub-notice-ink);
}
.talk-room .talk-notice-reference { display: block; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); }
.talk-room .talk-notice-title { margin: var(--wa-space-3xs) 0 0; color: var(--sonub-notice-ink); font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.talk-room .talk-notice-description { margin: 0; padding: var(--wa-space-m) var(--wa-space-m) 0; font-size: var(--wa-font-size-s); line-height: 1.7; overflow-wrap: anywhere; }
.talk-room .talk-notice-people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
	margin: 0 var(--wa-space-m);
	padding-block: var(--wa-space-2xs);
	border-block-end: 1px solid var(--wa-color-surface-border);
}
.talk-room .talk-notice-people > div { min-inline-size: 0; }
.talk-room .talk-notice-people dt { display: flex; align-items: center; gap: var(--wa-space-2xs); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); line-height: 1.4; }
.talk-room .talk-notice-people dd { margin: var(--wa-space-3xs) 0 0; font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); line-height: 1.4; overflow-wrap: anywhere; }
.talk-room .talk-notice-schedule { display: flex; align-items: flex-start; gap: var(--wa-space-s); padding: var(--wa-space-xs) var(--wa-space-m); }
.talk-room .talk-notice-schedule > i { flex: none; padding-block-start: var(--wa-space-2xs); color: var(--sonub-notice-ink); }
.talk-room .talk-notice-schedule > div { min-inline-size: 0; line-height: 1.4; }
.talk-room .talk-notice-date { font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); }
.talk-room .talk-notice-time { margin: var(--wa-space-2xs) 0; font-size: var(--wa-font-size-s); line-height: 1.4; overflow-wrap: anywhere; }
.talk-room .talk-notice-duration { display: inline-block; margin-inline-start: var(--wa-space-xs); padding: 0 var(--wa-space-xs); border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); }
.talk-room .talk-notice-timezone { display: block; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); line-height: 1.4; overflow-wrap: anywhere; }
.talk-room .talk-message[data-booking-notice='true'] > .talk-link {
	display: flex;
	justify-self: stretch;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	min-block-size: 2.75rem;
	margin: 0 var(--wa-space-m);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.talk-room .talk-message[data-booking-notice='true'] > .talk-link > span { min-inline-size: 0; overflow-wrap: anywhere; }
.talk-room .talk-message[data-booking-notice='true'] > .talk-link > span > i { margin-inline-end: var(--wa-space-2xs); }
.talk-room .talk-message[data-booking-notice='true'] > .talk-link:hover { border-color: var(--wa-color-brand-border-loud); background: color-mix(in srgb, var(--wa-color-brand-fill-quiet) 80%, var(--wa-color-brand-fill-normal)); }
.talk-room .talk-message[data-booking-notice='true'] > .talk-link:focus-visible { outline-offset: -3px; }
.talk-room .talk-message[data-booking-notice='true'] > .talk-meta { justify-content: flex-end; margin: 0; padding: var(--wa-space-2xs) var(--wa-space-m); line-height: 1.4; }
.talk-room .talk-message[data-booking-notice='true'] > .talk-meta > time { font-size: var(--wa-font-size-xs); line-height: 1.4; color: var(--wa-color-text-quiet); }
.talk-room .talk-message[data-kind='system'] { align-self: center; box-sizing: border-box; max-inline-size: 100%; padding: var(--wa-space-xs) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet); text-align: center; }
.talk-room .talk-message[data-kind='system'] .talk-text { font-size: var(--wa-font-size-xs); line-height: 1.7; }
.talk-room .talk-message[data-kind='system'] > .talk-meta { justify-content: center; }
.talk-room .talk-message[data-kind='system'] > .talk-meta > time { font-size: var(--wa-font-size-2xs); }