/* MeetMind dashboard - a calm, professional workspace.
   Neutral slate surfaces and text, one restrained blue accent for actions and
   recording, a muted violet for the assistant passes. IBM Plex Sans carries the
   display type, Inter the interface. Plain CSS, no framework and no build step,
   and no glow, no scanlines and no neon anywhere.

   Sections: 1 tokens · 2 base · 3 buttons · 4 badges/chips · 5 fields ·
   6 toasts · 7 auth · 8 shell/sidebar · 9 switcher/views · 10 chat/lists ·
   11 live · 12 dock · 13 review · 14 animation · 15 responsive · 25 guide ·
   26 account mark + locked brief · 27 full-window shell height */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
	/* surfaces - neutral slate, deliberately not pure black */
	--bg: #14161a;
	--panel: #1a1d22;
	--panel-2: #1f232a;
	--elevated: #262b33;
	--hover: #2a2f38;
	--well: #17191e;

	/* lines */
	--border: #2c313a;
	--border-soft: #23272f;
	--border-strong: #3d4451;

	/* text */
	--text: #e9ebef;
	--text-2: #a8afba;
	--text-3: #767e8b;

	/* the primary accent - a professional blue. The --neon names are kept so all
	   the markup and JS that already reference them keep working; the colour they
	   resolve to is what changed. */
	--neon: #4d7cfe;
	--neon-bright: #7c9cff;
	--neon-deep: #3b62db;
	--neon-soft: rgba(77, 124, 254, 0.1);
	--neon-line: rgba(77, 124, 254, 0.34);
	/* kept as a token so every box-shadow that used it still parses - it is
	   simply transparent now */
	--neon-glow: transparent;

	/* the assistant passes - a muted violet, never green */
	--acid: #9c8cf0;
	--acid-soft: rgba(156, 140, 240, 0.12);
	--acid-line: rgba(156, 140, 240, 0.32);

	/* signals */
	--rec: #e5484d;
	--rec-soft: rgba(229, 72, 77, 0.12);
	--warn: #d99a2b;
	--warn-soft: rgba(217, 154, 43, 0.12);

	/* names the old markup/JS still expects */
	--accent: var(--neon);
	--accent-soft: var(--neon-soft);
	--live: var(--neon);
	--live-soft: var(--neon-soft);
	--ai: var(--acid);
	--ai-soft: var(--acid-soft);

	/* type - IBM Plex Sans for headings, Inter for the interface text */
	--font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
	/* Urdu only - the transcript panes use this face (section 28), the interface
	   itself stays on the two families above */
	--font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', serif;
	--font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

	/* shape */
	--r-sm: 6px;
	--r: 8px;
	--r-lg: 12px;
	--r-pill: 999px;

	/* depth + light - flat surfaces, no glow anywhere */
	--shadow: 0 22px 48px -34px rgba(0, 0, 0, 0.85);
	--shadow-sm: 0 10px 24px -20px rgba(0, 0, 0, 0.8);
	/* the glow tokens are kept so existing declarations still parse, but they no
	   longer draw anything: a transparent shadow is a no-op */
	--glow-sm: 0 0 0 0 transparent;
	--glow: 0 0 0 0 transparent;
	--ring: 0 0 0 3px rgba(77, 124, 254, 0.25);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* the document renders at --zoom (see BASE, section 2): this one number
	   re-scales the whole dashboard, and section 27 divides it back out so the
	   shell still fills the window */
	--zoom: 0.8;
}

/* ============================================================
   2. BASE
   ============================================================ */
* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

/*
 * The design is tuned at 80% browser zoom, so the document itself renders at
 * 80% - layout, spacing and type together - instead of shrinking the text alone.
 * Change this one number to re-scale the whole dashboard.
 */
html {
	zoom: var(--zoom);
}

/* the `hidden` attribute must win over display rules like .view { display: flex } */
[hidden] {
	display: none !important;
}

/* subtle neutral wash - no neon haze, no scanlines, no grid */
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg) fixed;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

.auth-screen,
.app {
	position: relative;
	z-index: 1;
}

::selection {
	background: var(--neon);
	color: #ffffff;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #363c47;
	border-radius: 8px;
	border: 3px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--border-strong);
	background-clip: content-box;
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

/* a link is a component (sidebar item, button, switcher tab), never a raw
   underlined browser link - the currentColor of its own rules wins */
a,
a:visited {
	color: inherit;
	text-decoration: none;
}

