*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

.ftr-body {
	margin: 0;
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-base);
	line-height: 1.55;
	color: var(--ft-fg);
	background: var(--ft-cream);
	-webkit-font-smoothing: antialiased;
}

.ftr-eyebrow {
	font-family: var(--ft-font-body);
	font-weight: 600;
	font-size: var(--ft-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ft-orange-700);
	margin: 0 0 var(--ft-space-2);
}

/* ---------- message page (errors, missing link) ---------- */

.ftr-body--message {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ft-cream);
	padding: var(--ft-space-5);
}
.ftr-message-card {
	max-width: 440px;
	background: var(--ft-paper);
	border: var(--ft-border);
	border-radius: var(--ft-radius-lg);
	box-shadow: var(--ft-shadow-md);
	padding: var(--ft-space-7);
	text-align: center;
}
.ftr-message-card__logo {
	height: 26px;
	width: auto;
	margin: 0 auto var(--ft-space-5);
	display: block;
}
.ftr-message-card h1 {
	font-family: var(--ft-font-display);
	font-weight: 500;
	font-size: var(--ft-text-2xl);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ft-space-3);
}
/* Card sits on a light (paper) ground, so the accent period uses the
   WCAG-AA orange, not the full brand orange reserved for dark grounds. */
.ftr-message-card h1 .ftr-dot { color: var(--ft-orange-700); }
.ftr-message-card p { color: var(--ft-fg-muted); margin: 0; }
.ftr-message-card__home {
	display: inline-block;
	margin-top: var(--ft-space-5);
	font-size: var(--ft-text-sm);
	color: var(--ft-fg-subtle);
}
.ftr-message-card__home:hover { color: var(--ft-orange-700); }

/* ---------- welcome overlay ---------- */

.ftr-welcome {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ft-teal-deep);
	color: var(--ft-fg-on-dark);
	animation: ftr-welcome-out var(--ft-dur-slow) var(--ft-ease-out) 1.6s forwards;
}
.ftr-welcome__inner { text-align: center; }
.ftr-welcome .ftr-eyebrow { color: var(--ft-cream); }
.ftr-welcome h1 {
	font-family: var(--ft-font-display);
	font-weight: 500;
	font-size: var(--ft-text-3xl);
	letter-spacing: -0.01em;
	margin: 0;
}
.ftr-welcome h1 em { font-style: italic; }
.ftr-welcome h1 .ftr-dot { color: var(--ft-orange); }
@keyframes ftr-welcome-out {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- app shell layout ---------- */

.ftr-app {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.ftr-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ft-space-4);
	padding: var(--ft-space-3) var(--ft-space-5);
	background: var(--ft-paper);
	border-bottom: var(--ft-border);
}
.ftr-topbar__brand { display: flex; align-items: center; gap: var(--ft-space-3); min-width: 0; flex: 1; }
.ftr-topbar__logo { height: 22px; width: auto; display: block; flex-shrink: 0; }
.ftr-topbar__title { display: flex; flex-direction: column; min-width: 0; }
.ftr-topbar__title .ftr-eyebrow { margin: 0; white-space: nowrap; }
.ftr-topbar__title strong {
	font-family: var(--ft-font-display);
	font-weight: 500;
	font-size: var(--ft-text-lg);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ftr-topbar__controls { display: flex; align-items: center; gap: var(--ft-space-3); flex-shrink: 1; min-width: 0; }

.ftr-studio-tag {
	font-family: var(--ft-font-body);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ft-fg-subtle);
	background: var(--ft-cream-2);
	border: var(--ft-border);
	border-radius: var(--ft-radius-pill);
	padding: 4px 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ftr-topbar__nav { display: flex; align-items: center; gap: var(--ft-space-3); flex-shrink: 1; min-width: 0; }
.ftr-topbar__navlink {
	font-family: var(--ft-font-body);
	font-weight: 600;
	font-size: var(--ft-text-sm);
	color: var(--ft-fg-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40vw;
}
.ftr-topbar__navlink:hover { color: var(--ft-orange-700); text-decoration: underline; }

#ftr-send-control .ftr-btn { padding: 6px 12px; font-size: var(--ft-text-sm); white-space: nowrap; }
#ftr-send-btn {
	box-shadow: var(--ft-shadow-orange);
}
#ftr-send-btn:hover { box-shadow: none; }

.ftr-select {
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-sm);
	padding: 6px 10px;
	border: var(--ft-border-strong);
	border-radius: var(--ft-radius-sm);
	background: var(--ft-paper);
	color: var(--ft-fg);
	min-width: 0;
	flex-shrink: 1;
	max-width: 45vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ftr-pill {
	font-size: var(--ft-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: var(--ft-radius-pill);
	white-space: nowrap;
	flex-shrink: 0;
}
.ftr-pill--active { background: var(--ft-orange-50); color: var(--ft-orange-700); }
.ftr-pill--frozen { background: var(--ft-cream-2); color: var(--ft-ink-3); }
.ftr-pill--sent { background: var(--ft-cream-2); color: var(--ft-success); }

/* This breakpoint must stay AFTER the unqualified .ftr-select/.ftr-pill rules
   above: equal specificity means source order decides, and an override
   declared earlier than the rule it's meant to override is silently lost. */
@media (max-width: 480px) {
	/* Three-plus controls (round select + send button + status pill) don't
	   all fit on one line next to the brand at this width without crushing
	   the logo/title to nothing. Stack brand and controls as two full-width
	   rows instead, and let the controls row itself wrap if it still needs to. */
	.ftr-topbar { flex-wrap: wrap; padding: var(--ft-space-2) var(--ft-space-3); gap: var(--ft-space-2); }
	.ftr-topbar__brand { flex: 1 1 100%; }
	.ftr-topbar__logo { height: 16px; }
	.ftr-topbar__title .ftr-eyebrow { font-size: 10px; letter-spacing: 0.1em; }
	.ftr-topbar__title strong { font-size: var(--ft-text-sm); max-width: 60vw; }
	.ftr-pill { font-size: 10px; padding: 3px 6px; letter-spacing: 0.03em; }
	.ftr-topbar__controls { flex: 1 1 100%; flex-wrap: wrap; gap: var(--ft-space-2); }
	.ftr-select { max-width: 45vw; font-size: 12px; padding: 5px 6px; }
	.ftr-topbar__nav { gap: var(--ft-space-2); }
	.ftr-topbar__navlink { max-width: 40vw; font-size: 12px; }
	.ftr-topbar__navlink--dashboard { display: none; }
	#ftr-send-control .ftr-btn { padding: 5px 8px; font-size: 12px; }
	.ftr-studio-tag { font-size: 9px; padding: 3px 7px; letter-spacing: 0.05em; }
}

.ftr-main {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 0;
	min-height: 0;
}
@media (max-width: 900px) {
	.ftr-main { grid-template-columns: 1fr; }
}

.ftr-canvas-wrap {
	overflow-y: auto;
	padding: var(--ft-space-6) var(--ft-space-6) var(--ft-space-9);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ft-space-6);
	background: var(--ft-cream-2);
}
@media (max-width: 600px) {
	.ftr-canvas-wrap { padding: var(--ft-space-4) var(--ft-space-3) var(--ft-space-7); }
}

.ftr-page {
	position: relative;
	background: var(--ft-paper);
	box-shadow: var(--ft-shadow-md);
	border-radius: var(--ft-radius-sm);
	max-width: 100%;
	cursor: crosshair;
	line-height: 0;
}
.ftr-page canvas,
.ftr-page img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ft-radius-sm);
	pointer-events: none;
}
.ftr-page__number {
	position: absolute;
	bottom: -28px;
	left: 0;
	font-size: var(--ft-text-xs);
	color: var(--ft-fg-subtle);
	line-height: 1;
}

