/* ============================================
   10MinuteMail Main Stylesheet
   Uses CSS variables from design-system.css

   One declaration block per component. State
   variants sit beside the component they modify;
   breakpoint overrides live in the RESPONSIVE
   section at the end. Do not append a new "phase"
   layer that re-declares an existing selector:
   edit the component in place.
   ============================================ */

/* ============================================
   1. BASE & LAYOUT
   ============================================ */

html {
	margin: 0;
	padding: 0;
	font-size: 16px; /* Base for rem calculations */
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	background-color: var(--color-bg-base, #fff);
	color: var(--color-text-primary, #2c3e50);
	font-size: var(--text-base, 1rem);
	line-height: var(--leading-normal, 1.5);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.content {
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
}

/* Generic hidden utility. Every element that JavaScript toggles with the
   "hidden" class (reply/forward forms, success notices, empty state, expired
   overlay) relies on this single rule. */
.hidden {
	display: none;
}

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

/* ============================================
   2. HEADER
   ============================================ */

header {
	background: url('/img/top_bar-f1d8ea10f1717d012835e08b1bb16c0a.png') repeat-x;
	padding-top: 3px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
}

header h1 {
	background: url('/img/10minutemail_logo-515f60eeeda967c3f81b3e3005cefd17.png') no-repeat center;
	background-size: contain;
	width: 184px;
	height: 104px;
	display: inline-block;
	margin: 10px;
}

/* Logo h1 is an image: keep its text accessible but visually hidden (image replacement) */
header h1 span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tagline rendered as real localized text (not an image) so all locales translate */
header h2 {
	display: inline-block;
	margin-top: 64px;
	margin-inline-start: 10px;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-weight: 600;
	font-size: clamp(1rem, 2.1vw, 1.35rem);
	line-height: 1.2;
	/* Text-safe accent: cyan in dark mode, deep cyan on the light page surface. */
	color: var(--color-accent-text, rgb(34, 211, 238));
	background: none;
	/* Constrain the now-live localized text so long locales (e.g. lt, pl, gl)
	   can't push the language selector to a second row on tablet widths.
	   Cap sized so the English tagline fits on one line at common desktop
	   widths (>=1080px); narrower viewports and longer locales (de, ru) wrap
	   to a second line instead of clipping. overflow: hidden also makes the
	   inline-block's baseline its bottom edge, so a second line grows upward
	   into the logo's height and the header (and the ad slot under it) stays
	   the same height. The 440px term is the logo (184px + 20px margins), the
	   language control (150px + 50px margin), this element's own start margin,
	   and the whitespace between the three inline-blocks: the cap never lets
	   the tagline push the language control onto a second row, which would
	   push the ad slot down. */
	max-width: clamp(200px, min(48vw, 100% - 440px), 600px);
	overflow: hidden;
	white-space: normal;
}

/* The tagline text lives in the span; it is capped at two lines and balanced
   so a wrapped tagline splits evenly rather than leaving one word behind. */
header h2 span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-wrap: balance;
}

/* ---- Language select ---- */

header .language {
	display: inline-block;
	vertical-align: top;
	height: 42px;
	margin-top: 60px;
	margin-inline-start: 50px;
	position: relative;
}

header .language #language_btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 150px;
	height: 40px;
	color: #fff;
	font-size: 12px;
	line-height: 40px;
	/* Glassmorphism container */
	background: rgba(30, 41, 59, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(71, 85, 105, 0.4);
	border-radius: var(--radius-md, 8px);
	padding: 0;
	overflow: hidden;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

header .language #language_btn:hover {
	background: rgba(30, 41, 59, 0.9);
	border-color: rgba(34, 211, 238, 0.4);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.2),
		0 0 20px rgba(34, 211, 238, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

header .language #language_btn:focus-within {
	border-color: rgba(34, 211, 238, 0.6);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.2),
		0 0 0 3px rgba(34, 211, 238, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Globe icon before the select */
header .language #language_btn::before {
	content: '';
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(148, 163, 184)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
	z-index: 2;
}

header .language #language_btn:hover::before {
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(34, 211, 238)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Custom dropdown arrow */
header .language #language_btn::after {
	content: '';
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(148, 163, 184)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
	z-index: 2;
}

header .language #language_btn:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(34, 211, 238)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* The actual select element styling */
header .language #language_btn #localeSelector {
	display: flex;
	align-items: center;
}

header .language #language_btn #locales {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-medium, 500);
	color: rgb(226, 232, 240);
	padding: 10px 36px 10px 36px;
	min-width: 140px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

header .language #language_btn #locales:hover {
	color: rgb(248, 250, 252);
}

/* Mouse focus shows no ring; keyboard focus gets the gold ring in section 15. */
header .language #language_btn #locales:focus:not(:focus-visible) {
	outline: none;
}

/* Touch: the pill grows to a 44px target. Same width, type, and icons; only the
   height changes, so the header row (46px logo) still holds it. */
@media (max-width: 768px), (pointer: coarse) {
	header .language #language_btn {
		height: 44px;
		line-height: 44px;
	}
	header .language #language_btn #locales {
		min-height: 44px;
	}
}

/* Style the dropdown options (limited browser support but enhances where available) */
header .language #language_btn #locales option {
	background: rgb(30, 41, 59);
	color: rgb(226, 232, 240);
	padding: 12px 16px;
	font-size: 14px;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
}

header .language #language_btn #locales option:hover,
header .language #language_btn #locales option:focus,
header .language #language_btn #locales option:checked {
	background: rgb(51, 65, 85);
	color: rgb(34, 211, 238);
}

/* Light mode adjustments for language dropdown */
@media (prefers-color-scheme: light) {
	header .language #language_btn {
		background: rgba(255, 255, 255, 0.85);
		border-color: rgba(203, 213, 225, 0.6);
		box-shadow:
			0 4px 16px rgba(0, 0, 0, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	header .language #language_btn:hover {
		background: rgba(255, 255, 255, 0.95);
		border-color: rgba(14, 165, 233, 0.5);
		box-shadow:
			0 6px 24px rgba(0, 0, 0, 0.1),
			0 0 20px rgba(14, 165, 233, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}

	header .language #language_btn:focus-within {
		border-color: rgba(14, 165, 233, 0.6);
		box-shadow:
			0 6px 24px rgba(0, 0, 0, 0.1),
			0 0 0 3px rgba(14, 165, 233, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}

	header .language #language_btn::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(100, 116, 139)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	}

	header .language #language_btn:hover::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(14, 165, 233)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	}

	header .language #language_btn::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(100, 116, 139)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}

	header .language #language_btn:hover::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(14, 165, 233)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}

	header .language #language_btn #locales {
		color: rgb(51, 65, 85);
	}

	header .language #language_btn #locales:hover {
		color: rgb(30, 41, 59);
	}

	header .language #language_btn #locales option {
		background: rgb(248, 250, 252);
		color: rgb(51, 65, 85);
	}

	header .language #language_btn #locales option:hover,
	header .language #language_btn #locales option:focus,
	header .language #language_btn #locales option:checked {
		background: rgb(241, 245, 249);
		color: rgb(14, 165, 233);
	}
}

/* ============================================
   3. ADS
   Reserved heights are declared before any ad
   script runs so the tool never jumps when the
   unit loads. Do not remove or shrink them.
   ============================================ */

/* ad container styles - min-height provides initial space before ad script loads */
#banner_ad {
	min-height: 280px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.top_banner_ad {
	width: 100%;
}

/* Sticky right-rail ad.
   Hidden by default; only shown on viewports wide enough that it fits in the
   gutter beside the 1000px-centered .content column AND tall enough that the
   616px unit isn't clipped. position:fixed keeps it out of document flow, so
   it never shifts page content (no CLS). The fluid unit fills whatever width
   the gutter allows: ~160px skyscraper on ~1366px screens up to 300px on wide
   monitors. It hugs the content's right edge for viewability. */
#sidebar_ad {
	display: none;
}

@media (min-width: 1360px) and (min-height: 660px) {
	#sidebar_ad {
		display: block;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		/* content box is 1000px centered → its right edge is at 50% + 500px */
		inset-inline-start: calc(50% + 500px + 16px);
		width: clamp(160px, calc(50vw - 500px - 32px), 300px);
		z-index: 10;
	}

	#sidebar_ad .demand-supply {
		width: 100%;
	}

	/* Hidden (via JS) while the footer is in view so the fixed rail never
	   floats over the wider 1200px footer at the bottom of the page.
	   visibility (not display) keeps the loaded ad intact when it returns. */
	#sidebar_ad.rail-hidden {
		visibility: hidden;
		pointer-events: none;
	}
}

#secondary_ads {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* ============================================
   4. TOOL STAGE: MAIN CONTENT BACKGROUND
   The tool stage is always dark, in both themes.
   The semantic tokens are re-pinned here to their
   dark values so every descendant reads the dark
   palette regardless of the visitor's scheme.
   ============================================ */

#main_content {
	/* Dark island: pin the dark theme tokens for everything inside the tool stage */
	--raw-accent: 34 211 238;
	--color-bg-base: rgb(15 23 42);
	--color-bg-elevated: rgb(30 41 59);
	--color-bg-surface: rgb(51 65 85);
	--color-bg-hover: rgba(71 85 105 / 0.5);
	--color-bg-active: rgba(100 116 139 / 0.3);
	--color-bg-overlay: rgba(15 23 42 / 0.85);
	--color-text-primary: rgb(241 245 249);
	--color-text-secondary: rgb(178 190 205);
	--color-text-tertiary: rgb(148 163 184);
	--color-text-muted: rgb(100 116 139);
	--color-text-inverse: rgb(30 41 59);
	--color-border-subtle: rgba(71 85 105 / 0.5);
	--color-border-default: rgba(100 116 139 / 0.4);
	--color-border-strong: rgba(148 163 184 / 0.5);
	--color-border-accent: rgba(34 211 238 / 0.5);
	--color-accent: rgb(34 211 238);
	--color-accent-hover: rgb(103 232 249);
	--color-accent-muted: rgba(34 211 238 / 0.15);
	--color-accent-glow: rgba(34 211 238 / 0.4);
	--color-btn-secondary-bg: rgba(71 85 105 / 0.6);
	--color-btn-secondary-hover: rgba(100 116 139 / 0.8);
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	--glass-bg: rgba(30 41 59 / 0.8);
	--glass-border: rgba(100 116 139 / 0.2);
	--noise-opacity: 0.03;
	--bg-gradient-base: rgb(15 23 42);
	--bg-mesh-color-1: rgba(34 211 238 / 0.15);
	--bg-mesh-color-2: rgba(80 89 123 / 0.2);
	--bg-mesh-color-3: rgba(51 65 85 / 0.8);
	--bg-mesh-color-4: rgba(22 178 202 / 0.1);
	--bg-mesh-color-5: rgba(97 144 211 / 0.12);

	background: var(--bg-gradient-base);
	color: var(--color-text-primary);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Static gradient mesh. Painted once; no animation, no will-change. */
