/* 基本重置和全域樣式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

html,
body {
	height: 100%; /* 或者 height: 100dvh; 也可以，確保它們能延展 */
	/* overflow: hidden; */ /* 保持註解或移除，除非你有特別理由要禁止整個頁面滾動 */
	background-color: #f0f2f5; /* 淺灰色背景 */
}

.app-container {
	display: flex;
	flex-direction: column;
	height: 100dvh; /* 使用動態視口高度 */
	max-width: 768px; /* 手機和平板的最大寬度 */
	margin: 0 auto; /* 水平置中 */
	background-color: #fff; /* 白色背景 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
	overflow: hidden; /* 重要：防止 app-container 本身滾動，讓內部 chat-area 滾動 */
}

/* 使用者區塊 */
.user-section {
	flex: 1; /* 每個區塊佔據一半空間 */
	display: flex;
	flex-direction: column;
	overflow: hidden; /* 內部滾動 */
	position: relative; /* 用於定位工具列 */
}

.remote-user {
	background-color: #f8f9fa; /* 遠端使用者稍淺的背景 */
	transform: rotate(180deg); /* 旋轉遠端使用者區塊 */
}

.local-user {
	background-color: #ffffff;
}

/* 工具列 */
.toolbar {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: #fff; /* 白色背景 */
	border-bottom: 1px solid #e0e0e0;
	min-height: 56px; /* 固定高度 */
	z-index: 10;
	flex-shrink: 0; /* 防止工具列在 flex 佈局中被壓縮 */
}

.remote-toolbar {
	flex-direction: row-reverse; /* 麥克風在右邊 */
	/* border-top: 1px solid #e0e0e0; */ /* 移除，因為現在它在聊天區下方 */
	border-bottom: none; /* 確保沒有底部邊框，如果之前有 */
	order: 1; /* 將 remote-toolbar 放在 remoteChatArea 之後 */
	/* 如果 remote-toolbar 是固定在 user-section 的頂部（旋轉後視覺底部），
       則 border-top 可能更合適，或者不需要邊框 */
	border-top: 1px solid #e0e0e0; /* 考慮到旋轉後的位置 */
}

.local-toolbar {
	border-top: 1px solid #e0e0e0;
	order: 1; /* 將本地工具列放在聊天區域下方 */
}

.language-info {
	display: flex;
	align-items: center;
	margin: 0 10px;
}

.language-name {
	font-size: 1rem;
	font-weight: 500;
	color: #333;
	margin-right: 8px;
}

.icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5f6368; /* Google 圖示顏色 */
}

.icon-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.icon-btn .material-icons {
	font-size: 24px;
}

.lang-select-btn .material-icons {
	color: #800080; /* 紫色 */
}

.mic-btn {
	background-color: #e6e6fa; /* 淡紫色背景 */
	border: none;
	/* 將 50% (圓形) 改為固定的圓角值，創造圓角矩形或膠囊形狀 */
	border-radius: 30px;
	/* 移除固定的 width，讓寬度更具彈性 */
	/* 增加 height 使觸控區域更大 */
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s, transform 0.1s;
	padding: 0 24px; /* 增加左右內距，讓按鈕在沒有設定寬度時也能變寬 */
}

/* 在按壓時增加一個小小的縮放效果，提升反饋感 */
.mic-btn:active {
	transform: scale(0.98);
}

.mic-btn .material-icons {
	font-size: 32px;
	color: #800080; /* 紫色 */
}

.mic-btn:hover {
	background-color: #d8bfd8; /* 深一點的淡紫色 */
}

.mic-btn.recording .material-icons {
	color: #ff4500; /* 錄音時變為橘紅色 */
}

.main-mic-btn {
	/* 讓它佔據父容器的一部分寬度，實現自適應 */
	width: 40%;
	/* 設定最大寬度，防止在平板或桌面瀏覽器上變得過大 */
	max-width: 300px;
	margin: 0 auto; /* 繼續使用這個屬性來水平置中 */
}

.remote-toolbar .mic-btn {
	/* 讓它佔據父容器的一部分寬度，實現自適應 */
	width: 40%;
	/* 設定最大寬度，防止在平板或桌面瀏覽器上變得過大 */
	max-width: 300px;
	margin: 0 auto; /* 繼續使用這個屬性來水平置中 */
}

.local-toolbar .nav-btn {
	margin-right: auto;
}
.local-toolbar .icon-btn:not(.main-mic-btn):not(.nav-btn) {
	margin-left: 8px;
}

/* 聊天區域 */
.chat-area {
	flex-grow: 1;
	padding: 15px;
	overflow-y: auto; /* 確保聊天內容可以滾動 */
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch; /* iOS 滾動優化 */
}

/* 訊息泡泡 */
.message-bubble {
	max-width: 75%;
	padding: 10px 15px;
	border-radius: 18px;
	margin-bottom: 10px;
	line-height: 1.4;
	font-size: 0.95rem;
	word-wrap: break-word;
}

