@import url("/fonts/IosevkaFixed.css");

:root {
	--bg: light-dark(#eee, #111);
	--fg: light-dark(#111, #eee);
	--ffg: color-mix(in srgb, var(--fg) 15%, var(--bg) 85%);
	--ffg2: color-mix(in srgb, var(--fg) 10%, var(--bg) 90%);

	font-family: system-ui, sans-serif;
    font-feature-settings:
        "liga" 1,
        "calt" 1,
        "tnum" 1,
        "case" 1,
        "zero" 1,
        "ss02" 1;
	color-scheme: light dark;

	--main-background: var(--bg);
	--main-color: var(--fg);
	--motd-color: var(--purple);

	--border: var(--ffg);

	--purple: light-dark(oklch(0.492 0.172 300.89),oklch(0.675 0.135 300.89));
	--gray: color-mix(in srgb, var(--fg) 40%, var(--bg) 60%);
	--green: green;
	--red: light-dark(oklch(0.492 0.133 20.11),oklch(0.675 0.144 20.11));
	--blue: light-dark(oklch(0.583 0.229 259.597),oklch(0.767 0.119 259.597));
	--orange: light-dark(oklch(0.4 0.077 47.53),oklch(0.767 0.147 47.53));
	--yellow: light-dark(oklch(0.4 0.077 73.84),oklch(0.767 0.147 73.84));
}

html {
	scrollbar-color: #8e8e8e transparent;
}

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

body {
	display: grid;
	grid-template-rows: auto 1fr max-content max-content;
	grid-template-columns: max-content 1fr max-content;
	font-family: "Iosevka Fixed Web", monospace;
}

noscript {
	display: block;
	margin: 0 auto;
	max-width: 600px;
	grid-column-start: 2;
}

button {
	display: flex;
	justify-content: center;

    padding: 3px 8px;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 3px 0 var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: 0.1s all;

    &:hover:not(:disabled) {
        transform: translateY(-6px);
        box-shadow: 0 6px 0 var(--fg);
    }

    &:not(:disabled):active {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--fg);
        transition: 0s all;
    }

    &:disabled {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--fg);
        transition: 0s all;
    }
}

input,
textarea,
button {
    border: 1px solid var(--fg);
    color: var(--fg);
    background: var(--bg);
	/* background-color: light-dark(oklch(30% 0.3 var(--hue)), oklch(40% 0.3 var(--hue))); */
    padding: 8px 10px;
    transition: 0.1s all;
}

input:disabled,
textarea:disabled,
button:disabled {
    cursor: default;
    background: transparent;
    opacity: 60%;
    border: 1px dashed var(--fg);
}

button.danger:hover {
	/* border-color: light-dark(oklch(30% 0.3 var(--hue)), oklch(40% 0.3 var(--hue))); */
	border-color: var(--red);
	box-shadow: 0 3px 0 var(--red);
	color: var(--red);

    &:hover:not(:disabled) {
        transform: translateY(-6px);
        box-shadow: 0 6px 0 var(--red);
    }

    &:not(:disabled):active {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--red);
        transition: 0s all;
    }

    &:disabled {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--red);
        transition: 0s all;
    }
}

#buffer, #connect, #register {
	color: var(--main-color);
	background: var(--main-background);
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

#buffer-list, #member-list {
	color: var(--fg);
	background: var(--bg);
	width: 100%;
	height: 100%;

	/* background-color: var(--sidebar-background); */
	grid-column: 1;
	grid-row: 1 / 5;

	display: flex;
	flex-direction: row;
}

.expander {
	display: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	background: var(--bg);
	transition: background 0.2s linear;
	box-shadow: none!important;
	border: none;
	width: 10px;
}

.expander:hover {
	transform: unset!important;
}

.expander span {
	display: block;
	width: 100%;
	height: 2px;
	margin-bottom: 2px;
	border-style: solid;
	border-width: 1px 1px;
	border-color: var(--fg);
	transform: translateX(-2px);
}

#buffer-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--ffg);
	flex: 1 0 auto;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
#buffer-list li a {
	display: inline-block;
	width: 100%;
	padding: 2px 10px;
	box-sizing: border-box;
}
#buffer-list li.unread-message a {
	color: var(--blue);
}
#buffer-list li.unread-highlight a {
	color: var(--red);
}
#buffer-list li.active a {
	color: var(--bg);
	background-color: var(--fg);
}
#buffer-list li:not(.type-server) a {
	padding-left: 20px;
}