#main_content::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-below, -1);
	background:
		radial-gradient(ellipse 80% 50% at 10% 20%, var(--bg-mesh-color-1) 0%, transparent 50%),
		radial-gradient(ellipse 60% 70% at 90% 10%, var(--bg-mesh-color-2) 0%, transparent 50%),
		radial-gradient(ellipse 100% 80% at 50% 50%, var(--bg-mesh-color-3) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 20% 80%, var(--bg-mesh-color-4) 0%, transparent 50%),
		radial-gradient(ellipse 50% 50% at 85% 75%, var(--bg-mesh-color-5) 0%, transparent 45%),
		var(--bg-gradient-base);
}

/* Noise texture overlay */
#main_content::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base, 0);
	pointer-events: none;
	background-image: var(--noise-texture);
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: var(--noise-opacity, 0.03);
	mix-blend-mode: overlay;
}

/* Ensure content appears above the noise overlay */
#main_content > * {
	position: relative;
	z-index: 1;
}

/* Text selection inside the tool stage */
#main_content ::selection {
	background: rgba(34, 211, 238, 0.35);
	color: rgb(241, 245, 249);
}

/* ============================================
   5. TOOL STAGE: ADDRESS PANEL
   The address is the product. It is the largest
   text on the page; the panel itself copies it.
   ============================================ */

.mail_section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--space-6, 24px);
}

.mail_top_row {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-4, 16px);
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-6, 24px) var(--space-8, 32px);
	background: var(--glass-bg, rgba(30, 41, 59, 0.8));
	backdrop-filter: blur(var(--glass-blur, 16px));
	-webkit-backdrop-filter: blur(var(--glass-blur, 16px));
	border: 1px solid var(--glass-border, rgba(100, 116, 139, 0.2));
	border-radius: var(--radius-xl, 16px);
	box-shadow:
		var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2)),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 40px rgb(var(--raw-accent, 34 211 238) / 0.08);
	cursor: copy;
	transition:
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		transform var(--duration-normal, 200ms) var(--ease-out);
}

.mail_top_row:hover {
	box-shadow:
		var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.25)),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 60px rgb(var(--raw-accent, 34 211 238) / 0.12);
	transform: translateY(-2px);
}

/* Resting border sweep: a slow cyan pulse that says "this is live" */
.mail_top_row::before {
	content: '';
	position: absolute;
	inset: -1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(34, 211, 238, 0.4) 25%,
		rgba(34, 211, 238, 0.6) 50%,
		rgba(34, 211, 238, 0.4) 75%,
		transparent 100%
	);
	border-radius: inherit;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	animation: border-glow-pulse 3s ease-in-out infinite;
}

@keyframes border-glow-pulse {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.6; }
}

.mail_top_row:hover::before {
	opacity: 1;
	animation: none;
}

/* ---- The address ---- */

#main_content .mail_section .mail_address {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The address is rendered by the read-only input on wide viewports and by
   .mail_address_display (two spans that break at the @) on phones. Both share
   one typography block so the address looks identical whichever is on screen. */
#main_content .mail_section #mail_address,
#main_content .mail_section .mail_address_display {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--space-2, 8px) var(--space-1, 4px);
	font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
	/* 32px cap on desktop; the phone floor is raised in the 767px block. JS
	   steps the size down to a 16px floor for addresses that still overflow. */
	font-size: clamp(1.125rem, 0.6rem + 2.4vw, 2rem);
	font-weight: var(--font-medium, 500);
	letter-spacing: var(--tracking-mono, 0.02em);
	line-height: var(--leading-tight, 1.15);
	color: var(--color-text-primary, rgb(241, 245, 249));
	text-align: center;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: var(--radius-sm, 4px);
	outline: none;
	cursor: copy;
	user-select: all;
	-webkit-user-select: all;
	position: relative;
	z-index: 1;
	transition:
		border-color var(--duration-normal, 200ms) var(--ease-out),
		background-color var(--duration-fast, 100ms) var(--ease-out);
}

#main_content .mail_section #mail_address {
	text-overflow: ellipsis;
	caret-color: transparent;
}

/* Hidden until the phone breakpoint swaps it in for the input. Each half is an
   inline-block so the line breaks between them (at the @) first; overflow-wrap
   only bites when one half alone is wider than the panel. */
#main_content .mail_section .mail_address_display {
	display: none;
	overflow-wrap: anywhere;
}

#main_content .mail_section .mail_address_display .address_local,
#main_content .mail_section .mail_address_display .address_domain {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

#main_content .mail_section #mail_address:focus,
#main_content .mail_section .mail_address:focus-within .mail_address_display {
	border-bottom-color: var(--color-accent, rgb(34, 211, 238));
}

#main_content .mail_section #mail_address::selection,
#main_content .mail_section .mail_address_display::selection,
#main_content .mail_section .mail_address_display *::selection {
	background: rgba(34, 211, 238, 0.5);
	color: #fff;
}

/* Copy flash effect - used by JavaScript for visual feedback. The class sits on
   the wrapper so it reaches whichever rendering is visible. */
#main_content .mail_section .mail_address.copy-flash #mail_address,
#main_content .mail_section .mail_address.copy-flash .mail_address_display {
	background-color: rgba(34, 211, 238, 0.35);
}

/* Compact step, added by JavaScript before any font-size step: the address gives
   up its tracking (and, on phones, the panel its side padding) so a long address
   keeps its size. */
#main_content .mail_section .address-compact #mail_address,
#main_content .mail_section .address-compact .mail_address_display {
	letter-spacing: 0;
}

/* Loading: until the session fetch resolves, a slate bar the height of one
   address line shimmers where the address will land. The input and display keep
   their boxes underneath it, so the timer row does not move when the address
   arrives. The class ships in the template and 10minutemail.js removes it. */
#main_content .mail_section .mail_address.address-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	inset-inline: 20%;
	height: 1em;
	transform: translateY(-50%);
	font-size: clamp(1.125rem, 0.6rem + 2.4vw, 2rem);
	border-radius: var(--radius-sm, 4px);
	background: linear-gradient(90deg,
		rgb(var(--raw-slate-700, 71 85 105) / 0.5) 0%,
		rgb(var(--raw-slate-600, 100 116 139) / 0.6) 50%,
		rgb(var(--raw-slate-700, 71 85 105) / 0.5) 100%);
	background-size: 200% 100%;
	animation: address-shimmer 1.4s linear infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes address-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ---- Controls row: copy button (start) and inbox count (end) ---- */

.mail_controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 16px);
	width: 100%;
}

#main_content #copy_address {
	position: relative;
	width: 48px;
	height: 48px;
	min-width: 48px;
	flex-shrink: 0;
	cursor: pointer;
	background: linear-gradient(135deg, rgb(34, 211, 238) 0%, rgb(22, 178, 202) 100%);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.15),
		0 0 20px rgba(34, 211, 238, 0.25);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		background var(--duration-normal, 200ms) var(--ease-out);
	user-select: none;
	-webkit-user-select: none;
}

#main_content #copy_address:hover {
	background: linear-gradient(135deg, rgb(103, 232, 249) 0%, rgb(34, 211, 238) 100%);
	transform: scale(1.08);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.2),
		0 0 30px rgba(34, 211, 238, 0.4);
}

#main_content #copy_address:active {
	transform: scale(0.95);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 15px rgba(34, 211, 238, 0.2);
}

/* Icon stroke is slate-900 on the cyan fill (about 8:1); white was 1.8:1. */
#main_content #copy_address .copy_icon {
	width: 26px;
	height: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
	margin: 0;
	transition: transform var(--duration-fast, 100ms) var(--ease-out);
}

#main_content #copy_address:hover .copy_icon {
	transform: scale(1.1);
}

/* "Copied!" tooltip. Localized: the label is bound to data-copied-label in
   index.html from #{js.emailCopied}. */
#main_content #copy_address::after {
	content: attr(data-copied-label);
	position: absolute;
	top: 50%;
	inset-inline-start: calc(100% + 12px);
	transform: translateY(-50%) translateX(-6px);
	background: rgb(52, 211, 153);
	color: rgb(var(--raw-slate-900, 30 41 59));
	padding: 8px 16px;
	border-radius: 8px;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.015em;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 100ms ease-out,
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#main_content #copy_address::before {
	content: '';
	position: absolute;
	top: 50%;
	inset-inline-start: 100%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-inline-end-color: rgb(52, 211, 153);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 100ms ease-out;
}

#main_content #copy_address.copy-success {
	background: rgb(52, 211, 153);
	border-color: rgba(52, 211, 153, 0.5);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 0 25px rgba(52, 211, 153, 0.4);
	animation: copy-success-pulse 0.6s ease-out;
}

#main_content #copy_address.copy-success::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

#main_content #copy_address.copy-success::before {
	opacity: 1;
	visibility: visible;
}

#main_content #copy_address.copy-success .copy_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