/* the only links that should read as links are the ones inside prose */
.hint a,
.config-note a,
.config-warning a,
.steps a {
	color: var(--neon-bright);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--neon-line);
}
.hint a:hover,
.config-note a:hover,
.config-warning a:hover,
.steps a:hover {
	color: var(--neon);
	border-bottom-color: var(--neon);
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* keyboard users get a neon ring, mouse users do not */
:focus-visible {
	outline: 2px solid var(--neon);
	outline-offset: 2px;
	border-radius: 6px;
}

p {
	margin: 0 0 10px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.muted {
	color: var(--text-2);
}

.empty {
	text-align: center;
	padding: 30px 18px;
	color: var(--text-3);
}

.hint {
	font-size: 11px;
	color: var(--text-3);
	margin: 8px 0 0;
	line-height: 1.6;
}

.hint code {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--acid);
	background: var(--acid-soft);
	border: 1px solid var(--acid-line);
	border-radius: 5px;
	padding: 1px 5px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid var(--border);
	background: var(--panel-2);
	color: var(--text);
	transition: background 0.16s, border-color 0.16s, box-shadow 0.2s var(--ease), transform 0.12s var(--ease), color 0.16s;
	white-space: nowrap;
}
.btn:hover {
	background: var(--hover);
	border-color: var(--border-strong);
	transform: translateY(-1px);
}
.btn:active {
	transform: translateY(0) scale(0.985);
}
.btn svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.btn.primary {
	background: var(--neon);
	border-color: var(--neon);
	color: #ffffff;
}
.btn.primary:hover {
	background: var(--neon-bright);
	border-color: var(--neon-bright);
}

/* the recording action - one flat accent, no halo */
.btn.live {
	background: var(--neon);
	border-color: var(--neon);
	color: #ffffff;
}
.btn.live:hover {
	background: var(--neon-bright);
	border-color: var(--neon-bright);
}

.btn.danger {
	background: var(--rec-soft);
	border-color: rgba(229, 72, 77, 0.4);
	color: #ff9ba0;
}
.btn.danger:hover {
	background: rgba(229, 72, 77, 0.18);
	border-color: rgba(229, 72, 77, 0.65);
}

.btn.ai {
	background: var(--acid-soft);
	border-color: var(--acid-line);
	color: #b7aaf7;
}
.btn.ai:hover {
	background: rgba(156, 140, 240, 0.2);
	border-color: rgba(156, 140, 240, 0.55);
}

.btn.ghost {
	background: transparent;
	border-color: transparent;
	color: var(--text-2);
}
.btn.ghost:hover {
	background: var(--neon-soft);
	border-color: var(--neon-line);
	color: var(--neon-bright);
}

.btn.second {
	background: var(--panel-2);
	border-color: var(--border);
	color: var(--text);
}

.btn.sm {
	padding: 6px 11px;
	font-size: 12px;
	border-radius: 8px;
}
.btn.sm svg {
	width: 12px;
	height: 12px;
}

.btn:disabled,
.btn[aria-disabled='true'] {
	opacity: 0.42;
	pointer-events: none;
	filter: saturate(0.4);
}

/* ============================================================
   4. BADGES / CHIPS
   ============================================================ */
.badge {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: var(--r-pill);
	background: var(--acid-soft);
	color: var(--acid);
	border: 1px solid var(--acid-line);
	white-space: nowrap;
}
.badge.live {
	background: var(--neon-soft);
	color: var(--neon-bright);
	border-color: var(--neon-line);
}
.badge.muted {
	background: rgba(168, 175, 186, 0.1);
	color: var(--text-3);
	border-color: var(--border);
}
.badge.warn {
	background: var(--warn-soft);
	color: #e2b463;
	border-color: rgba(217, 154, 43, 0.34);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ============================================================
   5. FIELDS
   ============================================================ */
.field {
	margin-bottom: 15px;
}
.field:last-child {
	margin-bottom: 0;
}
.field label,
.field .field-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 7px;
}
.field input[type='text'],
.field input[type='email'],
.field input[type='password'],
.field input[type='number'],
.field input:not([type]),
.field textarea,
.field select {
	width: 100%;
	background: var(--well);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: 10px 12px;
	font-size: 13px;
	color: var(--text);
	transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
	resize: vertical;
}
.field input[readonly] {
	color: var(--text-3);
	background: rgba(255, 255, 255, 0.012);
}
.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
		linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 32px;
	cursor: pointer;
}
.field input:hover,
.field textarea:hover,
.field select:hover {
	border-color: var(--border-strong);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: none;
	border-color: var(--neon-line);
	box-shadow: var(--ring);
	background: #071012;
}
.field input::placeholder,
.field textarea::placeholder {
	color: #5c636e;
}

.row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* ============================================================
   6. TOASTS
   ============================================================ */
.toasts {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 340px;
	max-width: calc(100vw - 36px);
	pointer-events: none;
}
.toast {
	position: relative;
	pointer-events: auto;
	padding: 11px 30px 11px 14px;
	border-radius: var(--r);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text);
	background: rgba(10, 17, 20, 0.94);
	border: 1px solid var(--border);
	border-left: 3px solid var(--neon);
	box-shadow: var(--shadow);
	backdrop-filter: blur(14px);
	animation: toast-in 0.32s var(--ease) both;
	cursor: pointer;
}
.toast::after {
	content: '×';
	position: absolute;
	top: 7px;
	right: 11px;
	font-size: 13px;
	color: var(--text-3);
}
.toast:hover {
	border-color: var(--border-strong);
}
.toast.error {
	border-left-color: var(--rec);
}
.toast.ok {
	border-left-color: var(--neon);
}

/* ============================================================
   7. AUTH
   ============================================================ */
.auth-screen {
	height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}
.auth-card {
	position: relative;
	width: 100%;
	max-width: 404px;
	padding: 30px 30px 28px;
	border-radius: var(--r-lg);
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	animation: rise 0.5s var(--ease) both;
}
.auth-card .brand {
	padding: 0 0 22px;
}
.auth-card h1 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.auth-hint {
	margin: 0 0 20px;
	color: var(--text-2);
	font-size: 12.5px;
}
.auth-card form .btn {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

/* ============================================================
   8. APP SHELL + SIDEBAR
   ============================================================ */
.app {
	display: grid;
	grid-template-columns: 274px 1fr;
	height: 100vh;
	transition: grid-template-columns 0.24s var(--ease);
}

.sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--panel);
	border-right: 1px solid var(--border-soft);
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 18px 16px 16px;
}
.brand-mark {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: var(--neon);
}
.brand-text {
	flex: 1;
	min-width: 0;
}
.brand-text b {
	display: block;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.brand-text span {
	display: block;
	font-size: 10px;
	color: var(--text-3);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.side-toggle {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	border: 1px solid transparent;
	color: var(--text-3);
	transition: 0.16s;
}
.side-toggle svg {
	width: 15px;
	height: 15px;
}
.side-toggle:hover {
	color: var(--neon-bright);
	background: var(--neon-soft);
	border-color: var(--neon-line);
}

.new-meeting {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 2px 14px 16px;
	padding: 11px 14px;
	border-radius: var(--r);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: var(--neon);
	transition: background 0.16s;
}
.new-meeting:hover {
	background: var(--neon-bright);
}
.new-meeting svg {
	width: 15px;
	height: 15px;
}

.side-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 10px 12px;
	scrollbar-gutter: stable;
}

.side-group {
	margin-bottom: 20px;
}
.side-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 8px;
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-3);
}
.side-label em {
	font-style: normal;
	color: var(--neon-deep);
}

.mtg-item {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 10px 9px 12px;
	margin-bottom: 2px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background 0.14s, border-color 0.14s, transform 0.14s var(--ease);
}
.mtg-item:hover {
	background: var(--hover);
	border-color: var(--border-soft);
	transform: translateX(1px);
}
.mtg-item.active {
	background: var(--neon-soft);
	border-color: var(--neon-line);
}
.mtg-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	bottom: 9px;
	width: 2px;
	border-radius: 2px;
	background: var(--neon);
}
.mtg-top {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 3px;
}
.mtg-dot {
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-radius: 50%;
	background: var(--text-3);
}
.mtg-dot.live {
	background: var(--neon);
	box-shadow: 0 0 0 3px var(--neon-soft);
}
.mtg-dot.paused {
	background: var(--warn);
	box-shadow: 0 0 0 3px var(--warn-soft);
}
.mtg-dot.done {
	background: #5c6470;
}
.mtg-dot.ai {
	background: var(--acid);
	box-shadow: 0 0 0 3px var(--acid-soft);
}
.mtg-dot.err {
	background: var(--rec);
	box-shadow: 0 0 0 3px var(--rec-soft);
}
.mtg-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mtg-meta {
	display: flex;
	gap: 6px;
	padding-left: 13px;
	font-size: 10.5px;
	color: var(--text-3);
}

