* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	background: #1a1b1e; color: #e8e8ea;
	overflow: hidden;
}
.hidden { display: none !important; }
button, input { font: inherit; color: inherit; }
button {
	background: #2a2b30; border: 1px solid #3a3b40; padding: .5em .9em;
	border-radius: 4px; cursor: pointer;
}
button:hover { background: #34353a; }
input {
	background: #16171a; border: 1px solid #3a3b40; padding: .5em .7em;
	border-radius: 4px; outline: none; width: 100%;
}
input:focus { border-color: #6a6cff; }
.row { display: flex; gap: .5em; }
.err { color: #ff6b6b; min-height: 1.4em; font-size: .9em; }

/* auth */
.auth { height: 100%; display: grid; place-items: center; }
.auth form {
	background: #222328; padding: 2em; border-radius: 8px;
	display: flex; flex-direction: column; gap: .8em; min-width: 280px;
}
.auth h1 { text-align: center; font-weight: 500; margin-bottom: .5em; }

/* app shell */
.app { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
aside {
	background: #131418; border-right: 1px solid #2a2b30;
	display: flex; flex-direction: column; overflow-y: auto;
}
.me {
	padding: .8em 1em; border-bottom: 1px solid #2a2b30;
	display: flex; justify-content: space-between; align-items: center;
}
.me #logout { padding: 0 .5em; background: transparent; border: 0; }
.section { padding: .8em 0; }
.section-h {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0 1em .4em; color: #888; font-size: .8em; text-transform: uppercase;
	letter-spacing: .05em;
}
.section-h button { background: transparent; border: 0; padding: 0 .4em; color: #888; }
.section-h button:hover { color: #fff; }
ul { list-style: none; }
li {
	padding: .35em 1em; cursor: pointer; color: #bbb;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
li:hover { background: #1d1e22; color: #fff; }
li.active { background: #2a2b30; color: #fff; }
li::before { content: "# "; color: #555; }
li.dm::before { content: "@ "; }
li.unread { color: #fff; font-weight: 600; }
li .badge {
	background: #6a6cff; color: #fff; padding: 0 .5em;
	border-radius: 9px; font-size: .75em; margin-left: .4em;
	vertical-align: middle;
}
li .dot {
	display: inline-block; width: .55em; height: .55em; border-radius: 50%;
	background: #555; margin-right: .35em; vertical-align: middle;
}
li .dot.on { background: #4caf50; }

/* main */
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#ch-header {
	padding: .8em 1.2em; border-bottom: 1px solid #2a2b30; font-weight: 500;
	display: flex; align-items: center; justify-content: space-between;
}
#ch-header .ch-del {
	background: transparent; border: 0; color: #777; padding: 0 .4em;
	font-size: 1.2em; line-height: 1;
}
#ch-header .ch-del:hover { color: #ff6b6b; }
#messages {
	flex: 1; min-height: 0; overflow-y: auto; padding: 1em 1.2em;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
}
.msg { line-height: 1.6; word-break: break-word; }
.msg-time { color: #666; margin-right: .6em; }
.msg-user { font-weight: 600; margin-right: .5em; }
.msg-body { color: #d8d8da; white-space: pre-wrap; }
.msg-file { color: #8aa6ff; margin-left: .4em; }
.msg-img { display: block; max-width: 320px; max-height: 240px; border-radius: 4px; margin: .3em 0; }
.msg-video { display: block; max-width: 480px; max-height: 360px; border-radius: 4px; margin: .3em 0; background: #000; }

#composer {
	display: flex; gap: .5em; padding: .8em 1.2em;
	border-top: 1px solid #2a2b30;
}
#composer input { flex: 1; }
.file-btn {
	display: grid; place-items: center; width: 2.4em;
	background: #2a2b30; border: 1px solid #3a3b40;
	border-radius: 4px; cursor: pointer; font-size: 1.4em;
}
.file-btn:hover { background: #34353a; }
.typing {
	padding: .2em 1.2em; font-size: .8em; color: #888;
	font-style: italic; min-height: 1.4em;
}
.pending {
	padding: .4em 1.2em .6em; font-size: .85em; color: #aaa;
	border-top: 1px solid #2a2b30;
	display: flex; flex-direction: column; gap: .35em;
}
.pending-item {
	display: grid; grid-template-columns: 1fr 8em auto;
	align-items: center; gap: .6em;
}
.pending-name {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	/* truncate from the LEFT so the extension stays visible */
	direction: rtl; text-align: left;
	/* keep latin punctuation like dots in their natural place */
	unicode-bidi: plaintext;
}
.pending-bar {
	height: .5em; background: #1a1b1e; border-radius: 4px; overflow: hidden;
}
.pending-bar-fill {
	height: 100%; background: #6a6cff; transition: width .15s linear;
}
.pending-bar-fill.done { background: #4caf50; }
.pending-item button {
	padding: 0 .5em; background: transparent; border: 0; color: #ff6b6b;
	cursor: pointer; font-size: 1.1em; line-height: 1;
}

.conn {
	position: fixed; top: 0; left: 0; right: 0;
	background: #c14a4a; color: #fff; padding: .4em 1em;
	text-align: center; font-size: .85em; z-index: 200;
	pointer-events: none;
}
.dropzone {
	position: fixed; inset: 8px;
	border: 3px dashed #6a6cff; border-radius: 8px;
	background: rgba(106, 108, 255, 0.12);
	display: grid; place-items: center;
	color: #cfd0ff; font-size: 1.4em; font-weight: 500;
	z-index: 150; pointer-events: none;
}

/* noscript fallback */
.noscript {
	height: 100%; display: grid; place-items: center; padding: 2em;
	text-align: center;
}
.noscript h1 { font-weight: 500; margin-bottom: .5em; }
.noscript p { color: #aaa; }

/* dialog */
dialog {
	background: #222328; color: #e8e8ea; border: 1px solid #3a3b40;
	border-radius: 8px; padding: 1.5em; min-width: 320px;
}
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog form { display: flex; flex-direction: column; gap: .8em; }
dialog ul { max-height: 200px; overflow-y: auto; border: 1px solid #2a2b30; border-radius: 4px; }
dialog li::before { content: ""; }
dialog li.sel { background: #2a2b30; }
dialog .row { justify-content: flex-end; }