@keyframes copy-success-pulse {
	0% { transform: scale(1); }
	30% { transform: scale(1.1); }
	60% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

/* ---- Inbox count ---- */

.inbox_count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: auto;
	padding: var(--space-3, 12px) var(--space-5, 20px);
	background: linear-gradient(
		135deg,
		rgb(var(--raw-slate-800, 51 65 85) / 0.7) 0%,
		rgb(var(--raw-slate-900, 30 41 59) / 0.8) 100%
	);
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.5));
	border-radius: var(--radius-lg, 12px);
	margin: 0;
	cursor: default;
	transition:
		background var(--duration-normal, 200ms) var(--ease-out),
		border-color var(--duration-normal, 200ms) var(--ease-out);
}

#inbox_count {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-medium, 500);
	color: var(--color-text-secondary, rgb(178, 190, 205));
	position: static;
	margin: 0;
}

.inbox_count .mail_icon {
	width: 24px;
	height: 20px;
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0;
	vertical-align: middle;
	opacity: 0.8;
}

.inbox_count #inbox_count_number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 var(--space-2, 8px);
	background: var(--color-accent, rgb(34, 211, 238));
	color: var(--color-text-inverse, rgb(30, 41, 59));
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-bold, 700);
	font-variant-numeric: tabular-nums;
	position: static;
	margin: 0;
	vertical-align: middle;
	box-shadow: 0 0 12px rgb(var(--raw-accent, 34 211 238) / 0.3);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-bounce),
		background var(--duration-normal, 200ms) var(--ease-out);
}

#inbox_count_number.highlight {
	animation: badge-pop 0.4s var(--ease-bounce);
}

@keyframes badge-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); background: var(--color-success, rgb(52, 211, 153)); }
	100% { transform: scale(1); }
}

/* ============================================
   6. TOOL STAGE: COUNTDOWN TIMER
   Four small digit cards and a pulsing colon,
   below the address, with the reset button.
   ============================================ */

.mail_bottom_row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4, 16px);
	width: 100%;
	margin-top: var(--space-5, 20px);
}

#countdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1-5, 6px);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	position: relative;
	border-radius: var(--radius-lg, 12px);
	background: rgb(var(--raw-slate-950, 15 23 42) / 0.4);
	backdrop-filter: blur(var(--blur-sm, 4px));
	-webkit-backdrop-filter: blur(var(--blur-sm, 4px));
}

#main_content .mail_section .counter_number {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 7vw, 52px);
	height: clamp(56px, 11vw, 80px);
	margin: 0;
	text-align: center;
	/* Digit ink is the deep shade of the state hue (design-system.css --raw-*-ink),
	   which reads at >= 3.7:1 on the card. The bright state color stays on the
	   border, glow, and underline. */
	color: var(--timer-ink, var(--color-timer-safe-ink, rgb(4, 120, 87)));
	background: linear-gradient(
		180deg,
		rgba(241, 245, 249, 0.96) 0%,
		rgba(226, 232, 240, 0.92) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-md, 8px);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	transition:
		color var(--duration-slow, 300ms) var(--ease-out, ease),
		box-shadow var(--duration-slow, 300ms) var(--ease-out, ease),
		background var(--duration-slow, 300ms) var(--ease-out, ease);
}

/* State underline, in the bright state color rather than the digit ink */
#main_content .mail_section .counter_number::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 12%;
	right: 12%;
	height: 2px;
	border-radius: var(--radius-full, 9999px);
	background: linear-gradient(90deg, transparent, var(--timer-color, var(--color-timer-safe, rgb(52, 211, 153))), transparent);
	opacity: 0.7;
}

#main_content .mail_section .counter_number span {
	display: block;
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: clamp(24px, 5.5vw, 40px);
	font-weight: var(--font-bold, 700);
	line-height: 1;
	letter-spacing: var(--tracking-tight, -0.015em);
	font-variant-numeric: tabular-nums;
	color: inherit;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.5),
		0 1px 2px rgba(0, 0, 0, 0.1);
}

.counter_colon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(56px, 11vw, 80px);
	margin: 0;
	padding: 0 var(--space-0-5, 2px);
}

.counter_colon span {
	display: block;
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	/* One ramp step under the digits (24-40px) at every width. */
	font-size: var(--text-2xl, clamp(1.35rem, 1.2rem + 0.75vw, 1.5rem));
	font-weight: var(--font-bold, 700);
	line-height: 1;
	color: rgba(255, 255, 255, 0.9);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2),
		0 0 16px rgba(255, 255, 255, 0.3);
	animation: colon-pulse 1s ease-in-out infinite;
}

@keyframes colon-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* TIMER STATE: SAFE (> 2 minutes) */
#countdown.timer-state-safe .counter_number {
	color: var(--color-timer-safe-ink, rgb(4, 120, 87));
	border-color: rgba(52, 211, 153, 0.3);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.1),
		0 0 14px rgba(52, 211, 153, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* TIMER STATE: WARNING (1-2 minutes) */
#countdown.timer-state-warning .counter_number {
	color: var(--color-timer-warning-ink, rgb(180, 83, 9));
	border-color: rgba(251, 191, 36, 0.4);
	background: linear-gradient(
		180deg,
		rgba(255, 251, 235, 0.96) 0%,
		rgba(254, 243, 199, 0.92) 100%
	);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.1),
		0 0 18px rgba(251, 191, 36, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

#countdown.timer-state-warning .counter_colon span {
	color: var(--color-timer-warning, rgb(251, 191, 36));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 16px rgba(251, 191, 36, 0.4);
}

/* TIMER STATE: DANGER (< 1 minute). This state is the expiry warning; the
   screen-reader announcement fires from JavaScript at the same moment. */
#countdown.timer-state-danger .counter_number {
	color: var(--color-timer-danger-ink, rgb(220, 38, 38));
	border-color: rgba(248, 113, 113, 0.5);
	background: linear-gradient(
		180deg,
		rgba(254, 242, 242, 0.96) 0%,
		rgba(254, 226, 226, 0.92) 100%
	);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.1),
		0 0 22px rgba(248, 113, 113, 0.4),
		0 0 44px rgba(248, 113, 113, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	animation: danger-pulse 0.8s ease-in-out infinite;
}

#countdown.timer-state-danger .counter_number::after {
	height: 3px;
	opacity: 1;
	animation: danger-bar-pulse 0.8s ease-in-out infinite;
}

#countdown.timer-state-danger .counter_colon span {
	color: var(--color-timer-danger, rgb(248, 113, 113));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 20px rgba(248, 113, 113, 0.5);
	animation: colon-danger-pulse 0.5s ease-in-out infinite;
}

@keyframes danger-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

@keyframes danger-bar-pulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
}

@keyframes colon-danger-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* ---- "10 more minutes" reset button ---- */

#get_more_time {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	margin: 0;
	padding: var(--space-3, 12px) var(--space-6, 24px);
	background: linear-gradient(135deg,
		rgba(34, 211, 238, 0.9) 0%,
		rgba(22, 178, 202, 1) 50%,
		rgba(14, 165, 233, 1) 100%
	);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-bold, 700);
	letter-spacing: var(--tracking-wide, 0.015em);
	/* Slate-900 on the cyan gradient reads at 5.2:1 or better across the whole
	   fill (white was 2.5:1); the inbox badge uses the same pairing. */
	color: rgb(var(--raw-slate-900, 30 41 59));
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	box-shadow:
		0 4px 15px rgba(34, 211, 238, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition:
		transform 0.15s ease-out,
		box-shadow 0.2s ease-out,
		background 0.2s ease;
}

#get_more_time:hover {
	transform: translateY(-3px) scale(1.02);
	background: linear-gradient(135deg,
		rgba(103, 232, 249, 1) 0%,
		rgba(34, 211, 238, 1) 50%,
		rgba(22, 178, 202, 1) 100%
	);
	box-shadow:
		0 8px 24px rgba(34, 211, 238, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
}

#get_more_time:active {
	transform: translateY(-1px) scale(0.99);
	box-shadow:
		0 4px 12px rgba(34, 211, 238, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.15);
}

#get_more_time.loading {
	opacity: 0.7;
	cursor: wait;
	pointer-events: none;
}

#get_more_time.success {
	background: var(--color-success, rgb(52, 211, 153));
	transform: scale(1.02);
}

#get_more_time.error {
	background: var(--color-error, rgb(248, 113, 113));
}

/* The reset control is a div[role=button], so :disabled never matches it; the
   script sets aria-disabled while a reset is in flight and ignores activations
   until it clears. */
#get_more_time[aria-disabled="true"] {
	cursor: not-allowed;
}

/* ============================================
   7. TOOL STAGE: SESSION EXPIRED OVERLAY
   ============================================ */

.session-expired-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.85);
	backdrop-filter: blur(var(--blur-md, 8px));
	-webkit-backdrop-filter: blur(var(--blur-md, 8px));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4, 16px);
	z-index: var(--z-modal, 400);
	opacity: 0;
	transition: opacity var(--duration-slow, 300ms) var(--ease-out, ease);
}

.session-expired-overlay:not(.hidden) {
	opacity: 1;
}

.session-expired-overlay.hidden {
	display: none;
}

.expired-content {
	width: 100%;
	max-width: 480px;
	padding: var(--space-10, 40px) var(--space-8, 32px);
	text-align: center;
	background: rgba(30, 41, 59, 0.95);
	border: 1px solid rgba(34, 211, 238, 0.25);
	border-radius: var(--radius-modal, 16px);
	box-shadow:
		var(--shadow-2xl, 0 24px 64px rgba(0, 0, 0, 0.3)),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 60px rgba(34, 211, 238, 0.1);
	animation: slideInUp var(--duration-slower, 400ms) var(--ease-out, ease-out);
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.expired-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--space-5, 20px);
	color: var(--color-timer-danger, rgb(248, 113, 113));
	background: rgba(248, 113, 113, 0.12);
	border: 1px solid rgba(248, 113, 113, 0.35);
	border-radius: var(--radius-full, 9999px);
	box-shadow: 0 0 24px rgba(248, 113, 113, 0.25);
}

.expired-icon svg {
	width: 36px;
	height: 36px;
}

