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

/* --------------------------------------------------------------------------
   Theme variables
   -------------------------------------------------------------------------- */
:root {
	--radius: 12px;
	--font:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Dark theme (default) */
html[data-theme="dark"] {
	color-scheme: dark;
	--bg: #080c14;
	--surface: #0f1520;
	--surface2: #1a2233;
	--surface3: #242d40;
	--accent: #38bdf8;
	--accent-dim: #0ea5e9;
	--accent-glow: rgba(56, 189, 248, 0.18);
	--text: #f0f4f8;
	--text-dim: #8b9aae;
	--border: rgba(148, 163, 184, 0.12);
	--danger: #f87171;
	--success: #4ade80;
	--warning: #fbbf24;
	--overlay: rgba(0, 0, 0, 0.4);
}

/* Light theme */
html[data-theme="light"] {
	color-scheme: light;
	--bg: #ffffff;
	--surface: #f6f8fb;
	--surface2: #eceff4;
	--surface3: #dfe3ea;
	--accent: #2563eb;
	--accent-dim: #1d4ed8;
	--accent-glow: rgba(37, 99, 235, 0.12);
	--text: #0f172a;
	--text-dim: #5a6a80;
	--border: rgba(148, 163, 184, 0.22);
	--danger: #dc2626;
	--success: #16a34a;
	--warning: #d97706;
	--overlay: rgba(15, 23, 42, 0.35);
}

html,
body {
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#app {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

#loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 16px;
	padding: 32px;
}
#loader .spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--surface2);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.lobby-card p {
	color: var(--text-dim);
	font-size: 14px;
	text-align: center;
	margin: 0;
}
#loader p {
	color: var(--text-dim);
	font-size: 14px;
}
#loader .error {
	color: var(--danger);
}

/* Chat shell - full-height flex column */
#app-shell {
	display: none;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
#chat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
	position: relative;
	min-height: 48px;
}
#chat-header h1 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
#chat-header h1:hover {
	opacity: 0.85;
}
.room-header-name {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room-edit-icon {
	flex-shrink: 0;
	color: var(--text-dim);
	opacity: 0.5;
	transition: opacity 0.15s;
}
.room-type-icon {
	flex-shrink: 0;
	color: var(--text-dim);
	user-select: none;
	-webkit-user-select: none;
}
#chat-header .room-type-icon {
	width: 16px;
	height: 16px;
}
.room-name-error {
	position: absolute;
	top: calc(100% + 4px);
	left: 14px;
	right: 14px;
	z-index: 5;
	margin: 0;
}
#chat-header h1:hover .room-edit-icon {
	opacity: 1;
	color: var(--accent);
}
#chat-header .status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-dim);
	flex-shrink: 0;
}
#chat-header .status.connected,
#chat-header .status.online {
	background: var(--success);
}
#chat-header .status.connecting {
	background: var(--warning);
	animation: pulse 1s ease-in-out infinite;
}
#chat-header .status.reconnecting {
	background: var(--warning);
	animation: pulse 1s ease-in-out infinite;
}
#chat-header .status.disconnected {
	background: var(--danger);
}
#chat-header .status.lost {
	background: var(--danger);
	animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}

/* Message list - fills remaining height */
#message-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	scroll-behavior: smooth;
	min-height: 0;
	position: relative;
}

.message-list-empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-dim);
	font-size: 13px;
	text-align: center;
	padding: 16px;
}

/* Jump-to-bottom floating button - sticky to the visible bottom of
   the scroll view, just above the input area. margin-top:auto pushes it
   to the end of the flex column when at the bottom of the content. */
#jump-to-bottom {
	position: sticky;
	z-index: 10;
	bottom: 16px;
	align-self: flex-end;
	margin-top: auto;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s,
		transform 0.15s,
		background 0.15s;
}
#jump-to-bottom:hover {
	background: var(--accent-dim);
	transform: scale(1.08);
}
#jump-to-bottom:active {
	transform: scale(0.94);
}
#jump-to-bottom:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}
.jump-count-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--danger, #ef4444);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.3));
}
#message-list::-webkit-scrollbar {
	width: 6px;
}
#message-list::-webkit-scrollbar-thumb {
	background: var(--surface2);
	border-radius: 3px;
}