.side-foot {
	border-top: 1px solid var(--border-soft);
	padding: 14px 16px 16px;
	background: rgba(4, 8, 10, 0.5);
}
.quota-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.quota-head b {
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-2);
}
.quota-head span {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}
.quota-bar {
	height: 5px;
	border-radius: 3px;
	background: #2a2f38;
	overflow: hidden;
}
.quota-fill {
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--neon);
	transition: width 0.4s var(--ease);
}
.quota-bar.is-over .quota-fill {
	background: linear-gradient(90deg, var(--warn), var(--rec));
}
.quota-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
	font-size: 10.5px;
	color: var(--text-3);
}

.user {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border-soft);
}
.avatar {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	color: #ffffff;
	background: var(--neon);
}
.user-info {
	flex: 1;
	min-width: 0;
}
.user-info b {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.user-info span {
	display: block;
	font-size: 10.5px;
	color: var(--text-3);
}

/* ============================================================
   9. MAIN / SWITCHER / VIEWS
   ============================================================ */
.main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.switcher {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 10px 24px;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(20, 22, 26, 0.72);
	backdrop-filter: blur(14px);
}
.switch-track {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	border-radius: 11px;
	background: var(--well);
	border: 1px solid var(--border-soft);
}
.switch-track label,
.switch-track a {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 15px;
	border-radius: 8px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-3);
	cursor: pointer;
	transition: 0.16s;
	text-decoration: none;
}
.switch-track label i,
.switch-track a i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	font-style: normal;
}
.switch-track label:hover,
.switch-track a:hover {
	color: var(--text-2);
}
.switch-track label.is-active,
.switch-track a.is-active {
	background: var(--neon-soft);
	color: var(--neon-bright);
	box-shadow: inset 0 0 0 1px var(--neon-line);
}
.switch-track label.is-active i,
.switch-track a.is-active i {
	background: var(--neon);
	opacity: 1;
}
.switcher-note {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 11px;
	color: var(--text-3);
}
.switcher-note #switcher-meeting {
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-2);
}
.switcher-note kbd,
.kbd-group kbd {
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: 3px 6px;
	color: var(--text-2);
}
.kbd-group {
	display: inline-flex;
	gap: 3px;
}
.kbd-group + .kbd-group {
	padding-left: 10px;
	border-left: 1px solid var(--border-soft);
}

.view {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	animation: view-in 0.34s var(--ease) both;
}
.view-setup,
.view-review,
.view-planning,
.view-admin,
.view-guide {
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* the live view never scrolls as a whole - the AI pane and transcript do.
   `position: relative` anchors the one-tap capture gate over the whole view. */
.view-live {
	overflow: hidden;
	position: relative;
}
.setup-wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 32px 64px;
}
/* the Setup page is one narrow column: a name, a prompt, then two buttons */
.setup-wrap-narrow,
.setup-form {
	max-width: 760px;
}
.setup-form textarea {
	min-height: 280px;
	line-height: 1.7;
}

.page-head {
	margin-bottom: 26px;
}
.page-head h1 {
	margin: 0 0 7px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.page-head p {
	margin: 0;
	max-width: 74ch;
	color: var(--text-2);
	font-size: 13.5px;
}

.setup-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}
/* a page whose second list is hidden (the member Guide) keeps one full column */
.setup-grid.is-single {
	grid-template-columns: 1fr;
}

.card {
	position: relative;
	border-radius: var(--r-lg);
	padding: 20px;
	background: var(--panel);
	border: 1px solid var(--border-soft);
}
.card:hover {
	border-color: var(--border);
}
.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}
.card-head h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text);
}
.card-head h3 svg {
	width: 15px;
	height: 15px;
	color: var(--neon);
}

/* ============================================================
   10. CHAT + LISTS (planner, plans, users)
   ============================================================ */
.chat {
	max-height: 268px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px;
	margin-bottom: 12px;
	border-radius: var(--r);
	background: var(--well);
	border: 1px solid var(--border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.msg {
	display: flex;
	gap: 10px;
	margin-bottom: 13px;
	animation: rise 0.3s var(--ease) both;
}
.msg:last-child {
	margin-bottom: 0;
}
.msg-av {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: grid;
	place-items: center;
	border-radius: 7px;
	font-family: var(--font-display);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.msg.ai .msg-av {
	color: var(--acid);
	background: var(--acid-soft);
	border: 1px solid var(--acid-line);
}
.msg.me .msg-av {
	color: var(--neon-bright);
	background: var(--neon-soft);
	border: 1px solid var(--neon-line);
}
.msg-bubble {
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--text-2);
	white-space: pre-wrap;
	word-break: break-word;
}
.msg.me .msg-bubble {
	color: var(--text);
}

.chat-input {
	display: flex;
	gap: 8px;
}
.chat-input input {
	flex: 1;
	min-width: 0;
	padding: 10px 13px;
	border-radius: var(--r-sm);
	background: var(--well);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 13px;
	transition: border-color 0.16s, box-shadow 0.16s;
}
.chat-input input::placeholder {
	color: #5c636e;
}
.chat-input input:focus {
	outline: none;
	border-color: var(--neon-line);
	box-shadow: var(--ring);
}
.chat-input input:disabled {
	opacity: 0.55;
}
.chat-send {
	width: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	color: #ffffff;
	background: var(--neon);
	transition: background 0.14s;
}
.chat-send:hover {
	background: var(--neon-bright);
}
.chat-send svg {
	width: 16px;
	height: 16px;
}

.plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* the saved role prompt, shown read-only on the Planner page */
.role-preview {
	padding: 14px;
	border-radius: var(--r);
	background: var(--well);
	border: 1px solid var(--border);
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-word;
}

.setup-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
}

.list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.list li button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.014);
	border: 1px solid var(--border-soft);
	color: inherit;
	font-weight: 600;
	transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.list li button:hover {
	background: var(--hover);
	border-color: var(--border);
	transform: translateX(1px);
}
.list li button.is-active {
	background: linear-gradient(90deg, var(--neon-soft), transparent 80%);
	border-color: var(--neon-line);
	box-shadow: inset 2px 0 0 var(--neon);
}
.list li.muted {
	padding: 12px;
	font-size: 12.5px;
	font-weight: 400;
}
.list .row-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 400;
	color: var(--text-3);
}

