/* ---------------------------------------------------------------------
   melt -- shared styles
   Visual language lifted from the hextime project: near-black background,
   dotted-line motifs, Courier for system/meta text, retro silver buttons.
   Chat body text uses a system-ui stack, the same practical substitute
   Discord itself falls back to -- clean, geometric, highly readable at
   small sizes, without depending on a proprietary or externally-hosted
   typeface.
--------------------------------------------------------------------- */

/* Self-hosted subset covering every glyph in js/glyphs.js's token pool --
   many of those codepoints (hieroglyphs, isolated Arabic forms, Balinese,
   Runic, Ogham...) aren't reliably present in default OS fonts, so tokens
   render identically on every device instead of falling back to tofu boxes. */
@font-face {
	font-family: 'melt-glyphs';
	src: url('/assets/melt-glyphs.woff2') format('woff2');
	font-display: block;
}

/* Same display face used in hextime, reused here for headers only. */
@font-face {
	font-family: 'Skanaus-Display';
	src: url('/assets/Skanaus-Display.otf') format('opentype');
	font-display: swap;
}

:root {
	--bg: #060606;
	--fg: #f2f2f0;
	--dim: rgba(242, 242, 240, 0.4);
	--dimmer: rgba(242, 242, 240, 0.22);
	--line: rgba(242, 242, 240, 0.3);
	--accent: #f2f2f0;

	--font-display: 'Skanaus-Display', Georgia, serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
		Helvetica, Arial, sans-serif;
	--font-mono: 'Courier New', Courier, monospace;
	--font-glyph: 'melt-glyphs', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	height: 100%;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: normal;
	letter-spacing: 0.02em;
	margin: 0 0 0.5em;
}

a { color: inherit; }

p { line-height: 1.5; }

/* -------------------- retro silver / AOL-style buttons -------------------- */

.btn {
	background: #c9c9c9;
	color: #111;
	border: 2px outset #c9c9c9;
	border-radius: 2px;
	padding: 0.5em 1.2em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: inset 1px 1px 0px #ffffff, inset -1px -1px 0px #808080;
}

