@charset "utf-8";
/* ============================================================================
   客服小浮条 + 小窗（2026-10-01）—— diafloat.js 專用
   ----------------------------------------------------------------------------
   為什麼獨立一份：main.css / mobile.css 都打包進 main-min.css / main-mobile-min.css，
   改它們必須重跑 GET /Index_csscode；小浮条每頁都要載，獨立檔案最安全、也最好回滾。
   設計口徑：沿用聊天界面（dialog-ui.css）—— 品牌橙 #f60 為唯一強調色、
             灰階 #f4f5f7 / #eceff3 / #98a2b3；不用 CSS 變數 / Grid（兼容老 WebView）。
   z-index：99999 是手機頁內聊天層（#dialog_win），小浮条一律在它底下。
   ============================================================================ */

/* ---------------------------------------------------------------- 收合態浮条 */
#dgFBar{position:fixed;right:16px;bottom:16px;z-index:99990;box-sizing:border-box;max-width:320px;
	background:#fff;border:1px solid #e8ebef;border-radius:12px;
	box-shadow:0 6px 20px rgba(24,39,75,.18);
	font:13px/1.5 "Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#333;
	padding:8px 10px;cursor:pointer;display:none;white-space:nowrap;
	-webkit-user-select:none;user-select:none;}
#dgFBar:hover{border-color:#ffcfa8;box-shadow:0 8px 24px rgba(255,102,0,.22);}
#dgFBar .dgF-ico{font-size:16px;line-height:1;vertical-align:-2px;margin-right:5px;}
#dgFBar .dgF-lb{font-weight:700;color:#f60;}

/* 收合（沒有未讀）：只留「💬 客服」膠囊 */
#dgFBar.dgF-mini{max-width:none;padding:7px 12px;border-radius:999px;}
#dgFBar.dgF-mini .dgF-tx,
#dgFBar.dgF-mini .dgF-n,
#dgFBar.dgF-mini .dgF-re,
#dgFBar.dgF-mini .dgF-x{display:none;}

/* 有未讀：預覽 + 角標 + 回覆 + 收起 */
#dgFBar .dgF-tx{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;
	white-space:nowrap;vertical-align:bottom;color:#444;}
#dgFBar .dgF-n{display:inline-block;min-width:16px;height:16px;line-height:16px;margin-left:6px;
	padding:0 5px;border-radius:9px;background:#f60;color:#fff;font-size:11px;font-weight:700;
	text-align:center;vertical-align:1px;}
#dgFBar .dgF-re{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:10px;
	background:#f60;color:#fff;font-weight:700;font-size:12px;text-decoration:none;}
#dgFBar .dgF-re:hover{background:#e65c00;}
#dgFBar .dgF-x{display:inline-block;margin-left:6px;color:#98a2b3;text-decoration:none;
	font-size:15px;line-height:1;vertical-align:1px;padding:0 2px;}
#dgFBar .dgF-x:hover{color:#f60;}
/* 有未讀時輕輕呼吸，但不搶版面 */
#dgFBar:not(.dgF-mini) .dgF-ico{-webkit-animation:dgFpulse 1.6s ease-in-out infinite;animation:dgFpulse 1.6s ease-in-out infinite;}
@-webkit-keyframes dgFpulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes dgFpulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------------------------------------------------------------- 小窗 */
#dgFWin{position:fixed;right:16px;bottom:16px;z-index:99990;box-sizing:border-box;
	width:326px;height:430px;background:#fff;border:1px solid #e8ebef;border-radius:14px;
	box-shadow:0 12px 36px rgba(24,39,75,.24);overflow:hidden;display:none;
	font:13px/1.6 "Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#333;}
#dgFWin .dgF-h{height:42px;line-height:42px;padding:0 10px;color:#fff;
	background:linear-gradient(135deg,#ff9a4d 0%,#f60 100%);}
#dgFWin .dgF-h b{font-size:14px;float:left;}
#dgFWin .dgF-h i{float:left;margin-left:8px;font-style:normal;font-size:12px;color:#fff3e8;}
#dgFWin .dgF-h a{float:right;color:#fff;text-decoration:none;font-size:16px;line-height:42px;
	padding:0 4px;margin-left:6px;}
#dgFWin .dgF-h a.dgF-max{font-size:15px;border:1px solid rgba(255,255,255,.6);border-radius:12px;
	line-height:20px;margin-top:10px;padding:0 8px;}
#dgFWin .dgF-h a:hover{opacity:.8;}
#dgFWin .dgF-b{box-sizing:border-box;height:332px;padding:10px 12px;overflow-y:auto;
	overflow-x:hidden;background:#f4f5f7;-webkit-overflow-scrolling:touch;}