#member-list-header {
	color: var(--main-color);
	background-color: var(--main-background);
	box-sizing: border-box;
	padding: 5px 10px;
	border-bottom: 1px solid var(--sidebar-background);
}

#buffer-header {
	color: var(--main-color);
	background-color: var(--main-background);
	box-sizing: border-box;
	border-bottom: 1px solid var(--border);

	grid-row: 1;
	grid-column: 2;

	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr auto;
	button {
		margin-block: 12px 8px;
		margin-inline: 6px;
	}
}

#buffer-header .title {
	display: none;
	padding: 5px 10px;
	font-weight: bold;
	grid-row: 1;
	grid-column: 1;
}

#buffer-header .description {
	padding: 5px 10px;
	grid-row: 2;
	grid-column: 1;
	max-height: 20vh;
	overflow-y: auto;
	overflow-wrap: break-word;
}

#buffer-header .actions {
	grid-row: 1 / 3;
	grid-column: 2;
}

#buffer-header .status-here {
	color: var(--purple);
}
#buffer-header .status-gone {
	color: orange;
}
#buffer-header .status-offline {
	color: red;
}

.actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#buffer {
	grid-row: 2;
	grid-column: 2;
	align-content: end;
}

#buffer:focus {
	outline: none;
}

#typing-indicator {
	background-color: var(--main-background);
	color: var(--gray);
	box-sizing: content-box;
	height: 1lh;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 10px 0px 10px;
	grid-row: 3;
	grid-column: 2;
}

.typing-animation {
	background-image: url(/typing-indicator.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: ideographic;
	margin-right: 4px;
	display: inline-block;
	width: 16px;
	height: 1lh;
}

#member-list {
	grid-column: 3;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	border-left: 1px solid var(--border);
}

#member-list > section {
	display: flex;
	flex-direction: column;
}

#member-list-header {
	border-left: 1px solid var(--sidebar-background);
}

#member-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
#member-list li a {
	display: inline-block;
	width: 100%;
	padding: 2px 10px;
	box-sizing: border-box;
}
#member-list li a.away {
	color: var(--gray);
}

.membership { /* fallback */
	color: var(--purple);
}
.membership.owner {
	color: var(--red);
}
.membership.admin {
	color: var(--blue);
}
.membership.operator {
	color: var(--purple);
}
.membership.halfop {
	color: var(--orange);
}
.membership.voice {
	color: var(--yellow);
}

#composer {
	color: var(--main-color);
	background: var(--main-background);
	grid-row: 4;
	grid-column: 2 / 3;
	border-top: 1px solid var(--ffg);
	display: flex;
	position: relative;
}
@keyframes composer-spinner {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
#composer input[type="text"] {
	flex: 1;
	height: 35px;
	box-sizing: border-box;
	padding: 10px;
}
#composer input[type="text"], #composer input[type="text"]:focus {
	border: none;
	background: none;
	outline: none;
}
#composer-buttons {
	display: flex;
	align-items: center;
	padding-right: 4px;
	gap: 1px;
	margin-top: 6px;
}
#composer-buttons button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	font-size: 1.25em;
	color: inherit;
	background: transparent;
}
#composer-spinner .x-icon {
	display: none;
}
#composer-spinner .spinner-icon {
	display: block;
	animation: composer-spinner 600ms linear infinite;
}
#composer-spinner:hover .spinner-icon {
	display: none;
}
#composer-spinner:hover .x-icon {
	display: block;
	color: var(--red);
}
#composer.dragging {
	outline: 1px dashed var(--main-color);
	outline-offset: -1px;
}

#composer.read-only {
	display: none;
}

#connect, #register {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% - 64px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	padding: 32px 0;
	scroll-behavior: smooth;
}

#connect > *, #register > * {
	margin: 0;
	width: 500px;
	padding: 10px;
	box-sizing: border-box;
}
#connect > hr, #register > hr {
	padding: 0;
	border: unset;
	border-top: thin dotted var(--fg);
}
#register nav {
	margin-top: 16px;
}
#register > #throbber {
	display: block;
}

fieldset.rules {
	ol {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	border-color: var(--red);
	/* ↓ the top-padding is kinda off for some reason. by not a lot though*/
	padding-top: 4px!important;
}

div.row {
	button {
		&.suggested {
			&::after {
		        display: inline-block;
		        width: 1em;
		        font-style: normal;
		        text-align: center;
		        content: "↗";
		        margin-left: 4px;
		        transition: transform 0.2s ease;
			}

			/* --fg: var(--motd-color); */
		}

		font-size: 12pt;
	}

	display: flex;
	flex-direction: row;
	gap: 16px;
	padding: 0 !important;
	margin: 8px 0 !important;
}

form input[type="text"],
form input[type="username"],
form input[type="password"],
form input[type="url"],
form input[type="email"],
form input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
}
form label input[type="checkbox"], form label input[type="radio"] {
	margin-right: 0.5em;
}