.btn:hover { background: #d8d8d8; }

.btn:active {
	border: 2px inset #c9c9c9;
	box-shadow: inset 1px 1px 0px #808080, inset -1px -1px 0px #ffffff;
}

.btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.btn-small {
	padding: 0.25em 0.7em;
	font-size: 0.8rem;
}

/* Same beveled shape as .btn, just a step darker -- less contrast against
   the black background. Text stays black like the regular silver button. */
.btn-dark {
	background: #888888;
	border: 2px outset #888888;
	box-shadow: inset 1px 1px 0px #c0c0c0, inset -1px -1px 0px #6b6b6b;
}

.btn-dark:hover { background: #949494; }

.btn-dark:active {
	border: 2px inset #888888;
	box-shadow: inset 1px 1px 0px #6b6b6b, inset -1px -1px 0px #c0c0c0;
}

.btn-danger { color: #5a1414; }

/* quiet, low-chrome button for inline/secondary actions (edit, delete) */
.btn-ghost {
	background: transparent;
	color: var(--dim);
	border: 1px dotted var(--line);
	padding: 0.15em 0.6em;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	cursor: pointer;
	border-radius: 2px;
}

.btn-ghost:hover { color: var(--fg); border-color: var(--fg); }

/* ------------------------------- inputs ------------------------------- */

.field {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px dotted var(--fg);
	outline: none;
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: 1.1rem;
	padding: 0.4em 0.1em;
}

.field::placeholder { color: var(--dim); font-family: var(--font-mono); }

.field:disabled { opacity: 0.4; }

textarea.field {
	border: 1px dotted var(--line);
	border-radius: 2px;
	padding: 0.6em 0.7em;
	resize: none;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* ------------------------------- meta / labels ------------------------------- */

.meta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--dim);
	letter-spacing: 0.02em;
}

.divider {
	border: none;
	border-top: 1px dotted var(--line);
	margin: 1em 0;
}

/* Section separators in the host room list -- a muted gray-cyan instead of
   plain white, so the three groups read as distinct at a glance. */
.divider-section {
	border: none;
	border-top: 1px dotted #5c8a8a;
	margin: 1em 0;
}

/* ------------------------------- layout shells ------------------------------- */

.screen {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
}

.panel {
	width: 100%;
	max-width: 420px;
	padding: 2rem 1.75rem;
	margin-top: -4rem;
}

/* Same dithered border-image used on hextime's profile-setup page (the
   address-for-invoicing form) -- reused here, homepage only, now framing
   the whole viewport (flush to the screen edge on a phone) rather than
   just the small join box. Thinner and grayed down via opacity, since a
   plain border-image ignores border-color -- opacity against the black
   page behind it is what reads as gray instead of white. */
.hex-frame {
	position: fixed;
	inset: 0;
	border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADlklEQVR4Aeyc0W7bQAwE1f7/P6ecIHDmJMeOQrpuky207Wrp453GAhH0Ib+3bXvZqW6XK/Ujoz2Tyz1AF3q56REI0B6/w+oAPSDpBQD9VS2syzyoHO8answis1zDu4Yns8gs1/Cu4cksMss1vGt4MovMcg3vGr6wLBfZRQBdqrnpEQjQHr/D6gA9IOkFAGVOWJd5UK3xruHJLDLLNbxreDKLzHIN7xqezCKzXMO7hiezyCzX8K7hySyyiwBa3HJNEQjQKZJvfQL0DcTUPwD1PMBf5kFtgiezyCzX8K7hySwyyzW8a3gyi8xyDe8answis1zDu4Yns8gs134BtLjlmiIQoFMk3/oE6BuIqX8A6nmAX2ZCbURmpb5tZmA2LwDd8meOQIDOsXztFKCvGOb+AqjnAX6ZCbUVmfXoem25XN4b/+j9z/ZfDgvQJchNj0CA9vgdVgfoAUkvAOjZmcEcsz6z3p/xWvzZJ2CN5d541/BkFpnlGt41PJlFZi3nB+gS5KZHIEB7/A6rA/SApBcA1PMA73mBJ7PILNfwruHJrN6Jj6vdG7//BJnFmSzX8K7hySwyy7X8f+iefveeN7TbI+tFIEAFY8IC1PMAv8yE2oTM6tar5VOv7vlvrgfoU5/uu20eoMPfaIA+AOjNmVD7Tder5aeuv/Wh0efLGzr8tQVogA4TGG7HG+qfMfGjM2X4vI9oxzNbrecH6CMO+WN7BujwVx+gDwDamhl1nv36iv7py/MSvz8/mXWqnjd0+LsP0AAdJjDcjjfU8wJ/ambUeVhjVfS069rGPhu++3w31wP02iGSfZFAgH4R3EfLAvQjMl/MAXpzJlTfbr1aPPXqnv/UeoA+9Wm/2+YBOvyNBugDgPKzmXVqZtR5vBZ/b30tWS7WWEtx4Ma98ffO16rnDR34xtwiQE1jwAfoAES3uAaUOWO1Zkpt1l1fLU5dPjv+3v6j9WtAT50+H14JBOjKo30XoG2Ea4NrQEdnSm3HHLO6/avlcrk3vtu/tf4a0OW0uTlHIEDP8br76QC9i+jcBwDamhm1XdZv77+DBKBb/swRCNA5lq+dAvQVw9xfAOVnNyszcXufidvxd9jDxzK7/N6mAjZ68YaONvzpzQJ0+A0AqOcBfpkJtR+Zlfo6VwvR+wXQ97u4NoEAbSNcGwToyqN9B9D9TNw33dc9T/H/W336+ZZ+AF2C3PQIBGiP32F1gB6Q9II/AAAA//9+qDdLAAAABklEQVQDACxe1JO29rq3AAAAAElFTkSuQmCC') 28 / 14px / 0 round;
	border-width: 14px;
	border-style: solid;
	filter: invert(1);
	opacity: 0.4;
	pointer-events: none;
	z-index: 1000;
}

.wide-panel {
	width: 100%;
	max-width: 760px;
}

.note-details {
	margin-top: 2.5rem;
}

.note-details summary {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--dim);
	cursor: pointer;
	list-style-position: outside;
}

.note-details summary:hover {
	color: var(--fg);
}

.note-details[open] summary {
	color: var(--fg);
	margin-bottom: 0.5rem;
}

.note {
	font-size: 0.85rem;
	color: var(--dim);
	font-style: italic;
	line-height: 1.5;
}

.drip-mark {
	display: block;
	width: 195px;
	height: auto;
	margin-bottom: 1.75rem;
}

.intro-line {
	font-size: 0.85rem;
	color: var(--dim);
	line-height: 1.5;
	margin: 0.5rem 0 1.5rem;
}

/* ------------------------------- room chrome ------------------------------- */

.room-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px dotted var(--line);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--dim);
}