/* Message rows are laid out by this wrapper (a flex column) so that
   .msg's align-self can shrink-to-fit and align each bubble. */
#message-list .message-list-content {
	display: flex;
	flex-direction: column;
}

/* Message row styles - modern bubble design */
.msg {
	max-width: 78%;
	width: fit-content;
	padding: 6px 12px;
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	position: relative;
}
.msg-own {
	align-self: flex-end;
	background: linear-gradient(135deg, var(--accent-dim), var(--accent));
	color: #fff;
	border-bottom-right-radius: 4px;
	box-shadow: 0 2px 10px var(--accent-glow);
}
.msg-peer {
	align-self: flex-start;
	background: var(--surface);
	border-bottom-left-radius: 4px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	color: var(--text);
}
.msg-system {
	align-self: center;
	text-align: center;
	font-size: 12px;
	color: var(--text-dim);
	font-style: italic;
	padding: 6px 14px;
	background: var(--surface2);
	border-radius: 20px;
	max-width: 90%;
	border: none;
	box-shadow: none;
}
.msg .msg-sender {
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 3px;
}
.msg-own .msg-sender {
	color: rgba(255, 255, 255, 0.9);
}
.msg-peer .msg-sender {
	color: var(--accent);
}
.msg .msg-text {
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.msg .msg-time {
	font-size: 10px;
	margin-top: 4px;
	text-align: right;
	opacity: 0.85;
}
.msg-own .msg-time {
	color: rgba(255, 255, 255, 0.75);
}
.msg-peer .msg-time {
	color: var(--text-dim);
}
.msg-bot-disclaimer::before {
	content: "⚠ may be auto-generated";
	display: block;
	font-size: 10px;
	color: var(--warning);
	margin-bottom: 2px;
}
.msg-pasted {
	border-left: 3px solid var(--accent);
	padding-left: 11px;
}
.msg-pasted::before {
	content: "quoted text - not original";
	display: block;
	font-size: 10px;
	color: var(--text-dim);
	margin-bottom: 2px;
}

/* Unread divider - a thin rule between the already-read history and the
   messages that arrived while the user was away from the room. It labels how
   many messages are unread and occupies one fixed-height virtual scroll row
   so the virtual scroller's row math stays correct. */
.msg-unread-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	padding: 0 8px;
	color: var(--text-dim);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	user-select: none;
}
.msg-unread-divider .msg-unread-divider-line {
	flex: 1;
	height: 1px;
	background: var(--accent);
	opacity: 0.45;
}
.msg-unread-divider .msg-unread-divider-label {
	white-space: nowrap;
}

/* Grouping: reduce gap for consecutive messages from same sender */
.msg-group-start {
	margin-top: 10px;
}
.msg-group-continue {
	margin-top: 2px;
}
.msg:first-child {
	margin-top: 0;
}
.msg-group-start .msg-sender {
	display: block;
}
.msg-group-continue .msg-sender {
	display: none;
}

/* Delivery status */
.msg-delivery {
	font-size: 11px;
	margin-left: 4px;
}
.msg-delivery.msg-sending {
	color: var(--text-dim);
	animation: pulse 1s ease-in-out infinite;
}
.msg-delivery.msg-delivered {
	color: var(--success);
}
.msg-delivery.msg-read {
	color: var(--accent);
}
.msg-delivery.msg-failed {
	color: var(--danger);
}
.msg-delivery.msg-retry {
	background: none;
	border: none;
	padding: 0;
	margin-left: 2px;
	font-size: 12px;
	color: var(--accent);
	cursor: pointer;
}
.msg-delivery.msg-retry:hover {
	color: var(--text);
}

