/* ── Brain · AXIS ─────────────────────────────────────────────────────── */
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }

body {
	background: #000000;
	color: var(--ink);
	font: 14px/1.55 -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.br-root {
	flex: 1;
	display: flex;
	overflow: hidden;
	min-height: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.br-side {
	width: 240px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #141414;
	background: #080808;
	overflow: hidden;
}
.br-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #141414;
}
.br-side-title {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4a4a4a;
}
.br-side-new {
	background: #161616;
	border: 1px solid #222222;
	color: #7b7b7b;
	border-radius: 7px;
	padding: 5px 11px;
	font-size: 12px;
	cursor: pointer;
	transition: all var(--duration-fast);
}
.br-side-new:hover { background: #1d1d1d; color: #b0b0b0; }

.br-sessions {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.br-sess {
	padding: 9px 12px;
	border-radius: 9px;
	cursor: pointer;
	font-size: 12.5px;
	color: #7b7b7b;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid transparent;
	transition: all var(--duration-fast);
	margin-bottom: 2px;
}
.br-sess:hover { background: #0e0e0e; color: #b0b0b0; }
.br-sess.active { background: #151515; color: #dde0f0; border-color: #222222; }
.br-sess-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.br-sess-del {
	background: none;
	border: none;
	color: #4a4a4a;
	cursor: pointer;
	padding: 2px 4px;
	font-size: 14px;
	border-radius: 4px;
	opacity: 0;
	transition: all var(--duration-instant);
	line-height: 1;
}
.br-sess:hover .br-sess-del { opacity: 1; }
.br-sess-del:hover { color: #ff7070; }
.br-empty {
	padding: 24px 14px;
	text-align: center;
	color: #3d3d3d;
	font-size: 12.5px;
	line-height: 1.7;
}

/* ── Sidebar: persona section ────────────────────────────────────────────── */
.br-side-persona {
	border-top: 1px solid #141414;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.br-side-persona-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4a4a4a;
}
.br-persona-mini {
	background: #0e0e0e;
	border: 1px solid var(--bg-1);
	border-radius: 9px;
	padding: 10px;
	font-size: 12px;
	color: #8a8a8a;
	line-height: 1.5;
	display: none;
}
.br-persona-mini.has-persona { display: block; }
.br-persona-mini-tone { color: #cccccc; font-weight: 600; margin-bottom: 4px; }
.br-persona-mini-style { color: #ffffff; font-size: 11px; }
.br-persona-mini-clear {
	background: none;
	border: none;
	color: #4a4a4a;
	font-size: 11px;
	cursor: pointer;
	padding: 2px;
	margin-top: 4px;
}
.br-persona-mini-clear:hover { color: #ff7070; }

/* ── Main body ───────────────────────────────────────────────────────────── */
.br-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

/* ── Top bar with tabs ───────────────────────────────────────────────────── */
.br-topbar {
	display: flex;
	align-items: center;
	gap: 0;
	border-bottom: 1px solid #141414;
	background: #080808;
	flex-shrink: 0;
	padding: 0 16px;
}
.br-tab {
	background: none;
	border: none;
	color: #4a4a4a;
	padding: 14px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all var(--duration-fast);
	position: relative;
}
.br-tab:hover { color: #8a8a8a; }
.br-tab.active {
	color: var(--ink);
	border-bottom-color: #ffffff;
}
.br-tab .br-tab-badge {
	position: absolute;
	top: 10px;
	right: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffffff;
	display: none;
}
.br-tab .br-tab-badge.on { display: block; }

.br-topbar-right {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}
.br-topbar-btn {
	background: #161616;
	border: 1px solid #222222;
	color: #7b7b7b;
	padding: 6px 12px;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: all var(--duration-fast);
	text-decoration: none;
}
.br-topbar-btn:hover { background: #1d1d1d; color: #b0b0b0; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.br-panel {
	flex: 1;
	display: none;
	overflow: hidden;
}
.br-panel.active { display: flex; flex-direction: column; }

/* ── PERSONA BUILDER ─────────────────────────────────────────────────────── */
.br-persona {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.br-persona-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 28px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Archetype quick-picks */
.br-archetype-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.br-archetype-chip {
	background: #0c0c0c;
	border: 1.5px solid #1c1c2a;
	border-radius: 14px;
	padding: 18px 18px;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-instant), box-shadow var(--duration-fast);
	display: flex;
	flex-direction: column;
	gap: 5px;
	position: relative;
}
.br-archetype-chip:hover {
	border-color: #3a3a5a;
	background: #0e0e16;
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.br-archetype-chip:active { transform: translateY(0); }
.br-archetype-chip.selected {
	border-color: #3dbc8a;
	background: #060e0c;
	box-shadow: 0 0 0 1px rgba(61,188,138,0.2);
}
.br-archetype-chip.selected::after {
	content: '✓';
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 12px;
	color: #3dbc8a;
	font-weight: 700;
}
.br-archetype-chip-label {
	font-size: 13.5px;
	font-weight: 600;
	color: #dde0f0;
	display: block;
}
.br-archetype-chip-desc {
	font-size: 12px;
	color: #5a5a7a;
	display: block;
	line-height: 1.4;
}

/* ── Agent bar (top of persona panel) ───────────────────────────────────── */
.br-agent-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bg-0);
	border: 1px solid #181824;
	border-radius: 12px;
	padding: 10px 16px;
}
.br-agent-bar-label {
	font-size: 12px;
	font-weight: 600;
	color: #4a4a6a;
	white-space: nowrap;
}
.br-agent-bar-sel {
	flex: 1;
	background: transparent;
	border: none;
	color: #dde0f0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	outline: none;
	min-width: 0;
}
.br-agent-bar-sel option { background: #0e0e1a; color: #dde0f0; }
.br-agent-bar-manage {
	font-size: 11.5px;
	color: #4a4a6a;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--duration-fast);
}
.br-agent-bar-manage:hover { color: #9090c0; }

/* ── Simplified persona hero ─────────────────────────────────────────────── */
.br-persona-hero {
	text-align: center;
	padding: 8px 0 4px;
}
.br-persona-hero h1 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.br-persona-hero p {
	color: #5a5e80;
	font-size: 13.5px;
	margin: 0;
}

/* ── Describe input section ──────────────────────────────────────────────── */
.br-describe-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.br-describe-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #3a3a5a;
	font-size: 12px;
}
.br-describe-divider::before,
.br-describe-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #1c1c2a;
}
.br-describe-wrap { display: flex; flex-direction: column; gap: 6px; }
.br-describe-input {
	width: 100%;
	background: #0c0c0c;
	border: 1.5px solid #1c1c2a;
	border-radius: 14px;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	padding: 16px 18px;
	resize: none;
	outline: none;
	transition: border-color var(--duration-fast);
	line-height: 1.55;
}
.br-describe-input:focus { border-color: #3050a0; }
.br-describe-input::placeholder { color: #3a3a4a; }
.br-describe-hint {
	font-size: 11.5px;
	color: #2e2e4a;
	padding-left: 4px;
}

/* ── Status bar (replaces full card for normal flow) ─────────────────────── */
.br-status-bar {
	display: none;
	align-items: center;
	gap: 10px;
	background: #06100e;
	border: 1.5px solid #0e2e24;
	border-radius: 12px;
	padding: 12px 16px;
	animation: br-fade-in 0.2s ease;
}
.br-status-bar.show { display: flex; }
.br-status-bar.saving { border-color: #1c2e50; background: #060a14; }
.br-status-bar.saved { border-color: #0e3028; background: #061410; }
.br-status-icon {
	font-size: 14px;
	color: #3dbc8a;
	flex-shrink: 0;
}
.br-status-text {
	font-size: 13.5px;
	font-weight: 600;
	color: #80e0b8;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.br-status-actions {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-shrink: 0;
}
.br-status-btn {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 7px;
	color: #8a8a9a;
	font: inherit;
	font-size: 12px;
	padding: 5px 11px;
	cursor: pointer;
	transition: all var(--duration-fast);
	white-space: nowrap;
}
.br-status-btn:hover { background: rgba(255,255,255,0.1); color: #dde0f0; }
.br-status-btn-clear:hover { color: #ff7070; border-color: rgba(255,80,80,0.3); }

@keyframes br-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Action row */
.br-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Buttons */
.br-btn {
	border: none;
	border-radius: 10px;
	padding: 12px 20px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--duration-fast);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.br-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.br-btn-primary { background: #ffffff; color: #000000; }
.br-btn-primary:hover:not(:disabled) { background: #5dccff; }
.br-btn-secondary { background: #161616; color: #b0b0b0; border: 1px solid #222222; }
.br-btn-secondary:hover:not(:disabled) { background: #1d1d1d; }
.br-btn-ghost { background: transparent; color: #6b70a0; }
.br-btn-ghost:hover:not(:disabled) { color: #b0b0b0; }
.br-btn-danger { background: rgba(255,100,100,0.1); color: #ff8a8a; border: 1px solid rgba(255,100,100,0.2); }
.br-btn-danger:hover:not(:disabled) { background: rgba(255,100,100,0.18); }
.br-btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 7px; }

/* ── Persona card ────────────────────────────────────────────────────────── */
.br-persona-card {
	display: none;
	background: #0c0c0c;
	border: 1.5px solid var(--bg-1);
	border-radius: 16px;
	overflow: hidden;
}
.br-persona-card.show { display: block; }

.br-pc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid #141414;
	background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
}
.br-pc-header h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: #dde0f0;
}
.br-pc-header-actions { display: flex; gap: 6px; }

.br-pc-body {
	padding: 20px 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.br-pc-field { display: flex; flex-direction: column; gap: 6px; }
.br-pc-field.full { grid-column: 1 / -1; }
.br-pc-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4a4a4a;
}
.br-pc-value { font-size: 14px; color: #c8cce0; line-height: 1.5; }

.br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.br-chip {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
}
.br-chip-blue { background: rgba(255,255,255,0.1); color: #ffffff; border: 1px solid rgba(255,255,255,0.25); }
.br-chip-purple { background: rgba(255,255,255,0.06); color: #ffffff; border: 1px solid rgba(255,255,255,0.15); }
.br-chip-red { background: rgba(255,100,100,0.08); color: #ff8a8a; border: 1px solid rgba(255,100,100,0.2); }
.br-chip-muted { background: rgba(255,255,255,0.04); color: #8a8a8a; border: 1px solid #212121; }

.br-pc-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(255,255,255,0.1);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.25);
}

.br-pc-greeting {
	font-style: italic;
	color: #a8aecc;
	padding: 8px 0 0;
	border-top: none;
	font-size: 14px;
}

.br-pc-footer {
	padding: 14px 22px;
	border-top: 1px solid #141414;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.br-pc-save-wrap {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}
.br-agent-select {
	background: #0c0c0c;
	border: 1px solid #222222;
	border-radius: 8px;
	color: #b0b0b0;
	padding: 7px 10px;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	min-width: 160px;
}

/* ── Inline persona editor ───────────────────────────────────────────────── */
.br-pc-edit-body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.br-edit-row { display: flex; flex-direction: column; gap: 6px; }
.br-edit-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a4a4a;
}
.br-edit-input {
	width: 100%;
	background: #080808;
	border: 1px solid var(--bg-1);
	border-radius: 8px;
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	padding: 9px 12px;
	outline: none;
	transition: border-color var(--duration-fast);
}
.br-edit-input:focus { border-color: #3050a0; }
.br-edit-textarea {
	width: 100%;
	background: #080808;
	border: 1px solid var(--bg-1);
	border-radius: 8px;
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	padding: 9px 12px;
	outline: none;
	resize: vertical;
	min-height: 60px;
	transition: border-color var(--duration-fast);
}
.br-edit-textarea:focus { border-color: #3050a0; }
.br-edit-hint { font-size: 11px; color: #3d3d3d; }

/* ── Raw JSON toggle ─────────────────────────────────────────────────────── */
.br-raw-json {
	display: none;
	background: #080808;
	border: 1px solid var(--bg-1);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 22px 16px;
	font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
	font-size: 12px;
	color: #8a8a8a;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 300px;
	overflow: auto;
}
.br-raw-json.show { display: block; }

/* ── PLAYGROUND ──────────────────────────────────────────────────────────── */
.br-play { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Playground toolbar */
.br-play-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid #141414;
	background: #080808;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.br-mode-toggle {
	display: flex;
	border: 1px solid var(--bg-1);
	border-radius: 8px;
	overflow: hidden;
}
.br-mode-btn {
	background: none;
	border: none;
	color: #4a4a4a;
	padding: 7px 14px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--duration-fast);
}
.br-mode-btn + .br-mode-btn { border-left: 1px solid var(--bg-1); }
.br-mode-btn.active { background: #161616; color: #dde0f0; }

.br-play-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a4a4a;
}

/* The roster runs to 30+ models, so the wrapped pill row scrolls inside a
   capped height instead of pushing the canvas off the screen. */
.br-provider-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex: 1;
	max-height: 92px;
	overflow-y: auto;
	padding-right: 2px;
}
.br-pill {
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--bg-1);
	background: #0c0c0c;
	color: #4a4a4a;
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	transition: all var(--duration-fast);
}
.br-pill.on { border-color: var(--pc); color: var(--pc); }
/* Disabled rather than pointer-events:none, so the tooltip explaining WHY the
   model is out still reaches a keyboard and a hover. */
.br-pill:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}
.br-pill-na {
	font-size: 9px;
	color: #ff4444;
	margin-left: 2px;
}
/* Reachable but gated behind an account: dimmed, still clickable so the click
   can explain itself and offer the sign-in link. */
.br-pill.locked { opacity: 0.55; }
.br-pill.locked .br-pill-dot { opacity: 0.3; }
.br-pill-lock { font-size: 9px; margin-left: 2px; filter: grayscale(1); }
.br-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pc);
	opacity: 0.7;
}

.br-focus-sel {
	background: #0c0c0c;
	border: 1px solid var(--bg-1);
	color: #b0b0b0;
	padding: 6px 10px;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* Persona active banner */
.br-persona-banner {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
	border-bottom: 1px solid rgba(255,255,255,0.15);
	font-size: 12.5px;
	color: #8a8a8a;
}
.br-persona-banner.show { display: flex; }
.br-persona-banner-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	flex-shrink: 0;
}
.br-persona-banner strong { color: #c8cce0; }
.br-persona-banner-dismiss {
	margin-left: auto;
	background: none;
	border: none;
	color: #4a4a4a;
	cursor: pointer;
	font-size: 12px;
	padding: 2px 6px;
}
.br-persona-banner-dismiss:hover { color: #b0b0b0; }

/* Canvas */
.br-canvas { flex: 1; overflow: hidden; display: flex; min-height: 0; }

/* Compare columns */
.br-compare { display: flex; flex: 1; overflow-x: auto; overflow-y: hidden; }
.br-col {
	flex: 1;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #141414;
	overflow: hidden;
}
.br-col:last-child { border-right: none; }
.br-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #141414;
	flex-shrink: 0;
	gap: 8px;
}
.br-col-name { font-size: 13px; font-weight: 700; color: var(--pc); }
.br-col-meta { font-size: 10.5px; color: #4a4a4a; text-transform: uppercase; letter-spacing: 0.06em; }
.br-col-stats {
	font-size: 11px;
	color: #4a4a4a;
	font-family: ui-monospace, monospace;
	display: flex;
	gap: 8px;
}
.br-col-stats strong { color: #8a8a8a; }
.br-col-copy {
	background: none;
	border: none;
	color: #4a4a4a;
	cursor: pointer;
	padding: 3px 6px;
	border-radius: 5px;
	font-size: 11px;
	transition: all var(--duration-instant);
}
.br-col-copy:hover { color: #b0b0b0; background: #161616; }
.br-col-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.br-col-empty {
	color: #3d3d3d;
	font-size: 13px;
	font-style: italic;
	text-align: center;
	padding: 40px 20px;
}
.br-col-user {
	font-size: 12.5px;
	color: #6b70a0;
	padding: 8px 12px;
	background: #0c0c0c;
	border-radius: 10px;
	border: 1px solid #141414;
}
.br-col-assistant {
	font-size: 13.5px;
	color: #dde0f0;
	line-height: 1.65;
}

/* Chat mode */
.br-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-width: 840px;
	margin: 0 auto;
	width: 100%;
}
.br-chat-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.br-chat-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #4a4a4a;
	gap: 12px;
	padding: 40px;
	text-align: center;
}
.br-chat-empty h3 { color: #8a8a8a; margin: 0; font-size: 18px; font-weight: 600; }
.br-chat-empty p { margin: 0; font-size: 13.5px; max-width: 44ch; line-height: 1.6; }

/* Messages */
.br-msg {
	display: flex;
	flex-direction: column;
	gap: 5px;
	animation: brMsgIn 0.15s ease-out;
}
@keyframes brMsgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.br-msg-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4a4a4a;
}
.br-msg.user .br-msg-label { color: #7b7b7b; }
.br-msg.assistant .br-msg-label { color: var(--pc, #7b7b7b); }
.br-msg-body {
	font-size: 14px;
	line-height: 1.65;
	color: #dde0f0;
}
.br-msg.user .br-msg-body { color: #a0a5c8; }

/* Streaming spinner */
.br-spin {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	animation: brBlink 0.9s ease-in-out infinite;
	vertical-align: middle;
	margin-left: 4px;
}
@keyframes brBlink { 0%,100%{ opacity:0.2 } 50%{ opacity:1 } }

/* ── Input area ──────────────────────────────────────────────────────────── */
.br-input-wrap {
	border-top: 1px solid #141414;
	padding: 12px 16px 14px;
	background: #080808;
	flex-shrink: 0;
}
.br-sys-details { margin-bottom: 8px; }
.br-sys-details summary {
	font-size: 11.5px;
	color: #4a4a4a;
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 2px 0;
}
.br-sys-details summary:hover { color: #7b7b7b; }
.br-sys-details[open] summary { color: #7b7b7b; margin-bottom: 6px; }
.br-sys-textarea {
	width: 100%;
	background: #0c0c0c;
	border: 1px solid var(--bg-1);
	border-radius: 9px;
	color: #b0b0b0;
	font: inherit;
	font-size: 13px;
	padding: 10px 12px;
	resize: vertical;
	min-height: 56px;
	outline: none;
}
.br-sys-textarea:focus { border-color: #2a3060; }
/* The platform's bottom-right corner widgets (the shared corner stack, the walk
   companion) take pointer events across their whole box and sit exactly on top
   of Send, which made the primary action of this page unclickable whenever one
   was on screen. syncCornerReserve() in src/brain.js measures whatever is
   actually there and publishes the gutter; nothing is reserved when the corner
   is empty. */
.br-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	padding-right: var(--br-corner-gutter, 0px);
	transition: padding-right var(--duration-base) var(--ease-standard);
}
/* When the widget is wide enough that a gutter would leave no room to type,
   Send moves to its own line on the left instead, clear of the corner either
   way. */
.br-input-row.crowded { padding-right: 0; flex-wrap: wrap; }
.br-input-row.crowded .br-prompt { flex: 1 1 100%; }
.br-input-row.crowded .br-send { margin-right: auto; }
.br-prompt {
	flex: 1;
	background: #0c0c0c;
	border: 1px solid var(--bg-1);
	border-radius: 12px;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	padding: 12px 14px;
	resize: none;
	min-height: 46px;
	max-height: 160px;
	outline: none;
	transition: border-color var(--duration-fast);
	field-sizing: content;
}
.br-prompt:focus { border-color: #2a3060; }
.br-send {
	background: #ffffff;
	color: #000000;
	border: none;
	border-radius: 12px;
	padding: 12px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	transition: all var(--duration-fast);
}
.br-send:hover { background: #5dccff; }
.br-send:disabled { opacity: 0.35; cursor: not-allowed; }
.br-hint {
	font-size: 11px;
	color: #323232;
	margin-top: 6px;
	display: flex;
	gap: 14px;
}

/* ── Notice ──────────────────────────────────────────────────────────────── */
.br-notice {
	padding: 8px 14px;
	border-radius: 8px;
	background: rgba(255,184,77,0.08);
	border: 1px solid rgba(255,184,77,0.2);
	color: #ffb84d;
	font-size: 12.5px;
	margin-bottom: 8px;
	display: none;
}
.br-notice-action {
	color: #ffd79a;
	font-weight: 600;
	text-decoration: underline;
}
.br-notice-action:hover { color: #ffffff; }
.br-notice-action:focus-visible { outline: 2px solid #5dccff; outline-offset: 2px; }

/* ── Markdown rendered content ───────────────────────────────────────────── */
.md-p { margin: 0 0 0.7em; }
.md-p:last-child { margin-bottom: 0; }
.md-h1 { font-size: 17px; font-weight: 700; margin: 1em 0 0.4em; }
.md-h2 { font-size: 15px; font-weight: 700; margin: 0.9em 0 0.35em; }
.md-h3 { font-size: 13.5px; font-weight: 700; margin: 0.75em 0 0.3em; }
.md-ul, .md-ol { margin: 0.4em 0 0.6em 1.4em; padding: 0; }
.md-ul li, .md-ol li { margin: 0.2em 0; }
.md-code {
	background: #0c0c0c;
	border: 1px solid var(--bg-1);
	border-radius: 9px;
	padding: 12px 14px;
	overflow-x: auto;
	font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.55;
	margin: 0.5em 0 0.75em;
	color: #b8c0e8;
}
.md-ic {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 4px;
	padding: 1px 5px;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	color: #b8c0e8;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.br-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: #161616;
	border: 1px solid #222222;
	color: #dde0f0;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	z-index: 9999;
	opacity: 0;
	transition: all var(--duration-base) var(--ease-standard);
	pointer-events: none;
}
.br-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.br-loading {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	color: #7b7b7b;
	font-size: 14px;
}
.br-loading.show { display: flex; }
.br-loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--bg-1);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: brSpin 0.8s linear infinite;
}
@keyframes brSpin { to { transform: rotate(360deg); } }

/* ── Roster loading / failure states ─────────────────────────────────────── */
.br-play-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: #7b7b7b;
	flex-wrap: wrap;
}
.br-play-status-error { color: #ff8a8a; }

.br-canvas-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px 24px;
	text-align: center;
	color: #7b7b7b;
}
.br-canvas-state h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #dde0f0;
}
.br-canvas-state p {
	margin: 0;
	max-width: 46ch;
	font-size: 13px;
	line-height: 1.55;
}
.br-canvas-state-error h3 { color: #ff8a8a; }

/* ── Sessions drawer trigger (mobile only) ───────────────────────────────── */
.br-side-toggle {
	display: none;
	background: none;
	border: none;
	color: #7b7b7b;
	font-size: 16px;
	line-height: 1;
	padding: 10px 8px;
	margin-right: 2px;
	cursor: pointer;
	border-radius: 7px;
}
.br-side-toggle:hover { color: #dde0f0; background: #141414; }
.br-side-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 39;
}

/* ── Focus visibility ────────────────────────────────────────────────────── */
.br-tab:focus-visible,
.br-topbar-btn:focus-visible,
.br-side-toggle:focus-visible,
.br-side-new:focus-visible,
.br-sess-name:focus-visible,
.br-sess-del:focus-visible,
.br-archetype-chip:focus-visible,
.br-status-btn:focus-visible,
.br-mode-btn:focus-visible,
.br-pill:focus-visible,
.br-focus-sel:focus-visible,
.br-col-copy:focus-visible,
.br-btn:focus-visible,
.br-send:focus-visible,
.br-persona-mini-clear:focus-visible,
.br-persona-banner-dismiss:focus-visible,
.br-agent-bar-sel:focus-visible,
.br-agent-bar-manage:focus-visible,
.br-sys-details summary:focus-visible {
	outline: 2px solid #5dccff;
	outline-offset: 2px;
}
/* The delete control only fades in on row hover, so keyboard focus has to
   reveal it too or the ring lands on something invisible. */
.br-sess-del:focus-visible { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.br-side-toggle { display: block; }
	/* Off-canvas rather than display:none, because the session list and the New
	   button live only here, and hiding them stranded every mobile visitor. */
	.br-side {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 40;
		width: min(280px, 84vw);
		transform: translateX(-100%);
		transition: transform var(--duration-base) var(--ease-standard);
	}
	.br-side.open { transform: translateX(0); }
	body.br-side-open .br-side-backdrop { display: block; }
	.br-persona-inner { padding: 20px 16px 60px; }
	.br-archetype-grid { grid-template-columns: repeat(2, 1fr); }
	.br-pc-body { grid-template-columns: 1fr; }
	.br-play-bar { padding: 8px 12px; }
	.br-chat-msgs { padding: 16px; }
	.br-input-wrap { padding: 10px 12px 12px; }
}
@media (max-width: 640px) {
	/* One column fills the screen and the row snaps between models, rather than
	   leaving three 300px columns to be hunted for by free scrolling. */
	.br-compare { scroll-snap-type: x mandatory; }
	.br-col { min-width: 86vw; scroll-snap-align: start; }
	.br-topbar { padding: 0 10px; }
	.br-tab { padding: 12px 12px; font-size: 12.5px; }
	.br-pc-footer { flex-direction: column; }
	.br-pc-save-wrap { margin-left: 0; width: 100%; }
	.br-agent-select { flex: 1; }
}
/* At 360px and under the tabs plus both topbar actions no longer fit, and the
   actions were clipped off the right edge. Tighten every element in the row
   instead of hiding one. */
@media (max-width: 400px) {
	.br-topbar { padding: 0 6px; }
	.br-side-toggle { padding: 10px 6px; margin-right: 0; }
	.br-tab { padding: 12px 8px; font-size: 12px; }
	.br-topbar-right { gap: 5px; }
	.br-topbar-btn { padding: 5px 8px; font-size: 11.5px; }
}

/* ── Interactive states (QB-07) ────────────────────────────────────────────
   Six controls here set cursor: pointer and had no hover rule, so the pointer
   changed shape and nothing else did, which reads as a dead control. Each now
   answers on the platform ladder (--duration-fast, --ease-standard). Focus and
   disabled are already covered by the floors in public/tokens.css. */
.br-sess-name,
.br-agent-bar-sel,
.br-agent-select,
.br-focus-sel {
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.br-sess-name:hover {
	color: var(--ink-bright);
}

.br-agent-bar-sel:hover {
	color: var(--ink-bright);
}

.br-agent-select:hover,
.br-focus-sel:hover {
	border-color: var(--stroke-strong);
	color: var(--ink);
}

.br-mode-btn:hover:not(.active):not(:disabled) {
	color: var(--ink-dim);
	background: var(--surface-1);
}

.br-pill:hover:not(:disabled) {
	border-color: var(--stroke-strong);
	color: var(--ink-dim);
}