.room-header .code-chip {
	color: var(--fg);
}

.presence-count::before {
	content: '';
}

.menu {
	position: relative;
}

.menu-trigger {
	background: transparent;
	border: none;
	color: var(--dim);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.2em 0.4em;
	cursor: pointer;
}

.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] {
	color: var(--fg);
}

.menu-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.4rem;
	background: var(--bg);
	border: 1px dotted var(--line);
	border-radius: 2px;
	padding: 0.25rem;
	white-space: nowrap;
	z-index: 10;
}

.menu-item {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--dim);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-align: left;
	padding: 0.4em 0.6em;
	cursor: pointer;
}

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

.room-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	min-height: 0;
}

.message-list {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem 1rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.message-row {
	display: flex;
	flex-direction: column;
	max-width: 78%;
}

.message-row.own {
	position: relative;
	align-self: flex-end;
	align-items: flex-end;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}

.message-row.other {
	align-self: flex-start;
	align-items: flex-start;
}

.message-text {
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
	color: rgba(242, 242, 240, 0.72);
	font-weight: 400;
}

.message-row.system .message-text {
	color: var(--dim);
	font-style: italic;
	font-size: 0.85rem;
}

.message-token {
	font-family: var(--font-glyph);
	font-size: 0.7rem;
	color: var(--dimmer);
	letter-spacing: 0.04em;
	line-height: 1;
	margin-bottom: 0.1em;
	padding-bottom: 0.03em;
	border-bottom: 1px dotted transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
	cursor: default;
	user-select: none;
}

.message-row:hover .message-token,
.message-row:focus-within .message-token {
	color: var(--fg);
	border-bottom-color: var(--line);
}

.composer {
	border-top: 1px dotted var(--line);
	padding: 0.85rem 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.composer-row {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
}

.composer-row .btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.composer-row textarea {
	flex: 1;
	min-height: 2.6em;
	max-height: 8em;
}

.char-counter {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--dim);
	text-align: right;
	visibility: hidden;
}

.char-counter.near-limit { visibility: visible; }
.char-counter.at-limit { color: #c07d5a; visibility: visible; }

/* ------------------------------- host dashboard ------------------------------- */

.host-shell {
	flex: 1;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 2rem 1.25rem 3rem;
}

.host-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0.6rem;
}

.host-actions:last-of-type {
	margin-bottom: 1.5rem;
}

.custom-room-form {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.4rem;
}

.custom-room-form .field {
	width: 12em;
}

#custom-room-error {
	margin-bottom: 1.5rem;
	min-height: 1em;
	color: #c07d5a;
}

#custom-room-error:empty {
	display: none;
}

.room-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.room-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0.25rem;
	border-bottom: 1px dotted var(--line);
	flex-wrap: wrap;
}

.room-card-code {
	font-family: var(--font-mono);
	font-size: 1rem;
	color: var(--fg);
}

.room-card-url {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--dimmer);
}

.room-card-meta {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--dim);
}

.room-card-actions {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.room-card.ended .room-card-code { color: var(--dim); }

@media (max-width: 560px) {
	.host-shell { padding: 1.25rem 1rem 2rem; }
	.room-card { flex-direction: column; align-items: flex-start; }
}