/* ============================================================
   11. LIVE MEETING - bar, AI pane
   ============================================================ */
.meeting-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	flex: 0 0 auto;
	padding: 13px 24px;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(8, 14, 17, 0.78);
	backdrop-filter: blur(14px);
}
.mb-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.rec-dot {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	background: var(--rec);
	animation: pulse 1.9s ease-in-out infinite;
}
.rec-dot.is-paused {
	background: var(--warn);
	animation: none;
	box-shadow: 0 0 0 4px var(--warn-soft);
}
.rec-dot.is-idle {
	background: #4a5260;
	animation: none;
}
.mb-title {
	max-width: 300px;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ff9ba0;
	background: var(--rec-soft);
	border: 1px solid rgba(229, 72, 77, 0.32);
}
.status-pill.is-paused {
	color: #e2b463;
	background: var(--warn-soft);
	border-color: rgba(217, 154, 43, 0.32);
}
.status-pill.is-idle {
	color: var(--text-3);
	background: rgba(168, 175, 186, 0.1);
	border-color: var(--border);
}
.timer {
	padding: 4px 10px;
	border-radius: 8px;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--neon-bright);
	background: var(--well);
	border: 1px solid var(--border-soft);
}
.mb-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.preview-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 360px;
	overflow: hidden;
	padding: 6px 13px 6px 10px;
	border-radius: var(--r-pill);
	background: var(--neon-soft);
	border: 1px solid var(--neon-line);
}
.preview-chip .pc-label {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--neon);
}
.preview-chip .pc-text {
	font-size: 12px;
	color: #cdd2da;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	direction: rtl;
}
.preview-chip.is-off {
	background: var(--rec-soft);
	border-color: rgba(229, 72, 77, 0.3);
	box-shadow: none;
}
.preview-chip.is-off .pc-label {
	color: var(--rec);
}
.preview-chip.is-off .pc-text {
	color: #ffb9bf;
}

.live-body {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.ai-pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: rgba(255, 255, 255, 0.012);
}

.ai-tabs {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
	padding: 14px 24px 0;
	border-bottom: 1px solid var(--border-soft);
	overflow-x: auto;
}
.ai-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 10px 10px 0 0;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
	white-space: nowrap;
	transition: color 0.16s, background 0.16s;
}
.ai-tab:hover {
	color: var(--text-2);
}
.ai-tab.is-active {
	color: var(--neon-bright);
	background: var(--panel-2);
}
.ai-tab.is-active::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--neon);
}
.ai-tab .count {
	font-size: 9.5px;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	background: rgba(168, 175, 186, 0.12);
	color: var(--text-3);
}
.ai-tab.is-active .count {
	background: var(--neon-soft);
	color: var(--neon-bright);
}

.ai-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 24px 34px;
}
.ai-inner {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
}
.ai-pane-body {
	animation: rise 0.3s var(--ease) both;
}
.ai-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	font-size: 11px;
	color: var(--text-3);
	border-bottom: 1px solid var(--border-soft);
}
.ai-meta .dot-live {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--neon);
	box-shadow: 0 0 0 3px var(--neon-soft);
}
.ai-meta .dot-live.is-idle {
	background: #4a5260;
	box-shadow: none;
}
.ai-meta .spacer {
	flex: 1;
}
.ai-meta b {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acid);
}

/* ---------------- AI pane content ---------------- */

.sum-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sum-list li {
	position: relative;
	padding: 13px 16px 13px 34px;
	margin-bottom: 9px;
	border-radius: var(--r);
	font-size: 14px;
	line-height: 1.7;
	color: #d5d9e0;
	background: rgba(255, 255, 255, 0.018);
	border: 1px solid var(--border-soft);
	transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease);
}
.sum-list li:hover {
	background: rgba(255, 255, 255, 0.032);
	border-color: var(--border);
	transform: translateX(2px);
}
.sum-list li::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 21px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--neon);
}
.sum-list li.new {
	border-color: var(--neon-line);
	background: var(--neon-soft);
	animation: rise 0.4s var(--ease) both;
}
.sum-list li b {
	color: var(--text);
	font-weight: 650;
}
.sum-list li .ts {
	display: block;
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-3);
}

.q-card {
	position: relative;
	padding: 16px 18px;
	margin-bottom: 11px;
	border-radius: var(--r);
	background: var(--panel-2);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease), box-shadow 0.24s;
}
.q-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--acid), transparent);
	opacity: 0.7;
}
.q-card:hover {
	border-color: var(--acid-line);
	background: var(--elevated);
	transform: translateY(-1px);
}
.q-text {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	color: #e0f2ea;
}
.q-foot {
	display: flex;
	align-items: center;
	gap: 8px;
}
.q-tag {
	padding: 3px 9px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
	background: rgba(168, 175, 186, 0.1);
	border: 1px solid var(--border);
}
.q-tag.follow {
	color: var(--acid);
	background: var(--acid-soft);
	border-color: var(--acid-line);
}
.q-foot .spacer {
	flex: 1;
}

.transcript-line {
	display: flex;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.75;
	color: #d5d9e0;
	border: 1px solid transparent;
	transition: background 0.16s;
}
.transcript-line:nth-child(odd) {
	background: rgba(255, 255, 255, 0.016);
}
.transcript-line:hover {
	background: rgba(255, 255, 255, 0.035);
}
.transcript-line .ts {
	flex: 0 0 54px;
	padding-top: 4px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-3);
}
.transcript-line .text {
	flex: 1;
	min-width: 0;
}
.transcript-line.interim {
	color: var(--text-3);
	font-style: italic;
	border-color: var(--border-soft);
	border-style: dashed;
}
.speaker-tag {
	display: inline-flex;
	align-items: center;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 6px;
	font-family: var(--font-display);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	vertical-align: 1px;
}
.speaker-tag.s1 {
	color: var(--neon-bright);
	background: var(--neon-soft);
}
.speaker-tag.s2 {
	color: var(--acid);
	background: var(--acid-soft);
}
.speaker-tag.s3 {
	color: #e2b463;
	background: var(--warn-soft);
}
.speaker-tag.s4 {
	color: #ff9ba0;
	background: var(--rec-soft);
}
.speaker-tag.you {
	color: #7fe6ff;
	background: rgba(90, 216, 255, 0.12);
}