.ftr-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ft-orange-700);
	color: var(--ft-fg-on-orange);
	border: 2px solid var(--ft-paper);
	box-shadow: var(--ft-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ft-font-body);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--ft-dur-fast) var(--ft-ease);
}
.ftr-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.ftr-pin--done { background: var(--ft-ink-4); opacity: 0.55; }
.ftr-pin--selected { outline: 3px solid var(--ft-teal-light); outline-offset: 2px; }

.ftr-pin-composer {
	position: absolute;
	z-index: 10;
	width: 260px;
	background: var(--ft-paper);
	border: var(--ft-border);
	border-radius: var(--ft-radius-md);
	box-shadow: var(--ft-shadow-lg);
	padding: var(--ft-space-3);
}
.ftr-pin-composer textarea {
	width: 100%;
	min-height: 64px;
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-sm);
	border: var(--ft-border-strong);
	border-radius: var(--ft-radius-sm);
	padding: var(--ft-space-2);
	resize: vertical;
}
.ftr-pin-composer__actions { display: flex; justify-content: flex-end; gap: var(--ft-space-2); margin-top: var(--ft-space-2); }

/* ---------- sidebar ---------- */

.ftr-sidebar {
	border-left: var(--ft-border);
	background: var(--ft-paper);
	display: flex;
	flex-direction: column;
	min-height: 0;
}
@media (max-width: 900px) {
	.ftr-sidebar { border-left: none; border-top: var(--ft-border); }
}

.ftr-sidebar__header {
	padding: var(--ft-space-4) var(--ft-space-5) var(--ft-space-3);
	border-bottom: var(--ft-border);
}
.ftr-sidebar__header h2 {
	font-family: var(--ft-font-display);
	font-weight: 500;
	font-size: var(--ft-text-lg);
	margin: 0 0 var(--ft-space-3);
}
.ftr-filters { display: flex; gap: var(--ft-space-2); }
.ftr-filter {
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-sm);
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--ft-radius-pill);
	border: var(--ft-border-strong);
	background: var(--ft-paper);
	color: var(--ft-fg-muted);
	cursor: pointer;
}
.ftr-filter[aria-pressed="true"] {
	background: var(--ft-orange-700);
	border-color: var(--ft-orange-700);
	color: var(--ft-fg-on-orange);
}