#typing-indicator {
	padding: 4px 16px 8px;
	font-size: 12px;
	color: var(--text-dim);
	font-style: italic;
	min-height: 20px;
	flex-shrink: 0;
}
#input-area {
	display: flex;
	gap: 10px;
	padding: 10px 14px;
	background: var(--surface);
	border-top: 1px solid var(--border);
	flex-shrink: 0;
	align-items: flex-end;
}
#message-input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	font-size: 14px;
	font-family: var(--font);
	resize: none;
	outline: none;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	line-height: 1.4;
	min-height: 40px;
	max-height: 120px;
}
#message-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}
#message-input:disabled {
	opacity: 0.5;
	cursor: default;
	background: var(--surface2);
}
#send-btn {
	padding: 10px 20px;
	border: none;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		opacity 0.15s,
		transform 0.1s;
	flex-shrink: 0;
	height: 40px;
}
#send-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
#send-btn:hover:not(:disabled) {
	opacity: 0.9;
}
#send-btn:active:not(:disabled) {
	transform: scale(0.96);
}
#connection-bar {
	text-align: center;
	padding: 6px 10px;
	font-size: 12px;
	background: var(--surface2);
	color: var(--text-dim);
	flex-shrink: 0;
}
#connection-bar.error {
	background: var(--danger);
	color: #fff;
}
#connection-bar.connecting {
	background: var(--warning);
	color: #0f172a;
}
#connection-bar.connected {
	background: var(--success);
	color: #fff;
}
#connection-bar.reconnecting {
	background: var(--warning);
	color: #0f172a;
}
#connection-bar.disconnected {
	background: var(--danger);
	color: #fff;
}
#connection-bar.lost {
	background: var(--danger);
	color: #fff;
}
#connection-bar .conn-text {
	vertical-align: middle;
}
#connection-bar .conn-spinner {
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border: 2px solid rgba(15, 23, 42, 0.3);
	border-top-color: #0f172a;
	border-radius: 50%;
	animation: conn-spin 0.8s linear infinite;
}
@keyframes conn-spin {
	to {
		transform: rotate(360deg);
	}
}
#connection-bar .conn-retry-btn {
	margin-left: 8px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 12px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
}
#connection-bar .conn-retry-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}
#connection-bar .conn-retry-btn:active {
	background: rgba(255, 255, 255, 0.3);
}
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
*:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
*:focus:not(:focus-visible) {
	outline: none;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	padding: 8px 16px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	z-index: 1000;
	border-radius: 0 0 var(--radius) var(--radius);
	font-size: 14px;
	transition: top 0.15s;
}
.skip-link:focus {
	top: 0;
}
.skip-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}
#message-list:focus {
	outline: none;
}
#send-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* Icon / utility buttons */
.lang-btn,
.icon-btn {
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text-dim);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
}
#lobby-header .lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
#lobby-header .lang-btn .btn-icon {
	flex-shrink: 0;
}
.lang-btn:hover,
.icon-btn:hover {
	background: var(--surface2);
	color: var(--text);
	border-color: var(--surface3);
}
.lang-btn:focus-visible,
.icon-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.lang-select {
	display: none;
}
.lang-dropdown {
	position: relative;
	display: inline-flex;
}
.lang-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 18px 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text-dim);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
	position: relative;
}
.lang-dropdown-toggle::after {
	content: "";
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -2px;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid var(--text-dim);
	transition: border-top-color 0.15s;
}
.lang-dropdown-toggle:hover::after {
	border-top-color: var(--text);
}
.lang-dropdown-toggle:hover {
	background: var(--surface2);
	color: var(--text);
	border-color: var(--surface3);
}
.lang-dropdown-toggle:focus-visible,
.lang-dropdown-option:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.lang-dropdown-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 200;
	display: none;
	flex-direction: column;
	min-width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 4px;
	gap: 2px;
	white-space: nowrap;
}
.lang-dropdown-option {
	display: block;
	width: 100%;
	padding: 5px 14px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	text-align: left;
	transition:
		background 0.1s,
		color 0.1s;
}
.lang-dropdown-option:hover {
	background: var(--surface2);
	color: var(--text);
}
.lang-dropdown-option:focus-visible {
	outline-offset: -2px;
}
.msg-current-name {
	font-weight: 400;
	color: var(--text-dim);
	font-size: 10px;
}
.msg-member-number {
	font-weight: 700;
	font-size: 10px;
	line-height: 1.4;
	padding: 1px 5px;
	border-radius: 999px;
	margin-right: 4px;
	vertical-align: 1px;
}
.msg-peer .msg-member-number {
	color: var(--accent);
	background: var(--accent-glow);
}
.msg-own .msg-member-number {
	color: #fff;
	background: rgba(0, 0, 0, 0.38);
}