.empty-icon {
	width: 50px;
	height: 50px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	background: var(--panel-2);
	border: 1px solid var(--border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.empty-icon svg {
	width: 22px;
	height: 22px;
	color: var(--neon-deep);
}
.empty h4 {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
}
.empty p {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 12.5px;
	line-height: 1.6;
}

.thinking {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	padding-top: 16px;
	font-size: 12px;
	color: var(--text-3);
	border-top: 1px solid var(--border-soft);
}
.thinking .dots {
	display: flex;
	gap: 4px;
}
.thinking .dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--neon);
	animation: dot 1.2s ease-in-out infinite;
}
.thinking .dots i:nth-child(2) {
	animation-delay: 0.15s;
}
.thinking .dots i:nth-child(3) {
	animation-delay: 0.3s;
}

.ai-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 9px;
	padding: 14px 24px;
	border-top: 1px solid var(--border-soft);
	background: rgba(20, 22, 26, 0.72);
	backdrop-filter: blur(12px);
}
.ai-actions-inner {
	display: flex;
	gap: 9px;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
}
.ai-actions .btn {
	flex: 1;
	justify-content: center;
}

/* ============================================================
   12. BOTTOM DOCK - mic, transport, cost
   ============================================================ */
.dock {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	flex: 0 0 auto;
	padding: 13px 24px;
	border-top: 1px solid var(--border-soft);
	background: rgba(20, 22, 26, 0.88);
	backdrop-filter: blur(16px);
}

.mic {
	display: flex;
	align-items: center;
	gap: 12px;
	/* fixed footprint: the bars animate inside it and the readout has its own
	   reserved width, so nothing here reflows while recording */
	width: 430px;
	flex: 0 0 430px;
	min-width: 0;
}
.mic-icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--neon-soft);
	border: 1px solid var(--neon-line);
}
.mic-icon svg {
	width: 16px;
	height: 16px;
	color: var(--neon);
}

.mic-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 32px;
	/* the bars grow/shrink inside this box and must never push the siblings */
	flex: 0 0 auto;
	width: 52px;
	overflow: hidden;
}
.mic-bars i {
	display: block;
	width: 4px;
	height: 10%;
	border-radius: 2px;
	background: var(--neon);
	transition: height 0.08s linear;
}
.mic-bars.is-idle i {
	background: #3a4049;
	box-shadow: none;
	height: 10%;
}

.mic-info {
	/* wide enough for the longest hint ("Too quiet. Move closer to the mic.") so
	   the dock never reflows as the hint and dB readout change every frame */
	width: 252px;
	flex: 1 1 252px;
	min-width: 0;
}
.mic-level {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.mic-level b {
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
	/* the label swaps between "not recording", "audible", "too quiet" and
	   "no sound"; pinning the slot stops the dB readout from sliding around */
	flex: 0 0 auto;
	min-width: 84px;
	white-space: nowrap;
}
.mic-level b.ok {
	color: var(--neon);
}
.mic-level b.quiet {
	color: var(--warn);
}
.mic-level b.silent {
	color: var(--rec);
}
.mic-level span {
	margin-left: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-3);
	/* tabular figures keep "-45.2" from being narrower than "-100.0" */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	flex: 0 0 auto;
	min-width: 68px;
	text-align: right;
	white-space: nowrap;
}
.mic-scale {
	position: relative;
	height: 5px;
	border-radius: 3px;
	background: linear-gradient(90deg, #3a4049 0%, #3a4049 12%, var(--neon-deep) 42%, var(--neon) 68%, var(--acid) 100%);
	opacity: 0.92;
}
.mic-scale .marker {
	position: absolute;
	top: -3.5px;
	left: 0;
	width: 3px;
	height: 12px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}
.mic-hint {
	margin-top: 5px;
	font-size: 10px;
	color: var(--text-3);
	/* the text swaps between four messages of different lengths; a fixed height
	   (plus one-line clipping) means the dock never grows or shrinks */
	height: 14px;
	line-height: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.transport {
	display: flex;
	align-items: center;
	gap: 8px;
}
.t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--panel-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.2s, transform 0.12s var(--ease);
}
.t-btn:hover {
	color: var(--text);
	border-color: var(--border-strong);
	transform: translateY(-1px);
}
.t-btn svg {
	width: 15px;
	height: 15px;
}
.t-btn:disabled {
	opacity: 0.34;
	pointer-events: none;
}
.t-btn.pause:hover {
	color: var(--warn);
	border-color: rgba(217, 154, 43, 0.5);
}
.t-btn.play:hover {
	color: var(--neon);
	border-color: var(--neon-line);
}
.t-btn.end {
	width: auto;
	padding: 0 16px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ff9ba0;
	background: var(--rec-soft);
	border-color: rgba(229, 72, 77, 0.36);
}
.t-btn.end:hover {
	color: #fff;
	background: rgba(229, 72, 77, 0.24);
}
.t-btn.end svg {
	width: 13px;
	height: 13px;
}

.cost {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 300px;
	margin-left: auto;
}
.cost-figures {
	text-align: right;
}
.cost-min {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	color: var(--neon-bright);
}
.cost-min small {
	margin-left: 3px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--text-3);
	text-shadow: none;
}
.cost-rate {
	font-size: 10.5px;
	color: var(--text-3);
}
.cost-bar-wrap {
	flex: 1;
	min-width: 118px;
}
.cost-bar {
	height: 6px;
	border-radius: 4px;
	background: #2a2f38;
	overflow: hidden;
}
.cost-fill {
	position: relative;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: var(--neon);
	transition: width 0.4s var(--ease);
}
.cost-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shimmer 2.6s linear infinite;
}
.cost-bar.is-over .cost-fill {
	background: linear-gradient(90deg, var(--warn), var(--rec));
}
.cost-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 10px;
	color: var(--text-3);
}

/* ============================================================
   13. REVIEW
   ============================================================ */
.review-wrap {
	width: 100%;
	max-width: 1060px;
	margin: 0 auto;
	padding: 30px 32px 64px;
}

