/* 森境 v7：官網原有客服元件（chat-widget.js）的外觀換膚
   功能（表情、圖片、語音、已讀、歷史）完全沿用原元件；此檔只調整樣式與位置。
   - 桌面：右下角浮動面板（位於史萊姆按鈕上方）
   - 手機（≤ 768px）：全螢幕，避開瀏海與底部安全區 */
body .chat-widget-launcher{display:none!important}

body .chat-widget-container{
  --cw-forest:#173d2e;--cw-pine:#214d39;--cw-cream:#fffef8;--cw-moss:#edf2e5;--cw-line:#e0e7d7;--cw-ink:#203d31;--cw-soft:#5d7059;--cw-gold:#ecd9a1;
  right:22px;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 32px));height:min(620px,calc(100dvh - 190px));max-height:none;
  display:flex;flex-direction:column;overflow:hidden;border-radius:18px;border:0;
  background:var(--cw-cream);color:var(--cw-ink);font-family:var(--f-body,"Noto Sans TC",sans-serif);
  box-shadow:0 0 0 1px rgba(120,149,92,.22),0 30px 60px -18px rgba(16,44,30,.5);backdrop-filter:none;z-index:85}
body .chat-widget-container::before,body .chat-widget-container::after{display:none}

/* 標題列 */
body .chat-header{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--cw-forest);color:#f7faef;border:0;box-shadow:none}
body .chat-header::before{content:"";flex:none;width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 2px rgba(240,226,180,.5);
  background:url(/images/senjing/customer-slime.svg) center 88%/150% auto no-repeat,radial-gradient(circle at 50% 35%,#fffef6,#e9f3e0)}
body .chat-header-info{flex:1;min-width:0;display:grid;gap:2px}
body .chat-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body .chat-header-info h3{margin:0;font:700 15px var(--f-body,inherit);letter-spacing:.04em;color:#f7faef}
body .chat-status-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;border:0;background:rgba(255,255,255,.1)}
body .chat-status-text{font-size:11.5px;color:#c3d2b8}
body .status-dot{width:7px;height:7px;border-radius:50%;background:#9aa68a}
body .status-dot::after{display:none}
body .chat-status-badge.online .status-dot{background:#7ccf7a;box-shadow:0 0 0 3px rgba(124,207,122,.25)}
body .chat-status-badge.online .chat-status-text{color:#dff2d6}
body .chat-hours{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#a9bf9c}
body .chat-hours i{color:var(--cw-gold);font-size:11px}
body .chat-close-btn{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.08);color:#f7faef;font-size:15px}
body .chat-close-btn:hover{background:rgba(255,255,255,.16)}

/* 訊息區 */
body .chat-messages{flex:1;min-height:0;padding:16px;gap:12px;background:linear-gradient(180deg,#f4f7ee,var(--cw-cream) 140px)}
body .chat-messages::-webkit-scrollbar-thumb{background:rgba(33,77,57,.18)}
body .message-bubble{padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.7;box-shadow:none}
body .message.agent .message-bubble{background:#fff;color:var(--cw-ink);box-shadow:inset 0 0 0 1px var(--cw-line);border-bottom-left-radius:4px}
body .message.visitor .message-bubble{background:var(--cw-pine);color:#f7faef;border-bottom-right-radius:4px}
body .message-time{font-size:10.5px;color:#8a9b7c}
body .message.visitor .message-time{color:#8a9b7c}
body .message-read-status{color:#8a9b7c}
body .message-read-status.read{color:#4f8a55}
body .message-image{border-radius:10px}
body .message.agent .message-attachment{background:var(--cw-moss);border-color:var(--cw-line);color:var(--cw-ink)}
body .message.visitor .message-attachment{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
body .message.agent .attachment-icon{background:#fff;color:var(--cw-pine)}
body .message.agent .attachment-name{color:var(--cw-ink)}
body .message.agent .attachment-meta{color:var(--cw-soft)}
body .message.agent .attachment-download{background:var(--cw-pine);color:#fff}
body .upload-progress-bar{background:var(--cw-moss)}
body .upload-progress-bar-inner{background:var(--cw-pine)}
body .message.agent .cw-voice-wave span{background:var(--cw-pine)}
body .message.agent .cw-voice-duration{color:var(--cw-soft)}
body .cw-voice-play-btn{background:var(--cw-moss);color:var(--cw-pine)}
body .message.visitor .cw-voice-play-btn{background:rgba(255,255,255,.18);color:#fff}

/* 輸入區：上方工具列（語音／圖片／表情），下方輸入框與送出 */
body .chat-input-area{padding:10px 12px 12px;border-top:1px solid #e3eada;background:var(--cw-cream)}
body .chat-actions{gap:4px;margin-bottom:8px}
body .action-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:10px;color:#4c6b3c;font-size:17px;background:transparent}
body .action-btn:hover{background:var(--cw-moss);color:var(--cw-pine)}
body .action-btn.emoji-btn.active,body .cw-voice-input-btn.active{background:var(--cw-pine);color:var(--cw-gold)}
body .chat-input-row{gap:8px}
body .chat-input{height:44px;padding:0 14px;border-radius:12px;border:1px solid #d4dfc9;background:#fff;color:var(--cw-ink);font:14px var(--f-body,inherit)}
body .chat-input::placeholder{color:#9aa88e}
body .chat-input:focus{border-color:var(--cw-pine);box-shadow:0 0 0 3px rgba(33,77,57,.12)}
body .send-btn{width:44px;height:44px;border-radius:12px;background:var(--cw-pine);color:var(--cw-gold);box-shadow:none}
body .send-btn:hover{background:#346447;transform:none}

/* 表情選擇器 */
body .chat-emoji-picker{background:#fff;border-top:1px solid var(--cw-line);box-shadow:0 -14px 30px -18px rgba(16,44,30,.35)}
body .chat-emoji-picker-header{background:var(--cw-moss);border-bottom:1px solid var(--cw-line)}
body .chat-emoji-picker-title{color:var(--cw-ink);font-weight:700}
body .chat-emoji-tab{color:var(--cw-soft);background:transparent;border-radius:999px}
body .chat-emoji-tab.active{background:var(--cw-pine);color:#fff}
body .chat-btn-close-emoji{color:var(--cw-soft)}
body .chat-emoji-item:hover{background:var(--cw-moss)}

/* 語音錄製覆蓋層 */
body .cw-voice-recording-overlay{background:rgba(23,61,46,.94)}
body .cw-voice-recording-indicator{background:var(--cw-gold);color:var(--cw-forest)}
body .cw-voice-recording-duration{color:#fff}
body .cw-voice-recording-hint{color:#c3d2b8}
body .cw-voice-send-btn{background:var(--cw-gold);color:var(--cw-forest)}
body .cw-voice-cancel-btn{background:rgba(255,255,255,.12);color:#fff}

/* 手機：全螢幕 */
@media (max-width:768px){
  body .chat-widget-container{inset:0;right:0;bottom:0;width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;box-shadow:none;z-index:95}
  body .chat-header{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  body .chat-input-area{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.cw-open{overflow:hidden}
  body.cw-open .svc-dock{opacity:0;pointer-events:none}
}
body .chat-input-row{display:flex;width:100%;box-sizing:border-box}
body .chat-input{flex:1 1 auto;min-width:0;width:auto;box-sizing:border-box}
body .send-btn{flex:none}
body .chat-input-area,body .chat-actions{box-sizing:border-box;width:100%}
/* 工具列：三顆按鈕同高、圖示垂直置中；左右邊緣與輸入框 / 送出鈕對齊 */
body .chat-actions{display:flex;align-items:center;height:36px;padding:0;margin:0 0 10px}
body .chat-actions .action-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;line-height:1}
body .chat-actions .action-btn i{display:block;line-height:1;font-size:18px;width:18px;text-align:center}
body .chat-actions .action-btn:first-child{margin-left:-4px}
body .chat-actions .action-btn:last-child{margin-right:-4px}
body .chat-actions .action-btn:first-child{margin-left:-9px}
body .chat-actions .action-btn:last-child{margin-right:-9px}
/* 輸入區上下等距：上緣 → 工具列 → 輸入列 → 下緣，皆為 12px */
body .chat-input-area{padding:12px;gap:12px}
body .chat-actions{margin:0}
@media (max-width:768px){body .chat-input-area{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}}