/* Theme toggle - sized to match the other .lang-btn/.icon-btn header buttons */
#theme-toggle,
#theme-toggle-lobby {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	line-height: 1;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s,
		transform 0.1s;
}
#theme-toggle:hover,
#theme-toggle-lobby:hover {
	background: var(--surface2);
	color: var(--text);
	border-color: var(--surface3);
}
#theme-toggle:active,
#theme-toggle-lobby:active {
	transform: scale(0.92);
}

/* Lobby */
#lobby {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}
#lobby-header {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	gap: 12px;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
	min-height: 48px;
}
#lobby-header h1 {
	font-size: 16px;
	font-weight: 600;
	flex: 1;
}
#lobby-logo-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	text-decoration: none;
}
.logo-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}
.logo-text {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
}
#settings-page {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}
#settings-header {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	gap: 12px;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
	min-height: 48px;
}
#settings-header h1 {
	font-size: 16px;
	font-weight: 600;
	flex: 1;
}
.settings-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 16px;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
}
#lobby-title a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
#lobby-logo-link:hover .logo-text {
	text-decoration: underline;
}
.lobby-body {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px;
}
.lobby-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	max-width: 420px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--shadow-md);
}
.lobby-section {
	display: flex;
	gap: 8px;
}
.lobby-btn {
	padding: 10px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		opacity 0.15s,
		background 0.15s,
		transform 0.1s;
	line-height: 1.4;
}
.lobby-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.lobby-btn-primary {
	background: var(--accent);
	color: #fff;
	width: 100%;
}
.lobby-btn-primary:hover:not(:disabled) {
	opacity: 0.9;
	transform: translateY(-1px);
}
.lobby-btn-secondary {
	background: var(--surface2);
	color: var(--text);
	white-space: nowrap;
	flex-shrink: 0;
	padding: 10px 14px;
	border: 1px solid var(--border);
}
.lobby-btn-secondary:hover:not(:disabled) {
	background: var(--surface3);
	color: var(--text);
	border-color: var(--surface3);
}
.lobby-btn-start {
	background: var(--success);
	color: #fff;
	width: 100%;
	font-size: 15px;
}
.lobby-btn-start:hover:not(:disabled) {
	opacity: 0.9;
	transform: translateY(-1px);
}
.lobby-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-dim);
	font-size: 12px;
}
.lobby-divider::before,
.lobby-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}
.lobby-join-row {
	display: flex;
	gap: 8px;
}
.lobby-input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	font-size: 16px;
	font-family: var(--font);
	text-transform: uppercase;
	letter-spacing: 2px;
	outline: none;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	text-align: center;
}
.lobby-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}
.lobby-input::placeholder {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: var(--text-dim);
}
.lobby-code-display {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--success);
	box-shadow: var(--shadow-sm);
}
.lobby-code-display label {
	font-size: 12px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}
.lobby-code-value {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
}
.lobby-code-value span {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--accent);
	font-family: monospace;
}
.lobby-icon-btn {
	background: none;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: background 0.15s;
}
.lobby-icon-btn:hover {
	background: var(--surface2);
}
.lobby-code-hint {
	font-size: 12px;
	color: var(--text-dim);
	text-align: center;
	margin: 0;
}
.lobby-error {
	padding: 10px 14px;
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid var(--danger);
	border-radius: var(--radius);
	color: var(--danger);
	font-size: 13px;
	text-align: center;
}
#back-to-lobby-btn {
	font-size: 14px;
	padding: 4px 10px;
}
/* Room options dropdown in the chat header: one "⋮" button holding the
   secondary room actions (members, change name, share invite link) so the
   room name keeps room to breathe on narrow screens. */
.room-menu {
	position: relative;
	display: inline-flex;
}
.room-menu-btn {
	position: relative;
	font-size: 16px;
	padding: 4px 12px;
	line-height: 1;
}
.room-menu-panel {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 200;
	display: none;
	flex-direction: column;
	min-width: 200px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 4px;
	gap: 2px;
	white-space: nowrap;
}
.room-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	text-align: left;
	transition:
		background 0.1s,
		color 0.1s;
}
.room-menu-item:hover {
	background: var(--surface2);
	color: var(--text);
}
.room-menu-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.room-menu-icon {
	flex-shrink: 0;
	font-size: 14px;
}
.room-menu-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.leave-btn {
	font-size: 12px;
	padding: 4px 10px;
	color: var(--danger);
	border-color: var(--danger);
}

