/* chat/chat-widget.css — 右下角的浮動諮詢視窗
 *
 * 這支只管「那顆圓鈕與那個面板」的外觀與定位。裡面的對話（訊息泡泡、chips、
 * 導頁按鈕）全部由 chat-core.css 負責，兩支都要載，順序不拘。
 *
 * 配色刻意跟 /chat 全頁一致（--primary #e07070，宣告在 chat-core.css 的
 * .chat-ui 上），而不是去接 redesign.css 的 --rose-deep：兩個入口是同一個
 * 東西，長得一樣才不會讓人以為是兩套服務。圓鈕本身不在 .chat-ui 裡面，
 * 所以它自己留一份色票。
 */

.sgw {
  --sgw-primary: #e07070;
  --sgw-primary-deep: #d05a5a;
  --sgw-panel-w: 380px;
  --sgw-gap: 24px;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
}

/* ---------- 收合狀態的圓鈕 ---------- */

.sgw-launcher {
  position: fixed;
  right: var(--sgw-gap);
  bottom: var(--sgw-gap);
  /* nav 是 z-index 50、skip-link 是 100（見 redesign.css）。諮詢鈕要蓋過
     導覽列，但不能蓋過「跳到主要內容」那條無障礙捷徑。 */
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 6px 20px -4px rgba(42, 34, 27, 0.28), 0 0 0 1.5px var(--sgw-primary) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sgw-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(42, 34, 27, 0.34), 0 0 0 1.5px var(--sgw-primary-deep) inset;
}
.sgw-launcher:active { transform: translateY(0); }
.sgw-launcher:focus-visible {
  outline: 2px solid var(--sgw-primary-deep);
  outline-offset: 3px;
}
.sgw-launcher svg { width: 40px; height: 40px; display: block; }

/* 圓鈕上的兩個圖示疊在一起，用 opacity 換 —— 展開時變成叉叉，讓同一顆鈕
   同時是「開」也是「關」（桌機上面板不會蓋住它）。 */
.sgw-launcher__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.sgw-launcher__icon--close {
  opacity: 0;
  transform: rotate(-45deg);
  font-size: 26px;
  line-height: 1;
  color: var(--sgw-primary-deep);
}
.sgw.is-open .sgw-launcher__icon--avatar { opacity: 0; transform: rotate(45deg); }
.sgw.is-open .sgw-launcher__icon--close { opacity: 1; transform: rotate(0); }

/* 一行小標籤，只在桌機、且面板收合時出現。行動裝置上寬度不夠，硬塞會擋到
   頁面內容。 */
.sgw-launcher__label {
  position: fixed;
  right: calc(var(--sgw-gap) + 68px);
  bottom: calc(var(--sgw-gap) + 16px);
  z-index: 89;
  background: #fff;
  color: #2a2520;
  border: 1px solid #ece4dc;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(42, 34, 27, 0.2);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sgw.is-open .sgw-launcher__label { opacity: 0; transform: translateX(8px); }
@media (max-width: 720px) { .sgw-launcher__label { display: none; } }

/* ---------- 展開的面板 ---------- */

.sgw-panel {
  position: fixed;
  right: var(--sgw-gap);
  bottom: calc(var(--sgw-gap) + 70px);
  z-index: 91;
  width: var(--sgw-panel-w);
  max-width: calc(100vw - 2 * var(--sgw-gap));
  height: min(560px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  background: #faf6f3;
  border: 1px solid #ece4dc;
  border-radius: 16px;
  box-shadow: 0 18px 48px -12px rgba(42, 34, 27, 0.32);
  overflow: hidden;

  /* 收合時：不可見、不可點、不進無障礙樹（visibility 而不是 opacity 單獨
     使用的原因 —— 只有 opacity:0 的東西螢幕閱讀器還是唸得到）。 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: 100% 100%;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.sgw.is-open .sgw-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sgw-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: #fff;
  border-bottom: 1px solid #ece4dc;
  flex-shrink: 0;
}
.sgw-panel__head svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.sgw-panel__title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sgw-panel__title strong { font-size: 15px; font-weight: 600; }
.sgw-panel__title small { font-size: 12px; color: #6a635a; }

.sgw-panel__head-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sgw-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 8px;
  color: #6a635a;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sgw-icon-btn:hover { background: #f4ece6; color: #2a2520; }
.sgw-icon-btn:focus-visible { outline: 2px solid var(--sgw-primary-deep); outline-offset: 1px; }

/* 以下每一條都寫成 .chat-ui.sgw-panel（兩個 class 疊在同一個元素上）而不是
   單一 class。原因是這些規則要蓋過 chat-core.css 的 `.chat-ui .chat-log`、
   `.chat-ui .chat-input` —— 那些是 0,2,0，單一個 .sgw-panel__log 只有 0,1,0，
   輸得乾乾淨淨。實際症狀是面板的左右內距整個消失，訊息泡泡與送出鈕貼著邊
   被切掉。
   拉到 0,3,0 就跟兩支 CSS 的載入順序無關了，不必依賴誰先誰後。 */

.chat-ui.sgw-panel .sgw-panel__log {
  flex: 1;
  padding: 12px 14px;
  overflow-y: auto;
  /* 面板裡捲到底之後不要把捲動傳給底下的頁面 —— 客戶在讀對話，背景卻在跑。 */
  overscroll-behavior: contain;
}

.chat-ui.sgw-panel .sgw-panel__form {
  flex-shrink: 0;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #ece4dc;
  /* chat-core.css 的 .chat-input 自己有 padding-top + border-top，那是給全頁
     版用的；面板裡改由這一層負責，兩邊都留著會疊出兩條線。
     送出鈕也不跟著 textarea 一起長高：全頁版的輸入框有四行，鈕拉滿還算合理，
     面板裡只有兩行，一顆佔滿整個高度的實心方塊會重到蓋過對話本身。 */
  align-items: flex-end;
}
.chat-ui.sgw-panel .chat-input { padding-top: 0; border-top: none; }
/* 上下界由 chat-core.css 統一給，這裡只縮字級。 */
.chat-ui.sgw-panel .chat-input textarea { font-size: 14px; }
.chat-ui.sgw-panel .chat-input button { padding: 0 16px; font-size: 14px; height: 40px; }

/* 面板比全頁窄很多，訊息區的左側縮排要跟著縮，不然按鈕會被擠成一行一顆。 */
.chat-ui.sgw-panel .actions { margin-left: 8px; }
.chat-ui.sgw-panel .msg-bubble { max-width: calc(100% - 46px); font-size: 14px; }

/* ---------- 行動裝置：接近全螢幕 ---------- */

@media (max-width: 560px) {
  .sgw { --sgw-gap: 16px; }
  .sgw-panel {
    inset: 8px;
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 14px;
  }
  /* 面板佔滿畫面時圓鈕會被蓋住，留著只會從邊緣露出一角。 */
  .sgw.is-open .sgw-launcher { display: none; }
}

/* 面板展開時鎖住底下頁面的捲動 —— 只在行動裝置。桌機的面板只佔一角，
   鎖住整頁反而怪。 */
@media (max-width: 560px) {
  html.sgw-open, html.sgw-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sgw-launcher,
  .sgw-launcher__icon,
  .sgw-launcher__label,
  .sgw-panel {
    transition: opacity 0.12s linear;
    transform: none !important;
  }
}