/* widget 容器的樣式。
 *
 * iframe 永遠佔滿可視範圍 —— 這樣 iframe 內的 window.innerWidth 就等於宿主頁的可視
 * 範圍，定位與避讓全部變成單一座標系裡的普通計算。可互動的區域由 widget 回報矩形、
 * 經 setHitZones 寫成 clip-path 的多重子路徑；裁切區外同時不接受指標事件、也不繪製，
 * 所以宿主頁完全不受影響。
 *
 * 舊版的 .isOpen / .notifyDesktop / .notifyMobile / .fullWindow / .expanded /
 * .window-size-* / .rightContent / .leftContent 全數移除。
 */

#eight-chat-container {
	position: fixed;
	display: block;
	z-index: 999999;
}

#eight-chat-content {
	position: fixed;
	display: block;
	top: 0;
	left: 0;

	/* 刻意不用 100vw / 100vh。
	 *
	 * 100vh 在手機瀏覽器是「網址列收起後」的高度（large viewport），網址列還在時它比
	 * 可見範圍高出網址列那一截 —— widget 的座標系底部因此落在畫面外，右下角的 launcher
	 * 平常看不到，往下滑（網址列收起）才冒出來，滑回頂或到底（網址列回來）又消失。
	 * 改用 svh（small viewport，網址列在的高度）：網址列在不在都完整可見。
	 * 不用 dvh 是因為它會跟著網址列的收放動畫連續變化，iframe 每一帧 resize、launcher
	 * 跟著抖，而且會一直觸發重算。
	 *
	 * 100vw 含傳統捲軸的寬度，宿主頁有捲軸時右下角的 launcher 會被捲軸壓掉一截；
	 * fixed 元素的百分比對的是初始包含塊，本來就不含捲軸，所以寬度用 100%。
	 *
	 * 兩個 height 是漸進增強：不支援 svh 的舊瀏覽器吃第一行。 */
	width: 100%;
	height: 100vh;
	height: 100svh;

	/* 預設不裁出任何區域：widget 回報熱區之前，宿主頁完全不受影響。
	 * 刻意不設 transition —— 熱區必須立即跳到最終形狀，否則面板放大到一半時邊緣點
	 * 不到、縮小到一半時就已經穿透。看得見的動畫全在 iframe 內跑。 */
	clip-path: path('M 0 0 Z');
}

#eight-chat-iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px;
	border: 0;
	background-color: transparent;
}