/* Color picker in name modal */
.color-picker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.color-picker-label {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}
.color-swatches {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.color-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid transparent;
	transition:
		border-color 0.15s,
		transform 0.1s,
		box-shadow 0.15s;
	outline: none;
}
.color-swatch:hover {
	transform: scale(1.18);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.color-swatch.selected {
	border-color: var(--text);
	box-shadow:
		0 0 0 2px var(--bg),
		0 0 0 4px var(--text);
}
.color-swatch:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.color-swatch[aria-checked="true"] {
	border-color: var(--text);
	box-shadow:
		0 0 0 2px var(--bg),
		0 0 0 4px var(--text);
}
.color-swatch:active {
	transform: scale(0.92);
}

/* User color accents on message bubbles */
.msg-own.msg-color-0 {
	background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}
.msg-own.msg-color-1 {
	background: linear-gradient(135deg, #db2777, #f472b6);
}
.msg-own.msg-color-2 {
	background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.msg-own.msg-color-3 {
	background: linear-gradient(135deg, #059669, #34d399);
}
.msg-own.msg-color-4 {
	background: linear-gradient(135deg, #ea580c, #fb923c);
}
.msg-own.msg-color-5 {
	background: linear-gradient(135deg, #ca8a04, #facc15);
}
.msg-own.msg-color-6 {
	background: linear-gradient(135deg, #0d9488, #2dd4bf);
}
.msg-peer.msg-color-0 {
	border-left: 3px solid #38bdf8;
}
.msg-peer.msg-color-1 {
	border-left: 3px solid #f472b6;
}
.msg-peer.msg-color-2 {
	border-left: 3px solid #a78bfa;
}
.msg-peer.msg-color-3 {
	border-left: 3px solid #34d399;
}
.msg-peer.msg-color-4 {
	border-left: 3px solid #fb923c;
}
.msg-peer.msg-color-5 {
	border-left: 3px solid #facc15;
}
.msg-peer.msg-color-6 {
	border-left: 3px solid #2dd4bf;
}

/* Name modal overlay */
.name-modal {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.name-modal-overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay);
	backdrop-filter: blur(3px);
}
.name-modal-box {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	max-width: 360px;
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 101;
	box-shadow: var(--shadow-lg);
}
.name-modal-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}
.name-modal-desc {
	font-size: 13px;
	color: var(--text-dim);
	text-align: center;
}
.name-modal-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	font-size: 15px;
	font-family: var(--font);
	outline: none;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	text-align: center;
}
.name-modal-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}
.name-modal-btn {
	width: 100%;
	padding: 10px 20px;
	border: none;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		opacity 0.15s,
		transform 0.1s;
}
.name-modal-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Device settings list */
.device-settings-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.device-settings-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.device-settings-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-family: var(--mono, monospace);
}
.device-current-label {
	font-size: 11px;
	color: var(--accent);
}
.device-actions-row,
.device-revoke-confirm-row,
.device-unlink-confirm-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.device-revoke-btn,
.device-unlink-btn,
.device-revoke-yes-btn,
.device-revoke-cancel-btn,
.device-unlink-yes-btn,
.device-unlink-cancel-btn {
	font-size: 12px;
	padding: 5px 12px;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	font-weight: 600;
}
.device-revoke-btn,
.device-unlink-btn {
	background: var(--error, #d33);
	color: #fff;
}
.device-revoke-yes-btn,
.device-unlink-yes-btn {
	background: var(--error, #d33);
	color: #fff;
}
.device-revoke-cancel-btn,
.device-unlink-cancel-btn {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border);
}
.device-revoke-confirm-text,
.device-unlink-confirm-text {
	font-size: 12px;
	color: var(--text-secondary);
}
.device-revoke-last-warning {
	font-size: 12px;
	color: var(--error, #d33);
	font-weight: 600;
}

/* Room list */
.room-list {
	padding: 20px 16px;
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.room-list-header {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}
.room-list-empty {
	font-size: 13px;
	color: var(--text-dim);
	text-align: center;
	padding: 16px;
}
.room-list-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.room-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s,
		transform 0.05s,
		box-shadow 0.15s;
}
.room-list-item:hover {
	background: var(--surface2);
	border-color: var(--accent);
	transform: translateX(2px);
	box-shadow: var(--shadow-sm);
}
.room-list-info {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.room-list-info .room-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room-list-info .room-name-line {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.room-list-info .room-name-line .room-type-icon {
	color: var(--text-dim);
}
.room-list-info .room-meta {
	font-size: 11px;
	color: var(--text-dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room-list-info .room-code {
	font-family: monospace;
	font-size: 11px;
	color: var(--text-dim);
	letter-spacing: 0.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room-list-item .room-delete {
	padding: 5px 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12px;
	cursor: pointer;
	line-height: 1.4;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
}
.room-list-item .room-delete:hover {
	background: rgba(220, 38, 38, 0.08);
	border-color: var(--danger);
	color: var(--danger);
}
.room-name-edit {
	background: transparent;
	border: 1px solid var(--accent);
	border-radius: 4px;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	font-family: var(--font);
	padding: 2px 8px;
	outline: none;
	flex: 1;
	min-width: 0;
}
.room-name-edit:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}
.room-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

/* Onboarding modal */
.onboarding-nfc-icon {
	font-size: 48px;
	text-align: center;
	padding: 12px 0;
}
.onboarding-nfc-hint {
	font-size: 12px;
	color: var(--text-dim);
	text-align: center;
	font-style: italic;
	padding: 0 8px;
}
.onboarding-hint {
	font-size: 13px;
	color: var(--text-dim);
	text-align: center;
	margin: 4px 0;
}
.onboarding-relay-qr {
	overflow: hidden;
	width: 340px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
}
.onboarding-relay-qr svg {
	width: 100%;
	height: 100%;
	display: block;
}
.onboarding-relay-code {
	user-select: all;
	color: var(--accent);
}
/* In-QR loading spinner: shown while the QR SVG is being generated so the
   fixed-size code box is never blank. renderQRInto replaces the box's
   innerHTML with the SVG (removing the spinner) once the code is ready. */
.onboarding-relay-qr .qr-loading {
	width: 40px;
	height: 40px;
	border: 3px solid var(--surface2);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.onboarding-mnemonic {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	font-family: monospace;
	font-size: 14px;
	line-height: 1.7;
	color: var(--accent);
	text-align: center;
	word-break: break-word;
	overflow-wrap: break-word;
	resize: none;
	user-select: all;
	-webkit-user-select: all;
	margin: 8px 0;
}
#onboarding-copy-mnemonic-btn {
	font-size: 12px;
	padding: 8px;
}
#onboarding-cancel-btn {
	font-size: 13px;
}

/* Scan progress bar */
.scan-progress-bar {
	width: 100%;
	height: 6px;
	background: var(--bg-secondary);
	border-radius: 3px;
	overflow: hidden;
	margin: 12px 0;
}
.scan-progress-fill {
	height: 100%;
	width: 30%;
	background: var(--accent);
	border-radius: 3px;
	animation: scan-progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes scan-progress-indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

/* Responsive */
@media (max-width: 600px) {
	#lobby-header .lang-btn .btn-label {
		display: none;
	}
	#message-list {
		padding: 8px 10px;
	}
	#input-area {
		padding: 8px 10px;
	}
	.msg {
		max-width: 92%;
		padding: 7px 12px 7px 14px;
	}
	.color-swatch {
		width: 32px;
		height: 32px;
	}
	.color-swatches {
		gap: 6px;
	}
	.lobby-card {
		padding: 20px;
	}
	.room-list {
		padding: 12px;
	}
	.room-list-header {
		font-size: 13px;
		margin-bottom: 14px;
	}
	/* Keep the theme toggle and language button aligned to the same right
	   edge and header height across the landing, lobby, settings and chat
	   headers on mobile. */
	.landing-header,
	#lobby-header,
	#settings-header,
	#chat-header {
		padding: 8px 10px;
		gap: 8px;
		min-height: 44px;
	}
	.landing-header-actions {
		gap: 8px;
	}
	#chat-header h1 {
		font-size: 14px;
	}
	.app-toast {
		top: 44px;
	}
	.room-menu-panel {
		min-width: 40px;
		width: 40px;
	}
	.room-menu-label {
		display: none;
	}
	.room-menu-item {
		padding: 8px;
		justify-content: center;
	}
}
@media (max-width: 360px) {
	.msg {
		max-width: 95%;
		font-size: 13px;
	}
	.msg .msg-text {
		font-size: 13px;
	}
	.lobby-input {
		font-size: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		/* biome-ignore lint/complexity/noImportantStyles: intentional for accessibility - ensures reduced motion preference overrides element-level animations */
		animation-duration: 0.01ms !important;
		/* biome-ignore lint/complexity/noImportantStyles: intentional for accessibility */
		animation-iteration-count: 1 !important;
		/* biome-ignore lint/complexity/noImportantStyles: intentional for accessibility */
		transition-duration: 0.01ms !important;
		/* biome-ignore lint/complexity/noImportantStyles: intentional for accessibility */
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   WCAG AA contrast fixes
   -------------------------------------------------------------------------- */

/* The dark theme's bright accent (#38bdf8) and bright success (#4ade80) are
   too light to carry white text (only ~2:1). These accent-filled surfaces
   switch to a dark ink so text meets the WCAG AA minimum of 4.5:1. */
html[data-theme="dark"] #send-btn,
html[data-theme="dark"] .lobby-btn-primary,
html[data-theme="dark"] .name-modal-btn,
html[data-theme="dark"] .msg-own {
	color: #082f49;
}

/* The success-green "Start Chat" button and the connected status bar carry
   white text in both themes; a dark green ink keeps them >= 4.5:1 on the
   success surfaces (#4ade80 dark, #16a34a light). */
.lobby-btn-start,
#connection-bar.connected {
	color: #052e16;
}

/* --------------------------------------------------------------------------
   Landing page (standalone /landing.html and the in-app #landing-view)
   --------------------------------------------------------------------------
   #landing-view is the same marketing page embedded in the chat document so
   clicking the Norobo logo can show it without unloading the WASM app. The
   component styles below are shared by both; landing.html keeps only its own
   document-level body rules inline. */
#landing-view {
	flex: 1;
	display: none;
	flex-direction: column;
	overflow-y: auto;
	height: 100%;
}
.landing {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.landing-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 10;
	min-height: 48px;
}
.landing-header-start {
	display: flex;
	align-items: center;
	gap: 8px;
}
.landing-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.landing-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
	gap: 24px;
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}
.landing-hero-logo {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}
.landing-hero-logo svg {
	width: 100%;
	height: 100%;
}
.landing-hero-title {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--text);
}
.landing-hero-subtitle {
	font-size: 16px;
	color: var(--text-dim);
	line-height: 1.6;
	max-width: 480px;
}
.landing-hero-subtitle strong {
	color: var(--accent);
	font-weight: 600;
}
.landing-cta {
	padding: 14px 40px;
	border: none;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition:
		opacity 0.15s,
		transform 0.1s,
		box-shadow 0.2s;
	box-shadow: 0 4px 20px var(--accent-glow);
}
.landing-cta:hover {
	opacity: 0.92;
	transform: translateY(-2px);
	box-shadow: 0 6px 28px var(--accent-glow);
}
.landing-cta:active {
	transform: translateY(0);
}
.landing-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
}
.landing-feature {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	text-align: center;
}
.landing-feature-icon {
	font-size: 24px;
	margin-bottom: 6px;
}
.landing-feature-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 4px;
}
.landing-feature-desc {
	font-size: 12px;
	color: var(--text-dim);
	line-height: 1.5;
}
.landing-footer {
	padding: 16px 20px;
	text-align: center;
	font-size: 12px;
	color: var(--text-dim);
	border-top: 1px solid var(--border);
	flex-shrink: 0;
}
.landing-footer a {
	color: var(--accent);
}
@media (max-width: 480px) {
	.landing-hero-title {
		font-size: 28px;
	}
	.landing-hero-subtitle {
		font-size: 14px;
	}
	.landing-main {
		padding: 32px 16px;
		gap: 20px;
	}
	.landing-features {
		grid-template-columns: 1fr;
	}
}