/* 訊息泡泡樣式調整 */
/* 通用泡泡樣式，顏色和對齊由 .sent 和 .received 控制 */

/* 本地使用者視角 (local-user 區塊未旋轉) */
.local-user .chat-area .message-bubble.sent {
	background-color: #e6e6fa; /* 淡紫色 - 本地使用者發送 */
	color: #333;
	align-self: flex-end; /* 靠右 */
	border-bottom-right-radius: 4px;
}

.local-user .chat-area .message-bubble.received {
	background-color: #f1f0f0; /* 淺灰色 - 本地使用者接收 (對方發送) */
	color: #333;
	align-self: flex-start; /* 靠左 */
	border-bottom-left-radius: 4px;
}

/* 遠端使用者視角 (remote-user 區塊已旋轉180度) */
/* .sent 代表此聊天區域的使用者 (即遠端使用者) 發送的訊息 */
/* .received 代表此聊天區域的使用者 (即遠端使用者) 接收的訊息 */
.remote-user .chat-area .message-bubble.sent {
	background-color: #e6e6fa; /* 淡紫色 - 遠端使用者發送 */
	color: #333;
	/* 從遠端使用者視角看，自己發送的訊息靠右。
       由於 .remote-user 已旋轉180度，flex-end 會使其在視覺上靠右。 */
	align-self: flex-end;
	border-bottom-right-radius: 4px; /* 旋轉後，這個角在視覺上的右下 */
}

.remote-user .chat-area .message-bubble.received {
	background-color: #f1f0f0; /* 淺灰色 - 遠端使用者接收 (本地使用者發送) */
	color: #333;
	/* 從遠端使用者視角看，收到的訊息靠左。
       由於 .remote-user 已旋轉180度，flex-start 會使其在視覺上靠左。 */
	align-self: flex-start;
	border-bottom-left-radius: 4px; /* 旋轉後，這個角在視覺上的左下 */
}

/* 分隔線 */
.divider {
	height: 1px;
	background-color: #d1c4e9; /* 淡紫色分隔線 */
	margin: 0;
}

/* 語言選擇彈出視窗 (Modal) */
.modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal.rotated {
	transform: rotate(180deg); /* 旋轉彈出視窗 */
}

.modal-content {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	width: 90%;
	max-width: 400px;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

.modal-header h2 {
	font-size: 1.2rem;
	color: #333;
}

.close-modal-btn .material-icons {
	color: #777;
}

.language-list select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	margin-bottom: 15px;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
}

.btn {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.2s;
}

.btn.primary {
	background-color: #800080; /* 紫色 */
	color: white;
}

.btn.primary:hover {
	background-color: #6a006a; /* 深一點的紫色 */
}

/* 狀態訊息 */
#statusMessage {
	padding: 10px;
	text-align: center;
	background-color: #fff3cd; /* 淡黃色背景 */
	color: #856404; /* 深黃色文字 */
	border-bottom: 1px solid #ffeeba;
	font-size: 0.9rem;
}

/* 響應式調整 */
@media (min-width: 821px) {
	/* 平板和桌面 */
	.app-container {
		flex-direction: row; /* 水平排列使用者區塊 */
		max-width: 1200px; /* 更寬的佈局 */
		height: 100dvh; /* 在桌面環境，100vh 通常沒問題，也可以用 100dvh */
	}

	.user-section {
		/* 移除 height: 100dvh; 因為 flex: 1 已經能處理高度分配 */
		/* height: 100dvh; */
		flex: 1; /* 保留或明確添加，確保它能擴展 */
	}

	.remote-user {
		border-right: 1px solid #d1c4e9; /* 中間分隔線 */
	}

	.divider {
		display: none; /* 在寬螢幕上隱藏水平分隔線 */
	}

	.toolbar {
		padding: 12px 20px;
	}

	.local-toolbar {
		order: 0;
		border-bottom: 1px solid #e0e0e0;
		border-top: none;
	}

	.chat-area {
		padding: 20px;
	}

	.message-bubble {
		font-size: 1rem;
	}
}

/* 針對非常小的螢幕進行微調 */
@media (max-width: 360px) {
	.language-name {
		font-size: 0.9rem;
	}
	.toolbar {
		padding: 6px 10px;
		min-height: 50px;
	}
	.icon-btn {
		padding: 6px;
	}
	.icon-btn .material-icons {
		font-size: 22px;
	}
}

/* Spinner Styles */
.spinner-overlay {
	position: fixed; /* 相對於 viewport 定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色背景 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000; /* 確保在最上層 */
	pointer-events: none; /* 允許事件穿透到下方元素 */
}

.spinner {
	border: 8px solid #f3f3f3; /* Light grey */
	border-top: 8px solid #800080; /* Purple */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}