/* --------------------------------------------------
  message-bubble.css

  ▸ 變數定義
  ▸ 通用樣式
  ▸ AI 視窗容器
  ▸ 開關按鈕
  ▸ 訊息顯示區塊
  ▸ 訊息Tags樣式
  ▸ 訊息Card樣式
  ▸ 輸入與錄音區
  ▸ 錄音動畫
  ▸ 陰影過渡（滑動提示）
  ▸ 載入動畫
  ▸ FAQ 區塊
  ▸ 其他按鈕色彩設定
  ▸ tippy tooltip

-------------------------------------------------- */

/* === 變數定義 === */
:root {
	--main-color: #ff853f;
	--sub-color: #e16a25;
	--text-color: #835d56;
	--bg-color: #fff1df;
}

/* === 通用樣式 === */
.hidden {
	display: none !important;
}

.scroll {
	overflow-y: auto;
	max-height: calc(100vh - 200px);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scroll::-webkit-scrollbar,
.chat-input textarea::-webkit-scrollbar,
.message-container::-webkit-scrollbar {
	display: none;
}

/* === AI 視窗容器 === */
.ai-container {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background-color: #000000ab;
	backdrop-filter: blur(10px);
	display: none;
	align-items: flex-end;

	opacity: 0;
	transition: opacity 0.4s ease;
	will-change: opacity;
}

#model-container {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	max-width: 50%;
}

@media (max-width: 768px) {
	#model-container {
		display: none;
	}
}

/* === 開關按鈕 === */
#toggle-button {
	position: fixed;
	bottom: 120px;
	right: 20px;
	z-index: 10000;
	font-size: 16px;
	padding: 5px 5px;
	border-radius: 50px;
	transition: transform 0.3s ease-in-out;
}

#toggle-button:hover {
	transform: scale(1.1) rotate(5deg)
}

#toggle-button:focus {
	outline: 0;
}

#toggle-button img {
	width: 80px;
	height: 80px;
}

@media (max-width: 768px) {
	#toggle-button {
		bottom: 80px;
		right: 10px
	}

	#toggle-button img {
		width: 70px;
		height: 70px;
	}
}

.close-btn {
	position: fixed;
	bottom: 73px;
	right: 60px;
	z-index: 10001;
}

/* === 訊息顯示區塊 === */
.message-container {
	position: fixed;
	bottom: 138px;
	right: 189px;
	width: 450px;
	background-color: var(--bg-color);
	border-radius: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media (max-width: 1024px) {
	.message-container {
		width: 350px;
	}
}

@media (max-width: 768px) {
	.message-container {
		width: calc(100% - 60px);
		min-width: 280px;
		right: 30px;
	}
}

.message-bubble {
	padding: 20px 20px 30px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-wrap: break-word;
	white-space: normal;
	margin-bottom: 40px;
	min-height: 480px;
}

.message-bubble .ai,
.message-bubble .user {
	position: relative;
	margin-bottom: 30px;
	padding: 10px 14px;
	border-radius: 24px;
	max-width: 80%;
	min-width: 4rem;
	min-height: 2rem;
	text-align: left;
	font-size: 1rem;
	white-space: pre-line;
}

.message-bubble .ai {
	align-self: flex-start;
	background-color: #ffffff;
	color: var(--text-color);
}

.message-bubble .user {
	align-self: flex-end;
	background-color: var(--sub-color);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.message-bubble .time {
	position: absolute;
	bottom: -24px;
	font-size: 0.8em;
	color: #b3b3b3;
}

.message-bubble .ai .time {
	left: 0;
}

.message-bubble .user .time {
	right: 0;
}

/* === 訊息Tags樣式 === */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 1rem;
}

.tags .badge {
	background: #fb6490;
	cursor: pointer;
}

/* === 訊息Card樣式 === */
.card {
	border-radius: 24px;
}

/* === 輸入與錄音區 === */
.chat-toggle {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	z-index: 10000;
	box-shadow: 0 -1px 4rem rgba(0, 0, 0, 0.03);
}

.chat-input {
	display: flex;
	align-items: flex-end;
	padding: 6px 16px;
	border-radius: 24px;
	background: var(--bg-color);
	width: 100%;
}

.chat-input textarea {
	width: 100%;
	height: 100%;
	min-height: 24px;
	max-height: 150px;
	font-size: 1rem;
	color: var(--text-color);
	background: transparent;
	border: none;
	resize: none;
	display: block;
	transition: height 0.2s ease;
}

.chat-input textarea:focus {
	outline: none;
	box-shadow: none;
}

.chat-input textarea::placeholder {
	font-size: 1rem;
	opacity: 0.5;
	color: var(--text-color);
}

:is(.submit-btn, .keyboard-btn) {
	margin-bottom: 6px;
}

/* === 錄音動畫 === */
.rec-btn {
	margin: 0 auto;
	width: 70%;
	padding: 6px 0;
	font-size: 1rem;
	color: #fff;
	border-radius: 24px;
	background-color: var(--sub-color);
	display: inline-block;
	position: relative;
	text-decoration: none;
}

.Rec {
	background-color: red;
	animation: pulse 1s infinite linear;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 5px 0 rgba(173, 0, 0, 0.3);
	}

	65% {
		box-shadow: 0 0 5px 13px rgba(173, 0, 0, 0.3);
	}

	90% {
		box-shadow: 0 0 5px 13px rgba(173, 0, 0, 0);
	}
}

/* === 陰影過渡 === */
.more-shadow {
	position: absolute;
	top: 0;
	left: 0;
	height: 40px;
	width: 100%;
	z-index: 10;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
	pointer-events: none;
}

/* === 載入動畫 === */
.loader {
	width: 45px;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side, #9696966e 90%, #0000);
	background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
	background-size: calc(100% / 3) 50%;
	animation: l3 1s infinite linear;
}

@keyframes l3 {
	20% {
		background-position: 0% 0%, 50% 50%, 100% 50%;
	}

	40% {
		background-position: 0% 100%, 50% 0%, 100% 50%;
	}

	60% {
		background-position: 0% 50%, 50% 100%, 100% 0%;
	}

	80% {
		background-position: 0% 50%, 50% 50%, 100% 100%;
	}
}

/* === FAQ 區塊 === */
.faq {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0;
}

.faq li:not(:last-child) {
	padding-bottom: 8px;
	border-bottom: 1px solid #e3e3fd;
}

.faq a,
.faq span {
	color: var(--sub-color);
	text-decoration: none;
	cursor: pointer;
}

/* === 其他按鈕色彩設定 === */
.microphone-btn,
.keyboard-btn,
.submit-btn {
	color: var(--main-color);
}

.rec-btn:disabled {
	background: #dddddd;
	color: #aaaaaa;
}

.submit-btn:disabled {
	color: #aaaaaa;
}

/* === tippy tooltip === */
.tippy-box {
	text-align: center;
	/* 水平置中 */
}

.tippy-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 對齊內容至中央 */
	justify-content: center;
}

.tippy-content span {
	font-size: 0.9em;
	color: #ffffffcb;
}