.ended-banner {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 18px 20px;
	margin-bottom: 22px;
	border-radius: var(--r-lg);
	background: var(--neon-soft);
	border: 1px solid var(--neon-line);
	overflow: hidden;
}
.ended-banner::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--neon-line);
}
.ended-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--neon-soft);
	border: 1px solid var(--neon-line);
}
.ended-icon svg {
	width: 20px;
	height: 20px;
	color: var(--neon);
}
.ended-info {
	flex: 1;
	min-width: 200px;
}
.ended-info h2 {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 600;
}
.ended-info p {
	margin: 0;
	font-size: 12.5px;
	color: var(--text-2);
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
.stat {
	position: relative;
	padding: 14px 16px;
	border-radius: var(--r);
	background: linear-gradient(180deg, rgba(17, 28, 32, 0.7), rgba(9, 15, 18, 0.85));
	border: 1px solid var(--border-soft);
	transition: border-color 0.18s, transform 0.18s var(--ease);
}
.stat:hover {
	border-color: var(--neon-line);
	transform: translateY(-1px);
}
.stat-label {
	margin-bottom: 7px;
	font-family: var(--font-display);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}
.stat-value {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	color: var(--neon-bright);
}
.stat-value small {
	margin-left: 3px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	color: var(--text-3);
	text-shadow: none;
}

.ver-tabs {
	display: flex;
	gap: 4px;
	width: fit-content;
	padding: 4px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: var(--well);
	border: 1px solid var(--border-soft);
}
.ver-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 9px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	transition: 0.16s;
}
.ver-tab:hover {
	color: var(--text-2);
}
.ver-tab.is-active {
	color: var(--neon-bright);
	background: var(--neon-soft);
	box-shadow: inset 0 0 0 1px var(--neon-line);
}
.ver-tab .mini {
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 8.5px;
	letter-spacing: 0.06em;
	color: var(--text-3);
	background: rgba(168, 175, 186, 0.12);
}
.ver-tab.is-active .mini {
	color: var(--acid);
	background: var(--acid-soft);
}

.review-card {
	margin-bottom: 18px;
	border-radius: var(--r-lg);
	background: var(--panel);
	border: 1px solid var(--border-soft);
	overflow: hidden;
}
.review-card-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.012);
}
.review-card-head h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text);
}
.review-card-head h3 svg {
	width: 14px;
	height: 14px;
	color: var(--neon);
}
.review-card-head .spacer {
	flex: 1;
}
.review-card-body {
	padding: 20px;
	max-height: 480px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gem-transcript p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.95;
	color: #d5d9e0;
	white-space: pre-wrap;
	word-break: break-word;
}
.gem-transcript p:last-child {
	margin-bottom: 0;
}

.summary-block {
	display: flex;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid var(--border-soft);
}
.summary-block:first-child {
	padding-top: 0;
}
.summary-block:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
.sb-num {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	color: #ffffff;
	background: var(--neon);
}
.sb-body {
	flex: 1;
	min-width: 0;
}
.sb-body h4 {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}
.sb-body p {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--text-2);
	white-space: pre-wrap;
	word-break: break-word;
}

.action-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.action-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-2);
	border-bottom: 1px solid var(--border-soft);
}
.action-list li:first-child {
	padding-top: 0;
}
.action-list li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
.action-list b {
	color: var(--text);
	font-weight: 650;
}
.checkbox {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1.5px solid #4a5260;
	transition: border-color 0.16s, box-shadow 0.16s;
}
.action-list li:hover .checkbox {
	border-color: var(--neon-line);
}

.review-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}

/* ============================================================
   14. ANIMATION
   ============================================================ */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes view-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateX(18px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55);
		opacity: 1;
	}
	50% {
		box-shadow: 0 0 0 7px rgba(229, 72, 77, 0);
		opacity: 0.72;
	}
}
@keyframes dot {
	0%,
	60%,
	100% {
		opacity: 0.3;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}
@keyframes shimmer {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(100%);
	}
}

/* ============================================================
   15. DESKTOP + RESPONSIVE
   ============================================================ */

/* --- the collapsed sidebar rail (JS toggles .is-collapsed, `[` shortcut) --- */
.app.is-collapsed {
	grid-template-columns: 78px 1fr;
}
.app.is-collapsed .brand {
	justify-content: center;
	gap: 6px;
	padding: 16px 0 14px;
}
.app.is-collapsed .brand .side-toggle {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}
.app.is-collapsed .brand-text,
.app.is-collapsed .new-meeting span,
.app.is-collapsed .side-label em,
.app.is-collapsed .mtg-meta,
.app.is-collapsed .mtg-name,
.app.is-collapsed .user-info,
.app.is-collapsed .quota-head span,
.app.is-collapsed .quota-foot,
.app.is-collapsed .quota-bar {
	display: none;
}
.app.is-collapsed .side-toggle svg {
	transform: rotate(180deg);
}
.app.is-collapsed .side-label {
	justify-content: center;
	padding: 0 4px;
	font-size: 8px;
	letter-spacing: 0.02em;
	overflow: hidden;
	white-space: nowrap;
}
.app.is-collapsed .new-meeting {
	margin: 2px 14px 16px;
	padding: 11px 0;
}
.app.is-collapsed .new-meeting svg {
	width: 17px;
	height: 17px;
}
.app.is-collapsed .mtg-item {
	display: grid;
	place-items: center;
	padding: 11px 0;
}
.app.is-collapsed .mtg-top {
	justify-content: center;
	margin: 0;
}
.app.is-collapsed .mtg-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
}
.app.is-collapsed .user {
	justify-content: center;
}
.app.is-collapsed .side-foot {
	padding: 14px 12px;
}

/* --- big desktop screens get more room and a wider rail --- */
@media (min-width: 1360px) {
	.app {
		grid-template-columns: 290px 1fr;
	}
	.setup-wrap {
		max-width: 1220px;
		padding: 36px 40px 72px;
	}
	.review-wrap {
		max-width: 1140px;
		padding: 34px 40px 72px;
	}
	.dock {
		gap: 30px;
		padding: 14px 32px;
	}
	.meeting-bar,
	.switcher {
		padding-inline: 32px;
	}
	.ai-body {
		padding: 30px 32px 38px;
	}
	.ai-tabs,
	.ai-actions {
		padding-inline: 32px;
	}
}

@media (min-width: 1700px) {
	.setup-wrap {
		max-width: 1320px;
	}
	.review-wrap {
		max-width: 1240px;
	}
}

/* --- short laptop screens: keep the dock and the panes visible --- */
@media (max-height: 760px) {
	.setup-wrap,
	.review-wrap {
		padding-top: 22px;
	}
	.card {
		padding: 16px;
	}
	.ai-body {
		padding-top: 18px;
	}
	.chat {
		max-height: 200px;
	}
}

