:root {
	--bg: #0e0e0e;
	--panel: #121212;
	--line: #222;
	--text: #e8e8e8;
	--muted: #888;
	--accent: #ff3333;
	--nick: #7ec8ff;
}

* { box-sizing: border-box; }
* {
	scrollbar-width: thin;
	scrollbar-color: #444 #141414;
}
*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
*::-webkit-scrollbar-track {
	background: #141414;
}
*::-webkit-scrollbar-thumb {
	background: #444;
	border-radius: 0;
	border: 1px solid #1a1a1a;
}
*::-webkit-scrollbar-thumb:hover {
	background: #555;
}
*::-webkit-scrollbar-corner {
	background: #141414;
}
input,
textarea,
select,
button {
	outline: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
#app input {
	transition: border-color 1.5s ease;
}
#app input:focus {
	outline: none;
	box-shadow: none;
	border-color: #3a3a3a;
}
#app textarea:focus {
	outline: none;
	box-shadow: none;
	border-color: #3a3a3a;
}
#app select:focus {
	outline: none;
	box-shadow: none;
	border-color: #3a3a3a;
}
#app input.field-err {
	border-color: var(--accent) !important;
	transition: none;
	animation: field-err-out 2.2s ease forwards;
}
@keyframes field-err-out {
	0% { border-color: var(--accent); }
	25% { border-color: var(--accent); }
	100% { border-color: var(--line); }
}
#app button:focus {
	outline: none;
	box-shadow: none;
}
html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	font: 14px/1.45 Consolas, "Courier New", monospace;
}
body { min-height: 100%; }
.hide { display: none !important; }
#app { height: 100%; overflow: hidden; }

.screen { height: 100%; }

#login.screen {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: hidden;
}
.login-box {
	width: 100%;
	max-width: 360px;
	margin: 0;
	padding: 28px 24px 22px;
	background: var(--panel);
	border: 1px solid var(--line);
}
.brand-logo {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 auto 22px;
}
#login-form input {
	width: 100%;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: #0a0a0a;
	color: var(--text);
	font: inherit;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
#login-form input:focus {
	border-color: #3a3a3a;
}
#login-form button,
.composer button,
#btn-logout {
	border: 0;
	background: var(--accent);
	color: #fff;
	font: inherit;
	padding: 10px 14px;
	cursor: pointer;
}
#login-form button { width: 100%; }
.err {
	color: var(--accent);
	min-height: 0;
	margin: 8px 0 0;
	text-align: center;
	font-size: 12px;
}
.err:empty { display: none; }
.hint {
	color: var(--muted);
	font-size: 12px;
	margin: 12px 0 0;
	text-align: center;
}