#dgFWin .dgF-f{box-sizing:border-box;height:56px;padding:10px;border-top:1px solid #eceff3;
	background:#fff;overflow:hidden;}
#dgFWin .dgF-f textarea{box-sizing:border-box;float:left;width:228px;height:34px;resize:none;
	padding:6px 8px;border:1px solid #e0e4ea;border-radius:8px;font:13px/1.4 inherit;color:#333;
	outline:none;-webkit-appearance:none;appearance:none;}
#dgFWin .dgF-f textarea:focus{border-color:#ffcfa8;}
#dgFWin .dgF-f input#dgFSend{float:right;width:64px;height:34px;padding:0;margin:0;border:0;
	border-radius:8px;background:#f60;color:#fff;font:700 13px/34px inherit;cursor:pointer;
	-webkit-appearance:none;appearance:none;}
#dgFWin .dgF-f input#dgFSend:hover{background:#e65c00;}
#dgFWin .dgF-f input#dgFSend:disabled{background:#ffcfa8;cursor:default;}

/* 氣泡（與聊天頁同語言：自己靠右橙底白字、客服靠左白底描邊）
   ⚠ 類名是 .dgF-bub（不是 .dgF-b）—— .dgF-b 是訊息捲動容器，撞名會讓氣泡變成 300px 高的方塊 */
#dgFWin .dgF-m{clear:both;margin-bottom:8px;}
#dgFWin .dgF-bub{display:inline-block;max-width:78%;padding:6px 10px;
	border-radius:10px;font-size:13px;line-height:1.6;background:#fff;
	word-wrap:break-word;word-break:break-word;text-align:left;}
#dgFWin .dgF-bub img{max-width:100%;vertical-align:bottom;}
#dgFWin .dgF-me{text-align:right;}
#dgFWin .dgF-me .dgF-bub{background:#f60;color:#fff;}
#dgFWin .dgF-pt{text-align:left;}
#dgFWin .dgF-pt .dgF-bub{border:1px solid #e8ebef;color:#333;}
#dgFWin .dgF-tm{display:block;font-style:normal;font-size:11px;color:#98a2b3;margin-top:2px;}

/* ---------------------------------------------------------------- 圖片 / 表情
   為什麼要自己寫一份：聊天頁（dialog-ui.css）與表情精靈圖（bq.css）原本只在「聊天頁 / 手機版」
   載入，其他頁面開啟小窗時 —— 圖片沒有尺寸（原圖直接撐破氣泡）、表情 span 寬高是 0（整片空白）。
   bq.css 由 diafloat.js 在小窗第一次開啟時補載；這裡補「尺寸 + 圓角 + 可點放大」。 */
#dgFWin .dgF-bub img.dg-img{display:block;max-width:216px;max-height:216px;margin-top:4px;
	border-radius:8px;cursor:zoom-in;background:#f2eee8;}
#dgFWin .dgF-me .dgF-bub img.dg-img{background:#ffd9bf;}
/* 表情：bq.css 已給 28px + 精靈圖背景，這裡只兜「對齊基線」 */
#dgFWin .dgF-bub span{vertical-align:-8px;}
/* 圖片放大燈箱（聊天頁由 dialog2.js 的 dgZoom 負責；其他頁面由 diafloat.js 補一個同名的） */
#dgFZoom{display:none;position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483000;
	background:rgba(0,0,0,.78);cursor:zoom-out;text-align:center;}
#dgFZoom.dgF-zon{display:block;}
#dgFZoom img{max-width:92%;max-height:86%;margin:6vh auto 0;border-radius:8px;background:#fff;}
#dgFZoom .dgF-zx{position:absolute;right:14px;top:10px;width:34px;height:34px;line-height:32px;
	border-radius:50%;background:rgba(255,255,255,.86);color:#333;font-size:20px;text-align:center;
	font-weight:bold;}

/* ---------------------------------------------------------------- 手機 */
@media (max-width:720px){
	#dgFBar{right:8px;bottom:78px;max-width:62%;}
	#dgFBar .dgF-tx{max-width:96px;}
	#dgFWin{right:0;left:0;bottom:0;width:auto;height:auto;border-radius:14px 14px 0 0;
		max-height:76vh;}
	#dgFWin .dgF-b{height:auto;max-height:52vh;}
	#dgFWin .dgF-f{height:auto;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
	#dgFWin .dgF-f textarea{float:none;width:100%;height:38px;font-size:14px;}   /* iOS 焦點時不放大 */
	#dgFWin .dgF-f input#dgFSend{float:none;display:block;margin:8px 0 0 auto;width:76px;height:34px;}
}