/* Tokkah Mail — desktop webmail.
   Served under CSP `style-src 'self'`: every style lives in this file.
   No inline <style>, no style="" attributes, no remote fonts. */

/* ---------------------------------------------------------------- tokens */

:root {
	color-scheme: light;

	--bg: #f2f4f7;
	--surface: #ffffff;
	--surface-2: #f7f8fa;
	--surface-3: #eef0f4;
	--surface-hover: #f0f2f6;
	--surface-active: #e9ecf2;

	--line: #dfe3e9;
	--line-soft: #eaedf2;
	--line-strong: #c9cfd8;

	--text: #10141a;
	--text-muted: #5b6573;
	--text-dim: #838d9b;

	--accent: #a8761a;
	--accent-hover: #8f6414;
	--accent-ink: #7a5510;
	--accent-surface: #fbf3e2;
	--accent-line: #e4cd9b;
	--on-accent: #ffffff;

	--success: #1f7a4d;
	--success-surface: #e6f5ed;
	--warn: #8a6410;
	--warn-surface: #fbf1dc;
	--danger: #b4293a;
	--danger-surface: #fceaec;

	--focus: #2f6fd0;
	--selection: #dce9fb;

	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 3px rgba(16, 20, 26, 0.04);
	--shadow-2: 0 8px 24px rgba(16, 20, 26, 0.1), 0 2px 6px rgba(16, 20, 26, 0.06);
	--shadow-3: 0 20px 56px rgba(16, 20, 26, 0.18);

	--sidebar-w: 248px;
	--list-w: 384px;
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif,
		system-ui, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
}

/* Dark by system preference, unless the reader has pinned light. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg: #06080b;
		--surface: #0c1015;
		--surface-2: #11161d;
		--surface-3: #151b23;
		--surface-hover: #161d26;
		--surface-active: #1c242f;

		--line: #242b35;
		--line-soft: #1a2027;
		--line-strong: #333c48;

		--text: #f4f7fb;
		--text-muted: #9ca5b2;
		--text-dim: #747e8a;

		--accent: #e2b966;
		--accent-hover: #f0c875;
		--accent-ink: #edc884;
		--accent-surface: rgba(226, 185, 102, 0.12);
		--accent-line: rgba(226, 185, 102, 0.42);
		--on-accent: #0e1116;

		--success: #57d68d;
		--success-surface: rgba(87, 214, 141, 0.12);
		--warn: #e4bd66;
		--warn-surface: rgba(228, 189, 102, 0.12);
		--danger: #ff8a92;
		--danger-surface: rgba(255, 138, 146, 0.12);

		--focus: #6ea8ff;
		--selection: rgba(110, 168, 255, 0.24);

		--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
		--shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
	}
}

/* Dark pinned by the reader, regardless of system. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #06080b;
	--surface: #0c1015;
	--surface-2: #11161d;
	--surface-3: #151b23;
	--surface-hover: #161d26;
	--surface-active: #1c242f;

	--line: #242b35;
	--line-soft: #1a2027;
	--line-strong: #333c48;

	--text: #f4f7fb;
	--text-muted: #9ca5b2;
	--text-dim: #747e8a;

	--accent: #e2b966;
	--accent-hover: #f0c875;
	--accent-ink: #edc884;
	--accent-surface: rgba(226, 185, 102, 0.12);
	--accent-line: rgba(226, 185, 102, 0.42);
	--on-accent: #0e1116;

	--success: #57d68d;
	--success-surface: rgba(87, 214, 141, 0.12);
	--warn: #e4bd66;
	--warn-surface: rgba(228, 189, 102, 0.12);
	--danger: #ff8a92;
	--danger-surface: rgba(255, 138, 146, 0.12);

	--focus: #6ea8ff;
	--selection: rgba(110, 168, 255, 0.24);

	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
	--shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ base */

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--selection);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

svg {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[hidden] {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Thin, theme-aware scrollbars. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border: 3px solid transparent;
	border-radius: 999px;
	background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--text-dim);
	background-clip: content-box;
}

/* ---------------------------------------------------------------- shell */

.mail-shell {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: 100vh;
	overflow: hidden;
}

/* --------------------------------------------------------------- topbar */

.mail-topbar {
	position: relative;
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	height: 60px;
	padding: 0 14px 0 20px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

/* Search is centred and capped: a full-bleed field reads as a form, a
   measured one reads as a control. */
.topbar-search {
	justify-self: center;
	width: 100%;
	max-width: 560px;
	min-width: 0;
}

.topbar-search .search-field {
	height: 34px;
	border-radius: var(--radius-pill);
	padding: 0 14px;
}

.brand-block {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.brand-mark {
	display: inline-grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 7px;
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.brand-mark svg {
	width: 16px;
	height: 16px;
}

.brand-block h1 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.topbar-centre {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* Runtime + session status collapses to a dot with a tooltip-ish title. */
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.status-chip i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-dim);
}

.status-chip[data-tone="ok"] {
	border-color: var(--line);
	color: var(--text-muted);
}

.status-chip[data-tone="ok"] i {
	background: var(--success);
}

.status-chip[data-tone="warn"] i {
	background: var(--warn);
}

.status-chip[data-tone="off"] i {
	background: var(--text-dim);
}

/* --------------------------------------------------------------- buttons */

.primary-button,
.ghost-button,
.icon-button,
.action-button,
.filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 0.84rem;
	font-weight: 600;
	white-space: nowrap;
	transition:
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

.primary-button {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.primary-button:hover:not(:disabled) {
	border-color: var(--accent-hover);
	background: var(--accent-hover);
}

.primary-button:disabled,
.ghost-button:disabled,
.icon-button:disabled,
.action-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ghost-button,
.filter-button {
	border-color: var(--line);
	background: var(--surface);
	color: var(--text-muted);
}

.ghost-button:hover:not(:disabled),
.filter-button:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text);
}

.filter-button[aria-pressed="true"] {
	border-color: var(--accent-line);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.icon-button {
	width: 32px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--text-muted);
}

.icon-button:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text);
}

.icon-button svg {
	width: 17px;
	height: 17px;
}

.action-button {
	border-color: var(--line);
	background: var(--surface);
	color: var(--text-muted);
}

.action-button:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text);
}

.action-button[data-copied="true"],
.action-button[data-copied="true"]:hover {
	border-color: var(--success);
	background: var(--success-surface);
	color: var(--success);
}

/* Icon-only secondary actions, grouped by what they do. */
/* The shortcut, shown rather than hidden in a tooltip. */
.hint {
	margin-left: 1px;
	padding: 0 4px;
	border-radius: 3px;
	background: rgba(127, 127, 127, 0.16);
	color: inherit;
	font-family: var(--font);
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.5;
	opacity: 0.65;
}

.action-button-icon {
	width: 32px;
	padding: 0;
}

.action-divider {
	width: 1px;
	height: 18px;
	margin: 0 2px;
	background: var(--line);
}

/* Why Focus ranked this the way it did. A verdict you cannot interrogate is
   just an assertion. */
.message-actions {
	gap: 5px;
}

/* Eleven controls in one row, and on a 1180px laptop they came to 14px more
   than the row was wide — so the last icon dropped onto a line of its own,
   far left, looking like a mistake. Tightening the gap and the label padding
   buys back ~40px, which keeps the row whole at every width the layout
   supports. The buttons keep their full hit area. */
