/* NeatIRC Modern Theme - Improved UI */

@import url("https://fonts.bunny.net/css?family=lato:400,400i,700,700i,900,900i");

:root {
	/* Enable dark mode support */
	color-scheme: light dark;
	
	/* Font Families */
	--font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Modern Color Palette - uses light-dark() for automatic theme switching */
	--color-background: light-dark(#ffffff, #1a1a1a);
	--color-surface: light-dark(#f8f9fa, #242424);
	--color-surface-hover: light-dark(#f1f3f5, #2d2d2d);
	--color-border: light-dark(#e9ecef, #3a3a3a);
	--color-border-light: light-dark(#f1f3f5, #2d2d2d);
	--color-text-primary: light-dark(#212529, #e9ecef);
	--color-text-secondary: light-dark(#6c757d, #adb5bd);
	--color-text-tertiary: light-dark(#adb5bd, #6c757d);
	--color-accent: light-dark(#4c6ef5, #5c7cfa);
	--color-accent-hover: light-dark(#4263eb, #4c6ef5);
	--color-accent-light: light-dark(#edf2ff, #1e3a8a);
	--color-success: light-dark(#51cf66, #69db7c);
	--color-danger: light-dark(#ff6b6b, #ff8787);
	--color-warning: light-dark(#ffd43b, #ffd43b);
	
	/* Component Colors */
	--channels-pane-background: var(--color-surface);
	--chat-avatar-background: var(--color-accent-light);
	--chat-avatar-text-color: var(--color-accent);
	--chat-reaction-pill-background: var(--color-surface);
	--chat-reaction-pill-border-color: var(--color-border);
	--chat-reaction-pill-hover-background: var(--color-surface-hover);
	--chat-text-color: var(--color-text-primary);
	--chat-text-hover-background: light-dark(rgba(76, 110, 245, 0.04), rgba(92, 124, 250, 0.08));
	--chat-timestamp-text-color: var(--color-text-tertiary);
	--emoji-option-background: transparent;
	--emoji-picker-background: var(--color-background);
	--emoji-picker-border-color: var(--color-border);
	--header-background: var(--color-background);
	--header-border-color: var(--color-border);
	--header-toggle-background: var(--color-background);
	--header-toggle-border-color: var(--color-border);
	--header-toggle-hover-background: var(--color-surface);
	--link-preview-card-background: var(--color-surface);
	--link-preview-card-border-color: var(--color-border);
	--link-preview-card-hover-background: var(--color-surface-hover);
	--link-preview-card-hover-border-color: var(--color-border);
	--login-backdrop-background: var(--color-surface);
	--login-background: var(--color-accent);
	--login-background-hover: var(--color-accent-hover);
	--login-border-color: var(--color-accent);
	--login-field-input-border-color: var(--color-border);
	--login-modal-background: var(--color-background);
	--login-modal-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
	--login-text-color: #ffffff;
	--members-pane-background: var(--color-surface);
	--members-pane-border-color: var(--color-border);
	--menu-backdrop-background: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
	--menu-close-background: transparent;
	--menu-close-hover: var(--color-surface);
	--menu-header-border-color: var(--color-border);
	--menu-item-background: var(--color-background);
	--menu-item-hover-background: var(--color-surface);
	--menu-item-border-color: var(--color-border);
	--menu-modal-background: var(--color-background);
	--menu-modal-shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
	--mobile-pane-background: var(--color-background);
	--pane-border-color: var(--color-border);
	--raw-backdrop-background: light-dark(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.85));
	--raw-close-background: transparent;
	--raw-close-hover: light-dark(#2a2a2a, #3a3a3a);
	--raw-form-border-color: light-dark(#3a3a3a, #4a4a4a);
	--raw-header-border-color: light-dark(#3a3a3a, #4a4a4a);
	--raw-input-background: light-dark(#1a1a1a, #0a0a0a);
	--raw-input-focus: var(--color-accent);
	--raw-input-text-color: light-dark(#e9ecef, #e9ecef);
	--raw-modal-background: light-dark(#0a0a0a, #000000);
	--raw-modal-shadow: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
	--raw-modal-text-color: light-dark(#e9ecef, #e9ecef);
	--raw-mode-header-border: light-dark(#3a3a3a, #4a4a4a);
	--raw-mode-inner-text-color: light-dark(#e9ecef, #e9ecef);
	--raw-mode-overlay-background: light-dark(#0a0a0a, #000000);
	--raw-mode-send-border: light-dark(#3a3a3a, #4a4a4a);
	--raw-send-background: var(--color-accent);
	--raw-send-hover-background: var(--color-accent-hover);
	--raw-send-text-color: #ffffff;
	--upgrade-notice-background: var(--color-danger);
	--upgrade-notice-text-color: #ffffff;
	
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	
	/* Borders */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-full: 624rem;
	
	/* Shadows */
	--shadow-sm: light-dark(0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.2));
	--shadow-md: light-dark(0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.3));
	--shadow-lg: light-dark(0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.4));
	--shadow-xl: light-dark(0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.5));
	
	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Support for iOS safe areas (notch, home indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
	#chat-form {
		padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
	}
}

/* Kinda-sorta mitigates text selection on long-presses in mobile */
@media (pointer: coarse) {
	.chat-message,
	.chat-message * {
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
	}
}

@media (max-width: 640px) {
	.toggle-label {
		display: none;
	}
}

* {
	box-sizing: border-box;
}

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

button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	transition: all var(--transition-fast);
	cursor: pointer;
	border: none;
	font-weight: 500;
}

input {
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

body {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-primary);
	background: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#app {
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ============================================
   HEADER BAR
   ============================================ */

header {
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.5rem;
	border-bottom: 1px solid var(--header-border-color);
	background: var(--header-background);
	gap: 0.5rem;
	flex-shrink: 0;
}

.header-toggle {
	font-size: 0.875rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--header-toggle-border-color);
	background: var(--header-toggle-background);
	border-radius: var(--radius-md);
	white-space: nowrap;
	min-width: 7rem;
	color: var(--color-text-secondary);
}

.header-toggle:hover {
	background: var(--header-toggle-hover-background);
	border-color: var(--color-border);
	color: var(--color-text-primary);
}

.header-toggle svg {
	fill: currentColor;
}

.header-center {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex: 1;
	justify-content: center;
	min-width: 0;
}

.header-channel-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary);
	background: transparent;
	border: none;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition-fast);
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-channel-name:hover {
	background: var(--color-surface-hover);
}

.header-menu-button {
	padding: 0.5rem 0.875rem;
}

#status-text {
	font-size: 0.8125rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-full);
	font-weight: 500;
}

#status-text.disconnected {
	color: var(--color-text-tertiary);
	background: var(--color-surface);
}

#status-text.connected {
	color: var(--color-success);
	background: light-dark(#d3f9d8, #1e4620);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

main {
	flex: 1;
	min-height: 0;
	display: flex;
	overflow: hidden;
	position: relative;
}

.pane {
	border-right: 1px solid var(--pane-border-color);
	overflow: auto;
	transition: transform var(--transition-base);
}

/* ============================================
   CHANNELS PANE
   ============================================ */

#channels-pane {
	background: var(--channels-pane-background);
	height: 100%;
	overflow: scroll;
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

#join-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

#join-form label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--color-text-secondary);
}

#join-input {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	background: var(--color-background);
}

#join-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

#join-form button[type="submit"] {
	padding: 0.625rem;
	background: var(--color-accent);
	color: white;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.875rem;
}

#join-form button[type="submit"]:hover {
	background: var(--color-accent-hover);
}

#channel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-bottom: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

#channel-list li {
	list-style: none;
}

#channel-list li button {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	font-weight: 500;
	text-align: left;
	font-family: inherit;
	transition: all var(--transition-fast);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#channel-list li button:hover {
	background: var(--color-surface-hover);
	color: var(--color-text-primary);
}

#channel-list li button.active {
	background: var(--color-accent-light);
	color: var(--color-accent);
	font-weight: 600;
}

/* Dragging state for channels */
#channel-list li.dragging {
	opacity: 0.6;
	transform: scale(1.05);
	box-shadow: var(--shadow-lg);
	z-index: 100;
	background: var(--color-background);
}

#channel-list li.drag-over {
	border-top: 3px solid var(--color-accent);
	margin-top: 0.25rem;
}

#chat-pane {
	flex: 1;
	min-width: 0;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-background);
	position: relative;
}

.channel-topic {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	right: 0.5rem;
	z-index: 10;
	padding: 0.75rem 1rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	animation: slideDown var(--transition-base);
	pointer-events: auto;
}

.channel-topic[hidden] {
	display: none;
}

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

.channel-topic-text {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
	word-wrap: break-word;
}

.channel-topic-text:empty::before {
	content: "No topic set";
	font-style: italic;
	opacity: 0.6;
}

#chat-view {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	padding-bottom: 0.5rem;
	/* Add top padding when topic is shown */
	padding-top: 0;
}

/* Custom scrollbar */
#chat-view::-webkit-scrollbar {
	width: 8px;
}

#chat-view::-webkit-scrollbar-track {
	background: transparent;
}

#chat-view::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-full);
}