a {
	color: var(--fg);
}
#buffer-list li a, a.timestamp, a.nick {
	text-decoration: none;
}
#buffer-list li a,
a.nick {
	cursor: default;
	color: var(--main-color);
	grid-area: nick;
}
a.timestamp {
	color: var(--gray);
	grid-area: timestamp;
}
#buffer-list li a:hover, #buffer-list li a:active,
a.timestamp:hover, a.timestamp:active,
a.nick-clickable:hover, a.nick-clickable:active {
	cursor: pointer;
	text-decoration: underline;
}

#buffer a:not(.timestamp):not(.nick),
#buffer-header a,
#connect a:not(a:has(button)){
	background-color: color-mix(in srgb, var(--fg) 15%, var(--bg) 85%);
    color: var(--fg);
    border-radius: 2px;
    padding: 1px 4px;
    text-decoration-color: transparent;

    &:hover {
        font-style: italic;

        &::after {
            transform: rotate(180deg);
            content: "→";
        }
    }

    &::after {
        display: inline-block;
        width: 1em;
        font-style: normal;
        text-align: center;
        content: "↗";
        margin-left: 4px;
        transition: transform 0.2s ease;
    }
}

details summary[role="button"] {
	user-select: none;
	cursor: pointer;
}

#buffer {
	box-sizing: border-box;
	color: var(--gray);
	word-wrap: break-word;
}
#buffer .logline-list {
	--padding: 10px;
	padding: var(--padding);
	&[centered="true"] {
		width: min(900px, calc(100% - var(--padding)));
		margin-inline: auto;
	}
}
#buffer .logline {
	white-space: pre-wrap;
	overflow: auto;
	line-height: 20px;
	margin-top: 0.3lh;
	margin-bottom: 0.3lh;
	overflow: hidden;
}
#buffer .logline:last-child {
	margin-bottom: 0px!important;
}
#buffer .logline.motd {
	margin-top: 0px;
	margin-bottom: 0px;
	color: var(--motd-color);
}
#buffer .talk, #buffer .motd, #buffer .nag {
	color: var(--main-color);
}
#buffer[bubbles="true"] .talk {
	background-color: var(--ffg2);
	padding: 6px;
	border-radius: 2px;
	width: fit-content;
}
#buffer[nickBreakAlign="true"] .logline.talk {
	display: flex;
	gap: 8px;
}
#buffer .me-tell {
	color: #b37400;
}
#buffer .highlight .nick {
	color: var(--bg);
	background-color: var(--yellow);
}

#buffer .nick {
    --hue: 100;
    --fg: light-dark(oklch(30% 0.3 var(--hue)), oklch(80% 0.31 var(--hue)));
	background-color: light-dark(oklch(90% 0.015 var(--hue)), transparent);
	color: var(--fg);
	max-height: 1lh;
	min-width: fit-content;
	&.nick-1 {
		--hue: 22.5;
	}
	&.nick-2 {
		--hue: 45;
	}
	&.nick-3 {
		--hue: 67.5;
	}
	&.nick-4 {
		--hue: 90;
	}
	&.nick-5 {
		--hue: 112.5;
	}
	&.nick-6 {
		--hue: 135;
	}
	&.nick-7 {
		--hue: 157.5;
	}
	&.nick-8 {
		--hue: 180;
	}
	&.nick-9 {
		--hue: 202.5;
	}
	&.nick-10 {
		--hue: 225;
	}
	&.nick-11 {
		--hue: 247.5;
	}
	&.nick-12 {
		--hue: 270;
	}
	&.nick-13 {
		--hue: 292.5;
	}
	&.nick-14 {
		--hue: 315;
	}
	&.nick-15 {
		--hue: 337.5;
	}
	&.nick-16 {
		--hue: 360;
	}
}


#buffer .separator {
	display: flex;
	align-items: center;
	text-align: center;
	text-transform: lowercase;
	font-variant: small-caps;
	user-select: none;
}
#buffer .separator::before, #buffer .separator::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid transparent;
}
#buffer .date-separator {
	color: var(--gray);
}
#buffer .date-separator::before, #buffer .date-separator::after {
	border-color: var(--ffg);
}
#buffer .unread-separator {
	color: var(--red);
}
#buffer .unread-separator::before, #buffer .unread-separator::after {
	border-color: var(--red);
}