@media (max-width: 1320px) {
	.message-actions {
		gap: 4px;
	}

	.message-actions .action-button {
		padding-left: 9px;
		padding-right: 9px;
	}
}

.action-button-starred {
	border-color: var(--accent-line);
	color: var(--accent-ink);
}

.action-button-starred svg {
	fill: currentColor;
}

.action-button-primary {
	border-color: var(--accent-line);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.action-button-primary:hover:not(:disabled) {
	border-color: var(--accent);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

/* ------------------------------------------------------- account menu */

.account-button {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 34px;
	padding: 0 6px 0 3px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-dim);
	transition: background 120ms ease, border-color 120ms ease;
}

.account-button:hover,
.account-button[aria-expanded="true"] {
	border-color: var(--line);
	background: var(--surface-2);
}

.account-button .avatar {
	width: 26px;
	height: 26px;
	font-size: 0.72rem;
}

.account-button svg {
	width: 14px;
	height: 14px;
}

.account-menu {
	position: absolute;
	top: 54px;
	right: 14px;
	z-index: 50;
	width: 268px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-2);
	animation: menu-in 120ms ease;
}

@keyframes menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.account-menu-head {
	padding: 8px 10px 4px;
}

.account-menu-email {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 650;
}

.account-menu-status {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 4px 10px 10px;
	border-bottom: 1px solid var(--line-soft);
}

.account-menu-status .status-chip {
	height: 24px;
	font-size: 0.72rem;
}

.account-menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--text-muted);
	font-size: 0.84rem;
}

.account-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	text-align: left;
	font-size: 0.85rem;
	transition: background 110ms ease;
}

.account-menu-item:hover {
	background: var(--surface-hover);
}

.account-menu-item svg {
	width: 16px;
	height: 16px;
	color: var(--text-dim);
}

.account-menu-item kbd {
	margin-left: auto;
	padding: 1px 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-2);
	color: var(--text-dim);
	font-family: var(--font);
	font-size: 0.7rem;
	font-weight: 600;
}

.account-menu-item-danger {
	color: var(--danger);
}

.account-menu-item-danger svg {
	color: var(--danger);
}

/* --------------------------------------------------------- theme toggle */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 32px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.theme-toggle button {
	display: inline-grid;
	width: 30px;
	height: 24px;
	place-items: center;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--text-dim);
	transition:
		background 120ms ease,
		color 120ms ease;
}

/* A word-labelled segment in the same control shape as the theme picker. */
.theme-toggle .text-choice {
	width: auto;
	padding: 0 9px;
	font-size: 0.76rem;
	font-weight: 650;
}

.theme-toggle button svg {
	width: 15px;
	height: 15px;
}

.theme-toggle button:hover {
	color: var(--text);
}

.theme-toggle button[aria-checked="true"] {
	background: var(--surface);
	color: var(--accent-ink);
	box-shadow: var(--shadow-1);
}

/* ----------------------------------------------------------- auth panel */

/* Starts BELOW the topbar on purpose: the brand, the status chips and the
   theme toggle stay usable while locked, so you can pick light or dark before
   you ever sign in. */
.mail-auth-panel {
	position: fixed;
	inset: 56px 0 0 0;
	z-index: 40;
	display: grid;
	place-items: center;
	padding: 32px;
	background: var(--bg);
	overflow: auto;
}

.auth-card {
	width: min(420px, 100%);
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-2);
}

.auth-card h2 {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.auth-card .subtitle {
	margin: 0 0 24px;
	color: var(--text-muted);
	line-height: 1.55;
}

/* passkey.js sets these tones on #mail-auth-helper. */
.auth-helper-muted {
	color: var(--text-dim);
}

.auth-helper-success {
	color: var(--success);
}

.auth-helper-danger {
	color: var(--danger);
}

.auth-form {
	display: grid;
	gap: 14px;
}

.field {
	display: grid;
	gap: 6px;
}

.field > span {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text);
	outline: 0;
	transition:
		border-color 120ms ease,
		background 120ms ease;
}

.field textarea {
	height: auto;
	padding: 10px 11px;
	line-height: 1.55;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--focus);
	background: var(--surface);
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--text-dim);
}