.expired-title {
	margin: 0 0 var(--space-3, 12px) 0;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-3xl, 30px);
	font-weight: var(--font-bold, 700);
	letter-spacing: var(--tracking-tight, -0.015em);
	line-height: var(--leading-tight, 1.15);
	color: rgb(241, 245, 249);
}

.expired-message {
	margin: 0 0 var(--space-6, 24px) 0;
	font-size: var(--text-base, 16px);
	line-height: var(--leading-relaxed, 1.65);
	color: rgb(178, 190, 205);
}

.refresh-session-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: var(--space-4, 16px) var(--space-8, 32px);
	background: linear-gradient(135deg,
		rgba(34, 211, 238, 0.9) 0%,
		rgba(22, 178, 202, 1) 50%,
		rgba(14, 165, 233, 1) 100%
	);
	border: 1px solid rgba(34, 211, 238, 0.4);
	border-radius: var(--radius-lg, 12px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-lg, 18px);
	font-weight: var(--font-bold, 700);
	letter-spacing: var(--tracking-wide, 0.015em);
	color: rgb(var(--raw-slate-900, 30 41 59));
	cursor: pointer;
	box-shadow:
		0 4px 15px rgba(34, 211, 238, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition:
		transform 0.15s ease-out,
		box-shadow 0.2s ease-out,
		background 0.2s ease;
}

.refresh-session-btn:hover {
	transform: translateY(-3px) scale(1.02);
	background: linear-gradient(135deg,
		rgba(103, 232, 249, 1) 0%,
		rgba(34, 211, 238, 1) 50%,
		rgba(22, 178, 202, 1) 100%
	);
	box-shadow:
		0 8px 24px rgba(34, 211, 238, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
}

.refresh-session-btn:active {
	transform: translateY(-1px) scale(0.99);
	box-shadow:
		0 4px 12px rgba(34, 211, 238, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ============================================
   8. TOOL STAGE: TOAST
   ============================================ */

.ux-toast {
	position: fixed;
	top: var(--space-5, 20px);
	inset-inline-end: var(--space-5, 20px);
	background: var(--color-success, rgb(52, 211, 153));
	color: rgb(var(--raw-slate-900, 30 41 59));
	padding: var(--space-4, 16px) var(--space-6, 24px);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-toast, 0 4px 12px rgba(0, 0, 0, 0.15));
	font-size: var(--text-base, 16px);
	font-weight: var(--font-medium, 500);
	z-index: var(--z-toast, 1500);
	opacity: 0;
	transform: translateY(-20px);
	transition: all var(--duration-slow, 0.3s) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
	pointer-events: none;
}

.ux-toast-error {
	background: var(--color-error, rgb(248, 113, 113));
}

.ux-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.ux-toast.hide {
	opacity: 0;
	transform: translateY(-20px);
}

/* ============================================
   9. TOOL STAGE: INBOX EMPTY STATE
   ============================================ */

.inbox-empty-state {
	text-align: center;
	padding: var(--space-10, 40px) var(--space-5, 20px);
	margin: var(--space-4, 16px) auto;
	max-width: 500px;
	color: var(--color-text-primary, #fff);
	background:
		radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34, 211, 238, 0.15) 0%, transparent 70%),
		linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(30, 41, 59, 0.95) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(34, 211, 238, 0.3);
	border-radius: var(--radius-xl, 16px);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.3),
		0 0 50px rgba(34, 211, 238, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 80px rgba(34, 211, 238, 0.04);
	opacity: 1;
	transition: opacity var(--duration-slow, 0.3s) var(--ease-out, ease);
}

.inbox-empty-state.hidden {
	display: none;
}

.empty-state-icon {
	margin: 0 auto var(--space-6, 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 0 25px rgba(34, 211, 238, 0.4));
}

.empty-state-title {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-2xl, 24px);
	font-weight: var(--font-semibold, 600);
	margin: 0 0 var(--space-3, 12px) 0;
	color: #fff;
	letter-spacing: var(--tracking-tight, -0.015em);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.empty-state-subtitle {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-normal, 400);
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	line-height: var(--leading-relaxed, 1.65);
}

/* Animated envelope SVG inside the empty state */
.inbox-radar-icon {
	width: 100px;
	height: 100px;
}

.radar-sweep {
	transform-origin: 40px 40px;
	animation: radar-rotate 3s linear infinite;
}

@keyframes radar-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.radar-ring {
	animation: radar-pulse 3s ease-in-out infinite;
}

.radar-ring-1 { animation-delay: 0s; }
.radar-ring-2 { animation-delay: 0.5s; }
.radar-ring-3 { animation-delay: 1s; }

@keyframes radar-pulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.02);
	}
}

.envelope-icon {
	animation: envelope-float 4s ease-in-out infinite;
}

@keyframes envelope-float {
	0%, 100% { transform: translate(22px, 26px); }
	50% { transform: translate(22px, 23px); }
}

/* ============================================
   10. TOOL STAGE: MESSAGE LIST
   ============================================ */

#mail_messages {
	padding: 0 var(--space-4, 16px);
	max-width: var(--container-lg, 1024px);
	margin: 0 auto;
}

#mail_messages_content {
	width: 90%;
}

#mail_messages .mail_message:first-of-type {
	margin-top: var(--space-4, 16px);
}

#mail_messages .mail_message {
	background: var(--color-bg-surface, rgba(255, 255, 255, 0.95));
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.3));
	border-radius: var(--radius-card, 12px);
	margin-bottom: var(--space-4, 16px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
	transition:
		transform var(--duration-normal, 0.2s) var(--ease-out, ease),
		box-shadow var(--duration-normal, 0.2s) var(--ease-out, ease),
		border-color var(--duration-normal, 0.2s) var(--ease-out, ease);
	overflow: hidden;
}

#mail_messages .mail_message:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
	border-color: var(--color-border-accent, rgba(34, 211, 238, 0.4));
}

#mail_messages .mail_message_expanded {
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
	border-color: var(--color-accent, rgb(34, 211, 238));
}

#mail_messages .mail_message_expanded:hover { transform: none; }

/* Message header row */
#mail_messages .message_top {
	display: flex;
	align-items: center;
	padding: var(--space-4, 16px) var(--space-5, 20px);
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--color-text-primary, #2c3e50);
	transition: background-color var(--duration-fast, 0.1s) var(--ease-out, ease);
	gap: var(--space-4, 16px);
}

#mail_messages .message_top:hover {
	background: var(--color-bg-hover, rgba(71, 85, 105, 0.05));
}

/* Message icon container */
#mail_messages .mail_message .message_top .small_message_icon_box {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.12));
	border-radius: var(--radius-md, 8px);
	transition: background-color var(--duration-normal, 0.2s) var(--ease-out, ease);
}

#mail_messages .mail_message:hover .message_top .small_message_icon_box {
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

#mail_messages .mail_message .message_top .small_message_icon {
	width: 24px;
	height: 24px;
	display: block;
	margin: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mail_messages .mail_message .message_top .small_sender {
	flex: 0 0 180px;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-semibold, 600);
	color: var(--color-text-primary, #2c3e50);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	height: auto;
}

#mail_messages .mail_message .message_top .small_subject {
	flex: 1;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-secondary, #5a6c7d);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	height: auto;
	padding-inline-end: var(--space-4, 16px);
}

#mail_messages .mail_message .message_top .small_date {
	flex-shrink: 0;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-xs, 12px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-tertiary, #94a3b8);
	letter-spacing: var(--tracking-wide, 0.015em);
	font-variant-numeric: tabular-nums;
	text-align: end;
	margin: 0;
	height: auto;
	width: auto;
}

#mail_messages .mail_message_expanded .message_top {
	border-bottom: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.2));
}

/* Message body - expanded state */
#mail_messages .message_bottom {
	display: none;
	color: var(--color-text-primary, #2c3e50);
	background: var(--color-bg-elevated, rgba(248, 250, 252, 0.5));
}

#mail_messages .mail_message_expanded .message_bottom {
	display: block;
	padding: var(--space-6, 24px);
	animation: slideDown var(--duration-slow, 0.3s) var(--ease-out, ease);
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

#mail_messages .mail_message_expanded .message_bottom p {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--color-text-primary, #34495e);
	margin: 0 0 var(--space-4, 16px) 0;
}

#mail_messages .mail_message_expanded .message_bottom p:first-of-type { margin-top: 0; }
#mail_messages .mail_message_expanded .message_bottom p:last-of-type { margin-bottom: 0; }

/* Action buttons */
#mail_messages .message_bottom .message_icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3, 12px);
	padding-bottom: var(--space-4, 16px);
	margin-bottom: var(--space-5, 20px);
	border-bottom: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.15));
}

#mail_messages .message_bottom .message_reply,
#mail_messages .message_bottom .message_forward,
#mail_messages .message_bottom .message_close {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	padding: var(--space-2-5, 10px) var(--space-4, 16px);
	background: var(--color-btn-secondary-bg, rgba(71, 85, 105, 0.1));
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.2));
	border-radius: var(--radius-button, 6px);
	cursor: pointer;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-medium, 500);
	color: var(--color-text-secondary, #5a6c7d);
	transition:
		background-color var(--duration-fast, 0.1s) var(--ease-out, ease),
		border-color var(--duration-fast, 0.1s) var(--ease-out, ease),
		color var(--duration-fast, 0.1s) var(--ease-out, ease),
		transform var(--duration-fast, 0.1s) var(--ease-out, ease),
		box-shadow var(--duration-fast, 0.1s) var(--ease-out, ease);
}

#mail_messages .message_bottom .message_reply:hover,
#mail_messages .message_bottom .message_forward:hover {
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.15));
	border-color: var(--color-border-accent, rgba(34, 211, 238, 0.4));
	color: var(--color-accent, rgb(34, 211, 238));
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

#mail_messages .message_bottom .message_close:hover {
	background: var(--color-error-bg, rgba(248, 113, 113, 0.12));
	border-color: rgba(248, 113, 113, 0.4);
	color: var(--color-error, rgb(248, 113, 113));
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