div.error {
	color: var(--bg);
	background-color: var(--red);
	padding: 0.5rem;
	margin: 1.0rem;
}

#error-msg {
	color: var(--bg);
	background-color: var(--red);
	position: fixed;
	bottom: 2rem;
	right: 0;
	padding: 0.5rem;
	margin: 0.5rem;
}

#error-msg button, .dialog button.dialog-close {
	background: transparent;
	color: inherit;
	border-color: var(--bg);
    box-shadow: 0 3px 0 var(--bg);

    &:hover:not(:disabled) {
        transform: translateY(-6px);
        box-shadow: 0 6px 0 var(--bg);
    }

    &:not(:disabled):active {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--bg);
        transition: 0s all;
    }

    &:disabled {
        transform: translateY(0px);
        box-shadow: 0 0px 0 var(--bg);
        transition: 0s all;
    }
	font-size: inherit;
	padding: 0;
	width: 30px;
	height: 30px;
}

.dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: auto;
}
.dialog .dialog-body {
	background-color: var(--main-background);
	color: var(--main-color);
	margin: 20px auto;
	max-width: 500px;
	padding: 15px;
	border: 1px solid rgba(0, 0, 0, 0.6);
}
.dialog .dialog-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 1em;
}
.dialog .dialog-header h2 {
	flex-grow: 1;
	margin: 0;
}
.dialog .dialog-header button.dialog-close {
	font-size: 1.5em;
	padding: 0 5px;
}
.dialog h2 {
	margin-top: 0;
}
.dialog form button:not([type="button"]) {
	float: right;
}
.dialog form {
	overflow: auto; /* hack to clear floating elements */
}

.dialog .protocol-handler {
	display: flex;
	flex-direction: row;
}
.dialog .protocol-handler .left {
	flex-grow: 1;
}

kbd {
	background-color: var(--bg);
	border: 1px solid var(--ffg);
	box-shadow: inset 0 1px 0 0 var(--ffg), inset 0 -2px 0 0 var(--ffg);
	display: inline-block;
	font-size: 80%;
	margin: 3px;
	min-width: 1em;
	text-align: center;
	white-space: nowrap;
	padding: 2px 4px;
	font-family: monospace;
	border-radius: 3px;
}

ul.switcher-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-top: 10px;
}
ul.switcher-list li a {
	display: inline-block;
	width: 100%;
	padding: 5px 10px;
	margin: 4px 0;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}
ul.switcher-list li a.selected {
	background-color: var(--fg);
	color: var(--bg);
}
ul.switcher-list .server {
	float: right;
	opacity: 0.8;
}

@media (max-width: 640px) {
	:root {
		font-size: 0.9rem;
	}

	body {
		grid-template-columns: 100dvw 100dvw 100dvw;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		scroll-snap-stop: always!important;
		section#buffer-list {
			scroll-snap-align: start;
		}
		section#buffer-header {
			scroll-snap-align: center;
		}
		section#member-list {
			scroll-snap-align: end;
			section {
				width: 100%
			}
		}
	}

	/* .expander { */
	/* 	display: block; */
	/* } */

	#buffer .logline {
		margin-block: 0.60lh;
	}

	/* #buffer-list ul, #member-list > section { */
	/* 	width: 0px; */
	/* } */

	#member-list-header {
		border-left: none;
	}

	/* #buffer-header { */
	/* 	grid-template-columns: 1fr min-content; */
	/* } */

	#buffer-header .title {
		display: block;
	}
	#buffer .logline-list {
		--padding: 10px;
		padding: var(--padding);
		&[centered="true"] {
			width: min(900px, calc(100% - var(--padding)));
			margin-inline: auto;
			.logline {
				margin-right: var(--padding);
			}
		}
	}
    input,
    textarea,
    button {
        padding: 4px 8px;
        box-shadow: none;
    }
	.logline.talk {
		display: grid!important;
		grid-template-areas:
		"nick timestamp"
		". .";
		grid-template-rows: auto 1fr;
		height: fit-content;
		max-width: 100dvw;
		.logline-content {
			word-break: break-word;
			a { word-break: break-all; }
		}
	}
	#buffer .logline:last-child {
		margin-bottom: 0px!important;
	}
	a.timestamp {
		text-align: end;
	}
	a.nick {
		max-width: fit-content;
	}
}

@media (pointer: none), (pointer: coarse) {
	#buffer-list li a, #member-list li a {
		padding: 7px 10px;
	}
}

.pb-0, #buffer .pb-0 {
	padding-bottom: 0;
}