ooxml-ui 1.12.2 → 1.13.0

package/dist/{chunk-3H5NR32A.js → chunk-D7JPVAYS.js}

@@ -1,12 +1,12 @@
-import { THEME_CSS, installOfficeUiTheme } from './chunk-S6ZXU442.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-FUQYUUIQ.js';
+import { THEME_CSS, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-BFPHRWEB.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
-import { initialsOf, definePresence } from './chunk-L7JV5FVE.js';
-import { definer, OfficeElement, controlStyles } from './chunk-OGNNNTKI.js';
-import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
+import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';
+import { definer, OfficeElement, controlStyles } from './chunk-CWBSXK7P.js';
+import { nothing, html, LitElement, unsafeCSS, svg } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
-import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
+import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
 import { keyed } from 'lit/directives/keyed.js';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/reset.css?raw
@@ -43,7 +43,8 @@ function formatSize(bytes) {
   return `${(bytes / 1048576).toFixed(1)} MB`;
 }
 var GLYPHS = {
-  navigation: "M3 5h14M3 10h14M3 15h14",
+  back: "M12.5 4 6.5 10l6 6",
+  pin: "M7 3h6l-1 5 3 3H5l3-3ZM10 11v6",
   send: "M3 10 17 3l-4 14-3-6Zm7 1 7-8",
   paperclip: "M15 9.5l-5.5 5.5a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7L11 6",
   smile: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M7.5 8v.5M12.5 8v.5M7 12c1.5 2 4.5 2 6 0",
@@ -73,7 +74,7 @@ function icon(name) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app-rail.css?raw
-var app_rail_default = ":host {\n	display: block;\n	width: 5em;\n	background: var(--office-teams-rail);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nul {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: var(--office-space-2) 0;\n	list-style: none;\n}\nbutton {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-0);\n	width: 4.4em;\n	padding: var(--office-space-2) 0;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton[aria-current='page'] {\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nbutton[aria-current='page']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.glyph {\n	position: relative;\n	display: grid;\n	place-items: center;\n	font-size: 1.3em;\n}\n.label {\n	font-size: var(--office-font-size-2xs);\n}\n:host([hide-labels]) .label {\n	display: none;\n}\n.badge {\n	position: absolute;\n	inset-block-start: -0.4em;\n	inset-inline-end: -0.9em;\n	min-width: 1.5em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\n";
+var app_rail_default = ":host {\n	display: block;\n	width: 5em;\n	background: var(--office-teams-rail);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nul {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: var(--office-space-2) 0;\n	list-style: none;\n}\nbutton {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-0);\n	width: 4.4em;\n	padding: var(--office-space-2) 0;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton[aria-current='page'] {\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nbutton[aria-current='page']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.glyph {\n	position: relative;\n	display: grid;\n	place-items: center;\n	font-size: 1.3em;\n}\n.label {\n	font-size: var(--office-font-size-2xs);\n}\n:host([hide-labels]) .label {\n	display: none;\n}\n.badge {\n	position: absolute;\n	inset-block-start: -0.4em;\n	inset-inline-end: -0.9em;\n	min-width: 1.5em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\n\n.short {\n	display: none;\n}\n\n/* Compact shell: the rail becomes a bottom navigation bar with short labels. */\n@media (max-width: 56em) {\n	:host {\n		width: auto;\n		padding-block-end: env(safe-area-inset-bottom, 0);\n		padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);\n		border-inline-end: 0;\n		border-block-start: var(--office-border-width) solid var(--office-teams-divider);\n	}\n	ul {\n		flex-direction: row;\n		justify-content: space-around;\n		align-items: stretch;\n		gap: 0;\n		padding: var(--office-space-1) var(--office-space-1);\n	}\n	li {\n		flex: 1 1 0;\n		min-width: 0;\n	}\n	button {\n		width: 100%;\n		min-height: var(--office-touch-target, 44px);\n		padding: var(--office-space-1) 0;\n		justify-content: center;\n	}\n	button[aria-current='page']::before {\n		inset-inline: 25%;\n		inset-block: 0 auto;\n		width: auto;\n		height: var(--office-space-1);\n	}\n	.label.has-short {\n		display: none;\n	}\n	.short {\n		display: inline;\n		font-size: var(--office-font-size-2xs);\n		overflow: hidden;\n		text-overflow: ellipsis;\n		white-space: nowrap;\n		max-width: 100%;\n	}\n}\n@media (max-width: 56em) and (max-height: 30em) {\n	.label,\n	.short {\n		display: none;\n	}\n	button {\n		min-height: 2.4em;\n	}\n}\n";
 
 // src/teams/app-rail.ts
 var OfficeUiAppRail = class extends TeamsElement {
@@ -111,7 +112,8 @@ var OfficeUiAppRail = class extends TeamsElement {
 									${icon(item.icon)}
 									${item.badge ? html`<span class="badge">${item.badge > 99 ? "99+" : item.badge}</span>` : ""}
 								</span>
-								<span class="label">${item.label}</span>
+								<span class=${item.shortLabel ? "label has-short" : "label"}>${item.label}</span>
+								${item.shortLabel ? html`<span class="short" aria-hidden="true">${item.shortLabel}</span>` : nothing}
 							</button>
 						</li>
 					`
@@ -123,12 +125,14 @@ var OfficeUiAppRail = class extends TeamsElement {
 var defineAppRail = definer("office-ui-app-rail", () => OfficeUiAppRail);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/avatar.css?raw
-var avatar_default = ":host {\n	--_size: 2.3em;\n	position: relative;\n	display: inline-block;\n	width: var(--_size);\n	height: var(--_size);\n	flex: none;\n}\n:host([size='sm']) {\n	--_size: 1.7em;\n}\n:host([size='lg']) {\n	--_size: 3em;\n}\n:host([size='xl']) {\n	--_size: 6em;\n}\n\n.face {\n	display: grid;\n	place-items: center;\n	width: 100%;\n	height: 100%;\n	border-radius: var(--office-radius-full);\n	color: var(--office-call-foreground);\n	font-size: calc(var(--_size) * 0.38);\n	font-weight: var(--office-font-weight-bold);\n	user-select: none;\n}\n\n.presence {\n	position: absolute;\n	inset-inline-end: 0;\n	inset-block-end: 0;\n	width: 32%;\n	height: 32%;\n	min-width: 0.5em;\n	min-height: 0.5em;\n	border-radius: var(--office-radius-full);\n	border: var(--office-border-width-thick) solid var(--office-background);\n	background: var(--office-presence-offline);\n}\n.presence[data-presence='available'] {\n	background: var(--office-presence-available);\n}\n.presence[data-presence='busy'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='away'] {\n	background: var(--office-presence-away);\n}\n";
+var avatar_default = ":host {\n	--_size: 2.3em;\n	position: relative;\n	display: inline-block;\n	width: var(--_size);\n	height: var(--_size);\n	flex: none;\n}\n:host([size='sm']) {\n	--_size: 1.7em;\n}\n:host([size='lg']) {\n	--_size: 3em;\n}\n:host([size='xl']) {\n	--_size: 6em;\n}\n\n.face {\n	display: grid;\n	place-items: center;\n	width: 100%;\n	height: 100%;\n	border-radius: var(--office-radius-full);\n	color: var(--office-call-foreground);\n	font-size: calc(var(--_size) * 0.38);\n	font-weight: var(--office-font-weight-bold);\n	user-select: none;\n}\n\n.presence {\n	position: absolute;\n	inset-inline-end: 0;\n	inset-block-end: 0;\n	width: 32%;\n	height: 32%;\n	min-width: 0.5em;\n	min-height: 0.5em;\n	border-radius: var(--office-radius-full);\n	border: var(--office-border-width-thick) solid var(--office-background);\n	background: var(--office-presence-offline);\n}\n.presence[data-presence='available'] {\n	background: var(--office-presence-available);\n}\n.presence[data-presence='busy'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='away'] {\n	background: var(--office-presence-away);\n}\n.presence[data-presence='dnd'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='brb'] {\n	background: var(--office-presence-away);\n}\n/* Do not disturb carries a white bar; Away and Be right back share the clock hands. */\n.presence[data-presence='dnd']::after,\n.presence[data-presence='away']::after,\n.presence[data-presence='brb']::after {\n	content: '';\n	position: absolute;\n	inset: 0;\n	margin: auto;\n	background: var(--office-background);\n}\n.presence[data-presence='dnd']::after {\n	width: 60%;\n	height: 16%;\n	border-radius: var(--office-radius-full);\n}\n.presence[data-presence='away']::after,\n.presence[data-presence='brb']::after {\n	width: 14%;\n	height: 50%;\n	inset-block: 10% auto;\n	border-radius: var(--office-radius-full);\n}\n/* Appear offline is a hollow grey ring. */\n.presence[data-presence='offline'] {\n	background: var(--office-background);\n	border-color: var(--office-presence-offline);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-presence-offline);\n}\n";
 
 // src/teams/avatar.ts
 var PRESENCE_LABEL = {
   available: "Available",
   busy: "Busy",
+  dnd: "Do not disturb",
+  brb: "Be right back",
   away: "Away",
   offline: "Offline"
 };
@@ -329,7 +333,7 @@ var OfficeUiCallGrid = class extends TeamsElement {
 var defineCallGrid = definer("office-ui-call-grid", () => OfficeUiCallGrid);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/channel-list.css?raw
-var channel_list_default = ":host {\n	display: block;\n	overflow: auto;\n}\n.team {\n	display: flex;\n	align-items: center;\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-1);\n}\n.toggle {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	font-weight: var(--office-font-weight-bold);\n	text-align: start;\n}\n.toggle:hover,\n.add:hover {\n	background: var(--office-selected);\n}\n.chevron {\n	display: grid;\n	transition: transform var(--office-duration-fast);\n}\n.chevron[data-open='true'] {\n	transform: rotate(90deg);\n}\n.name {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.add {\n	display: grid;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\nul[hidden] {\n	display: none;\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n	text-align: start;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.row[aria-current='true']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: 0;\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.row[data-unread='true'] {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.live {\n	display: grid;\n	color: var(--office-call-live);\n}\n.count {\n	min-width: 1.6em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-xs);\n	line-height: 1.6;\n	text-align: center;\n}\n";
+var channel_list_default = ":host {\n	display: block;\n	overflow: auto;\n}\n.team {\n	display: flex;\n	align-items: center;\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-1);\n}\n.toggle {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	font-weight: var(--office-font-weight-bold);\n	text-align: start;\n}\n.toggle:hover,\n.add:hover {\n	background: var(--office-selected);\n}\n.chevron {\n	display: grid;\n	transition: transform var(--office-duration-fast);\n}\n.chevron[data-open='true'] {\n	transform: rotate(90deg);\n}\n.name {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.add {\n	display: grid;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\nul[hidden] {\n	display: none;\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n	text-align: start;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.row[aria-current='true']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: 0;\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.row[data-unread='true'] {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.live {\n	display: grid;\n	color: var(--office-call-live);\n}\n.count {\n	min-width: 1.6em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-xs);\n	line-height: 1.6;\n	text-align: center;\n}\n\n@media (pointer: coarse) {\n	.toggle,\n	.add,\n	.row {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
 
 // src/teams/channel-list.ts
 var OfficeUiChannelList = class extends TeamsElement {
@@ -395,7 +399,7 @@ var OfficeUiChannelList = class extends TeamsElement {
 var defineChannelList = definer("office-ui-channel-list", () => OfficeUiChannelList);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-composer.css?raw
-var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: var(--office-font-size-touch);\n		min-height: 3em;\n	}\n	.bar button {\n		min-width: var(--office-touch-target);\n		height: var(--office-touch-target);\n	}\n}\n";
+var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: var(--office-font-size-touch);\n		min-height: 3em;\n	}\n}\n@media (pointer: coarse) {\n	.bar button,\n	.banner button,\n	.pending button,\n	.picker button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
 var EMOJI = [
   "\u{1F600}",
   "\u{1F604}",
@@ -668,7 +672,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
 var defineChatComposer = definer("office-ui-chat-composer", () => OfficeUiChatComposer);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-list.css?raw
-var chat_list_default = ":host {\n	display: block;\n	min-height: 0;\n	overflow: auto;\n	padding: var(--office-space-2) var(--office-space-5);\n}\n.thread-link {\n	align-self: flex-start;\n	font: inherit;\n	color: var(--office-foreground);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2);\n	cursor: pointer;\n}\n.empty {\n	margin: var(--office-space-6) 0;\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n\n.day {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin: var(--office-space-4) 0 var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.day::before,\n.day::after {\n	content: '';\n	flex: 1;\n	height: var(--office-border-width);\n	background: var(--office-teams-divider);\n}\n\n.msg {\n	position: relative;\n	display: grid;\n	grid-template-columns: 2.3em minmax(0, 1fr);\n	column-gap: var(--office-space-3);\n	padding: var(--office-space-0) 0;\n}\n.msg[data-grouped='false'] {\n	margin-top: var(--office-teams-message-gap, var(--office-space-3));\n}\n.gutter {\n	padding-top: var(--office-space-1);\n}\nheader {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-0);\n}\n.author {\n	font-weight: var(--office-font-weight-bold);\n}\ntime,\n.edited,\n.file-size {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n\n.bubble {\n	display: inline-block;\n	max-width: min(100%, 44em);\n	padding: var(--office-teams-message-padding, var(--office-space-2) var(--office-space-3));\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-bubble);\n	line-height: var(--office-line-height);\n	overflow-wrap: anywhere;\n}\n.text {\n	white-space: pre-wrap;\n}\n.msg[data-own='true'] .bubble {\n	background: var(--office-teams-bubble-own);\n}\n.deleted {\n	color: var(--office-teams-text-subtle);\n	font-style: italic;\n}\nblockquote {\n	margin: 0 0 var(--office-space-1);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	white-space: normal;\n}\nblockquote strong {\n	display: block;\n	color: var(--office-foreground);\n}\n\n.files {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n	white-space: normal;\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 14em;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	text-align: start;\n}\n.file:hover {\n	border-color: var(--office-teams-brand);\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n.meta {\n	display: grid;\n}\n\n.reactions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin-top: var(--office-space-1);\n}\n.pill {\n	display: inline-flex;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	font-size: var(--office-font-size-sm);\n}\n.pill[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n\n.toolbar {\n	position: absolute;\n	inset-block-start: calc(-1 * var(--office-space-3));\n	inset-inline-end: 0;\n	display: none;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.msg:hover .toolbar,\n.msg:focus-within .toolbar {\n	display: flex;\n}\n.toolbar button {\n	display: grid;\n	place-items: center;\n	min-width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n}\n.toolbar button:hover {\n	background: var(--office-selected);\n}\n";
+var chat_list_default = ":host {\n	display: block;\n	min-height: 0;\n	overflow: auto;\n	padding: var(--office-space-2) var(--office-space-5);\n}\n.thread-link {\n	align-self: flex-start;\n	font: inherit;\n	color: var(--office-foreground);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2);\n	cursor: pointer;\n}\n.empty {\n	margin: var(--office-space-6) 0;\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n\n.day {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin: var(--office-space-4) 0 var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.day::before,\n.day::after {\n	content: '';\n	flex: 1;\n	height: var(--office-border-width);\n	background: var(--office-teams-divider);\n}\n\n.msg {\n	position: relative;\n	display: grid;\n	grid-template-columns: 2.3em minmax(0, 1fr);\n	column-gap: var(--office-space-3);\n	padding: var(--office-space-0) 0;\n}\n.msg[data-grouped='false'] {\n	margin-top: var(--office-teams-message-gap, var(--office-space-3));\n}\n.gutter {\n	padding-top: var(--office-space-1);\n}\nheader {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-0);\n}\n.author {\n	font-weight: var(--office-font-weight-bold);\n}\ntime,\n.edited,\n.file-size {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n\n.bubble {\n	display: inline-block;\n	max-width: min(100%, 44em);\n	padding: var(--office-teams-message-padding, var(--office-space-2) var(--office-space-3));\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-bubble);\n	line-height: var(--office-line-height);\n	overflow-wrap: anywhere;\n}\n.text {\n	white-space: pre-wrap;\n}\n.msg[data-own='true'] .bubble {\n	background: var(--office-teams-bubble-own);\n}\n.deleted {\n	color: var(--office-teams-text-subtle);\n	font-style: italic;\n}\nblockquote {\n	margin: 0 0 var(--office-space-1);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	white-space: normal;\n}\nblockquote strong {\n	display: block;\n	color: var(--office-foreground);\n}\n\n.files {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n	white-space: normal;\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 14em;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	text-align: start;\n}\n.file:hover {\n	border-color: var(--office-teams-brand);\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n.meta {\n	display: grid;\n}\n\n.reactions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin-top: var(--office-space-1);\n}\n.pill {\n	display: inline-flex;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	font-size: var(--office-font-size-sm);\n}\n.pill[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n\n.toolbar {\n	position: absolute;\n	inset-block-start: calc(-1 * var(--office-space-3));\n	inset-inline-end: 0;\n	display: none;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.msg:hover .toolbar,\n.msg:focus-within .toolbar {\n	display: flex;\n}\n.toolbar button {\n	display: grid;\n	place-items: center;\n	min-width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n}\n.toolbar button:hover {\n	background: var(--office-selected);\n}\n\n.msg:focus {\n	outline: none;\n}\n.pin-mark {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	color: var(--office-teams-brand);\n	font-size: var(--office-font-size-xs);\n}\n.pin-mark svg {\n	width: 1em;\n	height: 1em;\n}\n@media (pointer: coarse) {\n	.toolbar button {\n		min-width: var(--office-touch-target, 44px);\n		height: var(--office-touch-target, 44px);\n	}\n}\n";
 
 // src/teams/chat-list.ts
 var QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
@@ -685,7 +689,8 @@ var OfficeUiChatList = class extends TeamsElement {
   static properties = {
     messages: { attribute: false },
     selfId: { type: String, attribute: "self-id" },
-    replyCounts: { attribute: false }
+    replyCounts: { attribute: false },
+    pinnedIds: { attribute: false }
   };
   stickToBottom = true;
   constructor() {
@@ -693,6 +698,7 @@ var OfficeUiChatList = class extends TeamsElement {
     this.messages = [];
     this.selfId = "";
     this.replyCounts = {};
+    this.pinnedIds = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -726,6 +732,7 @@ var OfficeUiChatList = class extends TeamsElement {
     return html`
 			<article
 				class="msg"
+				tabindex="-1"
 				data-message-id=${m.id}
 				data-own=${String(own)}
 				data-grouped=${String(grouped)}
@@ -738,6 +745,7 @@ var OfficeUiChatList = class extends TeamsElement {
 									<span class="author">${m.authorName}</span>
 									<time>${formatTime(m.ts)}</time>
 								</header>`}
+					${this.pinMark(m)}
 					<div class="bubble">
 						${parent ? html`<blockquote>
 										<strong>${parent.authorName}</strong
@@ -788,6 +796,7 @@ var OfficeUiChatList = class extends TeamsElement {
 				>
 					${icon("reply")}
 				</button>
+				${this.pinButton(m)}
 				${own ? html`<button
 									type="button"
 									title="Edit"
@@ -807,6 +816,22 @@ var OfficeUiChatList = class extends TeamsElement {
 			</div>
 		`;
   }
+  pinMark(m) {
+    return !m.deleted && this.pinnedIds.includes(m.id) ? html`<span class="pin-mark">${icon("pin")} Pinned</span>` : nothing;
+  }
+  pinButton(m) {
+    const pinned = this.pinnedIds.includes(m.id);
+    const label = pinned ? "Unpin" : "Pin";
+    return html`<button
+			type="button"
+			title=${label}
+			aria-label=${label}
+			aria-pressed=${String(pinned)}
+			@click=${() => this.fire(pinned ? "office-chat-unpin" : "office-chat-pin", { messageId: m.id })}
+		>
+			${icon("pin")}
+		</button>`;
+  }
   files(files) {
     return html`<div class="files">
 			${files.map(
@@ -1227,7 +1252,7 @@ var TeamsContentPreview = class extends LitElement {
         if (kind === "xlsx") (await import('./xlsx.js')).defineXlsxEditor();
         if (kind === "vsdx") (await import('./visio.js')).registerVisioViewer();
         if (kind === "pptx")
-          (await import('./presentation-preview-VIIU7E2S.js')).defineTeamsPresentationPreview();
+          (await import('./presentation-preview-HVKJ3KJN.js')).defineTeamsPresentationPreview();
         if (request.signal.aborted) return;
         this.native = kind;
         await this.updateComplete;
@@ -2439,7 +2464,7 @@ function loadConfig() {
 var saveConfig = (config) => safeStorage.setItem("teams:config", JSON.stringify(config));
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-app.css?raw
-var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n";
+var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n.channel-head > .back {\n	display: none;\n}\n\n/* ---- compact shell ---------------------------------------------------------------------- */\n/* Below 56em the app rail is a bottom bar, the channel list is its own full-screen view and the\n   conversation (or any other content) fills the width with a back button to the list. */\n@media (max-width: 56em) {\n	.brand {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: minmax(0, 1fr) auto;\n		gap: var(--office-space-2);\n	}\n	.search {\n		width: 100%;\n	}\n	.channel-head {\n		gap: var(--office-space-2);\n		padding-inline: var(--office-space-3);\n	}\n	.channel-head > .back {\n		display: inline-flex;\n		border-color: transparent;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n		order: 1;\n	}\n	.body {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: minmax(0, 1fr) auto;\n	}\n	.body > office-ui-app-rail {\n		grid-column: 1;\n		grid-row: 2;\n	}\n	.body > .side,\n	.body > .main,\n	.body > teams-settings {\n		grid-column: 1;\n		grid-row: 1;\n	}\n	.side {\n		border-inline-end: 0;\n	}\n	.shell[data-mobile-view='list'] .main,\n	.shell[data-mobile-view='content'] .side {\n		display: none;\n	}\n}\n/* Phone landscape has little height: keep the chrome to one thin row each. */\n@media (max-width: 56em) and (max-height: 30em) {\n	.topbar {\n		padding-block: var(--office-space-1);\n	}\n	.channel-head {\n		flex-wrap: nowrap;\n		padding-block: var(--office-space-1);\n	}\n	.channel-head .tabs {\n		flex: 1 1 0;\n		order: 0;\n	}\n	.channel-head h1 {\n		font-size: var(--office-font-size);\n	}\n}\n/* Touch: every control in the shell reaches the minimum hit target. */\n@media (pointer: coarse) {\n	.channel-head > button,\n	.meet,\n	.tabs button,\n	.join,\n	.thread-head button,\n	.callbar button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n";
 function threadPane(state, client, openFile, close) {
   const thread = state.thread;
   if (!thread) return nothing;
@@ -2456,7 +2481,10 @@ function threadPane(state, client, openFile, close) {
 		</header>
 		<office-ui-chat-list
 			.messages=${[thread.root, ...thread.replies]}
+			.pinnedIds=${state.pinned.map((p) => p.message.id)}
 			self-id=${state.user.id}
+			@office-chat-pin=${(e) => client.pinMessage(e.detail.messageId)}
+			@office-chat-unpin=${(e) => client.unpinMessage(e.detail.messageId)}
 			@office-chat-react=${(e) => client.toggleReaction(e.detail.messageId, e.detail.emoji)}
 			@office-chat-reply=${(e) => client.startReply(e.detail.messageId)}
 			@office-chat-edit=${(e) => client.startEdit(e.detail.messageId)}
@@ -2622,17 +2650,37 @@ function messageTransfers(state, client) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/profile-menu.css?raw
-var profile_menu_default = ":host {\n	display: inline-flex;\n	font: inherit;\n	color: inherit;\n}\n.profile {\n	display: inline-flex;\n	align-items: center;\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	cursor: pointer;\n}\n.profile:hover {\n	background: var(--office-selected);\n}\n[popover] {\n	min-width: 20em;\n	max-width: 90vw;\n	padding: var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.identity {\n	display: flex;\n	gap: var(--office-space-3);\n	align-items: center;\n	margin-bottom: var(--office-space-4);\n}\n.identity strong {\n	overflow-wrap: anywhere;\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n}\nselect {\n	font: inherit;\n	padding: var(--office-space-2);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n}\n.connection {\n	color: var(--office-teams-text-subtle);\n	margin-bottom: 0;\n	font-size: var(--office-font-size-sm);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
+var profile_menu_default = ":host {\n	display: inline-flex;\n	font: inherit;\n	color: inherit;\n}\n.profile {\n	display: inline-flex;\n	align-items: center;\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	cursor: pointer;\n}\n.profile:hover {\n	background: var(--office-selected);\n}\n[popover] {\n	min-width: 20em;\n	max-width: 90vw;\n	max-height: min(80vh, 40em);\n	overflow: auto;\n	padding: var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.identity {\n	display: flex;\n	gap: var(--office-space-3);\n	align-items: center;\n	margin-bottom: var(--office-space-4);\n}\n.identity strong {\n	overflow-wrap: anywhere;\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.who {\n	display: grid;\n	min-width: 0;\n}\n.status-line,\n.message,\n.hint {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\n.hint:empty {\n	display: none;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.actions button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.actions button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n@media (pointer: coarse) {\n	.actions button,\n	select,\n	input {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\ninput,\nselect {\n	font: inherit;\n	padding: var(--office-space-2);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n}\nselect:disabled {\n	opacity: 0.6;\n}\n.connection {\n	color: var(--office-teams-text-subtle);\n	margin-bottom: 0;\n	font-size: var(--office-font-size-sm);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
 
 // src/teams/app/profile-menu.ts
-var AVAILABILITY = ["available", "busy", "away"];
+var idleLabel = (minutes) => minutes === 0 ? "Never" : `${minutes} minutes`;
+var untilLabel = (at) => {
+  if (at === null) return "";
+  const d = new Date(at);
+  const today = (/* @__PURE__ */ new Date()).toDateString();
+  if (d.getHours() === 0 && d.getMinutes() === 0) {
+    const lastDay = new Date(at - 1);
+    return lastDay.toDateString() === today ? "Until end of today" : `Until end of ${lastDay.toLocaleDateString([], { weekday: "long" })}`;
+  }
+  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  return d.toDateString() === today ? `Until ${time}` : `Until ${d.toLocaleDateString([], { weekday: "long" })} ${time}`;
+};
 var TeamsProfileMenu = class extends LitElement {
   static styles = unsafeCSS(profile_menu_default);
-  static properties = { state: { attribute: false }, open: { state: true } };
+  static properties = {
+    state: { attribute: false },
+    open: { state: true },
+    draft: { state: true },
+    resetAfter: { state: true },
+    clearAfter: { state: true }
+  };
   constructor() {
     super();
     this.state = null;
     this.open = false;
+    this.draft = null;
+    this.resetAfter = "never";
+    this.clearAfter = "never";
   }
   willUpdate(changed) {
     const old = changed.get("state");
@@ -2644,9 +2692,27 @@ var TeamsProfileMenu = class extends LitElement {
     if (toggleAnchoredPopover(panel, this.renderRoot.querySelector("button")))
       panel.querySelector("select")?.focus();
   }
+  fire(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  saveMessage() {
+    this.fire("teams-profile-message", {
+      message: this.draft ?? this.state?.presence.message ?? "",
+      duration: this.clearAfter
+    });
+    this.draft = null;
+  }
+  durationOptions(selected) {
+    return STATUS_DURATIONS.map(
+      (value) => html`<option value=${value} ?selected=${selected === value}>
+					${STATUS_DURATION_LABELS[value]}
+				</option>`
+    );
+  }
   render() {
     const state = this.state;
     if (!state) return nothing;
+    const { presence } = state;
     return html`<button
 				type="button"
 				class="profile"
@@ -2686,25 +2752,91 @@ var TeamsProfileMenu = class extends LitElement {
 						name=${state.user.name}
 						seed=${state.user.id}
 						presence=${state.availability}
-					></office-ui-avatar
-					><strong>${state.user.name}</strong>
+					></office-ui-avatar>
+					<div class="who">
+						<strong>${state.user.name}</strong>
+						<span class="status-line"
+							>${PRESENCE_LABELS[state.availability]}${state.presence.idle && state.presence.status === "available" ? " (idle)" : ""}</span
+						>
+						${presence.message ? html`<span class="message">${presence.message}</span>` : nothing}
+					</div>
 				</div>
 				<label
 					>Availability<select
-						.value=${state.availability}
+						.value=${presence.status}
 						@change=${(event) => {
       const availability = event.target.value;
-      if (AVAILABILITY.some((value) => value === availability))
-        this.dispatchEvent(
-          new CustomEvent("teams-profile-status", {
-            detail: { availability },
-            bubbles: true,
-            composed: true
-          })
-        );
+      if (!isPresenceStatus(availability)) return;
+      this.fire("teams-profile-status", { availability, duration: this.resetAfter });
     }}
 					>
-						${AVAILABILITY.map((value) => html`<option value=${value} ?selected=${state.availability === value}>${value[0].toUpperCase() + value.slice(1)}</option>`)}
+						${PRESENCE_STATUSES.map((value) => html`<option value=${value} ?selected=${presence.status === value}>${PRESENCE_LABELS[value]}</option>`)}
+					</select></label
+				>
+				<label
+					>Reset status after<select
+						name="status-duration"
+						@change=${(event) => {
+      const duration = event.target.value;
+      if (!isStatusDuration(duration)) return;
+      this.resetAfter = duration;
+      this.fire("teams-profile-status", { availability: presence.status, duration });
+    }}
+					>
+						${this.durationOptions(this.resetAfter)}
+					</select>
+					<span class="hint">${untilLabel(presence.statusExpiresAt)}</span></label
+				>
+				<label
+					>Status message<input
+						type="text"
+						name="message"
+						maxlength=${MAX_STATUS_MESSAGE_CHARS}
+						placeholder="What's your status message?"
+						.value=${this.draft ?? presence.message}
+						@input=${(event) => this.draft = event.target.value}
+						@keydown=${(event) => {
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      this.saveMessage();
+    }}
+					/>
+					<span class="hint">${untilLabel(presence.messageExpiresAt)}</span></label
+				>
+				<label
+					>Clear status message after<select
+						name="message-duration"
+						@change=${(event) => {
+      const duration = event.target.value;
+      if (isStatusDuration(duration)) this.clearAfter = duration;
+    }}
+					>
+						${this.durationOptions(this.clearAfter)}
+					</select></label
+				>
+				<div class="actions">
+					<button type="button" @click=${this.saveMessage}>Save message</button>
+					<button
+						type="button"
+						?disabled=${!presence.message && !this.draft}
+						@click=${() => {
+      this.draft = "";
+      this.saveMessage();
+    }}
+					>
+						Clear message
+					</button>
+				</div>
+				<label
+					>Show me as away after<select
+						name="idle"
+						@change=${(event) => {
+      const minutes = Number(event.target.value);
+      if (IDLE_MINUTE_CHOICES.includes(minutes))
+        this.fire("teams-profile-idle", { minutes });
+    }}
+					>
+						${IDLE_MINUTE_CHOICES.map((minutes) => html`<option value=${minutes} ?selected=${presence.idleMinutes === minutes}>${idleLabel(minutes)}</option>`)}
 					</select></label
 				>
 				<p class="connection">
@@ -2718,6 +2850,103 @@ function defineTeamsProfileMenu() {
     customElements.define("teams-profile-menu", TeamsProfileMenu);
 }
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/pinned-bar.css?raw
+var pinned_bar_default = ":host {\n	display: block;\n	flex: none;\n	font: inherit;\n	color: inherit;\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nsection {\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: 0;\n	background: transparent;\n}\n.summary {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\n}\n.latest {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-width: 0;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-radius: var(--office-radius);\n	text-align: start;\n}\n.latest:hover,\n.count:hover,\n.jump:hover,\n.unpin:hover {\n	background: var(--office-selected);\n}\n.mark {\n	display: inline-grid;\n	flex: none;\n	color: var(--office-teams-brand);\n}\nsvg {\n	width: 1.1em;\n	height: 1.1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.text {\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.count {\n	flex: none;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nul {\n	display: grid;\n	gap: var(--office-space-1);\n	max-height: 14em;\n	margin: 0;\n	padding: 0 var(--office-space-3) var(--office-space-2);\n	overflow: auto;\n	list-style: none;\n}\nli {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.jump {\n	display: grid;\n	flex: 1;\n	gap: var(--office-space-0);\n	min-width: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n	border-radius: var(--office-radius-md);\n	text-align: start;\n}\n.by {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.unpin {\n	flex: none;\n	margin-inline-end: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse) {\n	.latest,\n	.count,\n	.unpin {\n		min-height: var(--office-touch-target, 44px);\n	}\n	.unpin {\n		min-width: var(--office-touch-target, 44px);\n	}\n}\n";
+
+// src/teams/app/pinned-bar.ts
+var SNIPPET = 140;
+var snippet = (m) => {
+  const text = m.text.replace(/\s+/gu, " ").trim();
+  if (text) return text.length > SNIPPET ? `${text.slice(0, SNIPPET)}...` : text;
+  return m.attachments[0]?.name ?? "Attachment";
+};
+var TeamsPinnedBar = class extends LitElement {
+  static styles = unsafeCSS(pinned_bar_default);
+  static properties = { pinned: { attribute: false }, expanded: { state: true } };
+  constructor() {
+    super();
+    this.pinned = [];
+    this.expanded = false;
+  }
+  emit(name, messageId) {
+    this.dispatchEvent(
+      new CustomEvent(name, { detail: { messageId }, bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const [latest] = this.pinned;
+    if (!latest) return nothing;
+    return html`
+			<section aria-label="Pinned messages">
+				<div class="summary">
+					<button
+						type="button"
+						class="latest"
+						@click=${() => this.emit("teams-pinned-open", latest.message.id)}
+					>
+						<span class="mark">${icon("pin")}</span>
+						<strong>${latest.message.authorName}</strong>
+						<span class="text">${snippet(latest.message)}</span>
+					</button>
+					<button
+						type="button"
+						class="count"
+						aria-expanded=${String(this.expanded)}
+						aria-controls="pins"
+						@click=${() => this.expanded = !this.expanded}
+					>
+						${this.pinned.length} pinned
+					</button>
+				</div>
+				${this.expanded ? html`<ul id="pins">
+								${this.pinned.map(
+      (pin) => html`<li>
+											<button
+												type="button"
+												class="jump"
+												@click=${() => this.emit("teams-pinned-open", pin.message.id)}
+											>
+												<strong>${pin.message.authorName}</strong>
+												<span class="text">${snippet(pin.message)}</span>
+												<span class="by">Pinned by ${pin.pinnedByName}</span>
+											</button>
+											<button
+												type="button"
+												class="unpin"
+												aria-label=${`Unpin message from ${pin.message.authorName}`}
+												title="Unpin"
+												@click=${() => this.emit("teams-pinned-unpin", pin.message.id)}
+											>
+												Unpin
+											</button>
+										</li>`
+    )}
+							</ul>` : nothing}
+			</section>
+		`;
+  }
+};
+function defineTeamsPinnedBar() {
+  if (!customElements.get("teams-pinned-bar"))
+    customElements.define("teams-pinned-bar", TeamsPinnedBar);
+}
+
+// src/teams/app/activity.ts
+var ACTIVITY_EVENTS = ["pointerdown", "pointermove", "keydown", "wheel", "touchstart"];
+function watchActivity(target, onActivity, throttleMs = 1e3, now = Date.now) {
+  let last = Number.NEGATIVE_INFINITY;
+  const handler = () => {
+    const t = now();
+    if (t - last < throttleMs) return;
+    last = t;
+    onActivity();
+  };
+  for (const name of ACTIVITY_EVENTS) target.addEventListener(name, handler, { passive: true });
+  return () => {
+    for (const name of ACTIVITY_EVENTS) target.removeEventListener(name, handler);
+  };
+}
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/add-tab-dialog.css?raw
 var add_tab_dialog_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(54em, 94vw);\n	max-height: 90vh;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	color: inherit;\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader,\n.app-heading,\nfooter {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\nheader {\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\nh1,\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nsection,\nform {\n	padding: var(--office-space-5);\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n}\n.apps {\n	display: grid;\n	grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));\n	gap: var(--office-space-3);\n}\nbutton,\ninput {\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	padding: var(--office-space-2) var(--office-space-3);\n}\nbutton {\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.app {\n	display: grid;\n	justify-items: start;\n	text-align: start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-4);\n}\n.app-heading h2 {\n	flex: 1;\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.6em;\n	height: 2.6em;\n	border-radius: var(--office-radius-md);\n	color: var(--office-call-foreground);\n	background: var(--office-file-other);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n}\ninput {\n	min-width: 0;\n}\nsmall,\n.hint,\nsection > p {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\nsmall {\n	display: block;\n}\n.files {\n	margin: 0;\n	padding: var(--office-space-2);\n	max-height: 18em;\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius);\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	border-radius: var(--office-radius);\n	cursor: pointer;\n}\n.file:has(input:checked) {\n	background: var(--office-teams-brand-subtle);\n}\n.file strong {\n	overflow-wrap: anywhere;\n}\n[role='alert'] {\n	color: var(--office-danger);\n}\nfooter {\n	justify-content: flex-end;\n}\n.post-choice {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\nbutton.primary {\n	color: var(--office-teams-brand-foreground);\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand);\n}\nbutton.primary:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
 
@@ -2964,129 +3193,6 @@ function defineTeamsAddTabDialog() {
     customElements.define("teams-add-tab-dialog", TeamsAddTabDialog);
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/navigation-drawer.css?raw
-var navigation_drawer_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	inset: 0 auto 0 0;\n	margin: 0;\n	width: min(24em, 92vw);\n	max-width: 92vw;\n	height: 100dvh;\n	max-height: 100dvh;\n	padding: 0;\n	border: 0;\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog[open] {\n	display: flex;\n	flex-direction: column;\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	font: inherit;\n	background: var(--office-background);\n	color: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nnav {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\n";
-
-// src/dialog/focus.ts
-var MODAL_FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  'input:not([disabled]):not([type="hidden"])',
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[contenteditable="true"]',
-  '[tabindex]:not([tabindex="-1"])'
-].join(",");
-function isAvailable(element) {
-  if (element.hidden || element.getAttribute("aria-hidden") === "true") {
-    return false;
-  }
-  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
-  return style?.display !== "none" && style?.visibility !== "hidden";
-}
-function focusableElements(root, found = []) {
-  for (const child of Array.from(root.children)) {
-    if (child instanceof HTMLElement) {
-      if (!isAvailable(child)) continue;
-      if (child.matches(MODAL_FOCUSABLE_SELECTOR) && isAvailable(child)) {
-        found.push(child);
-      }
-      if (child.shadowRoot && isAvailable(child)) {
-        focusableElements(child.shadowRoot, found);
-      }
-    }
-    focusableElements(child, found);
-  }
-  return found;
-}
-function deepActiveElement(doc) {
-  let active = doc.activeElement;
-  while (active?.shadowRoot?.activeElement) {
-    active = active.shadowRoot.activeElement;
-  }
-  return active;
-}
-function modalFocusableElements(panel) {
-  return focusableElements(panel);
-}
-function modalActiveElement(doc) {
-  return deepActiveElement(doc);
-}
-
-// src/teams/app/navigation-drawer.ts
-var TeamsNavigationDrawer = class extends LitElement {
-  static styles = unsafeCSS(navigation_drawer_default);
-  static properties = {
-    open: { type: Boolean, reflect: true },
-    heading: { type: String }
-  };
-  compact;
-  resized = () => {
-    if (this.open && !this.compact?.matches) this.close();
-  };
-  constructor() {
-    super();
-    this.open = false;
-    this.heading = "Teams and channels";
-    this.addEventListener("keydown", (event) => this.trapTab(event));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.compact = globalThis.matchMedia?.("(max-width: 56.25em)");
-    this.compact?.addEventListener("change", this.resized);
-  }
-  disconnectedCallback() {
-    this.compact?.removeEventListener("change", this.resized);
-    super.disconnectedCallback();
-  }
-  updated() {
-    const dialog = this.renderRoot.querySelector("dialog");
-    if (this.open && !dialog.open) dialog.showModal();
-    else if (!this.open && dialog.open) dialog.close();
-  }
-  trapTab(event) {
-    if (!this.open || event.key !== "Tab") return;
-    const close = this.renderRoot.querySelector("button");
-    const stops = [close, ...modalFocusableElements(this)];
-    const current = modalActiveElement(this.ownerDocument);
-    const index = stops.findIndex((element) => element === current);
-    if (index < 0 || (event.shiftKey ? index === 0 : index === stops.length - 1)) {
-      event.preventDefault();
-      stops[event.shiftKey ? stops.length - 1 : 0]?.focus();
-    }
-  }
-  close() {
-    this.dispatchEvent(
-      new CustomEvent("teams-navigation-close", { bubbles: true, composed: true })
-    );
-  }
-  render() {
-    return html`<dialog
-			aria-label="Workspace navigation"
-			@click=${(event) => {
-      const dialog = event.currentTarget;
-      const rect = dialog.getBoundingClientRect();
-      if (event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom))
-        this.close();
-    }}
-			@cancel=${(event) => {
-      event.preventDefault();
-      this.close();
-    }}
-		>
-			<header>
-				<h2>${this.heading}</h2>
-				<button type="button" aria-label="Close navigation" @click=${this.close}>×</button>
-			</header>
-			<nav aria-label="Workspace channels and calls"><slot></slot></nav>
-		</dialog>`;
-  }
-};
-function defineTeamsNavigationDrawer(registry = globalThis.customElements) {
-  if (registry && !registry.get("teams-navigation-drawer"))
-    registry.define("teams-navigation-drawer", TeamsNavigationDrawer);
-}
-
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/create-channel-dialog.css?raw
 var create_channel_dialog_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(40em, 94vw);\n	max-height: 90dvh;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	font-weight: var(--office-font-weight-bold);\n}\ninput,\ntextarea {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-3);\n	font: inherit;\n	font-weight: normal;\n	color: inherit;\n	background: var(--office-field-background);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius-md);\n}\ntextarea {\n	min-height: 6em;\n	resize: vertical;\n}\np,\nsmall {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\n.issue {\n	color: var(--office-danger);\n}\nfooter {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton.primary {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	border-color: transparent;\n}\nbutton.primary:hover {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
 
@@ -3200,7 +3306,7 @@ var RAIL = [
   { id: "teams", label: "Teams", icon: "users" },
   { id: "calls", label: "Calls", icon: "phone" },
   { id: "files", label: "Files", icon: "folder" },
-  { id: "followed", label: "Followed threads", icon: "chat" },
+  { id: "followed", label: "Followed threads", shortLabel: "Threads", icon: "chat" },
   { id: "drafts", label: "Drafts", icon: "chat" }
 ];
 var TeamsApp = class extends LitElement {
@@ -3222,7 +3328,7 @@ var TeamsApp = class extends LitElement {
     panel: { state: true },
     meeting: { state: true },
     settingsOpen: { state: true },
-    navigationOpen: { state: true },
+    mobileView: { state: true },
     toast: { state: true },
     identity: { state: true },
     followedUnreadOnly: { state: true },
@@ -3233,6 +3339,7 @@ var TeamsApp = class extends LitElement {
   };
   teams = new TeamsController(this, (text) => this.notify(text));
   toastTimer;
+  stopActivity;
   openRequest = 0;
   retainedTab;
   themeStorageKey = "";
@@ -3261,7 +3368,7 @@ var TeamsApp = class extends LitElement {
     this.panel = "";
     this.meeting = false;
     this.settingsOpen = false;
-    this.navigationOpen = false;
+    this.mobileView = "conversation";
     this.toast = "";
     this.identity = null;
     this.followedUnreadOnly = false;
@@ -3284,9 +3391,10 @@ var TeamsApp = class extends LitElement {
     defineTeamsChannelTab();
     defineTeamsFilesPanel();
     defineTeamsProfileMenu();
+    defineTeamsPinnedBar();
     defineTeamsAddTabDialog();
-    defineTeamsNavigationDrawer();
     defineTeamsCreateChannelDialog();
+    this.stopActivity = watchActivity(this.ownerDocument, () => this.teams.client?.noteActivity());
     super.connectedCallback();
   }
   // ---- lifecycle --------------------------------------------------------------------------
@@ -3315,7 +3423,6 @@ var TeamsApp = class extends LitElement {
     this.tab = "posts";
     this.addingTab = false;
     this.creatingChannel = false;
-    this.navigationOpen = false;
     this.settingsOpen = false;
     this.openRequest++;
     const named = this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : this.identity ?? loadIdentity();
@@ -3423,6 +3530,8 @@ var TeamsApp = class extends LitElement {
     this.openRequest++;
     this.preview = null;
     clearTimeout(this.toastTimer);
+    this.stopActivity?.();
+    this.stopActivity = void 0;
     super.disconnectedCallback();
   }
   createChannel() {
@@ -3436,7 +3545,7 @@ var TeamsApp = class extends LitElement {
     this.tab = "posts";
     this.rail = "teams";
     this.meeting = false;
-    void this.closeNavigation(true);
+    this.mobileView = "conversation";
     void this.focusCreatedChannel();
     return true;
   }
@@ -3465,7 +3574,7 @@ var TeamsApp = class extends LitElement {
   startMeeting(channelId) {
     if (!this.closePreview()) return;
     void this.teams.client?.openCall(channelId);
-    void this.closeNavigation(true);
+    this.mobileView = "conversation";
     this.meeting = true;
     this.rail = "teams";
   }
@@ -3479,26 +3588,10 @@ var TeamsApp = class extends LitElement {
     this.meeting = false;
     this.tab = "posts";
     this.rail = "teams";
-    void this.closeNavigation(true);
+    this.mobileView = "conversation";
     return true;
   }
-  async closeNavigation(navigated = false) {
-    if (!this.navigationOpen) return;
-    this.navigationOpen = false;
-    await this.updateComplete;
-    const drawer = this.renderRoot.querySelector("teams-navigation-drawer");
-    await drawer?.updateComplete;
-    if (this.navigationOpen || !this.isConnected) return;
-    const trigger = this.renderRoot.querySelector("[data-open-navigation]");
-    const heading = this.renderRoot.querySelector("main h1") ?? this.renderRoot.querySelector("main");
-    if (!navigated && trigger?.getClientRects().length) trigger.focus();
-    else if (heading) {
-      heading.tabIndex = -1;
-      heading.focus();
-    }
-  }
   askSettings() {
-    this.navigationOpen = false;
     this.settingsOpen = true;
   }
   async closeSettings() {
@@ -3511,6 +3604,11 @@ var TeamsApp = class extends LitElement {
     if (this.theme === "system") this.removeAttribute("data-office-theme");
     else this.setAttribute("data-office-theme", this.theme);
   }
+  /** Which screen the compact shell shows: the channel or call list, or the content itself. */
+  mobileScreen(s) {
+    const listed = this.rail === "teams" || this.rail === "calls";
+    return listed && this.mobileView === "list" && !(this.meeting && s.call) ? "list" : "content";
+  }
   // ---- template ---------------------------------------------------------------------------
   render() {
     if (this.popoutRequested)
@@ -3525,6 +3623,7 @@ var TeamsApp = class extends LitElement {
     return html`
 			<div
 				class="shell"
+				data-mobile-view=${this.mobileScreen(s)}
 				@office-chat-open-tab=${(event) => {
       if (this.teams.state?.tabs.some((entry) => entry.id === event.detail.tabId))
         this.selectTab(event.detail.tabId);
@@ -3542,6 +3641,7 @@ var TeamsApp = class extends LitElement {
       this.settingsOpen = false;
       this.rail = e.detail.id;
       this.meeting = false;
+      this.mobileView = "list";
     }}
 					></office-ui-app-rail>
 					<aside class="side" ?inert=${this.settingsOpen}>${this.sidebar(s)}</aside>
@@ -3608,13 +3708,6 @@ var TeamsApp = class extends LitElement {
 					.create=${(name, description) => this.commitChannel(name, description, this.client)}
 					@teams-create-channel-close=${() => this.creatingChannel = false}
 				></teams-create-channel-dialog>
-				<teams-navigation-drawer
-					.heading=${this.rail === "calls" ? "Calls" : "Teams and channels"}
-					?open=${this.navigationOpen}
-					@teams-navigation-close=${() => void this.closeNavigation()}
-				>
-					${this.navigationOpen ? this.sidebar(s) : nothing}
-				</teams-navigation-drawer>
 				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
 
 				<teams-add-tab-dialog
@@ -3673,21 +3766,7 @@ var TeamsApp = class extends LitElement {
   topbar(s) {
     return html`
 			<header class="topbar">
-				<div class="brand">
-					<button
-						type="button"
-						class="navigation-toggle"
-						data-open-navigation
-						aria-label="Open navigation"
-						title="Open navigation"
-						aria-haspopup="dialog"
-						aria-expanded=${String(this.navigationOpen)}
-						@click=${() => this.navigationOpen = true}
-					>
-						${icon("navigation")}
-					</button>
-					<span class="logo">T</span><span>Teams</span>
-				</div>
+				<div class="brand"><span class="logo">T</span><span>Teams</span></div>
 				<div class="search">
 					<input
 						type="search"
@@ -3730,9 +3809,18 @@ var TeamsApp = class extends LitElement {
 					<teams-profile-menu
 						.state=${s}
 						@teams-profile-status=${(event) => {
-      if (["available", "busy", "away"].includes(event.detail.availability))
-        this.teams.client?.setAvailability(event.detail.availability);
+      const { availability, duration } = event.detail;
+      if (isPresenceStatus(availability))
+        this.teams.client?.setAvailability(
+          availability,
+          isStatusDuration(duration) ? duration : "never"
+        );
     }}
+						@teams-profile-message=${(event) => this.teams.client?.setStatusMessage(
+      String(event.detail.message ?? ""),
+      isStatusDuration(event.detail.duration) ? event.detail.duration : "never"
+    )}
+						@teams-profile-idle=${(event) => this.teams.client?.setIdleMinutes(Number(event.detail.minutes))}
 					></teams-profile-menu>
 				</div>
 			</header>
@@ -3818,6 +3906,15 @@ var TeamsApp = class extends LitElement {
     const activeTab = sharedTab ?? (this.retainedTab?.id === this.tab && this.retainedTab.channelId === s.selectedChannelId ? this.retainedTab : void 0);
     return html`
 			${compact ? nothing : html`<header class="channel-head">
+							<button
+								type="button"
+								class="back"
+								aria-label="Back to channels"
+								title="Back to channels"
+								@click=${() => this.mobileView = "list"}
+							>
+								${icon("back")}
+							</button>
 							<h1><span class="hash">#</span> ${channel?.name ?? "No channel yet"}</h1>
 							<nav class="tabs" role="tablist">
 								${["posts", "files"].map(
@@ -3926,10 +4023,18 @@ var TeamsApp = class extends LitElement {
     ) : nothing}
 						</div>` : this.tab === "files" && !compact ? this.fileList(s.files, s) : html`<div class="conversation-grid" data-thread=${String(!!s.thread && !compact)}>
 								<div class="conversation-main">
+									${compact || s.pinned.length === 0 ? nothing : html`<teams-pinned-bar
+													.pinned=${s.pinned}
+													@teams-pinned-open=${(e) => void this.revealMessage(e.detail.messageId)}
+													@teams-pinned-unpin=${(e) => c?.unpinMessage(e.detail.messageId)}
+												></teams-pinned-bar>`}
 									<office-ui-chat-list
 										.messages=${compact ? s.messages : s.posts}
 										.replyCounts=${compact ? {} : s.replyCounts}
+										.pinnedIds=${s.pinned.map((p) => p.message.id)}
 										self-id=${s.user.id}
+										@office-chat-pin=${(e) => c?.pinMessage(e.detail.messageId)}
+										@office-chat-unpin=${(e) => c?.unpinMessage(e.detail.messageId)}
 										@office-chat-react=${(e) => c?.toggleReaction(e.detail.messageId, e.detail.emoji)}
 										@office-chat-thread=${(e) => void this.openThread(e.detail.messageId)}
 										@office-chat-reply=${(e) => compact ? c?.startReply(e.detail.messageId) : void this.openThread(e.detail.messageId, "reply")}
@@ -3969,6 +4074,18 @@ var TeamsApp = class extends LitElement {
     this.addingTab = false;
     this.creatingChannel = false;
   }
+  /** Scroll a pinned message into view, opening its thread when it is a reply. */
+  async revealMessage(id) {
+    const message = this.teams.state?.messages.find((m) => m.id === id);
+    if (!message) return;
+    if (message.replyTo) return this.openThread(id);
+    const list = this.shadowRoot?.querySelector(".conversation-main office-ui-chat-list");
+    const row = Array.from(
+      list?.shadowRoot?.querySelectorAll("[data-message-id]") ?? []
+    ).find((element) => element.dataset.messageId === id);
+    row?.scrollIntoView({ block: "center" });
+    row?.focus();
+  }
   async openThread(id, action) {
     const client = this.teams.client;
     client?.openThread(id);