#chat-view::-webkit-scrollbar-thumb:hover {
	background: light-dark(var(--color-text-tertiary), var(--color-text-secondary));
}

.chat-line {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.2rem 0.75rem;
	margin: 0.05rem 0;
	border-radius: 0.4rem;
}

.chat-line:hover {
	background: var(--chat-text-hover-background);
}

.chat-line + .chat-line {
	margin-top: 0.1rem;
}

.chat-line.chat-info {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	font-style: italic;
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
	text-align: center;
}

/* Avatar bubble */
.chat-avatar {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	background: var(--chat-avatar-background);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chat-avatar-text-color);
	overflow: hidden;
	user-select: none;
}

.chat-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Message content */
.chat-content {
	flex: 1 1 auto;
	min-width: 0;
}

.chat-header {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-sm);
	margin-bottom: 0.125rem;
}

.chat-nick {
	font-weight: 600;
	color: var(--color-text-primary);
	font-size: 0.9375rem;
}

.chat-ts {
	font-size: 0.75rem;
	color: var(--chat-timestamp-text-color);
}

.chat-text {
	white-space: pre-wrap;
	word-wrap: break-word;
	color: var(--chat-text-color);
	line-height: 1.5;
}

/* Style emote lines */
.chat-line.chat-action .chat-text {
	font-style: italic;
	color: var(--color-text-secondary);
}