@media (max-width: 1180px) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1000px) {
	.app {
		grid-template-columns: 78px 1fr;
	}
	.brand {
		justify-content: center;
		gap: 6px;
		padding: 16px 0 14px;
	}
	.brand-text,
	.new-meeting span,
	.side-label em,
	.mtg-meta,
	.mtg-name,
	.user-info,
	.quota-head span,
	.quota-foot,
	.quota-bar {
		display: none;
	}
	.side-toggle {
		display: none;
	}
	.side-label {
		justify-content: center;
		padding: 0 4px;
		font-size: 8px;
		letter-spacing: 0.02em;
		overflow: hidden;
		white-space: nowrap;
	}
	.new-meeting {
		margin: 2px 14px 16px;
		padding: 11px 0;
	}
	.new-meeting svg {
		width: 17px;
		height: 17px;
	}
	.mtg-item {
		display: grid;
		place-items: center;
		padding: 11px 0;
	}
	.mtg-top {
		justify-content: center;
		margin: 0;
	}
	.mtg-dot {
		width: 8px;
		height: 8px;
		flex: 0 0 8px;
	}
	.user {
		justify-content: center;
	}
	.side-foot {
		padding: 14px 12px;
	}
}

@media (max-width: 900px) {
	.setup-grid {
		grid-template-columns: 1fr;
	}
	.dock {
		gap: 16px;
	}
	/* the desktop dock reserves a fixed mic footprint; on narrow screens it may
	   shrink so the transport buttons stay reachable */
	.mic {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
	.mic-info {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
	.cost {
		min-width: 0;
		width: 100%;
		margin-left: 0;
	}
	.ai-actions-inner {
		flex-direction: column;
	}
	.ai-actions .btn {
		flex: none;
		width: 100%;
	}
	.row-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.app {
		grid-template-columns: 1fr;
	}
	.sidebar {
		display: none;
	}
	.setup-wrap,
	.review-wrap {
		padding: 20px 16px 54px;
	}
	.meeting-bar,
	.dock,
	.ai-tabs,
	.ai-actions {
		padding-inline: 16px;
	}
	.ai-body {
		padding: 20px 16px 28px;
	}
	.preview-chip {
		display: none;
	}
	.stats {
		grid-template-columns: 1fr 1fr;
	}
	.mb-title {
		max-width: 150px;
	}
	.transport {
		order: 3;
	}
	.mic {
		flex: 1;
		min-width: 0;
	}
	.switcher-note {
		display: none;
	}
	.switcher {
		padding-inline: 14px;
	}
}









/* ============================================================
   24. CONFIGURATION, RECORDING NOTICE, CAPTURE GATE
   (multi-page shell: /settings.html, the sign-in page and the
   banner every page shows while another page records)
   ============================================================ */

.view-settings {
	overflow-y: auto;
	overscroll-behavior: contain;
}

.config-block {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
}
.config-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.config-head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
}

.config-note {
	padding: 10px 12px;
	border-radius: var(--r-md, 10px);
	border: 1px solid var(--border-soft);
	background: var(--well);
	margin-bottom: 12px;
}
.config-note p {
	margin: 0;
	font-size: 12.5px;
	color: var(--text-2);
}
.config-note.warn {
	border-color: rgba(255, 176, 61, 0.4);
	background: rgba(255, 176, 61, 0.07);
}
.config-note.info {
	border-color: var(--border);
}
.config-note.ok {
	border-color: var(--neon-line);
	background: var(--neon-soft);
}
.config-note code {
	font-size: 11.5px;
}

.config-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.config-row {
	padding: 11px 12px;
	border-radius: var(--r-md, 10px);
	border: 1px solid var(--border-soft);
	background: var(--panel-2);
}
.config-name {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}
.config-name code {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--text);
}
.config-purpose {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--text-3);
}
.config-fix {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 9px;
}
.config-cmd {
	flex: 1;
	min-width: 220px;
	font-size: 11.5px;
	padding: 6px 9px;
	border-radius: 8px;
	background: var(--well);
	border: 1px solid var(--border-soft);
	color: var(--acid, var(--neon-bright));
	overflow-x: auto;
	white-space: nowrap;
}

.config-setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-soft);
	font-size: 12.5px;
	color: var(--text-2);
}
.config-setting:last-child {
	border-bottom: 0;
}
.config-setting b {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--text);
	text-align: right;
	word-break: break-word;
}
.config-setting b.ok {
	color: var(--neon-bright);
}
.config-setting b.muted {
	color: var(--text-3);
}

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

.config-warning {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
	padding: 9px 11px;
	border-radius: 10px;
	border: 1px solid rgba(255, 176, 61, 0.34);
	background: rgba(255, 176, 61, 0.07);
	font-size: 11.5px;
	color: var(--text-2);
}
.config-warning span {
	color: var(--text-3);
	word-break: break-word;
}

/* the banner that tells every other page that the Live view is recording */
.recording-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 9px 24px;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(229, 72, 77, 0.1);
	font-size: 12.5px;
	color: var(--text-2);
}
.recording-notice b {
	color: var(--text);
}
.recording-notice .rec-dot {
	flex: 0 0 auto;
}
.recording-notice .btn {
	margin-left: auto;
	flex: 0 0 auto;
}

/* the one-tap gate a browser needs when it keeps the AudioContext suspended */
.capture-gate {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: grid;
	place-items: center;
	background: rgba(4, 8, 10, 0.78);
	backdrop-filter: blur(6px);
}
.capture-gate-card {
	max-width: 420px;
	padding: 24px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--panel);
	box-shadow: var(--shadow-lg, var(--shadow-sm));
	text-align: center;
}
.capture-gate-card h3 {
	margin: 0 0 8px;
	font-size: 15px;
}
.capture-gate-card p {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--text-2);
}

.capture-note {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 0 auto;
	padding: 9px 24px;
	border-bottom: 1px solid rgba(217, 154, 43, 0.34);
	background: rgba(217, 154, 43, 0.08);
	font-size: 12.5px;
	color: var(--text-2);
}
.capture-note b {
	color: var(--warn, #d99a2b);
}

/* ============================================================
   25. GUIDE (numbered steps + shortcut keys)
   ============================================================ */

.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.steps > li {
	position: relative;
	padding: 0 0 14px 34px;
	counter-increment: step;
}
.steps > li:last-child {
	padding-bottom: 0;
}
.steps > li::before {
	content: counter(step);
	position: absolute;
	top: 1px;
	left: 0;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--neon-line);
	background: var(--neon-soft);
	font-family: var(--font-display);
	font-size: 9.5px;
	font-weight: 600;
	color: var(--neon-bright);
}
.steps b {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}
.steps span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-2);
}
.steps span b {
	display: inline;
	font-size: inherit;
	color: var(--text);
}
.steps code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--well);
	border: 1px solid var(--border-soft);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--acid);
}

.guide-keys {
	margin-top: 18px;
}
.key-list {
	display: grid;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-2);
}
.key-list > div {
	display: flex;
	align-items: center;
	gap: 11px;
}
.key-list .kbd-group {
	flex: 0 0 54px;
}

