/* Lailai 客服訊息中心：前台懸浮widget。顏色刻意不依賴目前主題的CSS
   custom properties(外掛要獨立於佈景主題運作，換主題也要能正常顯示)，
   直接寫死色值；跟舊系統(storefront-child主題ocean-message-widget)的
   視覺數值(72px/66px按鈕尺寸、27px角標、1.8s呼吸動畫參數等)刻意保持
   一致，只是換一套class命名空間(llmc-widget__*)。 */

.llmc-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
}

/* 按鈕用Facebook Messenger風格的亮藍色，不用網站可能的深色主色系：
   訊息按鈕常疊在各種頁面背景上，亮藍色在深色/淺色背景都能維持清楚的
   對比與可辨識度。 */
.llmc-widget__toggle {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: none;
	background-color: #0084ff;
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 132, 255, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.llmc-widget__toggle:hover {
	background-color: #1a91ff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 132, 255, 0.55);
}

.llmc-widget__toggle svg {
	width: 32px;
	height: 32px;
}

/* 未讀提示角標：不論面板是否打開，只要有店家新訊息就顯示在按鈕右上角，
   讓客人不用主動點開對話面板也能發現店家已經留言給他。 */
.llmc-widget__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 27px;
	height: 27px;
	padding: 0 7px;
	border-radius: 999px;
	background-color: #d64545;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* 呼吸/pulse ring效果：一圈跟角標同心同色的光暈，週期性從角標本身的
   尺寸放大到2倍、同時透明度歸零，做出「向外擴散消失」的觀感。用
   ::before而不是::after，是因為pseudo-element的預設疊放順序是
   背景→::before→文字內容→::after，::before才會自然疊在角標的紅底跟
   數字文字「之間」(圈圈在數字後面，不會蓋住看不清楚數字)，不用額外
   設z-index去搶疊放順序。動畫只在角標本身顯示時才會跑——一旦父層
   .llmc-widget__badge[hidden]變成display:none，這個::before(連同
   animation)也會直接停止渲染，不需要另外寫JS去停動畫。 */
.llmc-widget__badge::before {
	content: '';
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	border-radius: 999px;
	background-color: #d64545;
	animation: llmc-widget-badge-pulse-ring 1.8s ease-out infinite;
}

@keyframes llmc-widget-badge-pulse-ring {
	0% { opacity: 0.55; transform: scale(1); }
	70% { opacity: 0; transform: scale(2); }
	100% { opacity: 0; transform: scale(2); }
}

.llmc-widget__badge[hidden] {
	display: none;
}

.llmc-widget__panel {
	position: absolute;
	right: 0;
	bottom: 88px;
	width: 360px;
	height: 480px;
	max-height: 70vh;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(4, 44, 83, 0.28);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.llmc-widget__panel[hidden] {
	display: none;
}

.llmc-widget__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background-color: #042c53;
	color: #f5f1e8;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.llmc-widget__close {
	background: none;
	border: none;
	color: #f5f1e8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* 訪客提示區：置中文字+登入/加LINE按鈕 */
.llmc-widget__guest-prompt {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
}

.llmc-widget__guest-prompt p {
	color: #0c447c;
	font-size: 0.95rem;
	margin: 0 0 4px;
}

.llmc-widget__guest-btn {
	display: block;
	width: 100%;
	max-width: 240px;
	padding: 0.75em 1.5em;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.llmc-widget__guest-btn:hover {
	transform: translateY(-2px);
}

.llmc-widget__guest-btn--primary {
	background-color: #fac775;
	color: #042c53 !important;
}

.llmc-widget__guest-btn--line {
	background-color: #06c755; /* LINE官方品牌綠 */
	color: #ffffff !important;
}

/* 對話紀錄區 */
.llmc-widget__thread {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #f7f5f0;
}

.llmc-widget__bubble {
	max-width: 78%;
	padding: 9px 14px;
	border-radius: 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	word-break: break-word;
}

.llmc-widget__bubble--customer {
	align-self: flex-end;
	background-color: #378add;
	color: #ffffff;
	border-bottom-right-radius: 4px;
}

.llmc-widget__bubble--staff {
	align-self: flex-start;
	background-color: #ffffff;
	color: #0c447c;
	border: 1px solid #e5e5e5;
	border-bottom-left-radius: 4px;
}

.llmc-widget__bubble img,
.llmc-widget__bubble video {
	max-width: 100%;
	border-radius: 8px;
	display: block;
	margin-top: 6px;
}

/* 【2026-08-24新增，圖片放大檢視】一般圖片附件(不含貼圖/商品縮圖，
   見frontend-widget.js的renderAttachment()只在這個分支才加這個class)
   游標改成zoom-in，跟後台管理端(llmc-admin.css)同一個做法。 */
.llmc-widget__bubble img.llmc-lightbox-trigger { cursor: zoom-in; }

/* 貼圖跟一般圖片附件用同一個<img>元素，但視覺上要小很多、不佔滿泡泡
   寬度——貼圖是示意性質的小圖示，不是需要看清楚細節的照片。選擇器
   刻意疊加.llmc-widget__bubble img(而不是只用.llmc-widget__sticker
   單一class)：後者的特異度(1個class)贏不過前面.llmc-widget__bubble
   img這條規則(1個class+1個type)，同一個img元素上兩條規則都命中時
   特異度低的那條不會生效，這裡疊加同樣的前綴+多一個class確保贏過去。
   不去背景色/圓角泡泡框，直接讓小圖浮在泡泡裡，貼近多數聊天軟體
   貼圖的呈現方式。 */
.llmc-widget__bubble img.llmc-widget__sticker {
	max-width: 120px;
	max-height: 120px;
	width: auto;
	height: auto;
	border-radius: 4px;
}

/* 【2026-08-21新增】商品卡片——商品推送只會是店家發的(staff泡泡是
   白底)，卡片背景刻意用比白底泡泡再淺一點的灰，跟泡泡本身的白色
   邊界區隔開，不需要考慮跟客人藍底泡泡搭配的情況。標題最多兩行，
   超過截斷——道理跟後台管理端的卡片一樣，聊天泡泡是緊湊空間，
   完整標題進商品頁就看得到。 */
.llmc-widget__product-card {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 8px;
	background-color: #f6f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}
a.llmc-widget__product-card:active,
a.llmc-widget__product-card:hover { background-color: #eef1f4; }

.llmc-widget__product-thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px;
	object-fit: cover;
	background-color: #ffffff;
}
.llmc-widget__product-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b0b6bb;
	font-size: 16px;
}

.llmc-widget__product-info { min-width: 0; }
.llmc-widget__product-title {
	font-size: 0.82rem;
	font-weight: 600;
	color: #0c447c;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.llmc-widget__product-card--unavailable .llmc-widget__product-title { color: #8c8f94; }
.llmc-widget__product-status { font-size: 0.72rem; color: #b0413e; margin-top: 2px; }

/* 圖片附件超過180天被排程清除後的替代提示，不嘗試載入已經404的網址 */
.llmc-widget__attachment-expired {
	margin-top: 6px;
	padding: 10px 14px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.06);
	color: inherit;
	opacity: 0.75;
	font-size: 0.82rem;
	font-style: italic;
}

.llmc-widget__bubble-meta {
	display: block;
	margin-top: 4px;
	font-size: 0.7rem;
	opacity: 0.7;
}

/* 輸入區 */
.llmc-widget__form {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #e5e5e5;
	background-color: #ffffff;
}

.llmc-widget__attach {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #378add;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.llmc-widget__attach:hover {
	background-color: #e6f1fb;
}

.llmc-widget__attach svg {
	width: 18px;
	height: 18px;
}

.llmc-widget__file-name {
	flex-shrink: 0;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.72rem;
	color: #378add;
}

.llmc-widget__input {
	flex: 1;
	min-width: 0;
	border: 1px solid #d7e3ee;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 0.85rem;
}

.llmc-widget__input:focus {
	outline: none;
	border-color: #378add;
}

.llmc-widget__send {
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	background-color: #042c53;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.llmc-widget__send:hover {
	background-color: #378add;
}

.llmc-widget__send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 手機版：面板改成貼底全寬彈出，避免遮住太多內容、也不會超出螢幕 */
@media (max-width: 480px) {
	.llmc-widget {
		right: 12px;
		bottom: 12px;
	}

	/* 手機版按鈕比桌機版(72px)略保守一點，避免在較窄的畫面上顯得過大/
	   突兀，但仍比一般常見的56px明顯放大，維持可辨識度的提升 */
	.llmc-widget__toggle {
		width: 66px;
		height: 66px;
	}

	.llmc-widget__toggle svg {
		width: 30px;
		height: 30px;
	}

	.llmc-widget__panel {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 82px;
		width: auto;
		height: 65vh;
		max-height: 65vh;
	}
}

/* 【2026-08-24新增，圖片放大檢視】全螢幕燈箱，跟後台管理端(llmc-
   admin.css)完全相同的視覺/互動設計，只是這裡是給前台顧客看的。
   z-index用100000，蓋過widget本身的9999、也蓋過前台可能顯示的
   admin bar(登入的員工瀏覽前台時，wp-admin-bar是99999)。 */
.llmc-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.llmc-lightbox-overlay[hidden] { display: none; }
.llmc-lightbox-image { max-width: 90vw; max-height: 90vh; object-fit: contain; }

.llmc-lightbox-close,
.llmc-lightbox-prev,
.llmc-lightbox-next {
	position: absolute;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	line-height: 1;
	cursor: pointer;
}
.llmc-lightbox-close:hover,
.llmc-lightbox-prev:hover,
.llmc-lightbox-next:hover { background: rgba(255, 255, 255, 0.3); }
.llmc-lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 24px; }
.llmc-lightbox-prev,
.llmc-lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.llmc-lightbox-prev { left: 16px; }
.llmc-lightbox-next { right: 16px; }
.llmc-lightbox-prev[hidden],
.llmc-lightbox-next[hidden] { display: none; }

.llmc-lightbox-counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 13px;
	background: rgba(0, 0, 0, 0.4);
	padding: 3px 10px;
	border-radius: 12px;
}
.llmc-lightbox-counter[hidden] { display: none; }