.irc {
	display: grid;
	grid-template-columns: 220px 1fr 180px;
	height: 100%;
}
.sidebar, .nicks {
	background: var(--panel);
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.sidebar { border-right: 1px solid var(--line); }
.nicks { border-left: 1px solid var(--line); }
.side-head {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
}
#channel-list, #nick-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	flex: 1;
	overflow: auto;
}
#channel-list li, #nick-list li {
	padding: 8px 14px;
	cursor: pointer;
	color: var(--text);
}
#channel-list li.active,
#channel-list li:hover,
#nick-list li:hover {
	background: #1a1a1a;
	color: #fff;
}
#channel-list li .k {
	color: var(--muted);
	margin-right: 4px;
}
#nick-list li {
	display: flex;
	align-items: center;
	gap: 4px;
}
.badge {
	display: inline-block;
	min-width: 0.9em;
	font-weight: 700;
	margin-right: 2px;
}
.badge-at { color: var(--accent); }
.badge-pct { color: #f0c040; }
.badge-star { color: #7ec8ff; }
.msg .badge { margin-right: 4px; }
.nick-menu {
	position: fixed;
	z-index: 50;
	min-width: 180px;
	background: #161616;
	border: 1px solid var(--line);
	box-shadow: 0 8px 24px rgba(0,0,0,0.45);
	padding: 4px 0;
}
.nick-menu button {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: left;
	padding: 8px 14px;
	cursor: pointer;
}
.nick-menu button:hover {
	background: #1a1a1a;
	color: #fff;
}
.nick-menu button.danger {
	color: #ff8888;
}
.nick-menu button.danger:hover {
	background: #3a1010;
	color: #ffaaaa;
}
.modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0,0,0,0.62);
}
.modal.hide {
	display: none !important;
}
.modal .modal-box {
	width: 100%;
	max-width: 360px;
	background: #161616;
	border: 1px solid var(--line);
	box-shadow: 0 12px 36px rgba(0,0,0,0.5);
	padding: 18px 18px 14px;
}
.modal .modal-box .modal-title {
	font-weight: 700;
	margin: 0 0 10px;
}
.modal .modal-box .modal-body .modal-text {
	margin: 0;
	color: var(--text);
	line-height: 1.45;
}
.modal .modal-box .modal-body .modal-text b {
	color: #fff;
}
.modal .modal-box .modal-form input {
	width: 100%;
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: #0a0a0a;
	color: var(--text);
	font: inherit;
	font-size: 16px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.modal .modal-box .modal-form input:focus {
	border-color: #3a3a3a;
}
.modal .modal-box .modal-form input.chan-key {
	-webkit-text-security: disc;
}
.modal .modal-box .modal-form .chan-hint {
	margin: -2px 0 4px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}
.modal .modal-box .modal-form .chan-hint b {
	color: #bbb;
	font-weight: 700;
}
.modal .modal-box .modal-form .form-inline-err {
	color: #ff8888;
	margin: 0 0 4px;
}
.modal .modal-box .modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 14px 0 0;
}
.modal .modal-box .modal-actions button {
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font: inherit;
	padding: 8px 14px;
	cursor: pointer;
}
.modal .modal-box .modal-actions button:hover {
	border-color: #444;
	color: #fff;
}
.modal .modal-box .modal-actions button.danger {
	border-color: #5a2020;
	background: var(--accent);
	color: #fff;
}
.modal .modal-box .modal-actions button.danger:hover {
	border-color: #ff5555;
}
#channel-list li {
	display: flex;
	align-items: center;
	gap: 6px;
}
#channel-list li .u {
	margin-left: auto;
	min-width: 1.4em;
	padding: 0 5px;
	border-radius: 2px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}
#channel-list li .act {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	opacity: 0.55;
}
#channel-list li .act:hover {
	color: #fff;
	opacity: 1;
}
#channel-list li:not(.has-unread) .act {
	margin-left: auto;
}
#channel-list li.has-unread .act {
	margin-left: 0;
}
#channel-list li .lab {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#channel-list li.has-unread {
	color: #fff;
}
.chan-tools {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 8px 14px;
	border-top: 1px solid var(--line);
}
.chan-tools button,
.chan-form button {
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	padding: 8px 6px;
	cursor: pointer;
	width: 100%;
}
.chan-tools button:hover,
.chan-form button:hover {
	border-color: #444;
	color: #fff;
}
.chan-form {
	padding: 0 14px 10px;
	border-top: 0;
	margin: 0;
}
.chan-form .chan-hint {
	margin: -2px 0 8px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}
.chan-form .chan-hint b {
	color: #bbb;
	font-weight: 700;
}
.chan-form input[type="text"],
.chan-form input[type="password"],
.chan-form input.chan-key {
	width: 100%;
	margin: 0 0 6px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	background: #0a0a0a;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.chan-form input[type="text"]:focus {
	border-color: #3a3a3a;
	box-shadow: none;
}
.chan-form input[type="password"]:focus {
	border-color: #3a3a3a;
	box-shadow: none;
}
.chan-form input.chan-key:focus {
	border-color: #3a3a3a;
	box-shadow: none;
}
.chan-form input.chan-key {
	-webkit-text-security: disc;
}
.chan-form label#chan-official-wrap,
.chan-form .chan-check {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 12px;
	cursor: pointer;
	user-select: none;
}
.chan-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin: 0;
	padding: 0;
	flex: 0 0 14px;
	border: 1px solid #555;
	background: #0a0a0a;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}