.ftr-threads {
	flex: 1;
	overflow-y: auto;
	padding: var(--ft-space-4) var(--ft-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-4);
}
.ftr-threads__empty { color: var(--ft-fg-subtle); font-size: var(--ft-text-sm); }

.ftr-thread {
	border: var(--ft-border);
	border-radius: var(--ft-radius-md);
	padding: var(--ft-space-3);
	scroll-margin-top: 90px;
}
.ftr-thread--selected { border-color: var(--ft-teal-light); box-shadow: 0 0 0 1px var(--ft-teal-light); }
.ftr-thread--done { opacity: 0.6; }
.ftr-thread__head { display: flex; align-items: center; gap: var(--ft-space-2); margin-bottom: var(--ft-space-2); }
.ftr-thread__badge {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--ft-orange-700); color: var(--ft-fg-on-orange);
	font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.ftr-thread--done .ftr-thread__badge { background: var(--ft-ink-4); }
.ftr-thread__meta { font-size: var(--ft-text-xs); color: var(--ft-fg-subtle); }
.ftr-thread__status {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: var(--ft-radius-pill);
}
.ftr-thread__status--open { background: var(--ft-orange-50); color: var(--ft-orange-700); }
.ftr-thread__status--done { background: var(--ft-cream-2); color: var(--ft-ink-3); }

.ftr-comment { margin: 0 0 var(--ft-space-2); }
.ftr-comment__author { font-weight: 600; font-size: var(--ft-text-sm); }
.ftr-comment__time { font-size: 11px; color: var(--ft-fg-subtle); margin-left: 6px; }
.ftr-comment__body { font-size: var(--ft-text-sm); margin: 2px 0 0; }

.ftr-thread__reply { display: flex; flex-direction: column; gap: var(--ft-space-2); margin-top: var(--ft-space-3); }
.ftr-thread__reply textarea {
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-sm);
	border: var(--ft-border-strong);
	border-radius: var(--ft-radius-sm);
	padding: var(--ft-space-2);
	min-height: 48px;
	resize: vertical;
}
.ftr-thread__actions { display: flex; gap: var(--ft-space-2); }

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

.ftr-btn {
	font-family: var(--ft-font-body);
	font-weight: 600;
	font-size: var(--ft-text-sm);
	border-radius: var(--ft-radius-sm);
	padding: 8px 14px;
	border: var(--ft-border-strong);
	background: var(--ft-paper);
	color: var(--ft-fg);
	cursor: pointer;
	transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease);
}
.ftr-btn:hover { background: var(--ft-cream-2); }
.ftr-btn--primary {
	background: var(--ft-orange-700);
	border-color: var(--ft-orange-700);
	color: var(--ft-fg-on-orange);
}
.ftr-btn--primary:hover { background: var(--ft-orange-600); }
.ftr-btn--quiet { border-color: transparent; background: transparent; color: var(--ft-fg-muted); }
.ftr-btn:focus-visible, .ftr-filter:focus-visible, .ftr-pin:focus-visible {
	outline: 2px solid var(--ft-teal-light);
	outline-offset: 2px;
}

.ftr-toast {
	position: fixed;
	bottom: var(--ft-space-5);
	left: 50%;
	transform: translateX(-50%);
	background: var(--ft-ink);
	color: var(--ft-fg-on-dark);
	padding: 10px 18px;
	border-radius: var(--ft-radius-md);
	font-size: var(--ft-text-sm);
	box-shadow: var(--ft-shadow-lg);
	z-index: 200;
}

/* ---------- send confirmation splash ---------- */

.ftr-splash {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ft-teal-deep);
	color: var(--ft-fg-on-dark);
	padding: var(--ft-space-5);
	text-align: center;
}
.ftr-splash[hidden] { display: none; }
.ftr-splash__inner { max-width: 440px; }
.ftr-splash__logo { height: 26px; width: auto; margin: 0 auto var(--ft-space-6); display: block; }
.ftr-splash .ftr-eyebrow { color: var(--ft-cream); }
.ftr-splash h1 {
	font-family: var(--ft-font-display);
	font-weight: 500;
	font-size: var(--ft-text-3xl);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ft-space-4);
}
.ftr-splash h1 .ftr-dot { color: var(--ft-orange); }
.ftr-splash__sub {
	font-family: var(--ft-font-body);
	font-size: var(--ft-text-md);
	line-height: 1.5;
	color: var(--ft-fg-on-dark);
	opacity: 0.82;
	margin: 0 0 var(--ft-space-6);
}
.ftr-splash .ftr-btn--primary {
	padding: 12px 26px;
	font-size: var(--ft-text-base);
}
body.ftr-splash-open { overflow: hidden; }
@media (max-width: 480px) {
	.ftr-splash h1 { font-size: var(--ft-text-2xl); }
	.ftr-splash__sub { font-size: var(--ft-text-sm); }
	.ftr-splash__logo { height: 20px; }
}

.ftr-loading, .ftr-error-banner {
	padding: var(--ft-space-6);
	text-align: center;
	color: var(--ft-fg-muted);
}
.ftr-error-banner { color: var(--ft-danger); }