/* ========================================
   RESET
   ======================================== */

* {
	box-sizing: border-box;
}

html,
body,
#root {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

html {
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}

body {
	background: #f3f4f6;
	color: #1f2937;
}


/* ========================================
   LOGIN PAGE
   ======================================== */

.login-page {
	width: 100%;
	height: 100%;

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

	padding: 24px;
}

.login-card {
	width: 100%;
	max-width: 420px;

	background: white;

	border: 1px solid #e5e7eb;
	border-radius: 22px;

	padding: 42px;

	box-shadow:
		0 20px 50px
		rgba(0, 0, 0, 0.08);

	text-align: center;
}

.login-logo {
	font-size: 42px;
	margin-bottom: 14px;
}

.login-card h1 {
	margin: 0;

	font-size: 30px;
	font-weight: 700;
}

.login-description {
	margin: 10px 0 28px;

	color: #6b7280;

	font-size: 15px;
}

.login-card form {
	margin: 0;
}

.login-card input {
	width: 100%;
	height: 48px;

	padding: 0 15px;

	margin-bottom: 12px;

	border: 1px solid #d1d5db;
	border-radius: 11px;

	font-size: 15px;

	outline: none;

	background: #f9fafb;
}

.login-card input:focus {
	background: white;

	border-color: #2563eb;

	box-shadow:
		0 0 0 3px
		rgba(37, 99, 235, 0.1);
}

.login-button {
	width: 100%;
	height: 48px;

	border: 0;
	border-radius: 11px;

	background: #2563eb;

	color: white;

	font-size: 15px;
	font-weight: 600;

	cursor: pointer;
}

.login-button:hover {
	background: #1d4ed8;
}

.login-room {
	margin-top: 22px;

	font-size: 11px;

	color: #9ca3af;

	word-break: break-all;
}


/* ========================================
   CHAT PAGE
   ======================================== */

.chat-page {
	width: 100%;
	height: 100%;

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

	padding: 24px;
}

.chat {
	width: 100%;
	max-width: 980px;

	height: min(
		850px,
		calc(100vh - 48px)
	);

	background: white;

	border: 1px solid #e5e7eb;
	border-radius: 22px;

	box-shadow:
		0 20px 60px
		rgba(0, 0, 0, 0.08);

	overflow: hidden;

	display: flex;
	flex-direction: column;
}


/* ========================================
   HEADER
   ======================================== */

.chat-header {
	min-height: 82px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding: 16px 22px;

	border-bottom: 1px solid #e5e7eb;

	flex-shrink: 0;
}

.chat-title {
	display: flex;
	align-items: center;

	gap: 12px;

	min-width: 0;
}

.chat-logo {
	width: 42px;
	height: 42px;

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

	background: #eff6ff;

	border-radius: 12px;

	font-size: 21px;
}

.chat-title h1 {
	margin: 0;

	font-size: 19px;
	font-weight: 700;
}

.room-name {
	margin-top: 3px;

	max-width: 330px;

	font-size: 11px;

	color: #9ca3af;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-user {
	display: flex;
	align-items: center;

	gap: 9px;

	flex-shrink: 0;
}

.online-dot {
	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #22c55e;
}

.current-user {
	font-size: 14px;
	font-weight: 600;

	margin-right: 5px;
}

.header-button {
	height: 34px;

	padding: 0 12px;

	border: 1px solid #d1d5db;
	border-radius: 8px;

	background: white;

	color: #374151;

	font-size: 12px;
	font-weight: 500;

	cursor: pointer;
}

.header-button:hover {
	background: #f9fafb;
}


/* ========================================
   MESSAGES AREA
   ======================================== */

.messages-container {
	flex: 1;

	overflow-y: auto;

	padding: 26px 28px;

	scroll-behavior: smooth;
}

.messages-container::-webkit-scrollbar {
	width: 8px;
}

.messages-container::-webkit-scrollbar-track {
	background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
	background: #d1d5db;

	border-radius: 20px;
}


/* ========================================
   EMPTY CHAT
   ======================================== */

.empty-chat {
	height: 100%;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	text-align: center;

	color: #9ca3af;
}

.empty-icon {
	font-size: 38px;

	margin-bottom: 10px;
}

.empty-title {
	font-size: 16px;
	font-weight: 600;

	color: #6b7280;
}