/* Additional stacked messages from the same speaker */
.chat-text.chat-text-cont {
	margin-top: 0.25rem;
}

/* ============================================
   CHAT FORM
   ============================================ */

#chat-form {
	flex: 0 0 auto;
	margin-top: 0.5rem;
}

#typing-indicator {
	height: 1.5rem;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
	padding-left: var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
}

#chat-input-row {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
}

#chat-attach-button {
	padding: 0.625rem;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	background: var(--color-background);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	font-size: 1.25rem;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
}

#chat-attach-button:hover:not(:disabled) {
	background: var(--color-surface);
	color: var(--color-text-primary);
}

#chat-attach-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#chat-input {
	flex: 1;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	/* Increase font size on mobile to prevent zoom on focus */
	font-size: max(0.875rem, 16px);
	background: var(--color-background);
	color: var(--color-text-primary);
}

#chat-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

#chat-input:disabled {
	background: var(--color-surface);
	cursor: not-allowed;
	opacity: 0.6;
}

#chat-send-button {
	padding: 0.625rem 1.25rem;
	flex-shrink: 0;
	background: var(--color-accent);
	color: white;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.875rem;
}

#chat-send-button:hover:not(:disabled) {
	background: var(--color-accent-hover);
}

#chat-send-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================
   MEMBERS PANE
   ============================================ */

#members-pane {
	background: var(--members-pane-background);
	border-right: none;
	border-left: 1px solid var(--members-pane-border-color);
	padding: var(--spacing-md);
	height: 100%;
	overflow: scroll;
}

#member-list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-bottom: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

#member-list li {
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
	cursor: default;
}

