:root {
	--background: #eff1f5;
	--background-trans: #eff1f580;
	--background-invis: #eff1f500;
	--popup: #e6e9ef;
	--popup-trans: #dce0e880;
	--border-trans: #dce0e880;
	--text: #4c4f69;
	--text-trans: #4c4f6980;
	--label: #6c6f85;
	--label-alt: #dce0e8;
	--c1: #4c4f6980;
	--c2: #5c5f77C0;
	--c3: #6c6f85;
	--shadow: #00000020;

	--rosewater: #dc8a78;
	--rosewater-trans: #dc8a7830;
	--green: #40a02b;
	--green-trans: #40a02b40;

	--blue: #7287fd;
	--blue-trans: #7287fd80;
	--red: #dd7878;
	--red-trans: #dd787880;
	--grey: #acb0be;
	--grey-trans: #acb0be80;

	--highlight: var(--rosewater);
	--highlight-trans: var(--rosewater-trans);

	--toast-clearance: 4.5rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #1e1e2e;
		--background-trans: #1e1e2e80;
		--background-invis: #1e1e2e00;
		--popup: #181825;
		--popup-trans: #11111b80;
		--border-trans: #11111b80;
		--text: #cdd6f4;
		--text-trans: #cdd6f480;
		--label: #a6adc8;
		--label-alt: #585b70;
		--c1: #cdd6f480;
		--c2: #bac2deC0;
		--c3: #a6adc8;
		--shadow: #00000040;

		--rosewater: #f5e0dc;
		--rosewater-trans: #f5e0dc30;
		--green: #a6e3a1;
		--green-trans: #a6e3a140;

		--blue: #89b4fa;
		--blue-trans: #89b4fa80;
		--red: #f38ba8;
		--red-trans: #f38ba880;
		--grey: #585b70;
		--grey-trans: #585b7080;
	}
}

html {
	height: 100dvh;
	overflow: clip;

	*::-webkit-scrollbar {
		width: 0.5rem;
		height: 0.5rem;
	}

	*::-webkit-scrollbar-track {
		background-color: var(--popup);
        border-radius: 1rem;
	}

	*::-webkit-scrollbar-thumb {
		max-width: 0.25rem;
		background: var(--highlight);
		border-radius: 1rem;
	}
}

body {
	margin: 0;
    padding: 0 1rem 1rem 1rem;
	height: 100dvh;
    box-sizing: border-box;
	/* min-height: fit-content; */

	display: flex;
    flex-direction: column;

	/* justify-content: center; */
	/* align-content: center; */
	align-items: stretch;

	/* overflow-y: scroll; */

	color: var(--text);
	background-color: var(--background);
	font-family: 'Verdana', sans-serif;
}

h1 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
}

a {
	color: var(--highlight);

	&:visited {
		color: var(--highlight);
	}
}

input {
	font-family: "Roboto Mono", monospace;
	font-size: 1rem;
	padding: 1rem;
    border-radius: 20px;

	box-sizing: border-box;

	color: var(--text);
	background-color: var(--popup-trans);
	backdrop-filter: blur(10px);
	border: var(--border-trans) 2px solid;

	width: 100%;
	/* height: 100%; */

	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;

	&:hover {
		border: solid 2px var(--rosewater-trans) !important;
	}
}

button {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	svg {
		path {
			transition: stroke 0s ease-in-out;
		}

		display: block;
		min-width: 1.25rem;

		margin: auto auto auto auto;
		width: 1.25rem;
		height: 1.25rem;
	}

	font-family: 'Nunito', sans-serif;
	font-size: 1rem;

	color: var(--text);
	background-color: var(--popup-trans);
	backdrop-filter: blur(10px);
	border: var(--border-trans) 2px solid;
	cursor: pointer;

	width: 100%;
	height: 100%;

	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;

	&.hidden {
		display: none;
	}

	&:hover {
		svg path {
			stroke: var(--background);
		}

		color: var(--background);
		background-color: var(--rosewater);
		transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
	}
}