.empty-description {
	margin-top: 5px;

	font-size: 13px;
}


/* ========================================
   MESSAGE
   ======================================== */

.message {
	width: 100%;

	display: flex;
	flex-direction: column;

	margin-bottom: 18px;
}

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

.message.mine {
	align-items: flex-end;
}

.message-user {
	margin: 0 8px 5px;

	font-size: 12px;
	font-weight: 600;

	color: #6b7280;
}

.message-bubble {
	max-width: 70%;

	padding: 11px 15px;

	border-radius: 17px;

	font-size: 15px;
	line-height: 1.5;

	word-break: break-word;

	white-space: pre-wrap;
}

.message.other .message-bubble {
	background: #f1f3f5;

	color: #1f2937;

	border-bottom-left-radius: 5px;
}

.message.mine .message-bubble {
	background: #2563eb;

	color: white;

	border-bottom-right-radius: 5px;
}


/* ========================================
   FOOTER
   ======================================== */

.chat-footer {
	padding: 16px 20px;

	border-top: 1px solid #e5e7eb;

	background: white;

	flex-shrink: 0;
}

.message-form {
	width: 100%;

	display: flex;

	gap: 10px;

	margin: 0;
}

.message-input {
	flex: 1;

	min-width: 0;

	height: 46px;

	padding: 0 16px;

	border: 1px solid #d1d5db;
	border-radius: 12px;

	background: #f9fafb;

	color: #111827;

	font-size: 15px;

	outline: none;
}

.message-input:focus {
	background: white;

	border-color: #2563eb;

	box-shadow:
		0 0 0 3px
		rgba(37, 99, 235, 0.08);
}

.message-input::placeholder {
	color: #9ca3af;
}

.send-button {
	width: 86px;
	height: 46px;

	padding: 0;

	border: 0;
	border-radius: 12px;

	background: #2563eb;

	color: white;

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;
}

.send-button:hover {
	background: #1d4ed8;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {

	.chat-page {
		padding: 0;
	}

	.chat {
		width: 100%;
		max-width: none;

		height: 100dvh;

		border: 0;
		border-radius: 0;

		box-shadow: none;
	}

	.chat-header {
		min-height: 72px;

		padding: 12px 14px;
	}

	.chat-logo {
		width: 36px;
		height: 36px;

		font-size: 18px;
	}

	.chat-title h1 {
		font-size: 17px;
	}

	.room-name {
		max-width: 130px;
	}

	.current-user {
		display: none;
	}

	.online-dot {
		display: none;
	}

	.header-button {
		padding: 0 8px;

		font-size: 11px;
	}

	.messages-container {
		padding: 20px 14px;
	}

	.message-bubble {
		max-width: 85%;

		font-size: 15px;
	}

	.chat-footer {
		padding: 10px 12px;

		padding-bottom: max(
			10px,
			env(safe-area-inset-bottom)
		);
	}

	.send-button {
		width: 68px;
	}

	.login-page {
		padding: 18px;
	}

	.login-card {
		padding: 34px 24px;
	}
}


/* ========================================
   DARK MODE
   ======================================== */

@media (prefers-color-scheme: dark) {

	body {
		background: #0f172a;

		color: #f3f4f6;
	}

	.chat,
	.login-card {
		background: #1f2937;

		border-color: #374151;

		box-shadow:
			0 20px 60px
			rgba(0, 0, 0, 0.35);
	}

	.chat-header,
	.chat-footer {
		background: #1f2937;

		border-color: #374151;
	}

	.chat-logo {
		background: #1e3a5f;
	}

	.chat-title h1 {
		color: #f9fafb;
	}

	.message-user {
		color: #9ca3af;
	}

	.message.other .message-bubble {
		background: #374151;

		color: #f9fafb;
	}

	.message.mine .message-bubble {
		background: #3b82f6;
	}

	.header-button {
		background: #374151;

		border-color: #4b5563;

		color: #f3f4f6;
	}

	.header-button:hover {
		background: #4b5563;
	}

	.message-input,
	.login-card input {
		background: #111827;

		border-color: #4b5563;

		color: #f9fafb;
	}

	.message-input:focus,
	.login-card input:focus {
		background: #111827;

		border-color: #3b82f6;
	}

	.empty-title {
		color: #d1d5db;
	}

	.messages-container::-webkit-scrollbar-thumb {
		background: #4b5563;
	}
}