/* --- Room admin: members panel, rejoin-waiting popup, kicked toast --- */

/* In public rooms only admins may rename; readonly headers drop the affordance. */
#chat-header h1.room-name-readonly {
	cursor: default;
}
#chat-header h1.room-name-readonly:hover {
	opacity: 1;
}
#chat-header h1.room-name-readonly .room-edit-icon {
	display: none;
}

/* Room options button with pending-rejoin badge (non-intrusive admin
   notification). The badge sits on the "⋮" toggle so admins see it even while
   the dropdown is closed. */
.room-menu-btn {
	position: relative;
}
.members-rejoin-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.members-modal-box {
	max-width: 420px;
	max-height: 70vh;
	overflow-y: auto;
}
.members-empty {
	color: var(--text-dim);
	font-size: 13px;
	text-align: center;
	padding: 8px 0;
}
.members-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 40vh;
	overflow-y: auto;
}
.member-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--radius);
	background: var(--bg);
	border: 1px solid var(--border);
}
.member-number {
	color: var(--text-dim);
	font-size: 12px;
	flex-shrink: 0;
}
.member-name {
	flex: 1;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.member-admin-badge {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 8px;
	padding: 2px 8px;
}
.member-kick-btn {
	flex-shrink: 0;
	border: 1px solid var(--danger);
	color: var(--danger);
	background: transparent;
	border-radius: var(--radius);
	font-size: 12px;
	padding: 4px 10px;
	cursor: pointer;
}
.member-kick-btn:hover {
	background: var(--danger);
	color: #fff;
}

.members-rejoin-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
}
.rejoin-requests-header {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dim);
	margin-bottom: 2px;
}
.rejoin-request-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--radius);
	background: var(--bg);
	border: 1px solid var(--border);
}
.rejoin-letin-btn {
	flex-shrink: 0;
	border: none;
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius);
	font-size: 12px;
	padding: 4px 12px;
	cursor: pointer;
}
.rejoin-letin-btn:hover {
	opacity: 0.9;
}