#mail_messages .message_bottom .message_reply:active,
#mail_messages .message_bottom .message_forward:active,
#mail_messages .message_bottom .message_close:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Button icons */
#mail_messages .message_bottom .message_reply_icon,
#mail_messages .message_bottom .message_forward_icon,
#mail_messages .message_bottom .message_close_icon {
	width: 18px;
	height: 18px;
	display: block;
	margin: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: filter var(--duration-fast, 0.1s) var(--ease-out, ease);
}

#mail_messages .message_bottom .message_reply_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,17 4,12 9,7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_reply:hover .message_reply_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,17 4,12 9,7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_forward_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15,17 20,12 15,7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_forward:hover .message_forward_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15,17 20,12 15,7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_close_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_close:hover .message_close_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* The reply and forward arrows are reading-direction cues, so they flip with the page. */
[dir="rtl"] #mail_messages .message_bottom .message_reply_icon,
[dir="rtl"] #mail_messages .message_bottom .message_forward_icon {
	transform: scaleX(-1);
}

/* Reply / forward forms (shown by toggling .hidden) */
#mail_messages .mail_message .message_bottom .reply_to_message,
#mail_messages .mail_message .message_bottom .forward_message {
	border-bottom: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.3));
	padding: var(--space-4, 16px) 0 var(--space-6, 24px);
	margin-bottom: var(--space-6, 24px);
}

#mail_messages .mail_message .message_bottom .reply_to_message.hidden,
#mail_messages .mail_message .message_bottom .forward_message.hidden {
	display: none;
}

#mail_messages .mail_message .message_bottom .reply_to_message p,
#mail_messages .mail_message .message_bottom .forward_message p {
	font-weight: var(--font-semibold, 600);
	margin-bottom: var(--space-3, 12px);
}

#mail_messages .mail_message .message_bottom .reply_message_text,
#mail_messages .mail_message .message_bottom .forward_message_address {
	display: block;
	width: 100%;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin-bottom: var(--space-3, 12px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	line-height: var(--leading-normal, 1.5);
	color: var(--color-text-primary, rgb(241, 245, 249));
	background: rgb(var(--raw-slate-900, 30 41 59) / 0.8);
	border: 2px solid var(--color-border-default, rgba(100, 116, 139, 0.4));
	border-radius: var(--radius-input, 6px);
	box-shadow: var(--shadow-inset-sm, inset 0 1px 2px rgba(0, 0, 0, 0.15));
	resize: vertical;
	transition:
		border-color var(--duration-normal, 200ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out);
}

#mail_messages .mail_message .message_bottom .reply_message_text {
	height: 150px;
}

#mail_messages .mail_message .message_bottom .forward_message_address {
	max-width: 420px;
	height: 48px;
	resize: none;
}

#mail_messages .mail_message .message_bottom .reply_message_text:focus,
#mail_messages .mail_message .message_bottom .forward_message_address:focus {
	outline: none;
	border-color: var(--color-accent, rgb(34, 211, 238));
	box-shadow:
		var(--shadow-inset-sm, inset 0 1px 2px rgba(0, 0, 0, 0.15)),
		0 0 0 3px rgb(var(--raw-accent, 34 211 238) / 0.15);
}

#mail_messages .mail_message .message_bottom .reply_message_submit,
#mail_messages .mail_message .message_bottom .forward_message_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2-5, 10px) var(--space-5, 20px);
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.9) 0%, rgba(22, 178, 202, 1) 100%);
	border: 1px solid rgba(34, 211, 238, 0.4);
	border-radius: var(--radius-button, 6px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-semibold, 600);
	/* Slate-900 ink on the cyan fill, the same as the copy and reset buttons. */
	color: rgb(var(--raw-slate-900, 30 41 59));
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		opacity var(--duration-fast, 100ms) var(--ease-out);
}

#mail_messages .mail_message .message_bottom .reply_message_submit:hover,
#mail_messages .mail_message .message_bottom .forward_message_submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(34, 211, 238, 0.35);
}

/* Pending: the request is in flight. Same treatment as the reset button. */
#mail_messages .mail_message .message_bottom .reply_message_submit:disabled,
#mail_messages .mail_message .message_bottom .forward_message_submit:disabled {
	opacity: 0.7;
	cursor: wait;
	transform: none;
	box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
}

/* A field the visitor has tried to submit empty or malformed. The browser's
   own message does the explaining; the border takes the error color and the
   default red glow is replaced by the field's inset shadow. */
#mail_messages .mail_message .message_bottom .reply_message_text:user-invalid,
#mail_messages .mail_message .message_bottom .forward_message_address:user-invalid {
	border-color: var(--color-error, rgb(248, 113, 113));
	box-shadow: var(--shadow-inset-sm, inset 0 1px 2px rgba(0, 0, 0, 0.15));
}

#mail_messages .mail_message .message_bottom .reply_success,
#mail_messages .mail_message .message_bottom .forward_success {
	background: var(--color-success-bg, rgba(52, 211, 153, 0.12));
	border: 1px solid rgba(52, 211, 153, 0.4);
	margin: 0 0 var(--space-4, 16px);
	text-align: center;
	border-radius: var(--radius-button, 6px);
}

#mail_messages .mail_message .message_bottom .reply_success.hidden,
#mail_messages .mail_message .message_bottom .forward_success.hidden {
	display: none;
}

#mail_messages .mail_message .message_bottom .reply_success p,
#mail_messages .mail_message .message_bottom .forward_success p {
	font-weight: var(--font-semibold, 600);
	color: var(--color-success, rgb(52, 211, 153));
	padding: var(--space-2-5, 10px) 0;
	margin: 0;
}

/* ============================================
   11. TOOL STAGE: EXPLANATION PANEL
   ============================================ */

#main_content .explanation {
	position: relative;
	max-width: 800px;
	width: 90%;
	margin: var(--space-8, 32px) auto var(--space-10, 40px);
	padding: var(--space-8, 32px) var(--space-10, 40px);
	box-sizing: border-box;
	background: rgba(30, 41, 59, 0.4);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(71, 85, 105, 0.3);
	border-inline-start: 4px solid var(--color-accent, rgb(34, 211, 238));
	border-radius: 0;
	border-start-end-radius: 8px;
	border-end-end-radius: 8px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#main_content .explanation::before {
	content: '';
	position: absolute;
	inset-inline-start: -4px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(
		180deg,
		rgb(34, 211, 238) 0%,
		rgb(52, 211, 153) 50%,
		rgb(34, 211, 238) 100%
	);
	border-radius: 0;
	border-start-start-radius: 4px;
	border-end-start-radius: 4px;
	opacity: 0.8;
}

#main_content .explanation h2 {
	margin: 0 0 var(--space-2, 8px) 0;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-4xl, 32px);
	font-weight: var(--font-bold, 700);
	color: var(--color-text-primary, #f1f5f9);
	letter-spacing: var(--tracking-tight, -0.015em);
	line-height: var(--leading-tight, 1.2);
}

#main_content .explanation h3 {
	margin: 0 0 var(--space-8, 32px) 0;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-xl, 20px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-secondary, #94a3b8);
	line-height: var(--leading-snug, 1.4);
}

#main_content .explanation p {
	padding: 0;
	margin: 0 0 var(--space-5, 20px) 0;
	line-height: var(--leading-relaxed, 1.7);
	font-size: var(--text-base, 16px);
	color: var(--color-text-secondary, #cbd5e1);
}

#main_content .explanation p:last-child {
	margin-bottom: 0;
}

#main_content .explanation strong {
	font-weight: var(--font-bold, 700);
	color: var(--color-text-primary, #f1f5f9);
	font-size: var(--text-lg, 18px);
	display: block;
	margin-bottom: var(--space-3, 12px);
}

#main_content .explanation a {
	color: rgb(34, 211, 238);
	font-weight: var(--font-semibold, 600);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: var(--transition-colors, all 0.2s ease);
}

#main_content .explanation a:hover {
	color: rgb(103, 232, 249);
	border-bottom-color: rgba(34, 211, 238, 0.5);
}

#main_content .explanation br {
	display: block;
	content: "";
	margin-top: var(--space-2, 8px);
}

/* ============================================
   12. FOOTER
   ============================================ */

footer {
	background: var(--gradient-footer, linear-gradient(135deg, rgb(var(--raw-slate-900, 30 41 59)) 0%, rgb(var(--raw-slate-800, 51 65 85)) 100%));
	color: var(--color-text-footer, rgb(var(--raw-slate-100, 241 245 249)));
	padding: var(--space-16, 60px) var(--space-10, 40px) var(--space-8, 30px);
	text-align: center;
	position: relative;
}

/* Subtle top border accent */
footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent, rgb(34, 211, 238)),
		transparent
	);
	opacity: 0.6;
}

