:root {
	--primary-blue: #005CAF;
	--primary-dark-blue: #0045A5;
	--primary-green: #B0C802;
	--light-blue: #9ACCEE;
	--lightest-blue: #E1F0FA;
	--text-color: #4D4D4D;
	--bg-color: #F5F5F5;
	--white: #FFFFFF;
	--border-color: #E0E0E0;
	--border-width: 1px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text-color);
}

* {
    box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--bg-color);
	min-height: 100vh;
	display: grid;
	grid-template:
		"aside" auto
		"main" 1fr
		"footer" auto
		/ 1fr;
}

body > aside {
	grid-area: aside;
	border-bottom: var(--border-color) var(--border-width) solid;
	background-color: var(--white);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body > aside > menu {
	display: grid;
	grid-template-columns: auto 1fr;
	padding: 1rem;
	margin: 0;
	list-style: none;
}

body > aside > menu label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

body > aside > menu small {
    grid-column: 1 / -1;
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
}

input[type="checkbox"][role="switch"] {
    appearance: none;
    -webkit-appearance: none;
    width: 2.5rem;
    height: 1.25rem;
    background-color: var(--border-color);
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease-in-out;
}

input[type="checkbox"][role="switch"]::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--white);
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="checkbox"][role="switch"]:checked {
    background-color: var(--primary-green);
}

input[type="checkbox"][role="switch"]:checked::before {
    transform: translateX(1.25rem);
}

body > main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
	padding: 1.5rem;
}

body > footer {
	grid-area: footer;
	background-color: var(--white);
	border-top: var(--border-color) var(--border-width) solid;
	padding: 1.5rem;
	text-align: center;
}

body > footer > nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

@media (min-width: 1280px) {
	body {
		height: 100vh;
	}
	body:has(> aside) {
		grid-template:
			"aside main" 1fr
			"footer main" auto
			/ minmax(320px, min-content) 1fr;
	}
	body > aside,
	body > footer {
		border-top: none;
		border-bottom: none;
		border-right: var(--border-color) var(--border-width) solid;
	}
	body > footer > nav {
		flex-direction: column;
	}
	body > aside > menu {
		display: block;
	}
	body > main {
		overflow-y: auto;
		padding: 2.5rem;
	}
}

a {
    color: var(--primary-blue);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Chat Bubbles */
#conversation {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex-grow: 1;
	overflow-y: auto;
	padding-bottom: 1.5rem;
}

.assistant, .user {
	padding: 14px 20px;
	max-width: 85%;
	line-height: 1.6;
	font-size: 1.05rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.assistant small, .user small {
	display: block;
	font-size: 0.85rem;
	opacity: 0.7;
	margin-bottom: 6px;
    font-weight: 500;
}

.assistant {
	background-color: var(--white);
	color: var(--text-color);
	border-radius: 4px 20px 20px 20px;
	align-self: flex-start;
	border: 1px solid var(--border-color);
}

.user {
	background-color: var(--lightest-blue);
	color: var(--primary-dark-blue);
	border-radius: 20px 4px 20px 20px;
	align-self: flex-end;
}

.user .redacted {
	text-decoration: dotted underline;
}

/* Reply form */
#reply {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin-top: auto;
	background-color: var(--white);
	padding: 1rem;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	border: 1px solid var(--border-color);
	align-items: flex-end;
}

#reply textarea {
	flex-grow: 1;
	min-height: 3rem;
	max-height: 10rem;
	padding: 14px;
	font-size: 1.05rem;
	font-family: inherit;
	resize: vertical;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	outline: none;
	color: var(--text-color);
	background-color: #fafafa;
}

#reply textarea:focus {
	border-color: var(--primary-blue);
	background-color: var(--white);
	box-shadow: 0 0 0 3px var(--light-blue);
}

#reply button[type="submit"] {
	border-radius: 50%;
	height: 3.5rem;
	width: 3.5rem;
	border: none;
	background-color: var(--primary-blue);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease-in-out, transform 0.1s ease;
	flex-shrink: 0;
}

#reply button[type="submit"]:hover {
	background-color: var(--primary-dark-blue);
	transform: scale(1.05);
}

#reply button[type="submit"] svg {
	fill: currentColor;
	height: 1.8rem;
	width: 1.8rem;
}

/* General Buttons */
#button-restart-chat, #preferences button[type="submit"] {
	background-color: var(--primary-green);
	color: var(--white);
	border: none;
	padding: 12px 28px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 1.05rem;
	transition: background-color 0.2s, transform 0.1s;
	box-shadow: 0 2px 6px rgba(176, 200, 2, 0.4);
}

#button-restart-chat:hover, #preferences button[type="submit"]:hover {
	background-color: #9cb102;
    transform: translateY(-1px);
}

/* Typing animation */
@keyframes blink {
	50% { fill: transparent }
}
.typing {
    align-self: flex-start;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.typing .dot {
	animation: 1s blink infinite ease-in-out;
	fill: var(--primary-blue);
}
.typing .dot:nth-child(2) {
	animation-delay: 250ms;
}
.typing .dot:nth-child(3) {
	animation-delay: 500ms;
}

/* Preferences / Settings */
#preferences {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	background: var(--white);
	padding: 3rem;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	margin: 4rem auto;
	width: 100%;
    border: 1px solid var(--border-color);
}

#preferences label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	font-size: 1.2rem;
	font-weight: 500;
}

#preferences select {
	padding: 0.8rem 1.2rem;
	font-size: 1.05rem;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	font-family: inherit;
    background-color: #fafafa;
    outline: none;
    cursor: pointer;
}

#preferences select:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--light-blue);
}

#preferences img[src="/static/language-icon.svg"] {
	height: 2rem;
	width: 2rem;
	vertical-align: middle;
}

/* Dark mode support */
/*
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1a1a1a;
		--white: #2d2d2d;
		--text-color: #e0e0e0;
		--border-color: #404040;
		--lightest-blue: #003366;
		--primary-dark-blue: #9ACCEE;
	}
	
	#preferences img[src="/static/language-icon.svg"] {
		filter: invert();
	}
	
	.user {
		color: var(--white);
	}
    
    #reply textarea {
        background-color: #222;
    }
    
    #preferences select {
        background-color: #222;
        color: var(--white);
    }
}
*/