.auth-actions {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

.auth-actions .primary-button {
	height: 38px;
}

.inline-link {
	color: var(--text-dim);
	font-size: 0.8rem;
	line-height: 1.5;
}

.auth-status {
	margin: 14px 0 0;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.auth-status[data-tone="danger"] {
	color: var(--danger);
}

.auth-status[data-tone="success"] {
	color: var(--success);
}

/* --------------------------------------------------------------- layout */

.mail-layout {
	position: relative;
	display: grid;
	grid-template-columns: var(--sidebar-w) var(--list-w) minmax(0, 1fr);
	min-height: 0;
	transition: grid-template-columns 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* Everything below is the wide layout only. Under 941px the app is already
   two columns with the sidebar gone, and pinning three tracks there would put
   the reader in a column that does not exist. */
@media (min-width: 941px) {
	/* Each pane is pinned to its own track. Without this, hiding one by taking it
	   out of flow deletes it from the grid, auto-placement slides the survivors
	   left, and the reader lands in the message list's track: measured at 1440px,
	   hiding the sidebar gave the email 384px instead of 1056. */
	.mail-layout > .sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.mail-layout > .message-column {
		grid-column: 2;
		grid-row: 1;
	}

	.mail-layout > .viewer-column {
		grid-column: 3;
		grid-row: 1;
	}

	/* ---------------------------------------------------------------- panes
	   A hidden pane gives its width back to the email rather than shrinking it,
	   and comes back over the top when the pointer reaches the left edge — so
	   getting at it costs a gesture, not a reflow of what you were reading. */
	.mail-layout[data-hidden~="sidebar"] {
		grid-template-columns: 0 var(--list-w) minmax(0, 1fr);
	}

	.mail-layout[data-hidden~="list"] {
		grid-template-columns: var(--sidebar-w) 0 minmax(0, 1fr);
	}

	.mail-layout[data-hidden~="sidebar"][data-hidden~="list"] {
		grid-template-columns: 0 0 minmax(0, 1fr);
	}

	.mail-layout[data-hidden~="sidebar"] > .sidebar,
	.mail-layout[data-hidden~="list"] > .message-column {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 30;
		transform: translateX(-101%);
		/* 101% so a box-shadow does not leak back over the edge it came from. */
		box-shadow: var(--shadow-3);
		pointer-events: none;
		transition:
			transform 180ms cubic-bezier(0.2, 0, 0, 1),
			visibility 0s linear 180ms;
		visibility: hidden;
	}

	.mail-layout[data-hidden~="sidebar"] > .sidebar {
		left: 0;
		width: var(--sidebar-w);
	}

	.mail-layout[data-hidden~="list"] > .message-column {
		left: 0;
		width: var(--list-w);
	}

	/* With the sidebar still on show, the list slides out from beside it rather
	   than from the window edge, which is where it actually lives. */
	.mail-layout[data-hidden~="list"]:not([data-hidden~="sidebar"]) > .message-column {
		left: var(--sidebar-w);
	}

	.mail-layout[data-reveal~="sidebar"] > .sidebar,
	.mail-layout[data-reveal~="list"] > .message-column {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition:
			transform 180ms cubic-bezier(0.2, 0, 0, 1),
			visibility 0s;
	}

	/* The strip the pointer has to reach. Only live while its pane is away, so it
	   never sits in front of something you can see and click. */
	.edge-zone {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 29;
		width: 14px;
		pointer-events: none;
	}

	.mail-layout[data-hidden~="sidebar"] > .edge-zone[data-reveal-zone="sidebar"],
	.mail-layout[data-hidden~="list"] > .edge-zone[data-reveal-zone="list"] {
		pointer-events: auto;
	}

	.edge-zone[data-reveal-zone="sidebar"] {
		left: 0;
	}

	.edge-zone[data-reveal-zone="list"] {
		left: 0;
	}

	.mail-layout[data-hidden~="list"]:not([data-hidden~="sidebar"]) > .edge-zone[data-reveal-zone="list"] {
		left: var(--sidebar-w);
	}

	/* Both away: the sidebar owns the first few pixels, the list the next few, so
	   one edge can still reach either. */
	.mail-layout[data-hidden~="sidebar"][data-hidden~="list"] > .edge-zone[data-reveal-zone="list"] {
		left: 14px;
	}

	@media (prefers-reduced-motion: reduce) {
		.mail-layout,
		.mail-layout > .sidebar,
		.mail-layout > .message-column {
			transition: none;
		}
}
}

/* Two columns' worth of the strongest line in the palette, plus a hairline
   under all fifty rows, was most of why this read as a grid of boxes rather
   than as a page. The panes still need telling apart, so one soft edge stays
   — it is a seam, not a rule. */
.sidebar,
.message-column {
	border-right: 1px solid var(--line-soft);
}

.sidebar {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 0;
	background: var(--surface-2);
}

.mailbox-scroll {
	min-height: 0;
	overflow: auto;
	padding: 12px 10px;
}

/* Fifty messages in one undifferentiated column makes you read dates to work
   out what is new. The same quiet label the sidebar already uses for VIEWS and
   MAILBOXES, reused so the app has one idea of what a group heading is. */
.list-group-label {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 14px 12px 6px;
	background: var(--surface);
	color: var(--text-dim);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.list-group-label:first-child {
	padding-top: 8px;
}

.mailbox-group-label {
	padding: 6px 10px;
	color: var(--text-dim);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mailbox-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 32px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-muted);
	text-align: left;
	font-size: 0.86rem;
	font-weight: 500;
	transition:
		background 110ms ease,
		color 110ms ease;
}

.mailbox-item svg {
	width: 15px;
	height: 15px;
	opacity: 0.8;
}

.mailbox-item:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.mailbox-item-active {
	background: var(--surface-active);
	color: var(--text);
	font-weight: 600;
}

.mailbox-item-active svg {
	opacity: 1;
}

.mailbox-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Four solid gold pills down the sidebar — 3, 99, 9, 43 — all shouting at
   once, none of them urgent. A count is a fact you check, not an alarm. It is
   a number now, sitting quietly at the end of the row, and it stops being dim
   only for the mailbox you are actually in. */
.mailbox-badge {
	margin-left: auto;
	color: var(--text-dim);
	font-size: 0.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.mailbox-item-active .mailbox-badge {
	color: var(--text-muted);
}

.mailbox-more {
	width: 100%;
	padding: 7px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	text-align: left;
	font-size: 0.8rem;
	font-weight: 600;
}

.mailbox-more:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.mailbox-empty {
	padding: 10px;
	color: var(--text-dim);
	font-size: 0.82rem;
	line-height: 1.5;
}

.mail-usage {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border-top: 1px solid var(--line);
	color: var(--text-dim);
	font-size: 0.78rem;
}

.mail-usage > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mail-usage svg {
	width: 14px;
	height: 14px;
}

.usage-bar {
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--surface-active);
}

.usage-bar i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--accent);
	transition: width 200ms ease;
}

/* ---------------------------------------------------------- list column */

.message-column {
	display: grid;
	/* The rows were being painted 24px past this column and clipped by it, so
	   a message from "Sep 17" read as "Sep 1" — a wrong date, not just a
	   truncated one. A grid item defaults to min-width:auto, so the implicit
	   column here sized itself to the widest row's content instead of to the
	   384px/320px track, and overflowed. minmax(0, 1fr) is the same fix this
	   stylesheet already uses on every other grid; this one was simply
	   missing it, and it only showed below 1320px where the track is
	   narrower than the content wants to be. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
	min-width: 0;
	background: var(--surface);
}

/* Two bands of chrome above a list that is itself the point. With the bulk
   actions moved to the menu where they belong, what is left — the mailbox and
   two filters — fits on one line at any width this layout supports, and wraps
   rather than clips if it ever does not. */
.inbox-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 10px;
	padding: 12px 12px 11px;
	border-bottom: 1px solid var(--line-soft);
}

.inbox-head .inbox-title {
	flex: 1 1 auto;
}

.inbox-head #bulk-bar {
	flex: 1 1 100%;
}

.inbox-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.inbox-title h2 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.count-label {
	color: var(--text-dim);
	font-size: 0.78rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Four buttons came to 316px inside a 320px column, so "Read all" was sliced
   off at the edge. Wrapping would buy a second row of chrome above a list that
   already has two; tightening them costs nothing and fits with room to spare.
   The grouping is still wrong — two of these are filters and two are bulk
   actions — but that is a question about what belongs here, not a clipped
   button. */
.message-tools {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.message-tools .filter-button {
	padding: 0 9px;
}

.message-tools .filter-button {
	padding: 0 10px;
}

.search-field {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text-dim);
	transition: border-color 120ms ease;
}

.search-field:focus-within {
	border-color: var(--focus);
	background: var(--surface);
}

.search-field svg {
	width: 15px;
	height: 15px;
}

.search-field input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 0.85rem;
}

.search-field input::-webkit-search-cancel-button {
	appearance: none;
}

.search-field kbd {
	padding: 1px 5px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-3);
	color: var(--text-dim);
	font-family: var(--font);
	font-size: 0.7rem;
	font-weight: 600;
}

.search-field:focus-within kbd {
	display: none;
}

.message-list {
	min-height: 0;
	overflow: auto;
	scroll-behavior: smooth;
}

.message-row {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 10px;
	width: 100%;
	padding: 11px 12px 12px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	text-align: left;
	transition: background 110ms ease;
}

.message-row:hover {
	background: var(--surface-hover);
}

/* A neutral fill, not a tinted one. Accent is the loudest thing in the palette
   and spending it on "this is where you are" leaves nothing to say "this needs
   you" with. Selection is a place, not a priority. */
.message-row-active {
	background: var(--surface-active);
}

/* The fill already says which row you are on; a gold bar beside it says it
   twice, in the one colour the palette cannot afford to waste. Accent is now
   spent only on things that mean "this wants something from you" — the unread
   dot and the one-time code. */

.message-row:focus-visible {
	outline-offset: -2px;
}