/* Text inputs and message content stay selectable/copyable */
#app input,
#app textarea,
#app .msg-text {
	user-select: text;
	-webkit-user-select: text;
}

/* Transient toast banner. */
.app-toast {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 12px 18px;
	font-size: 14px;
	box-shadow: var(--shadow-lg);
	max-width: 90vw;
	text-align: left;
}

.app-toast-icon {
	flex-shrink: 0;
	color: var(--accent);
}

/* In-app PWA install banner. Shown when the browser fires
   beforeinstallprompt (Chromium-based browsers), and on Firefox for Android
   which supports install but fires no event; see web/ts/pwa-install.ts. */
.pwa-install-banner {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	/* Below the modal layer (name-modal: 100) and toasts (200) so an open
	   dialog is never blocked by the install nudge, and above the sticky
	   headers (10) so it floats over the page. */
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
	width: min(480px, calc(100vw - 32px));
	padding: 14px 16px;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size: 14px;
	/* Only the banner's own controls are interactive: the backdrop passes
	   clicks through so it never intercepts the landing "Open Chat" button,
	   modal buttons, or message input that sit beneath it on small screens. */
	pointer-events: none;
}

.pwa-install-text {
	color: var(--text);
	line-height: 1.45;
}

.pwa-install-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.pwa-install-btn {
	background: var(--accent);
	color: var(--surface);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	pointer-events: auto;
}