footer .content {
	max-width: var(--container-xl, 1200px);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

footer p {
	margin: 0 0 var(--space-4, 15px) 0;
	line-height: var(--leading-relaxed, 1.6);
	font-size: var(--text-sm, 14px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
}

footer a,
footer a:visited {
	color: var(--color-accent, rgb(34, 211, 238));
	text-decoration: none;
	transition:
		color var(--duration-fast, 100ms) var(--ease-out),
		transform var(--duration-fast, 100ms) var(--ease-out);
	font-weight: var(--font-medium, 500);
}

footer a:hover {
	color: var(--color-accent-light, rgb(103, 232, 249));
	text-decoration: none;
}

.footer_blue {
	color: var(--color-accent, rgb(34, 211, 238));
}

/* Bitcoin wallet styling */
.btc_wallet_address {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	background: rgb(var(--raw-slate-700, 71 85 105) / 0.5);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	border-radius: var(--radius-md, 8px);
	display: inline-block;
	font-size: var(--text-xs, 12px);
	margin-top: var(--space-2, 8px);
	letter-spacing: var(--tracking-wide, 0.5px);
	word-break: break-all;
	border: 1px solid rgb(var(--raw-slate-600, 100 116 139) / 0.3);
	transition: background-color var(--duration-fast, 100ms) var(--ease-out);
}

.btc_wallet_address:hover {
	background: rgb(var(--raw-slate-600, 100 116 139) / 0.5);
}

/* ---- Compact footer grid ---- */

.footer-announcement {
	text-align: center;
	font-size: 13px;
	margin: 0 0 var(--space-5, 20px) 0;
	padding-bottom: var(--space-5, 20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid-compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6, 24px);
	text-align: start;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: var(--space-5, 20px);
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-column h4 {
	color: var(--color-accent, #3498db);
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 var(--space-2, 8px) 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.footer-column a {
	position: relative;
	color: var(--color-link, #3498db);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.6;
	transition: color 0.2s ease, transform 0.15s ease;
}

.footer-column a:hover {
	color: var(--color-link-hover, #5dade2);
	transform: translateX(3px);
}

/* translateX has no logical equivalent, so the nudge is mirrored by hand for RTL. */
[dir="rtl"] .footer-column a:hover {
	transform: translateX(-3px);
}

.footer-column span {
	font-size: 13px;
	line-height: 1.6;
	color: #bdc3c7;
}

.footer-column .paypal_form {
	margin: 4px 0 8px;
}

.footer-column .paypal_form input[type="image"] {
	height: 24px;
	width: auto;
	transition: opacity 0.2s ease;
	opacity: 0.85;
}

.footer-column .paypal_form input[type="image"]:hover {
	opacity: 1;
}

/* Secondary footer text: slate-400 reads at 5.3:1 on the slate-800 end of the
   footer gradient, the lowest-contrast spot. Nothing in the footer goes under 12px. */
.footer-column .btc-label {
	font-size: 12px;
	color: rgb(var(--raw-slate-400, 178 190 205));
	margin-top: 4px;
}

.footer-column .btc_wallet_address {
	font-family: var(--font-mono, 'Courier New', monospace);
	font-size: var(--text-xs, 12px);
	letter-spacing: var(--tracking-wide, 0.015em);
	background: rgba(255, 255, 255, 0.08);
	padding: 4px 6px;
	border-radius: 4px;
	word-break: break-all;
	margin-top: 2px;
	display: block;
}

/* Each line of the About column is one item: the attribution (with its link
   inline) and the copyright. The child combinator keeps the message-bundle
   spans nested inside each line on that line. */
.footer-column.footer-about > span {
	display: block;
}

.footer-column.footer-about a {
	display: inline-block;
}

.footer-column .copyright {
	margin-top: 4px;
	font-size: 12px;
	color: rgb(var(--raw-slate-400, 178 190 205));
}

/* Trust bar - single line */
.footer-trust-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: var(--space-4, 16px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
	color: rgb(var(--raw-slate-400, 178 190 205));
}

.footer-trust-bar .trust-badge {
	color: #22d3ee;
	font-weight: 600;
}

.footer-trust-bar .trust-divider {
	color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   13. SECONDARY PAGES
   About, privacy, accolades, FAQ, blog, etc.
   ============================================ */

#secondary_header {
	background: linear-gradient(
		135deg,
		rgb(var(--raw-slate-900, 30 41 59)) 0%,
		rgb(var(--raw-slate-800, 51 65 85)) 100%
	);
	color: var(--color-text-primary, rgb(241, 245, 249));
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#secondary_header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent, rgb(34, 211, 238)),
		transparent
	);
	opacity: 0.5;
}

.secondary_main {
	width: 690px;
	display: inline-block;
	border-inline-end: 2px solid var(--color-accent-muted, rgba(34, 211, 238, 0.3));
	margin-top: var(--space-5, 20px);
	padding-inline: var(--space-4, 16px);
}

.secondary_main h1 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-weight: var(--font-bold, 700);
	font-size: var(--text-3xl, 30px);
	margin-bottom: var(--space-4, 16px);
}

.secondary_main h2 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-weight: var(--font-semibold, 600);
	font-size: var(--text-xl, 20px);
	margin-top: var(--space-6, 24px);
	margin-bottom: var(--space-3, 12px);
}

.secondary_main p {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--color-text-primary, #2c3e50);
	margin-bottom: var(--space-4, 16px);
}

.secondary_main strong {
	color: var(--color-accent, rgb(34, 211, 238));
	font-weight: var(--font-semibold, 600);
}

.secondary_main a,
.secondary_main a:visited,
.secondary_main a:active {
	color: var(--color-accent, rgb(34, 211, 238));
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-fast, 100ms) var(--ease-out),
		border-color var(--duration-fast, 100ms) var(--ease-out);
}

.secondary_main a:hover {
	color: var(--color-accent-light, rgb(103, 232, 249));
	border-bottom-color: var(--color-accent, rgb(34, 211, 238));
}

/* Sidebar */
.secondary_sidebar {
	width: 290px;
	display: inline-block;
	vertical-align: top;
	margin-top: var(--space-4, 16px);
}

.secondary_sidebar h2 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	margin-inline-start: var(--space-5, 20px);
	margin-bottom: var(--space-10, 40px);
	font-size: var(--text-xl, 20px);
}

.accolades_sidebar {
	padding-top: 120px;
}

.accolades_sidebar a,
.accolades_sidebar a:visited,
.accolades_sidebar a:active {
	text-decoration: none;
}

.accolades_sidebar p {
	margin-inline-start: 20px;
	margin-bottom: 40px;
}

/* Sidebar circle stats */
.sidebar_circle {
	color: var(--color-text-inverse, rgb(30, 41, 59));
	background: linear-gradient(
		135deg,
		var(--color-accent, rgb(34, 211, 238)) 0%,
		var(--color-accent-dim, rgb(22, 178, 202)) 100%
	);
	width: 200px;
	height: 200px;
	border-radius: var(--radius-full, 50%);
	margin-inline-start: var(--space-10, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15)), 0 0 30px rgba(34, 211, 238, 0.2);
}

.sidebar_circle .circle_number {
	display: block;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-3xl, 30px);
	font-weight: var(--font-bold, 700);
	margin: 0;
	padding: 0;
}

.sidebar_circle .circle_text {
	display: block;
	text-align: center;
	padding-top: var(--space-2, 8px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
}

.sidebar_circle_separator {
	margin-inline-start: 140px;
	height: 20px;
	width: 2px;
	background: var(--color-accent, rgb(34, 211, 238));
}

/* Try it button */
.sidebar_try_it {
	border-radius: var(--radius-md, 8px);
	background: linear-gradient(
		135deg,
		rgb(var(--raw-slate-700, 71 85 105) / 0.9) 0%,
		rgb(var(--raw-slate-800, 51 65 85) / 1) 100%
	);
	color: var(--color-text-primary, rgb(241, 245, 249));
	width: 200px;
	height: 50px;
	margin-inline-start: var(--space-10, 40px);
	margin-top: var(--space-5, 20px);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-fast, 100ms) var(--ease-out);
}

.sidebar_try_it:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2));
}

.sidebar_try_it a,
.sidebar_try_it a:visited,
.sidebar_try_it a:active {
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-text-primary, rgb(241, 245, 249));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-lg, 18px);
	font-weight: var(--font-semibold, 600);
	letter-spacing: var(--tracking-wide, 0.03em);
	line-height: 50px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.privacy_main {
	padding-bottom: 600px;
}

/* About page stats box */
.about-stats-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(51, 65, 85, 0.3));
	border: 1px solid rgba(34, 211, 238, 0.3);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0 2rem 0;
	text-align: center;
}

.about-stats-box .stat-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.about-stats-box .stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: #22d3ee;
	line-height: 1.2;
}

.about-stats-box .stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* CTA button on secondary and pillar pages: the primary button style */
.secondary_main .cta-button,
.pillar-content .cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	background: linear-gradient(135deg,
		rgba(34, 211, 238, 0.9) 0%,
		rgba(22, 178, 202, 1) 50%,
		rgba(14, 165, 233, 1) 100%
	);
	border: 1px solid rgba(34, 211, 238, 0.4);
	border-radius: var(--radius-lg, 12px);
	color: #fff !important;
	font-weight: var(--font-bold, 700);
	letter-spacing: var(--tracking-wide, 0.015em);
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow:
		0 4px 15px rgba(34, 211, 238, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition:
		transform 0.15s ease-out,
		box-shadow 0.2s ease-out,
		background 0.2s ease;
}

.secondary_main .cta-button:hover,
.pillar-content .cta-button:hover {
	transform: translateY(-3px) scale(1.02);
	background: linear-gradient(135deg,
		rgba(103, 232, 249, 1) 0%,
		rgba(34, 211, 238, 1) 50%,
		rgba(22, 178, 202, 1) 100%
	);
	border-bottom-color: rgba(34, 211, 238, 0.4);
	box-shadow:
		0 8px 24px rgba(34, 211, 238, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
}

.secondary_main .cta-button:active,
.pillar-content .cta-button:active {
	transform: translateY(-1px) scale(0.99);
}

/* ============================================
   14. PILLAR PAGE COMPONENTS
   What is Temporary Email and friends
   ============================================ */

.pillar-content {
	max-width: 750px;
}

.pillar-content .lead-paragraph {
	font-size: 1.15rem;
	line-height: 1.75;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

/* Table of Contents */
.pillar-content .toc {
	background: var(--color-surface, rgba(51, 65, 85, 0.3));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
	border-radius: 8px;
	padding: 1.5rem 2rem;
	margin-bottom: 2.5rem;
}

.pillar-content .toc h2 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	margin-top: 0;
}

.pillar-content .toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem;
}

.pillar-content .toc li {
	margin: 0;
}

.pillar-content .toc a {
	display: block;
	padding: 0.35rem 0;
	font-size: 0.95rem;
}

/* Section Styling */
.pillar-content section {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.1));
}

.pillar-content section:last-of-type {
	border-bottom: none;
}

.pillar-content h2 {
	margin-top: 0;
	padding-top: 1rem;
	font-size: 1.5rem;
}