.chan-form input[type="checkbox"]:checked {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 2px #0a0a0a;
}
.chan-form button { width: 100%; }
.dm-results {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	max-height: 140px;
	overflow: auto;
}
.dm-results li {
	padding: 6px 8px;
	cursor: pointer;
	color: var(--nick);
	border: 1px solid transparent;
}
.dm-results li:hover {
	background: #1a1a1a;
	border-color: var(--line);
}
.public-list {
	max-height: 220px;
}
.public-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
}
.public-list li .pl-lock {
	color: var(--muted);
	font-size: 11px;
}
.public-list li .pl-joined {
	margin-left: auto;
	color: var(--muted);
	font-size: 11px;
}
.public-list li.empty {
	color: var(--muted);
	cursor: default;
}
.public-list li.empty:hover {
	background: transparent;
	border-color: transparent;
}
#nick-list li {
	color: var(--text);
}
#nick-list li .nl {
	font-weight: 600;
}
.side-foot {
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--muted);
	font-size: 12px;
}
#btn-logout {
	padding: 6px 10px;
	font-size: 12px;
	background: #333;
}
.main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}
.top {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.top #channel-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mob-btn {
	display: none;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 8px 10px;
	cursor: pointer;
}
.ws-state {
	font-weight: 400;
	font-size: 11px;
	color: var(--muted);
	flex: 0 0 auto;
}
.ws-state.on { color: #6c6; }
.ws-state.off { color: var(--accent); }
.mute-banner {
	background: #3a1010;
	color: #ffaaaa;
	padding: 8px 16px;
	border-bottom: 1px solid #5a2020;
}
.log {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 12px 16px;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
}
.msg {
	margin: 0 0 6px;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}
.msg .t { color: var(--muted); margin-right: 8px; }
.msg .n {
	color: var(--nick);
	margin-right: 8px;
	cursor: pointer;
	font-weight: 600;
}
.msg .n::before { content: "<"; color: var(--muted); }
.msg .n::after { content: ">"; color: var(--muted); }
.msg .at {
	margin-right: 6px;
	cursor: pointer;
	font-weight: 600;
}
.msg .fwd {
	margin-right: 6px;
	color: var(--muted);
	cursor: pointer;
}
.msg .b {
	white-space: pre-wrap;
	cursor: pointer;
}
.msg .sm {
	height: 22px;
	width: auto;
	vertical-align: middle;
	margin: 0 1px;
}
.msg.smile-only .sm {
	height: 40px;
}
.msg .e {
	margin-left: 6px;
	color: var(--muted);
	font-size: 11px;
	cursor: pointer;
}
.msg.mine .b { color: #f0f0f0; }
.msg.msg-new {
	background: rgba(255, 51, 51, 0.07);
	box-shadow: inset 2px 0 0 var(--accent);
}
.msg-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 10px;
	max-width: 100%;
	overflow: hidden;
	color: var(--accent);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	user-select: none;
}
.msg-sep::before {
	content: '';
	flex: 1;
	height: 1px;
	background: #5a2020;
}
.msg-sep::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #5a2020;
}
.msg-sep span {
	flex: 0 0 auto;
}
.msg.smile-only .b {
	font-size: 1.85em;
	line-height: 1.25;
	letter-spacing: 0.04em;
}
.composer {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--line);
	background: var(--panel);
	align-items: center;
}
.edit-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 16px;
	border-top: 1px solid var(--line);
	background: #1a1212;
	color: #ffaaaa;
	font-size: 12px;
}
.edit-bar.hide {
	display: none !important;
}
.edit-bar .compose-bar-main {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.edit-bar .edit-bar-lab {
	font-weight: 700;
}
.edit-bar .compose-bar-text {
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.edit-bar button {
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	padding: 4px 10px;
	cursor: pointer;
	flex: 0 0 auto;
}
.edit-bar.reply {
	background: #12181a;
	color: #a8d4ff;
}
.fwd-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 50vh;
	overflow: auto;
}
.fwd-list .fwd-item {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: left;
	padding: 10px 12px;
	cursor: pointer;
}
.fwd-list .fwd-item:hover {
	background: #1a1a1a;
	color: #fff;
}
.composer .composer-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.composer .composer-ico .sm {
	height: 22px;
	width: auto;
	pointer-events: none;
}
.composer .composer-ico:hover {
	border-color: #444;
	color: #fff;
}
.composer input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: #0a0a0a;
	color: var(--text);
	font: inherit;
	font-size: 16px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.composer input:focus {
	border-color: #3a3a3a;
}
.composer button[type="submit"] {
	flex: 0 0 auto;
}
.composer.is-muted input,
.composer.is-muted button {
	opacity: 0.45;
	pointer-events: none;
}
#btn-unmute { background: #333; }
.emoji-panel {
	border-top: 1px solid var(--line);
	background: #101010;
	max-height: 220px;
	overflow: auto;
	padding: 8px 10px 10px;
	-webkit-overflow-scrolling: touch;
}
.emoji-panel .emoji-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 8px;
	overflow-x: auto;
}
.emoji-panel .emoji-tabs button {
	flex: 0 0 auto;
	border: 1px solid var(--line);
	background: #1a1a1a;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	cursor: pointer;
}
.emoji-panel .emoji-tabs button.on {
	border-color: #555;
	background: #222;
}
.emoji-panel .emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: 2px;
}
.emoji-panel .emoji-grid.smile-grid {
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	gap: 4px;
}
.emoji-panel .emoji-grid button {
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 22px;
	line-height: 1.4;
	padding: 4px 0;
	cursor: pointer;
	border-radius: 4px;
}
.emoji-panel .emoji-grid.smile-grid button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 4px;
}
.emoji-panel .emoji-grid.smile-grid button .sm {
	height: 28px;
	width: auto;
	pointer-events: none;
}
.emoji-panel .emoji-grid button:hover {
	background: #1a1a1a;
}
.emoji-panel .emoji-empty {
	color: var(--muted);
	font-size: 12px;
	padding: 8px 4px;
}
.emoji-panel .smile-credit {
	margin-top: 8px;
	font-size: 11px;
	color: var(--muted);
}
.emoji-panel .smile-credit a {
	color: var(--muted);
	text-decoration: none;
}
.emoji-panel .smile-credit a:hover {
	color: #ccc;
}
.scrim {
	display: none;
}