/* ============================================================
   26. ACCOUNT MARK + LOCKED BRIEF
   ============================================================ */

/* the human glyph in the footer account block */
.avatar svg {
	width: 16px;
	height: 16px;
}
/* the header's second line is the account's email, so it stays mixed case */
#brand-sub {
	text-transform: none;
	letter-spacing: 0.02em;
}

/* a brief that is frozen because the meeting has already started */
.is-locked {
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.02);
	border-color: var(--border);
	color: var(--text-2);
}
.hint.warn {
	color: var(--warn);
}

/* ============================================================
   27. LIST PAGING · CAPTURE OPTIONS · MIC PERMISSION
   ============================================================ */

/* the sidebar keeps only the newest few meetings until this is pressed */
.side-more {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px dashed var(--border);
	background: transparent;
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
	transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.side-more:hover {
	color: var(--neon-bright);
	border-color: var(--neon-line);
	background: var(--neon-soft);
}

/* the tab-audio opt-in above the dock: the screen picker is only ever asked for
   when this is ticked, so an in-person meeting never sees it */
.capture-options {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 9px 24px;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.012);
}
.share-toggle {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-2);
	cursor: pointer;
}
.share-toggle input {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	accent-color: var(--neon-deep);
	cursor: pointer;
}
.share-toggle:hover {
	color: var(--text);
}

/* "allowed / asks first / blocked" for the microphone, in the dock */
.mic-perm {
	margin-bottom: 6px;
}
.perm-chip {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border);
	color: var(--text-3);
	white-space: nowrap;
}
.perm-chip.ok {
	color: var(--neon-bright);
	border-color: var(--neon-line);
	background: var(--neon-soft);
}
.perm-chip.warn {
	color: #e2b463;
	border-color: rgba(217, 154, 43, 0.34);
	background: var(--warn-soft);
}

/* ============================================================
   28. AI MARKDOWN (what richText() renders)
   ============================================================ */

/* Every model answer is markdown, so the blocks it produces have to sit calmly
   inside the pane / bubble / summary card they land in. The component lists
   (.sum-list, .action-list) keep their own look - hence the :not() guards. */
.ai-pane-body h4,
.msg-bubble h4,
.sb-body h4 {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}
.ai-pane-body p,
.msg-bubble p,
.sb-body p {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--text-2);
	word-break: break-word;
}
.ai-pane-body p:last-child,
.msg-bubble p:last-child {
	margin-bottom: 0;
}
.ai-pane-body ul:not(.sum-list):not(.action-list),
.ai-pane-body ol:not(.sum-list):not(.action-list),
.msg-bubble ul,
.msg-bubble ol,
.sb-body ul,
.sb-body ol,
.gem-transcript ul,
.gem-transcript ol {
	margin: 0 0 8px;
	padding-left: 20px;
}
.ai-pane-body ul:not(.sum-list):not(.action-list) li,
.ai-pane-body ol:not(.sum-list):not(.action-list) li,
.msg-bubble li,
.sb-body li,
.gem-transcript li {
	margin-bottom: 4px;
}
.ai-pane-body code,
.msg-bubble code,
.sb-body code,
.gem-transcript code {
	padding: 1px 5px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border-soft);
	font-family: var(--font-mono);
	font-size: 0.92em;
	color: var(--neon-bright);
}
.ai-pane-body blockquote,
.msg-bubble blockquote,
.sb-body blockquote,
.gem-transcript blockquote {
	margin: 0 0 8px;
	padding: 2px 0 2px 12px;
	border-left: 2px solid var(--acid-line);
	color: var(--text-3);
}
.ai-pane-body hr,
.msg-bubble hr,
.sb-body hr,
.gem-transcript hr {
	margin: 12px 0;
	border: none;
	border-top: 1px solid var(--border);
}
.ai-pane-body i,
.msg-bubble i,
.sb-body i,
.gem-transcript i {
	font-style: italic;
	color: var(--text-2);
}
.ai-pane-body b,
.msg-bubble b,
.sb-body b,
.gem-transcript b {
	font-weight: 650;
	color: var(--text);
}
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ============================================================
   27. FULL-WINDOW SHELL HEIGHT

   `html { zoom: var(--zoom) }` in section 2 scales everything the root paints,
   but viewport units are resolved against the viewport *before* that scaling, so
   a `height: 100vh` shell only reached `--zoom` of the way down and the page
   background showed underneath it - a black band under the dashboard that
   `body { overflow: hidden }` could never scroll into view. Dividing the zoom
   back out keeps `.app` and `.auth-screen` flush with the bottom edge.
   Browsers without `zoom` keep the plain viewport height, because a 125vh box
   there would overflow the window instead.
   ============================================================ */
@supports (zoom: 0.8) {
	.app,
	.auth-screen {
		height: calc(100vh / var(--zoom));
	}
}

/* ============================================================
   28. URDU TYPE + THE PRODUCT MARK

   The interface stays IBM Plex Sans + Inter. Only the transcript panes get
   the Urdu face: they hold Urdu (or Urdu with English words transliterated into
   Urdu script), and Nastaliq needs the extra line-height or its descenders clip
   against the line below. The summary and question panes are English, and are
   deliberately left alone.

   `.brand-logo` is `public/logo.jpg` and it has a transparent background, so it
   fills the `.brand-mark` tile on its own and the tile's accent colour shows
   through. No fallback glyph sits behind it: a letter or the human silhouette
   tucked underneath would bleed through the transparency and read as a second,
   overlapping mark.
   ============================================================ */
[lang="ur"],
[dir="rtl"],
.gem-transcript,
#pane-transcript {
	font-family: var(--font-urdu);
	line-height: 2.05;
}

.brand-mark {
	position: relative;
	overflow: hidden;
}
.brand-logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ============================================================
   29. USAGE TABLES

   One row per billed session and one per AI call on /usage.html. Compact on
   purpose: the page is read top to bottom, so the numbers line up in fixed
   columns instead of being scattered through prose.
   ============================================================ */
.usage-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}
.usage-table th {
	padding: 0 12px 8px 0;
	border-bottom: 1px solid var(--border);
	font-family: var(--font-display);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	text-align: left;
	white-space: nowrap;
}
.usage-table td {
	padding: 9px 12px 9px 0;
	border-bottom: 1px solid var(--border-soft);
	color: var(--text-2);
	vertical-align: top;
}
.usage-table tr:last-child td {
	border-bottom: none;
}
.usage-table td:first-child {
	color: var(--text);
	white-space: nowrap;
}
.usage-table .badge {
	margin-left: 6px;
}