.pillar-content h3 {
	color: var(--color-accent, #49a6db);
	font-size: 1.15rem;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.pillar-content ol,
.pillar-content ul {
	margin-inline-start: 1.25rem;
	margin-bottom: 1.5rem;
}

.pillar-content li {
	margin-bottom: 0.5rem;
	line-height: 1.65;
}

/* Comparison Table */
.pillar-content .comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0 2rem;
	font-size: 0.95rem;
}

.pillar-content .comparison-table th,
.pillar-content .comparison-table td {
	padding: 0.75rem 1rem;
	text-align: start;
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

.pillar-content .comparison-table th {
	background: var(--color-surface, rgba(51, 65, 85, 0.5));
	color: var(--color-accent, #49a6db);
	font-weight: 600;
}

.pillar-content .comparison-table tr:nth-child(even) {
	background: var(--color-surface, rgba(51, 65, 85, 0.2));
}

/* FAQ Items */
.pillar-content .faq-item {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.1));
}

.pillar-content .faq-item:last-child {
	border-bottom: none;
}

.pillar-content .faq-item h3 {
	margin-top: 0;
	color: var(--color-text-primary, #fff);
	font-size: 1.1rem;
}

.pillar-content .faq-item p {
	margin-bottom: 0;
}

/* CTA Section */
.pillar-content .cta-section {
	background: linear-gradient(135deg, var(--color-surface, rgba(51, 65, 85, 0.4)), var(--color-surface, rgba(51, 65, 85, 0.2)));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.3));
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	margin-top: 2rem;
}

.pillar-content .cta-section h2 {
	padding-top: 0;
	margin-bottom: 0.75rem;
}

/* Pillar Sidebar Stats */
.pillar_sidebar .sidebar_stats {
	background: var(--color-surface, rgba(51, 65, 85, 0.3));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.pillar_sidebar .sidebar_stats h3 {
	color: var(--color-accent, #49a6db);
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
}

.pillar_sidebar .sidebar_stats .stat {
	margin: 0.5rem 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.pillar_sidebar .sidebar_stats strong {
	color: var(--color-accent, #49a6db);
}

/* ---- GEO/AEO components: TL;DR box, related content, timestamps ---- */

.tldr-box {
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
	border: 2px solid #0891b2;
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.tldr-box .tldr-title {
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: 0.9rem;
	font-weight: 600;
	color: #0891b2;
	margin: 0 0 0.75rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tldr-box p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-primary, #1e293b);
}

.tldr-box p strong {
	color: var(--color-text-primary, #0f172a);
}

.last-updated-inline {
	font-size: 0.85rem;
	color: var(--color-text-secondary, #64748b);
	margin: 0.5rem 0 1.5rem 0;
	font-style: italic;
}

.related-content {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));
}

.related-content h2 {
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text-primary, #1e293b);
	margin: 0 0 1.5rem 0;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.related-card {
	background: var(--color-bg-elevated, rgba(241, 245, 249, 0.8));
	border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));
	border-radius: 10px;
	padding: 1.25rem;
	text-decoration: none;
	transition: all 0.2s ease;
	display: block;
}

.related-card:hover {
	border-color: #0891b2;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.related-card .related-icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 0.75rem;
}

.related-card h3 {
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary, #1e293b);
	margin: 0 0 0.5rem 0;
}

.related-card p {
	font-size: 0.85rem;
	color: var(--color-text-secondary, #64748b);
	margin: 0;
	line-height: 1.5;
}

.related-card:hover h3 {
	color: #0891b2;
}

/* ============================================
   15. ACCESSIBILITY
   ============================================ */

/* Focus indicators for keyboard navigation */
#copy_address:focus-visible,
#get_more_time:focus-visible,
.refresh-session-btn:focus-visible,
.message_top:focus-visible,
.message_reply:focus-visible,
.message_forward:focus-visible,
.message_close:focus-visible,
.reply_message_submit:focus-visible,
.forward_message_submit:focus-visible,
#language_btn:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: 3px;
	box-shadow: var(--shadow-focus, 0 0 0 6px rgba(255, 215, 0, 0.25));
}

/* Links use the same gold ring as the controls instead of the browser default,
   which is invisible on the dark explanation panel and footer. Tighter offset
   so the ring hugs inline text. */
a:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: 2px;
	border-radius: var(--radius-sm, 4px);
	box-shadow: var(--shadow-focus, 0 0 0 6px rgba(255, 215, 0, 0.25));
}

/* Language select: the pill clips overflow, so the ring goes on the pill when
   its select has keyboard focus; browsers without :has() get an inset ring on
   the select itself. Mouse focus keeps the cyan focus-within halo only. */
header .language #language_btn #locales:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: -3px;
	border-radius: var(--radius-md, 8px);
}

@supports selector(:has(a)) {
	header .language #language_btn #locales:focus-visible {
		outline: none;
	}
	header .language #language_btn:has(#locales:focus-visible) {
		outline: 3px solid var(--color-focus, #FFD700);
		outline-offset: 3px;
		box-shadow: var(--shadow-focus, 0 0 0 6px rgba(255, 215, 0, 0.25));
	}
}

#mail_messages .message_top:focus-visible {
	outline-offset: -3px;
	border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
}

#mail_messages .message_bottom .message_reply:focus-visible,
#mail_messages .message_bottom .message_forward:focus-visible,
#mail_messages .message_bottom .message_close:focus-visible {
	outline-offset: 2px;
}

/* Remove default focus for mouse users (keep for keyboard) */
#copy_address:focus:not(:focus-visible),
#get_more_time:focus:not(:focus-visible) {
	outline: none;
}

/* Touch devices: no hover lift */
@media (hover: none) {
	#copy_address:hover,
	#get_more_time:hover,
	.refresh-session-btn:hover {
		transform: none;
		box-shadow: none;
	}
	.mail_top_row:hover {
		transform: none;
	}
	#mail_messages .mail_message:hover {
		transform: none;
		box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
	}
	#mail_messages .message_bottom .message_reply:hover,
	#mail_messages .message_bottom .message_forward:hover,
	#mail_messages .message_bottom .message_close:hover { transform: none; }
}

/* High contrast mode */
@media (prefers-contrast: high) {
	#copy_address:focus-visible,
	#get_more_time:focus-visible {
		outline: 4px solid currentColor;
		outline-offset: 4px;
	}

	.ux-toast {
		border: 2px solid white;
	}

	#main_content::before {
		background: var(--bg-gradient-base);
	}
	#main_content::after { display: none; }

	.mail_top_row {
		border: 2px solid var(--color-text-primary);
		background: var(--color-bg-base);
	}
	#main_content #copy_address { border: 2px solid currentColor; }
	#main_content .mail_section #mail_address,
	#main_content .mail_section .mail_address_display {
		border-bottom: 2px solid var(--color-text-primary);
	}
	#inbox_count_number { border: 2px solid currentColor; }

	#main_content .mail_section .counter_number {
		border: 2px solid currentColor;
		background: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	#countdown.timer-state-safe .counter_number { color: var(--color-timer-safe-ink, #047857); }
	#countdown.timer-state-warning .counter_number { color: var(--color-timer-warning-ink, #b45309); }
	#countdown.timer-state-danger .counter_number { color: var(--color-timer-danger-ink, #dc2626); }

	#mail_messages .mail_message {
		border-width: 2px;
		border-color: var(--color-text-primary);
	}
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close { border-width: 2px; }
}

/* ============================================
   16. RESPONSIVE
   Desktop row layout above 865px; tablet at
   768px; phones at 480px, 400px, and 360px.
   ============================================ */

/* Desktop: timer and reset button side by side */
@media (min-width: 865px) {
	.mail_bottom_row {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-6, 24px);
	}
}

/* Tablet and below */
@media (max-width: 768px) {
	/* Header: compact single-row layout, tagline hidden (#253, #260) */
	/* Child combinator: target only the logo/language row, not the ad slot's
	   own .content wrapper (header > aside#banner_ad > div.content) */
	header > .content {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		box-sizing: border-box;
	}
	header h1 {
		width: 82px;
		height: 46px;
		margin: 0;
		flex: 0 0 auto;
	}
	header h2 {
		display: none;
	}
	header .language {
		margin: 0;
		height: auto;
		flex: 0 0 auto;
	}
	#main_content {
		margin-top: 0;
	}

	/* Background: fewer mesh layers on small screens */
	#main_content::before {
		background:
			radial-gradient(ellipse 100% 60% at 50% 30%, var(--bg-mesh-color-1) 0%, transparent 60%),
			radial-gradient(ellipse 80% 80% at 50% 70%, var(--bg-mesh-color-2) 0%, transparent 50%),
			var(--bg-gradient-base);
	}

	/* Message list */
	#mail_messages { padding: 0 var(--space-3, 12px); }
	#mail_messages .message_top {
		flex-wrap: wrap;
		padding: var(--space-3, 12px) var(--space-4, 16px);
		gap: var(--space-2, 8px);
	}
	#mail_messages .mail_message .message_top .small_message_icon_box {
		width: 36px;
		height: 36px;
	}
	#mail_messages .mail_message .message_top .small_message_icon {
		width: 20px;
		height: 20px;
	}
	#mail_messages .mail_message .message_top .small_sender {
		flex: 1;
		font-size: var(--text-sm, 14px);
		order: 1;
	}
	#mail_messages .mail_message .message_top .small_date {
		font-size: var(--text-xs, 12px);
		order: 2;
	}
	#mail_messages .mail_message .message_top .small_subject {
		flex: 0 0 100%;
		order: 3;
		padding-inline-start: calc(36px + var(--space-4, 16px));
		padding-inline-end: 0;
		margin-top: var(--space-1, 4px);
		font-size: var(--text-sm, 14px);
	}
	#mail_messages .mail_message_expanded .message_bottom { padding: var(--space-4, 16px); }
	#mail_messages .message_bottom .message_icons {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2, 8px);
		padding-bottom: var(--space-3, 12px);
		margin-bottom: var(--space-4, 16px);
	}
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close {
		padding: var(--space-3, 12px) var(--space-5, 20px);
		font-size: var(--text-sm, 14px);
	}

	/* Secondary pages */
	.secondary_main {
		width: 100%;
		padding: 0 var(--space-4, 16px);
		border-inline-end: none;
	}
	.secondary_sidebar {
		display: none;
	}

	/* Pillar content */
	.pillar-content .toc ul {
		grid-template-columns: 1fr;
	}
	.pillar-content .comparison-table {
		font-size: 0.85rem;
	}
	.pillar-content .comparison-table th,
	.pillar-content .comparison-table td {
		padding: 0.5rem;
	}
	.pillar_sidebar {
		display: block;
		margin-top: 2rem;
	}

	/* About page stats */
	.about-stats-box {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Phones: clear spacing between the ad banner and the tool */
@media (max-width: 767px) {
	#banner_ad {
		min-height: 380px;
		margin-bottom: var(--space-6, 24px);
	}

	.top_banner_ad {
		overflow: hidden;
		margin-bottom: var(--space-4, 16px);
	}

	.mail_section {
		margin-top: var(--space-8, 32px);
		padding: 0 var(--space-3, 12px);
	}

	.mail_top_row {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: var(--space-5, 20px);
		gap: var(--space-3, 12px);
	}

	/* Phones: the display spans show the address and can break at the @; the
	   input is visually hidden but stays focused and selected so Ctrl+C and the
	   panel-wide copy keep working. Floor raised to 24px, the timer digits' floor,
	   so nothing on the tool stage outweighs the address. */
	#main_content .mail_section #mail_address {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	#main_content .mail_section .mail_address_display {
		display: block;
		font-size: clamp(1.5rem, 0.6rem + 2.4vw, 2rem);
		/* One line reserved while the display is empty (loading), so the timer
		   row does not shift when the address arrives. Under 480px this grows
		   to two lines, where every production address breaks at the @. */
		min-height: calc(1.15em + var(--space-4, 16px) + 2px);
	}

	/* The shimmer bar is one address line tall, so it takes the phone floor too. */
	#main_content .mail_section .mail_address.address-loading::before {
		font-size: clamp(1.5rem, 0.6rem + 2.4vw, 2rem);
	}

	.mail_top_row.address-compact {
		padding-inline: var(--space-2, 8px);
	}

	/* Phones: the toast sits above the home indicator instead of over the header
	   controls. Never over the ad slot: the slot is above the panel being tapped. */
	.ux-toast {
		top: auto;
		bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
		inset-inline: var(--space-4, 16px);
		text-align: center;
		transform: translateY(20px);
	}
	.ux-toast.show {
		transform: translateY(0);
	}
	.ux-toast.hide {
		transform: translateY(20px);
	}
}