input:focus, button:focus {
	outline: none;
	border: 2px solid var(--highlight) !important;
}

/* * * * * * * **/
/* Chat History */
/** * * * * * * */

#chat_container {
    width: 100%;
    padding: 5rem 1rem 1rem 1rem;
    box-sizing: border-box;

    overflow-x: hidden;

    flex-grow: 1;
    overflow-y: auto;
}

#chat_history {
}

.notification {
    padding: 2rem 0;

    color: var(--rosewater);
    text-align: center;
    font-family: "Roboto Mono", monospace;
    font-size: 0.8rem;
}

.message {
    padding: 0.25rem 0;

    .user {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;

        max-width: 60rem;
        margin: 0 auto;

        margin-top: 1.5rem;
        margin-bottom: 0.5rem;

        svg {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
        }

        .name {
            font-family: 'Nunito', sans-serif;
            font-weight: 700;
            margin: 0;
        }
    }

    p {
        margin: 0;
    }

    .ciphertext {
        font-family: "Roboto Mono", monospace;
        font-size: 0.65rem;
        color: var(--grey);

        max-width: 60rem;
        margin: 0 auto 0.5rem;

        text-wrap: balance;
        overflow-wrap: anywhere;
        word-break: break-all;
        white-space: pre-wrap;
    }

    .plaintext {
        max-width: 60rem;
        margin: 0 auto;


        text-align: justify;
        -webkit-hyphens: auto; /* Safari support */
        hyphens: auto;
    }

    &:hover {
        background-color: var(--popup-trans);
    }
}

/* * * * * * */
/* Input Bar */
/* * * * * * */

#bottom_bar {
    width: 100%;
    align-self: flex-end;
}

#name_and_encryption {
	display: flex;
    flex-direction: row;
	align-items: stretch;
}


#text_and_send {
	display: flex;
    flex-direction: row;
	align-items: stretch;
}

#name {
    color: var(--label);
    border-radius: 20px 0 0 0 !important;
    border-bottom: 0;

    &:focus, &:hover {
        padding-bottom: calc(1rem - 2px) !important;
    }
}

#encryption {
    color: var(--label);
    border-radius: 0 20px 0 0 !important;
    border-bottom: 0;
    border-left: 0;

    &:focus, &:hover {
        padding-bottom: calc(1rem - 2px) !important;
        padding-left: calc(1rem - 2px) !important;
    }
}

#textbox {
    width: auto;

    flex-grow: 1;

    border-radius: 0 0 0 20px !important;
}

#send {
    width: 4rem;
    height: auto;

    align-self: stretch;

    border-radius: 0 0 20px 0 !important;
    border-left: 0;

    &:focus, &:hover {
        padding-left: 2px !important;
    }
}

/* * * * */
/* TOAST */
/* * * * */

#toast {
	opacity: 0;
	transition: opacity 1s, transform 1s;
	text-align: center;
	text-wrap: nowrap;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	background-color: var(--popup-trans);
	box-shadow: 0.5rem 0.5rem 3rem 0.1rem var(--shadow);
	border-radius: 20px;
	padding: 1rem;
	border: var(--border-trans) 2px solid;

	backdrop-filter: blur(10px);

	z-index: 100;
	position: fixed;
	top: calc(1rem + env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

#toast-icon:has(> svg) {
	height: 1.5rem;
}

#toast-icon > svg {
	height: 100%;
	width: auto;
	margin: auto 0.5rem auto auto;
}

#toast.active {
	opacity: 1;
}

#toast:not(.active) {
	opacity: 0;
}


/* * * * * * * * **/
/* RESPONSIVENESS */
/** * * * * * * * */

/*Move toast to the edge*/
@media (orientation: landscape) {
	:root {
		--toast-clearance: 0rem;
	}
	#toast {
		left: revert;
		right: 1rem;
		transform: none;
	}
}