/* 主题色 */
:root {
	--text-color: #333;
	--background-color: #fff;
	--border-color: #888;
	--button-bg: #f0f0f0;
	--button-bg-hover: #555;
	--primary-color: #0e326c;
	--secondary-color: #285466;
	--accent-color: #ea4335;
	--input-bg: #fafafa;
	--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 全局样式 */
@layer global {
	html {
		font-size: clamp(1rem, 2.5vw, 1.2rem);
	}

	body {
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Pingfang SC', '等线', sans-serif;
		min-height: 100vh;
		padding: 0 5vw;
		line-height: 1.6;
		background-color: var(--background-color);
		color: var(--text-color);
		transition: all 0.3s ease;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	button {
		font: inherit;
		cursor: pointer;
		border: none;
		padding: 0.75em 1.5em;
		border-radius: 0.5em;
		background-color: var(--primary-color);
		color: white;
		transition: all 0.2s ease;
		font-weight: 500;
		box-shadow: var(--card-shadow);
	}

	button:hover,
	button:focus {
		background-color: var(--secondary-color);
		transform: translateY(-0.1em);
	}

	button:active {
		transform: translateY(0);
	}

	input,
	textarea {
		font-family: inherit;
		padding: 0.8em;
		border: 1px solid var(--border-color);
		margin: 0.5em 0;
		font-size: 1em;
		border-radius: 0.5em;
		background-color: var(--input-bg);
		transition: all 0.2s ease;
		width: 100%;
		box-sizing: border-box;
	}

	input:focus,
	textarea:focus {
		border-color: var(--primary-color);
		outline: none;
		box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
		background-color: white;
	}

	time {
		font-family: inherit;
		font-size: 0.8em;
		opacity: 0.8;
	}

	p {
		margin-block: 0.6em;
	}
}

/* 主题色（深色模式） */
@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #eee;
		--background-color: #1e1e1e;
		--svg-fill: rgba(156, 167, 189, 0.404);
		--border-color: #444;
		--button-bg: #333;
		--input-bg: #2a2a2a;
		--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
}

/* 标题样式 */
@layer title {

	h2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-block: 1em;
	}

	h2 span {
		font-family: Rockwell, serif;
		font-size: 1.2em;
		color: var(--primary-color);
	}
}

/* 输入表单样式 */
@layer input-form {

	form {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		margin-bottom: 1.5em;
	}

	.username-label {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: 0.9em;
	}

	.username-label span {
		flex-grow: 1;
		min-width: 3em;
    margin-left: 1em;
	}
	.username-label input {
		flex-grow: 3;
	}

	form > textarea {
		min-height: 5em;
		resize: vertical;
	}

	button[type='submit'] {
		align-self: flex-end;
		width: 100%;
		margin-top: 0.5em;
	}
}

/* 消息样式 */
@layer message {
	ul.msg {
		flex-grow: 1;
		overflow-y: auto;
		margin-bottom: 1em;
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	ul.msg > li.chat-content {
		padding: 0.5em 2.2em 1em 2.2em;
		border-radius: 0.5em;
		background-color: var(--input-bg);
		box-shadow: var(--card-shadow);
		border: 1px solid var(--border-color);
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'main rating'
			'reply reply';
		column-gap: 1em;
		align-items: center;
	}

	ul.msg > section.msg-main {
		grid-area: main;
	}

	div.msg-info {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 1em;
		margin-bottom: 0.5em;
		align-items: center;
	}

	.info-cell {
		display: flex;
		align-items: center;
		font-size: 0.85em;
		color: #888;
	}

	.msg-user {
		font-weight: bold;
		color: var(--primary-color);
	}

	@layer rating {
		.ratingBlock {
			grid-area: rating;
			text-align: center;
			cursor: pointer;
		}

		.ratingBlock .rating {
			font-weight: bold;
			color: #444;
			line-height: 1.5;
			color: var(--text-color);
		}

		.ratingBlock .ratingBar {
			background-color: #72767d;
			height: 0.2em;
			min-width: 2.5em;
			position: relative;
			width: 100%;
		}

		.ratingBlock .ratingBar div {
			height: 100%;
			background-color: #85ce73;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.ratingBlock .ratingBar div.green {
			background-color: #85ce73;
		}

		.ratingBlock .ratingBar div.yellow {
			background-color: khaki;
		}

		.ratingBlock .ratingBar div.red {
			background-color: #d76666;
		}
	}

	@layer reply {
		ul.reply {
			margin-top: 0.5em;
			padding-left: 1em;
			border-left: 0.25em solid var(--border-color);
			grid-area: reply;
		}
		ul.reply:not(:has(li)) {
			margin-top: 0;
		}

		ul.reply li {
			margin: 0.5em 0;
		}
	}
}

/* 响应式设计 - 桌面端 */
@media screen and (min-width: 768px) {
	form {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'textarea textarea'
			'username submit';
		gap: 1em;
		justify-items: start;
	}

	form > textarea {
		grid-area: textarea;
	}

	.username-label {
		grid-area: username;
		align-self: center;
	}

	button[type='submit'] {
		grid-area: submit;
		width: auto;
	}

	h2 {
		font-size: 1.1em;
	}
	h2 > time {
		font-size: 1.2em;
	}
}

/* 响应式设计 - 大屏幕 */
@media screen and (min-width: 1024px) {
	body {
		padding: 0 15vw;
		font-size: 0.88em;

		h2 {
			margin-bottom: 0.7em;
		}
		textarea {
			min-height: 1.3em;
		}
		li.chat-content {
			gap: 0;
		}

	}
}