@media (max-width: 640px) {
	.related-grid {
		grid-template-columns: 1fr;
	}

	.tldr-box {
		padding: 1rem;
	}
}

@media (max-width: 900px) {
	.footer-grid-compact {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5, 20px);
	}
}

@media (max-width: 600px) {
	footer {
		padding: var(--space-6, 24px) var(--space-4, 16px);
	}

	.footer-grid-compact {
		grid-template-columns: 1fr;
		gap: var(--space-4, 16px);
		text-align: center;
	}

	.footer-column {
		align-items: center;
	}

	.footer-column .btc_wallet_address {
		max-width: 280px;
	}

	.footer-trust-bar {
		flex-direction: column;
		gap: 4px;
	}

	.footer-trust-bar .trust-divider {
		display: none;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.content {
		width: 100%;
	}

	/* Language select */
	header .language #language_btn #locales {
		min-width: 120px;
		padding: 8px 32px 8px 32px;
		font-size: 13px;
	}
	header .language #language_btn::before {
		inset-inline-start: 10px;
		width: 14px;
		height: 14px;
	}
	header .language #language_btn::after {
		inset-inline-end: 10px;
		width: 8px;
		height: 8px;
	}

	/* Toast */
	.ux-toast {
		inset-inline: 10px;
		font-size: 14px;
		padding: 12px 16px;
	}

	/* Address panel */
	.mail_top_row {
		padding: var(--space-4, 16px);
		border-radius: var(--radius-lg, 12px);
	}
	.mail_bottom_row {
		margin-top: var(--space-3, 12px);
		gap: var(--space-3, 12px);
	}
	#main_content .mail_section .mail_address {
		width: 100%;
	}
	#main_content .mail_section .mail_address_display {
		letter-spacing: var(--tracking-wide, 0.015em);
		/* Two lines reserved: every production address breaks at the @ on a
		   phone, so the timer row does not shift when the address arrives. */
		min-height: calc(2 * 1.15em + var(--space-4, 16px) + 2px);
	}

	/* Inbox count */
	.inbox_count {
		padding: var(--space-2, 8px) var(--space-3, 12px);
		min-width: auto;
	}

	/* Timer */
	#countdown {
		padding: var(--space-2, 8px) var(--space-3, 12px);
	}
	#get_more_time {
		width: 100%;
		max-width: 280px;
		min-width: auto;
	}

	/* Session expired overlay */
	.expired-content {
		padding: var(--space-8, 32px) var(--space-5, 20px);
	}
	.expired-title {
		font-size: var(--text-2xl, 24px);
	}
	.refresh-session-btn {
		width: 100%;
		padding: 14px 24px;
		font-size: 16px;
	}

	/* Empty state */
	.inbox-empty-state { padding: var(--space-12, 48px) var(--space-5, 20px); }
	.empty-state-icon {
		width: 100px;
		height: 100px;
		margin-bottom: var(--space-6, 24px);
	}
	.empty-state-title { font-size: var(--text-xl, 20px); }
	.empty-state-subtitle { font-size: var(--text-sm, 14px); }

	/* Message list */
	#mail_messages .mail_message {
		width: 98%;
		margin-inline-start: 2px;
		margin-bottom: var(--space-3, 12px);
		border-radius: var(--radius-md, 8px);
	}
	#mail_messages .mail_message:first-of-type { margin-top: var(--space-3, 12px); }
	#mail_messages .message_top {
		height: auto;
	}
	#mail_messages .mail_message .message_top .small_subject {
		display: block;
		margin-inline-start: 10px;
	}
	#mail_messages .mail_message .message_top .small_date {
		margin-inline-start: 10px;
	}
	#mail_messages .message_bottom .message_icons {
		margin-bottom: 20px;
	}
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close {
		flex: 1;
		justify-content: center;
		min-width: 100px;
	}
	#mail_messages .mail_message .message_bottom .forward_message_address {
		width: 90%;
		max-width: none;
	}

	/* Explanation */
	#main_content .explanation {
		margin-bottom: 32px;
		width: 95%;
		padding: 24px 20px;
	}
	#main_content .explanation h2 {
		font-size: 26px;
	}
	#main_content .explanation h3 {
		font-size: 18px;
		margin-bottom: 20px;
	}
	#main_content .explanation p {
		font-size: 15px;
		line-height: 1.7;
	}
	#main_content .explanation strong {
		font-size: 16px;
	}

	/* Footer */
	footer {
		padding: var(--space-10, 40px) var(--space-5, 20px) var(--space-6, 24px);
	}
	footer .content > p:first-child {
		font-size: 13px;
		margin-bottom: 25px;
		padding-bottom: 25px;
	}
	.btc_wallet_address {
		max-width: 90%;
	}

	/* Secondary pages */
	.privacy_main {
		padding-bottom: 60px;
	}
}

/* 375px-class phones */
@media (max-width: 400px) {
	.mail_section {
		margin-top: var(--space-6, 24px);
		padding: 0 var(--space-2, 8px);
	}

	#banner_ad {
		margin-bottom: var(--space-3, 12px);
	}

	.mail_top_row {
		padding: var(--space-3, 12px);
		gap: var(--space-2, 8px);
	}

	#main_content #copy_address {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	.inbox_count .mail_icon {
		width: 24px;
		height: 18px;
	}
}

/* 320px-class phones */
@media (max-width: 360px) {
	.mail_section {
		padding: 0 var(--space-1, 4px);
	}

	.mail_top_row {
		padding: var(--space-2, 8px);
		gap: var(--space-1-5, 6px);
	}

	#main_content .mail_section .mail_address_display {
		padding: var(--space-1, 4px) 0;
		min-height: calc(2 * 1.15em + var(--space-2, 8px) + 2px);
	}

	#main_content #copy_address {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}
}

/* ============================================
   17. REDUCED MOTION
   Every animation and transition in this file
   is disabled here.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.ux-toast,
	#copy_address,
	#get_more_time,
	.refresh-session-btn,
	.message_top,
	.mail_top_row,
	#main_content #copy_address,
	#main_content .mail_section #mail_address,
	#main_content .mail_section .mail_address_display,
	.inbox_count,
	#inbox_count_number,
	#mail_messages .mail_message,
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close {
		transition: none;
		animation: none;
	}

	.mail_top_row::before,
	#main_content .mail_section .mail_address.address-loading::before,
	#main_content #copy_address.copy-success,
	#inbox_count_number.highlight,
	.expired-content,
	.radar-sweep,
	.radar-ring,
	.envelope-icon,
	.empty-state-icon,
	#mail_messages .mail_message_expanded .message_bottom {
		animation: none;
	}

	.radar-ring {
		opacity: 0.5;
	}

	.mail_top_row:hover,
	#main_content #copy_address:hover,
	#get_more_time:hover,
	.refresh-session-btn:hover,
	#mail_messages .mail_message:hover,
	#mail_messages .message_bottom .message_reply:hover,
	#mail_messages .message_bottom .message_forward:hover,
	#mail_messages .message_bottom .message_close:hover,
	footer a:hover,
	.footer-column a:hover,
	.sidebar_try_it:hover {
		transform: none;
	}

	/* Countdown timer */
	.counter_colon span { animation: none; opacity: 1; }
	#countdown.timer-state-danger .counter_number { animation: none; }
	#countdown.timer-state-danger .counter_number::after { animation: none; opacity: 1; }
	#countdown.timer-state-danger .counter_colon span { animation: none; opacity: 1; }
	#main_content .mail_section .counter_number {
		transition: color 0.01ms, box-shadow 0.01ms, transform 0.01ms, background 0.01ms;
	}
}