#member-list li:hover {
	background: var(--color-surface-hover);
	color: var(--color-text-primary);
}

/* ============================================
   RESPONSIVE LAYOUT
   ============================================ */

body[data-layout="desktop"] #channels-pane {
	flex: 0 0 220px;
	max-width: 25%;
}

body[data-layout="desktop"] #members-pane {
	flex: 0 0 220px;
	max-width: 25%;
}

body[data-layout="desktop"] #channels-pane.hidden,
body[data-layout="desktop"] #members-pane.hidden {
	display: none;
}

body[data-layout="mobile"] #channels-pane,
body[data-layout="mobile"] #members-pane {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	display: none;
	border: none;
	background: var(--mobile-pane-background);
	box-shadow: var(--shadow-xl);
}

body[data-layout="mobile"] #channels-pane.overlay-open,
body[data-layout="mobile"] #members-pane.overlay-open {
	display: flex;
	animation: slideIn var(--transition-base);
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

body[data-layout="mobile"] #channels-pane.hidden,
body[data-layout="mobile"] #members-pane.hidden {
	/* Mobile specific handling */
}

/* ============================================
   MENU MODAL
   ============================================ */

.menu-backdrop {
	position: fixed;
	inset: 0;
	background: var(--menu-backdrop-background);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	backdrop-filter: blur(2px);
	animation: fadeIn var(--transition-fast);
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.menu-backdrop.hidden {
	display: none;
}

.menu-modal {
	background: var(--menu-modal-background);
	min-width: min(90vw, 28rem);
	max-width: 90vw;
	max-height: 80vh;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: scaleIn var(--transition-base);
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.menu-header {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--menu-header-border-color);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.menu-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.menu-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary);
}

#menu-status-indicator {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

#menu-status-text {
	font-size: 0.8125rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-full);
	font-weight: 500;
}

#menu-status-text.disconnected {
	color: var(--color-text-tertiary);
	background: var(--color-surface);
}

#menu-status-text.connected {
	color: var(--color-success);
	background: light-dark(#d3f9d8, #1e4620);
}

.menu-close-btn {
	border: none;
	background: var(--menu-close-background);
	font-size: 1.5rem;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-close-btn:hover {
	background: var(--menu-close-hover);
	color: var(--color-text-primary);
}

.menu-body {
	padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
	overflow: auto;
}

.menu-item {
	display: block;
	width: 100%;
	padding: 0.75rem var(--spacing-md);
	margin-bottom: var(--spacing-sm);
	border-radius: var(--radius-md);
	border: 1px solid var(--menu-item-border-color);
	background: var(--menu-item-background);
	text-align: left;
	font-size: 0.875rem;
	color: var(--color-text-primary);
	font-weight: 500;
	gap: 0.5rem;
}

#theme-toggle-icon {
	font-size: 1.1em;
}

.menu-item:hover {
	background: var(--menu-item-hover-background);
	border-color: var(--color-border);
}

.menu-item:last-child {
	margin-bottom: 0;
}

.hidden {
	display: none;
}

/* ============================================
   LOGIN OVERLAY
   ============================================ */

#login-backdrop {
	position: fixed;
	inset: 0;
	background: var(--login-backdrop-background);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

#login-modal {
	background: var(--login-modal-background);
	width: min(28rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	padding: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.login-header {
	margin-bottom: var(--spacing-sm);
}

#login-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text-primary);
}

#login-title strong {
	color: var(--color-accent);
}

.reconnecting-message {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--color-accent-light);
	border-radius: var(--radius-md);
	color: var(--color-accent);
	font-size: 0.9375rem;
	font-weight: 500;
}

.reconnecting-message[hidden] {
	display: none;
}

/* Spinner animation */
.spinner {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--color-accent-light);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

#login-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

#connection-settings {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

#connection-settings legend {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: var(--spacing-sm);
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

#connection-settings > div {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

#connection-settings label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

#connection-settings input {
	padding: 0.75rem var(--spacing-md);
	border: 1px solid var(--login-field-input-border-color);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	background: var(--color-background);
}

#connection-settings input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