.pwa-install-btn:hover {
	background: var(--accent-dim);
	border-color: var(--accent-dim);
}

.pwa-install-dismiss {
	background: transparent;
	color: var(--text-dim);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 7px 16px;
	font-size: 14px;
	cursor: pointer;
	pointer-events: auto;
}

.pwa-install-dismiss:hover {
	color: var(--text);
	border-color: var(--text-dim);
}

/* Manual mode (browsers with no install prompt, e.g. Firefox for Android):
   no Install button, just a close "✕" and instructions to use the browser's
   own "Add to Home Screen". The column layout used by the prompt-driven
   banner leaves the lone close button stranded bottom-right and looks awkward
   on narrow phones, so manual mode switches to a horizontal card: text on the
   left, close control on the right. */
.pwa-install-manual {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 12px;
}

.pwa-install-manual .pwa-install-text {
	min-width: 0;
}

.pwa-install-manual .pwa-install-actions {
	margin-left: auto;
	flex: 0 0 auto;
}

.pwa-install-manual .pwa-install-btn {
	display: none;
}

.pwa-install-close {
	align-self: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--text-dim);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}

.pwa-install-close:hover {
	color: var(--text);
	background: var(--border);
}

@media (max-width: 480px) {
	.pwa-install-banner {
		width: calc(100vw - 24px);
		padding: 12px 14px;
	}
}