.avatar {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

/* Picked by a hash of the sender, so the same person keeps the same colour.
   Fixed classes rather than an inline style: `style-src 'self'` forbids those. */
/* Eight fully saturated circles were the loudest thing left in the list once
   the gold pills went, and they carried almost no information: the sender's
   name is right beside them, now in the brightest weight on the row. But hue
   IS a fast recognition cue — you learn "Stripe is the red one" without
   reading it — so the hue stays and the shouting goes. Same eight hues at
   roughly a fifth of the saturation, with the letter carrying the colour
   instead of the fill. */
/* Light first: the dark fills below used to apply in both themes, so the
   light list was a column of near-black discs, its loudest thing. */
.avatar-0 { background: #e2ebf7; color: #2c5a93; }
.avatar-1 { background: #dff1e7; color: #27744f; }
.avatar-2 { background: #f7e6dc; color: #9a4f25; }
.avatar-3 { background: #ebe5f7; color: #5e449a; }
.avatar-4 { background: #dcf0f2; color: #22707a; }
.avatar-5 { background: #f8e2e5; color: #a43a4a; }
.avatar-6 { background: #f4ecd6; color: #806318; }
.avatar-7 { background: #e6eaf0; color: #4b5b73; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .avatar-0 { background: #17202c; color: #7aa7e0; }
	:root:not([data-theme="light"]) .avatar-1 { background: #15241d; color: #6cc39a; }
	:root:not([data-theme="light"]) .avatar-2 { background: #261c16; color: #d99873; }
	:root:not([data-theme="light"]) .avatar-3 { background: #1e1a2a; color: #a98fd8; }
	:root:not([data-theme="light"]) .avatar-4 { background: #122325; color: #67b6c0; }
	:root:not([data-theme="light"]) .avatar-5 { background: #261a1d; color: #e08b96; }
	:root:not([data-theme="light"]) .avatar-6 { background: #221e14; color: #d1b06a; }
	:root:not([data-theme="light"]) .avatar-7 { background: #1a1e25; color: #93a3bb; }
}

:root[data-theme="dark"] .avatar-0 { background: #17202c; color: #7aa7e0; }
:root[data-theme="dark"] .avatar-1 { background: #15241d; color: #6cc39a; }
:root[data-theme="dark"] .avatar-2 { background: #261c16; color: #d99873; }
:root[data-theme="dark"] .avatar-3 { background: #1e1a2a; color: #a98fd8; }
:root[data-theme="dark"] .avatar-4 { background: #122325; color: #67b6c0; }
:root[data-theme="dark"] .avatar-5 { background: #261a1d; color: #e08b96; }
:root[data-theme="dark"] .avatar-6 { background: #221e14; color: #d1b06a; }
:root[data-theme="dark"] .avatar-7 { background: #1a1e25; color: #93a3bb; }

.message-row-main {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.message-row-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

/* Scanning a mailbox is "who is this from" first, "what is it" second, and the
   preview only if the first two did not settle it. The old ramp said otherwise:
   sender and subject were the same weight and within 0.01rem of each other,
   and the SENDER was the muted one. Three distinct steps now, brightest first,
   so the eye has somewhere to land. */
.message-row-sender {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
}

.message-row-unread .message-row-sender,
/* More than half of most mail is bulk — newsletters, receipts, notifications —
   and the list was spending exactly as much ink on those as on a reply from a
   person. This is the answer the store already computed, spent where it is
   useful: before you read anything, rather than as a caption once you have.
   Everything stays, in order, one click away; it just stops competing. Losing
   the preview line is the point as much as the dimming — a newsletter's first
   sentence is the least useful text on the screen, and dropping it fits
   noticeably more mail in a glance. */
.message-row-quiet .message-row-sender {
	color: var(--text-muted);
	font-weight: 500;
}

.message-row-quiet .message-row-subject {
	color: var(--text-dim);
}

.message-row-quiet .message-row-preview {
	display: none;
}

.message-row-quiet .avatar {
	opacity: 0.55;
}

/* There WAS an exception here: a quiet row kept its preview while unread, on
   the grounds that you had not triaged it yet. It had to go. Reading the
   message drops the unread class, the preview vanishes with it, and the row
   loses 20px — measured — shunting everything below it up the moment you
   read something. A row that changes size because you looked at it is worse
   than a row that never had a preview. Unread is still carried by the dot
   and the brighter subject. */

/* Unread has to carry itself now that every sender is bright, but 700 against
   a 450 subject and a 600 sender was a third weight shouting over both. */
.message-row-unread .message-row-subject {
	color: var(--text);
	font-weight: 560;
}

.message-row-time {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: var(--text-dim);
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.message-row-time svg {
	width: 13px;
	height: 13px;
}

.message-row-subject {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.845rem;
	font-weight: 450;
	color: var(--text-muted);
}

/* A reply inside an expanded conversation. */
.message-row-child {
	padding-left: 32px;
	background: var(--surface-2);
}

.thread-count {
	display: inline-grid;
	min-width: 18px;
	height: 17px;
	padding: 0 5px;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-size: 0.68rem;
	font-weight: 700;
	vertical-align: middle;
}

.thread-count:hover {
	border-color: var(--accent);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

/* A date is the least interesting thing in a row until you need it, and then
   it only has to be legible. It was competing at the same dimness as the
   preview while sitting in the brightest corner. */
.message-row-preview {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-dim);
	font-size: 0.8rem;
	line-height: 1.4;
}

.message-row-foot {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.unread-dot {
	position: absolute;
	top: 16px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}

/* -------------------------------------------------------- selection + rows */

.view-list {
	margin-bottom: 6px;
}

.bulk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
}

.bulk-count {
	color: var(--accent-ink);
	font-size: 0.82rem;
	font-weight: 650;
	white-space: nowrap;
}

.bulk-actions {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
}

.bulk-actions .ghost-button {
	height: 28px;
	padding: 0 9px;
	font-size: 0.78rem;
}

.bulk-actions .icon-button {
	width: 28px;
	height: 28px;
}

/* The checkbox sits on top of the avatar: same column, so selecting never
   shifts the row sideways. */
.row-pick {
	position: absolute;
	top: 10px;
	left: 14px;
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	color: transparent;
	opacity: 0;
	transition: opacity 90ms ease;
}

.row-pick svg {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

.message-row:hover .row-pick,
.message-list.selecting .row-pick,
.row-pick-on {
	opacity: 1;
}

.row-pick-on {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.row-star {
	display: inline-grid;
	place-items: center;
	color: var(--text-dim);
}

.row-star svg {
	width: 14px;
	height: 14px;
}

.row-star-on {
	color: var(--accent);
}

.row-star-on svg {
	fill: currentColor;
	stroke: currentColor;
}

/* Hover actions ride over the right edge of the row. */
.row-actions {
	position: absolute;
	top: 8px;
	right: 10px;
	display: none;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-1);
}

.message-row:hover .row-actions,
.message-row:focus-within .row-actions {
	display: flex;
}

.row-action {
	display: grid;
	width: 26px;
	height: 24px;
	place-items: center;
	border-radius: 5px;
	color: var(--text-dim);
}

.row-action svg {
	width: 15px;
	height: 15px;
}

.row-action:hover {
	background: var(--surface-hover);
	color: var(--text);
}

/* ------------------------------------------------------------- otp chip */

/* The whole point: copy a one-time code without opening the mail. */
.otp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 8px;
	border: 1px solid var(--accent-line);
	border-radius: 6px;
	background: var(--accent-surface);
	color: var(--accent-ink);
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	transition:
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

.otp-chip svg {
	width: 13px;
	height: 13px;
	stroke-width: 2;
}

.otp-chip:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.otp-chip[data-copied="true"],
.otp-chip[data-copied="true"]:hover {
	border-color: var(--success);
	background: var(--success-surface);
	color: var(--success);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 7px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--text-dim);
	font-size: 0.73rem;
	font-weight: 600;
}

.chip svg {
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------------- reader column */

.viewer-column {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
	background: var(--surface);
}

.viewer-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
}

.viewer-head {
	display: grid;
	gap: 12px;
	padding: 18px 28px 14px;
	border-bottom: 1px solid var(--line);
}

.viewer-head h2 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.sender-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sender-row .avatar {
	width: 34px;
	height: 34px;
	font-size: 0.86rem;
}

.sender-block {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.sender-name {
	font-size: 0.88rem;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sender-detail {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--text-dim);
	font-size: 0.79rem;
}

.sender-detail span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recipients-toggle {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-dim);
	font-size: 0.79rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.recipients-toggle:hover {
	color: var(--text);
}

.viewer-date {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--text-dim);
	font-size: 0.79rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.recipients-detail {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 0.8rem;
	line-height: 1.5;
	word-break: break-word;
}

.recipients-detail b {
	display: inline-block;
	min-width: 56px;
	color: var(--text-dim);
	font-weight: 600;
}

/* Why Focus ranked this the way it did. A verdict you cannot interrogate is
   just an assertion. */
/* A footnote about why this message is in front of you — and it was the
   widest, most filled-in thing in the reading pane: a tinted bar the full
   width of the email, sitting above the email. Secondary information should
   read as secondary. Same words, no box, no accent.
   (There were two byte-identical copies of this block. The first was inert.) */
.why {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	color: var(--text-dim);
	font-size: 0.775rem;
}

.why svg {
	width: 13px;
	height: 13px;
	opacity: 0.8;
}

.why-low {
	color: var(--text-dim);
}

.message-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* --------------------------------------------------------- scam warnings */

/* One compact banner above the email: red for danger, amber for caution. */
.safety-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--warn-surface);
	color: var(--warn);
	font-size: 0.86rem;
	max-width: 68ch;
}

.safety-banner[data-level="danger"] {
	background: var(--danger-surface);
	color: var(--danger);
}

.safety-banner > svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.safety-banner-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.safety-banner-title {
	font-weight: 700;
}

.safety-banner-detail {
	color: var(--text-muted);
}

.safety-why summary {
	width: max-content;
	margin-top: 2px;
	color: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.safety-why ul {
	margin: 6px 0 0;
	padding-left: 18px;
	color: var(--text-muted);
	font-size: 0.8rem;
}

.safety-why li + li {
	margin-top: 3px;
}

.safety-why b {
	color: var(--text);
	font-weight: 600;
}

/* ------------------------------------------------------------ otp panel */

/* The reading-pane version: big, unmissable, one click. */
.otp-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--accent-line);
	border-radius: var(--radius-lg);
	background: var(--accent-surface);
}

.otp-banner-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.otp-banner-label {
	color: var(--accent-ink);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.otp-banner-code {
	font-family: var(--mono);
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.1;
	color: var(--text);
	user-select: all;
}

.otp-banner .primary-button {
	height: 38px;
	margin-left: auto;
	padding: 0 16px;
}

.otp-banner[data-copied="true"] .primary-button {
	border-color: var(--success);
	background: var(--success);
	color: var(--on-accent);
}

/* ----------------------------------------------------------- body + links */

.message-body {
	/* Positioned so a frame being prepared offscreen is measured against THIS
	   box and cannot reach some ancestor further up and stretch the page. */
	position: relative;
	min-height: 0;
	overflow: auto;
	padding: 22px 28px 40px;
}

.message-prose {
	max-width: 68ch;
	color: var(--text);
	font-size: 0.93rem;
	line-height: 1.65;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.message-prose > *:first-child {
	margin-top: 0;
}

.message-prose > *:last-child {
	margin-bottom: 0;
}

.message-prose p {
	margin: 0 0 1em;
}

.message-prose h1,
.message-prose h2,
.message-prose h3,
.message-prose h4,
.message-prose h5,
.message-prose h6 {
	margin: 1.6em 0 0.5em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.message-prose h1 {
	font-size: 1.35rem;
}

.message-prose h2 {
	font-size: 1.18rem;
}

.message-prose h3 {
	font-size: 1.04rem;
}

.message-prose h4,
.message-prose h5,
.message-prose h6 {
	font-size: 0.95rem;
}

.message-prose ul,
.message-prose ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.message-prose li {
	margin-bottom: 0.35em;
}

.message-prose blockquote {
	margin: 0 0 1em;
	padding: 2px 0 2px 14px;
	border-left: 3px solid var(--line-strong);
	color: var(--text-muted);
}

.message-prose pre {
	margin: 0 0 1em;
	padding: 12px 14px;
	overflow: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: 0.85rem;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.message-prose code {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--surface-3);
	font-family: var(--mono);
	font-size: 0.88em;
}

.message-prose pre code {
	padding: 0;
	background: transparent;
}

.message-prose hr {
	margin: 1.6em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.message-prose table {
	margin: 0 0 1em;
	border-collapse: collapse;
	max-width: 100%;
}

/* Email uses tables for LAYOUT. Bordering every cell turned ordinary mail into
   a stack of boxes, which is what it looked like in the wild. Borders are for
   tables that are actually data — the ones with a header cell. */
.message-prose td,
.message-prose th {
	padding: 2px 0;
	text-align: left;
	vertical-align: top;
}

.message-prose table:has(th) {
	border-collapse: collapse;
}

.message-prose table:has(th) td,
.message-prose table:has(th) th {
	padding: 6px 10px;
	border: 1px solid var(--line);
}

.message-prose table:has(th) th {
	background: var(--surface-2);
	font-weight: 650;
}

.message-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* The sender's own document, in a sandboxed frame. Transparent so the app's
   background shows through in both themes; height is set from its content by
   app.js, because a frame has no intrinsic height. */
/* Drawn as a sheet of paper: the document inside is always white, because
   that is the surface every email was designed against. In dark mode the
   border and shadow keep it from glaring. */
.message-frame {
	display: block;
	width: 100%;
	min-height: 80px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #ffffff;
	color-scheme: light;
	box-shadow: var(--shadow-1);
}

/* An email arrives whole or not at all.
   Prerendering only helps when there was time to prerender; click faster than
   that and you were still watching the thing assemble — text, then each
   picture, the height stepping down the page as they landed. So the body is
   held back until its document reports complete, and then appears in one
   piece. The subject and sender are NOT held back: they are ready instantly
   and they tell you the click registered, which is the only thing the
   half-built email was really communicating.
   visibility, not display, because the document has to keep laying out while
   it is hidden — that is how it arrives already the right height. */
.message-body[data-body-loading="1"] .message-frame,
.message-body[data-body-loading="1"] .links-panel {
	visibility: hidden;
}

/* A frame being built ahead of the click. It has to be LAID OUT or the
   document never gets a width, images never resolve and the height is never
   known — which is the whole point of doing it early. So it is taken out of
   flow and made invisible rather than display:none, which would skip layout
   entirely and leave nothing prepared. */
.message-frame-prerender {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
}

/* The frame is keyed to the EMAIL's theme, not the app's, because "Email
   colours: as sent" renders a light email inside a dark app and the element
   behind it must still be white.

   #0c1015 is --surface from the dark theme above, and it must equal the
   background the worker paints inside the document (DOCUMENT_RESET_DARK).
   Three different colours used to meet here — the pane at --surface, this
   element hardcoded white, and the document at #1f1f22 — so a dark email
   arrived as a white-backed, shadowed card holding a differently-dark page.
   It also flashed white for the instant before the document painted.
   Light mode never had the problem because all three are #ffffff, which is
   exactly what makes light mode feel native. tools/check-theme-tokens.mjs
   fails the deploy if these drift apart. */
.message-frame[data-email-theme="dark"] {
	background: #0c1015;
	color-scheme: dark;
	/* A shadow under a surface the same colour as the page is just a smudge,
	   and a hard border turns a seamless email back into a pasted-in card. */
	border-color: var(--line-soft);
	box-shadow: none;
}

/* Links are the other headline ask: big target, obvious, safe. */
.message-prose a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	padding: 1px 2px;
	margin: 0 -2px;
	border-radius: 3px;
	transition:
		background 110ms ease,
		color 110ms ease;
}

.message-prose a:hover {
	background: var(--accent-surface);
	color: var(--accent);
	text-decoration-thickness: 2px;
}

/* Which alias the mail was actually delivered to, when it differs from the
   mailbox you are reading. This used to be jammed into the subject line. */
.chip-alias {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
}

.load-more {
	width: 100%;
	padding: 14px;
	border: 0;
	border-top: 1px solid var(--line-soft);
	background: transparent;
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

.load-more:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text);
}

.load-more:disabled {
	color: var(--text-dim);
	cursor: default;
}

.notice-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 0.82rem;
}

.notice-bar svg {
	width: 15px;
	height: 15px;
}

.notice-bar .ghost-button {
	height: 26px;
	margin-left: auto;
	font-size: 0.78rem;
}

.notice-bar[data-tone="warn"] {
	border-color: var(--accent-line);
	background: var(--warn-surface);
	color: var(--warn);
}

/* Every link in the mail, gathered, so nothing has to be hunted for. */
.links-panel {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	max-width: 68ch;
}

.links-panel h3 {
	margin: 0 0 10px;
	color: var(--text-dim);
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.links-list {
	display: grid;
	gap: 6px;
}

.link-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 8px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.83rem;
	text-decoration: none;
	transition:
		background 110ms ease,
		border-color 110ms ease;
}

.link-item:hover {
	border-color: var(--accent-line);
	background: var(--accent-surface);
}

.link-item svg {
	width: 15px;
	height: 15px;
	color: var(--text-dim);
}

.link-item:hover svg {
	color: var(--accent-ink);
}

.link-item-text {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.link-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 550;
}

.link-item-host {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-dim);
	font-size: 0.76rem;
	font-family: var(--mono);
}

.link-item-warn {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background: var(--danger-surface);
	color: var(--danger);
	font-size: 0.7rem;
	font-weight: 700;
}

/* Browser-style destination readout. */
.link-status {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 20;
	max-width: 70%;
	padding: 4px 12px 5px;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	border-top-right-radius: 6px;
	background: var(--surface-3);
	color: var(--text-muted);
	font-family: var(--mono);
	font-size: 0.74rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

/* --------------------------------------------------------- empty states */

.empty-state {
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 72px 24px;
	text-align: center;
	color: var(--text-dim);
}

.empty-state svg {
	width: 32px;
	height: 32px;
	margin-bottom: 4px;
	stroke-width: 1.4;
	opacity: 0.55;
}

.empty-state h3 {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.95rem;
	font-weight: 650;
}

.empty-state p {
	margin: 0;
	max-width: 34ch;
	font-size: 0.85rem;
	line-height: 1.55;
}

.message-empty {
	padding: 40px 20px;
	color: var(--text-dim);
	font-size: 0.85rem;
	text-align: center;
}

/* Loading skeletons keep the layout from jumping. */
.skeleton-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line-soft);
}

.skeleton {
	border-radius: 4px;
	background: var(--surface-3);
	animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.skeleton-lines {
	display: grid;
	gap: 6px;
	align-content: center;
}

.skeleton-lines i:nth-child(1) {
	width: 45%;
	height: 9px;
}

.skeleton-lines i:nth-child(2) {
	width: 80%;
	height: 9px;
}

.skeleton-lines i:nth-child(3) {
	width: 62%;
	height: 9px;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

/* -------------------------------------------------------------- compose */

.compose-panel {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 30;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(620px, calc(100% - 40px));
	max-height: calc(100% - 40px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}

.compose-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
}

.compose-head h2 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
}

.compose-head .icon-button {
	margin-left: auto;
}

.compose-form {
	display: grid;
	gap: 12px;
	min-height: 0;
	overflow: auto;
	padding: 16px;
}

.field-message textarea {
	min-height: 160px;
}

.compose-status {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.compose-status[data-tone="danger"] {
	color: var(--danger);
}

.compose-status[data-tone="success"] {
	color: var(--success);
}

.compose-footer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.compose-footer .primary-button {
	height: 36px;
	padding: 0 16px;
}

.attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.attachment-list strong {
	width: 100%;
	color: var(--danger);
	font-size: 0.78rem;
	font-weight: 600;
}

.attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 0.78rem;
}

.attachment-chip svg {
	width: 13px;
	height: 13px;
}

.attachment-chip span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-chip-download {
	color: var(--text);
	text-decoration: none;
	transition: border-color 110ms ease, background 110ms ease;
}

.attachment-chip-download:hover {
	border-color: var(--accent-line);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.attachment-chip-unavailable {
	border-style: dashed;
	color: var(--text-dim);
}

.attachment-chip em {
	color: var(--text-dim);
	font-style: normal;
	font-size: 0.73rem;
}

.attachment-chip-remove {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-right: -4px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-dim);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
}

.attachment-chip-remove:hover {
	background: var(--accent-surface);
	color: var(--text);
}

.message-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

/* --------------------------------------------------------------- toasts */

.toast-stack {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 60;
	display: grid;
	gap: 8px;
	justify-items: center;
	transform: translateX(-50%);
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 550;
	box-shadow: var(--shadow-2);
	animation: toast-in 180ms ease;
}

.toast svg {
	width: 15px;
	height: 15px;
}

.toast[data-tone="success"] svg {
	color: var(--success);
}

.toast[data-tone="danger"] {
	border-color: var(--danger);
	color: var(--danger);
}

.toast-undo {
	margin-left: 4px;
	padding: 2px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--accent-ink);
	font-size: 0.8rem;
	font-weight: 700;
	pointer-events: auto;
}

.toast-undo:hover {
	border-color: var(--accent);
	background: var(--accent-surface);
}

.toast {
	pointer-events: auto;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------------------------------------- context */

.context-panel {
	margin-bottom: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	overflow: hidden;
}

.context-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line-soft);
}

.context-head h3 {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 650;
}

.context-head .action-button {
	margin-left: auto;
}

.context-list {
	max-height: 260px;
	overflow: auto;
}

.context-row {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--line-soft);
	background: transparent;
	color: var(--text);
	text-align: left;
	font-size: 0.83rem;
}

.context-row:last-child {
	border-bottom: 0;
}

.context-row:hover {
	background: var(--surface-hover);
}

.context-row-active {
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.context-when {
	color: var(--text-dim);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
}

.context-subject {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.context-dir {
	color: var(--text-dim);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ----------------------------------------------------- draft reply menu */

.reply-draft-menu {
	position: fixed;
	z-index: 75;
	display: flex;
	gap: 6px;
	width: 330px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-2);
	animation: menu-in 110ms ease;
}

.reply-draft-menu input {
	flex: 1;
	min-width: 0;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.84rem;
}

.reply-draft-menu .primary-button {
	height: 32px;
	padding: 0 12px;
	font-size: 0.82rem;
	white-space: nowrap;
}

#compose-text.is-writing {
	color: var(--text-dim);
	cursor: progress;
}

/* ---------------------------------------------------------- snooze menu */

.snooze-menu {
	position: fixed;
	z-index: 75;
	width: 244px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-2);
	animation: menu-in 110ms ease;
}

.snooze-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	text-align: left;
	font-size: 0.86rem;
}

.snooze-option:hover {
	background: var(--surface-hover);
}

.snooze-option em {
	margin-left: auto;
	color: var(--text-dim);
	font-style: normal;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.snooze-custom {
	display: flex;
	gap: 6px;
	margin-top: 4px;
	padding: 8px 6px 2px;
	border-top: 1px solid var(--line-soft);
}

.snooze-custom input {
	width: 100%;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.78rem;
}

.snooze-custom .ghost-button {
	height: 30px;
	padding: 0 10px;
	font-size: 0.78rem;
}

.chip-snooze {
	border-color: var(--accent-line);
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.chip-snooze svg {
	width: 12px;
	height: 12px;
}

/* Waiting: something you sent that nobody has answered. Quieter than the
   snooze chip on purpose — it is a fact about the message, not an alarm. */
.chip-waiting {
	color: var(--text-dim);
}

.chip-waiting svg {
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------------- connect agent */

.agent-card {
	width: min(560px, 100%);
	max-height: 86vh;
	overflow: auto;
}

.assistant-open {
	gap: 6px;
	height: 34px;
	padding: 0 11px;
}

.assistant-card {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	gap: 12px;
	width: min(640px, 92vw);
	max-height: min(660px, 86vh);
}

.assistant-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.assistant-scope {
	color: var(--text-dim);
	font-size: 0.76rem;
}

.assistant-log {
	display: grid;
	gap: 14px;
	min-height: 120px;
	overflow: auto;
	padding-right: 4px;
}

.assistant-turn-you {
	color: var(--text-muted);
	font-size: 0.84rem;
}

.assistant-answer {
	white-space: pre-wrap;
	font-size: 0.9rem;
	line-height: 1.6;
}

.assistant-thinking {
	color: var(--text-dim);
	font-size: 0.85rem;
}

/* A message the answer pointed at. It is a button because it does something:
   opens that mail. A number you then have to go and find is not an answer. */
.assistant-cite {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text);
	text-align: left;
	font-size: 0.82rem;
	transition: background 110ms ease;
}

.assistant-cite:hover {
	background: var(--surface-hover);
}

.assistant-cite b {
	font-weight: 600;
}

.assistant-cite span {
	display: block;
	color: var(--text-dim);
	font-size: 0.78rem;
}

.assistant-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.assistant-suggestions button {
	padding: 6px 10px;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-muted);
	font-size: 0.79rem;
	transition: background 110ms ease, border-color 110ms ease, color 110ms ease;
}

.assistant-suggestions button:hover {
	border-color: var(--line);
	background: var(--surface-2);
	color: var(--text);
}

.assistant-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.assistant-form input {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.88rem;
}

.agent-lede {
	margin: 0 0 18px;
	color: var(--text-muted);
	font-size: 0.86rem;
	line-height: 1.55;
}

.agent-controls {
	display: grid;
	gap: 12px;
	margin-bottom: 16px;
}

.agent-actions {
	display: flex;
	gap: 8px;
}

.agent-result {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	background: var(--accent-surface);
}

.agent-warn {
	margin: 0;
	color: var(--accent-ink);
	font-size: 0.8rem;
	font-weight: 650;
}

.agent-key {
	display: block;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.78rem;
	word-break: break-all;
	user-select: all;
}

.agent-list {
	display: grid;
	gap: 6px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
}

.agent-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 10px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.agent-row-name {
	font-size: 0.86rem;
	font-weight: 600;
}

.agent-row-meta {
	grid-column: 1;
	color: var(--text-dim);
	font-size: 0.75rem;
}

.agent-row .ghost-button {
	grid-row: 1 / span 2;
	grid-column: 2;
	height: 28px;
	font-size: 0.78rem;
}

.agent-empty {
	margin: 0;
	color: var(--text-dim);
	font-size: 0.82rem;
}

/* --------------------------------------------------------------- palette */

.palette {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	justify-items: center;
	align-content: start;
	padding: 12vh 24px 24px;
	background: rgba(6, 8, 11, 0.42);
	animation: fade-in 120ms ease;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

.palette-card {
	width: min(600px, 100%);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow-3);
	animation: palette-in 140ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes palette-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.985);
	}
}

.palette-input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	height: 52px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--text-dim);
}

.palette-input svg {
	width: 17px;
	height: 17px;
}

.palette-input input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 0.98rem;
}

.palette-input input::placeholder {
	color: var(--text-dim);
}

.palette-input kbd {
	padding: 2px 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-2);
	font-family: var(--font);
	font-size: 0.7rem;
	font-weight: 600;
}

.palette-results {
	max-height: min(52vh, 420px);
	overflow: auto;
	padding: 6px;
}

.palette-row {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	text-align: left;
	font-size: 0.88rem;
}

.palette-row svg {
	width: 16px;
	height: 16px;
	color: var(--text-dim);
}

.palette-row-active {
	background: var(--accent-surface);
	color: var(--accent-ink);
}

.palette-row-active svg {
	color: var(--accent-ink);
}

.palette-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.palette-row kbd {
	margin-left: auto;
	padding: 1px 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-2);
	color: var(--text-dim);
	font-family: var(--font);
	font-size: 0.7rem;
	font-weight: 600;
}

.palette-empty {
	padding: 22px 12px;
	color: var(--text-dim);
	font-size: 0.85rem;
	text-align: center;
}

/* ------------------------------------------------------------ shortcuts */

.shortcuts-overlay {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(6, 8, 11, 0.55);
}

.shortcuts-card {
	width: min(520px, 100%);
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-3);
}

.shortcuts-card h2 {
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 700;
}

.shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 26px;
}

.shortcuts-grid div {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-muted);
	font-size: 0.84rem;
}

.shortcuts-grid kbd {
	display: inline-grid;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	place-items: center;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--surface-2);
	color: var(--text);
	font-family: var(--font);
	font-size: 0.75rem;
	font-weight: 650;
}

/* --------------------------------------------------------- narrow desks */

@media (max-width: 1180px) {
	:root {
		--sidebar-w: 200px;
		--list-w: 320px;
	}
}

@media (max-width: 940px) {
	.mail-topbar {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.mail-layout {
		grid-template-columns: var(--list-w) minmax(0, 1fr);
	}

	.sidebar {
		display: none;
	}
}

/* Motion here is feedback, not decoration.
   Archiving a message removed its row instantly and silently, which reads as
   "did that work?" — the one question an action should never leave you with.
   A row that collapses and slides out answers it without a word. The reading
   pane likewise changed contents as a hard cut, so switching messages flickered
   rather than moved.
   Both are short enough to be read as cause and effect rather than as an
   effect: past about 200ms motion stops explaining and starts costing. */
@keyframes row-leave {
	to {
		opacity: 0;
		transform: translateX(-10px);
	}
}

.message-row-leaving {
	animation: row-leave 130ms cubic-bezier(0.4, 0, 1, 1) forwards;
	pointer-events: none;
	overflow: hidden;
	/* height is driven from JS, which is the only place the real height is
	   known; this just says how it should travel. */
	transition: height 140ms cubic-bezier(0.4, 0, 0.2, 1) 30ms,
		margin 140ms cubic-bezier(0.4, 0, 0.2, 1) 30ms;
}

/* The reading pane no longer animates on open. It was 140ms of fade and a 3px
   rise on the header, which is defensible on its own but reads as part of the
   email assembling itself rather than as a transition — and an email should
   simply be there when you ask for it. Motion stays where it reports
   something you cannot otherwise see: a row leaving the list.
   .pane-enter is kept as a no-op class so the code that applies it does not
   have to care. */
.pane-enter {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* A row that arrived while you were looking: one soft flash, then nothing. */
.message-row-new {
	animation: message-arrive 1600ms ease-out;
}

@keyframes message-arrive {
	from {
		background: var(--accent-surface);
	}
}

@media (prefers-reduced-motion: reduce) {
	.message-row-new {
		animation: none;
	}
}

/* Sender menu: the "everyone at this domain" switch under the choices. */
.sender-scope {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 4px;
	border-top: 1px solid var(--line);
	margin-top: 4px;
	color: var(--text-muted);
	font-size: 0.8rem;
	cursor: pointer;
}

/* Sender choices read as a title with its consequence underneath. */
.snooze-option.sender-option {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.snooze-option.sender-option em {
	margin-left: 0;
}

.snooze-menu.sender-menu {
	width: 280px;
}

/* Subscriptions: a page, not a list. */
.shortcuts-card.subs-card {
	width: min(720px, calc(100vw - 32px));
	max-height: min(760px, calc(100vh - 48px));
	display: flex;
	flex-direction: column;
}

.subs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.subs-filter {
	width: 100%;
	height: 34px;
	margin: 4px 0 10px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	font-size: 0.86rem;
}

.subs-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.subs-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--line);
}

.subs-who {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.subs-who strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9rem;
}

.subs-who span {
	color: var(--text-dim);
	font-size: 0.78rem;
}

.subs-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.subs-actions a.ghost-button {
	text-decoration: none;
}

.subs-state {
	color: var(--text-muted);
	font-size: 0.8rem;
}

@media (max-width: 640px) {
	.subs-row {
		flex-wrap: wrap;
	}
	.subs-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* ------------------------------------------------------ small screens
   Below 941px the mailbox list had display:none and nothing brought it
   back: Views, Drafts and Trash were reachable only through Cmd-K. It now
   opens over the page from the button at the top left. Below 701px there
   is room for one thing at a time, so the list and the email take turns,
   with Back to return, as every phone mail app does. */
.nav-toggle,
.reader-back {
	display: none;
}

svg[data-icon="more"] {
	stroke-width: 3.2;
}

/* A subject that is one long token (an invoice id, a URL) widened the
   reader past its column. */
.viewer-head {
	grid-template-columns: minmax(0, 1fr);
}

.viewer-head h2 {
	min-width: 0;
	overflow-wrap: anywhere;
}

.message-row-foot {
	flex-wrap: wrap;
}

@media (max-width: 940px) {
	.nav-toggle {
		display: inline-grid;
		place-items: center;
		margin-left: -6px;
	}

	.mail-layout[data-nav="open"] > .sidebar {
		display: grid;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		width: min(300px, 84vw);
		border-right: 1px solid var(--line);
		box-shadow: var(--shadow-3);
	}

	.nav-scrim:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(0, 0, 0, 0.42);
	}

	/* Hiding panes is a wide-screen idea; the menu items for it go. */
	#toggle-sidebar,
	#toggle-list {
		display: none;
	}
}

@media (max-width: 700px) {
	.mail-topbar {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 8px;
		height: 56px;
		padding: 0 10px;
	}

	.brand-block h1,
	.brand-mark,
	.topbar-search kbd {
		display: none;
	}

	/* Icons only up here; every one keeps its accessible name. */
	.header-actions {
		gap: 4px;
	}

	.header-actions > .ghost-button > span,
	.header-actions > .primary-button > span {
		display: none;
	}

	.header-actions > .ghost-button,
	.header-actions > .primary-button {
		width: 36px;
		padding: 0;
		justify-content: center;
	}

	.mail-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The reader stays in the page (compose lives inside it) but is only
	   seen and touchable while an email is open. */
	.mail-layout > .viewer-column {
		position: fixed;
		top: 56px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		visibility: hidden;
	}

	.mail-layout[data-reading="true"] > .viewer-column {
		visibility: visible;
	}

	.mail-layout[data-reading="true"] > .message-column {
		visibility: hidden;
	}

	.message-column {
		border-right: 0;
	}

	.reader-back {
		display: inline-flex;
		justify-self: start;
		gap: 4px;
		height: 32px;
		margin-left: -8px;
		padding: 0 10px 0 6px;
		border-color: transparent;
		background: transparent;
	}

	.viewer-head {
		padding: 10px 16px 12px;
		gap: 10px;
	}

	.viewer-head h2 {
		font-size: 1.08rem;
	}

	.message-body {
		padding: 14px 12px 32px;
	}

	.message-actions .action-button > span,
	.message-actions .action-button kbd,
	.message-actions .shortcut-badge {
		display: none;
	}

	/* Writing gets the whole screen. */
	.compose-panel {
		position: fixed;
		inset: 0;
		z-index: 70;
		width: auto;
		max-height: none;
		border: 0;
		border-radius: 0;
		visibility: visible;
	}

	.snooze-menu {
		max-width: calc(100vw - 16px);
	}
}

/* ------------------------------------------------------ compose extras */
.attach-button {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 7px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.attach-button:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.attach-button:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.attach-button svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.compose-panel.drop-ready {
	outline: 2px dashed var(--accent);
	outline-offset: -6px;
}

/* The toolbar sizes itself to the READING PANE, not the window: with both
   lists showing, a 1280px window leaves the email ~500px, and the row
   wrapped. Under 600px of pane the buttons drop their words (each keeps
   its name for screen readers and its tooltip). */
.viewer-column {
	container-type: inline-size;
	container-name: reader;
}

@container reader (max-width: 600px) {
	.message-actions .action-button > span,
	.message-actions kbd.hint {
		display: none;
	}

	.message-actions .action-button {
		padding-inline: 8px;
	}
}