#login-button {
	padding: 0.875rem var(--spacing-lg);
	border-radius: var(--radius-md);
	background: var(--login-background);
	color: var(--login-text-color);
	font-weight: 600;
	font-size: 0.9375rem;
	margin-top: var(--spacing-sm);
}

#login-button:hover {
	background: var(--login-background-hover);
}

/* ============================================
   IRC CONSOLE OVERLAY
   ============================================ */

#raw-mode-overlay {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: var(--raw-mode-overlay-background);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

#raw-mode-overlay[hidden] {
	display: none;
}

#raw-mode-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	color: var(--raw-mode-inner-text-color);
	font-family: var(--font-mono);
}

#raw-mode-header {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--raw-mode-header-border);
}

#raw-mode-close {
	padding: 0.5rem var(--spacing-md);
	background: var(--raw-close-background);
	color: var(--raw-mode-inner-text-color);
	border: 1px solid var(--raw-form-border-color);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
}

#raw-mode-close:hover {
	background: var(--raw-close-hover);
}

#raw-mode-log {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--spacing-md);
	overflow: auto;
}

#raw-mode-log h3 {
	margin: 0 0 var(--spacing-md);
	font-size: 0.9375rem;
	font-weight: 600;
}

#raw-mode-log pre#log {
	margin: 0;
	white-space: pre;
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
}

#raw-mode-send {
	flex: 0 0 auto;
	padding: var(--spacing-md);
	border-top: 1px solid var(--raw-mode-send-border);
}

#raw-mode-send form {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
}

#raw-mode-send label {
	font-size: 0.8125rem;
	white-space: nowrap;
}

#raw-mode-send input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.625rem var(--spacing-md);
	background: var(--raw-input-background);
	color: var(--raw-input-text-color);
	border: 1px solid var(--raw-form-border-color);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
}

#raw-mode-send input[type="text"]:focus {
	outline: none;
	border-color: var(--raw-input-focus);
	box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.2);
}

#raw-mode-send button {
	flex: 0 0 auto;
	padding: 0.625rem var(--spacing-lg);
	background: var(--raw-send-background);
	color: var(--raw-send-text-color);
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.8125rem;
}

#raw-mode-send button:hover {
	background: var(--raw-send-hover-background);
}

/* ============================================
   CHAT MESSAGES & REACTIONS
   ============================================ */

.chat-message {
	margin-top: 0.125rem;
	position: relative;
	padding: 0.125rem 0;
}

/* Reaction row */
.chat-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-sm);
	font-size: 0.8125rem;
}

/* Reaction pill (emoji + count) */
.chat-reaction-pill {
	border: 1px solid var(--chat-reaction-pill-border-color);
	border-radius: var(--radius-full);
	padding: 0.25rem 0.625rem;
	background: var(--chat-reaction-pill-background);
	cursor: pointer;
	line-height: 1.2;
	font-size: 0.8125rem;
	transition: all var(--transition-fast);
}

.chat-reaction-pill:hover {
	background: var(--chat-reaction-pill-hover-background);
	border-color: var(--color-border);
	transform: translateY(-1px);
}

.chat-react-button {
	font-weight: 600;
}

/* Emoji picker popup */
.emoji-picker {
	position: fixed;
	z-index: 999;
	background: var(--emoji-picker-background);
	border-radius: var(--radius-full);
	padding: var(--spacing-sm) var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	border: 1px solid var(--emoji-picker-border-color);
	box-shadow: var(--shadow-lg);
}

.emoji-picker.hidden {
	display: none;
}