@media (max-width: 860px) {
	.irc {
		display: block;
		position: relative;
		height: 100%;
		height: 100dvh;
	}
	.mob-btn { display: inline-flex; align-items: center; justify-content: center; }
	.main {
		height: 100%;
		position: relative;
		z-index: 1;
	}
	.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: min(300px, 88vw);
		z-index: 30;
		border-right: 1px solid var(--line);
		transform: translateX(-105%);
		transition: transform 0.18s ease;
		max-height: none;
	}
	.sidebar.open {
		transform: translateX(0);
	}
	.nicks {
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		width: min(260px, 80vw);
		z-index: 30;
		border-left: 1px solid var(--line);
		transform: translateX(105%);
		transition: transform 0.18s ease;
		max-height: none;
	}
	.nicks.open {
		transform: translateX(0);
	}
	#channel-list {
		display: block;
		overflow: auto;
		padding: 8px 0;
		flex: 1;
	}
	#channel-list li {
		white-space: nowrap;
	}
	.side-foot {
		display: flex;
	}
	.scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 25;
		background: rgba(0,0,0,0.55);
	}
	.scrim.hide {
		display: none !important;
	}
	.composer {
		padding: 10px 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.composer button[type="submit"] {
		padding: 10px 12px;
	}
	.emoji-panel {
		max-height: min(40vh, 260px);
	}
	.top {
		padding: 10px 12px;
		padding-top: calc(10px + env(safe-area-inset-top, 0px));
	}
	.log {
		padding: 10px 12px;
	}
}