.emoji-option {
	border: none;
	background: var(--emoji-option-background);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.25rem 0.375rem;
	line-height: 1;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.emoji-option:hover {
	transform: scale(1.2);
}

/* Images in chat */
.chat-text .chat-image {
	display: block;
	margin-top: var(--spacing-sm);
	width: auto;
	height: auto;
	max-height: 20rem;
	max-width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* Link preview cards */
.link-preview-card {
	display: block;
	margin-top: var(--spacing-sm);
	border: 1px solid var(--link-preview-card-border-color);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	background: var(--link-preview-card-background);
	max-width: 28rem;
	font-size: 0.875rem;
	overflow: hidden;
	transition: all var(--transition-fast);
}

.link-preview-card:hover {
	background: var(--link-preview-card-hover-background);
	border-color: var(--link-preview-card-hover-border-color);
	box-shadow: var(--shadow-sm);
}

.link-preview-inner {
	display: flex;
	align-items: stretch;
}

.link-preview-image-wrapper {
	flex: 0 0 6rem;
	max-width: 6rem;
	overflow: hidden;
}

.link-preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.link-preview-content {
	flex: 1;
	padding: var(--spacing-md);
	min-width: 0;
}

.link-preview-title {
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.link-preview-description {
	max-height: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	opacity: 0.8;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.link-preview-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	font-size: 0.75rem;
	opacity: 0.7;
}

.link-preview-site {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.link-preview-fedi {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	white-space: nowrap;
}

.link-preview-fedi-avatar {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	object-fit: cover;
}

.link-preview-fedi-text {
	text-overflow: ellipsis;
	overflow: hidden;
}

/* ============================================
   MISC
   ============================================ */

#upgrade-notice {
	position: absolute;
	top: var(--spacing-md);
	left: var(--spacing-md);
	background: var(--upgrade-notice-background);
	color: var(--upgrade-notice-text-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-md) var(--spacing-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	box-shadow: var(--shadow-lg);
}

.active {
	font-weight: 600;
}

label[for="chat-input"] {
	display: none !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* At 900px (when panes are hidden), simplify header */
@media (max-width: 900px) {
	/* Hide text labels, show only icons */
	.toggle-label,
	.menu-label {
		display: none !important;
	}
	
	/* Hide connection status indicator */
	#status-text {
		display: none !important;
	}
	
	/* Make buttons icon-only */
	.header-toggle {
		min-width: auto;
		padding: 0.5rem;
	}
	
	.header-menu-button {
		min-width: auto;
		padding: 0.5rem;
	}
	
	/* Emoji icons should be normal size */
	.toggle-icon,
	.menu-icon {
		font-size: 1.25rem;
		line-height: 1;
	}
}

@media (max-width: 768px) {
	header {
		height: 3rem;
		padding: 0 var(--spacing-sm);
		gap: var(--spacing-sm);
		flex-wrap: nowrap;
	}
	
	.header-center {
		flex: 1;
		justify-content: center;
		gap: var(--spacing-sm);
	}
	
	.header-channel-name {
		font-size: 0.9375rem;
		padding: 0.375rem 0.625rem;
		max-width: none;
		flex: 1;
		min-width: 0;
	}
	
	/* Fix main height for mobile - don't use fixed calc */
	main {
		flex: 1;
		height: auto;
		min-height: 0;
	}
	
	/* Make chat-pane fill available space */
	#chat-pane {
		flex: 1;
		min-height: 0;
	}
	
	/* Adjust pane heights for mobile overlay mode */
	#channels-pane,
	#members-pane {
		height: 100vh;
	}
	
	#chat-form {
		/* Ensure form stays at bottom on mobile */
		background: var(--color-background);
		padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
	}
	
	#chat-input-row {
		gap: var(--spacing-xs);
	}
	
	#chat-input {
		/* Prevent iOS zoom on input focus */
		font-size: 16px;
	}
	
	#chat-attach-button {
		width: 2.25rem;
		height: 2.25rem;
		padding: 0.5rem;
	}
	
	#chat-send-button {
		padding: 0.5rem 0.875rem;
		font-size: 0.8125rem;
	}
	
	.chat-avatar {
		flex: 0 0 2rem;
		width: 2rem;
		height: 2rem;
	}
}

/* Extra small screens - even more compact */
@media (max-width: 400px) {
	header {
		padding: 0.375rem var(--spacing-xs);
	}
	
	.header-toggle {
		padding: 0.375rem 0.5rem;
		font-size: 0.75rem;
	}
	
	.header-title {
		font-size: 0.9375rem;
	}
	
	#status-text {
		font-size: 0.6875rem;
		padding: 0.1875rem 0.4375rem;
	}
	
	#chat-send-button {
		padding: 0.5rem 0.625rem;
	}
}