/* AI客服織布捲仔 widget（G8）。命名空間 nwchat-*， theme: 品牌藍 #4154f1 / 產業綠 #3a8d4a。 */
#nwchat-fab {
  display: none;                 /* 無 JS 時永不顯示（JS 掛上 html.nwchat-ready 才顯示）*/
  position: fixed;
  left: 18px;
  bottom: 18px;                  /* JS 會依底部導覽以 inline style 上移避讓 */
  z-index: 2147483000;
  width: 64px; height: 64px;
  border: none; border-radius: 50%;
  padding: 0; cursor: pointer;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(65,84,241,.35);
  align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
html.nwchat-ready #nwchat-fab { display: inline-flex; }
#nwchat-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(65,84,241,.45); }
#nwchat-fab img { width: 56px; height: 56px; display: block; }
#nwchat-fab .nwchat-fab-badge {
  position: absolute; top: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #3a8d4a; border: 2px solid #fff;
}

#nwchat-panel {
  display: none;
  position: fixed;
  left: 18px; bottom: 96px;
  width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 120px));
  z-index: 2147483001;
  background: #fff;
  border: 1px solid #e4e7f5; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(29,36,64,.28);
  flex-direction: column; overflow: hidden;
  font-family: "Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}
html.nwchat-ready #nwchat-panel.nwchat-open { display: flex; }

#nwchat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; color: #fff;
  background: linear-gradient(120deg,#5b6cff,#4154f1);
}
#nwchat-head img { width: 34px; height: 34px; border-radius: 50%; background:#fff; }
#nwchat-head .nwchat-title { font-weight: 700; font-size: 15px; line-height:1.2; flex: 1 1 auto; }
#nwchat-head .nwchat-sub { display:block; font-weight:400; font-size: 11px; opacity:.85; }
#nwchat-close {
  background: rgba(255,255,255,.18); color:#fff; border:none;
  width: 30px; height: 30px; border-radius: 8px; cursor:pointer;
  font-size: 18px; line-height: 1;
}
#nwchat-close:hover { background: rgba(255,255,255,.32); }

#nwchat-log {
  flex: 1 1 auto; overflow-y: auto; padding: 14px;
  background: #f7f8fe;
  display: flex; flex-direction: column; gap: 10px;
}
.nwchat-row { display: flex; flex-wrap: wrap; }
.nwchat-row.user { justify-content: flex-end; }
.nwchat-bubble {
  max-width: 82%;
  padding: 9px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.nwchat-row.user .nwchat-bubble { background:#4154f1; color:#fff; border-bottom-right-radius:4px; }
.nwchat-row.bot  .nwchat-bubble { background:#fff; color:#22263b; border:1px solid #e4e7f5; border-bottom-left-radius:4px; }
.nwchat-bubble a { color:#2f43d6; text-decoration: underline; word-break: break-all; }
.nwchat-row.user .nwchat-bubble a { color:#e8ecff; }
.nwchat-degraded { font-size: 12px; color:#8a3b12; margin-top:6px; }
.nwchat-typing { color:#7b8095; font-size:13px; }

/* 卡片列自成一整行（flex 換行）：原設計與氣泡共列被壓成窄條，看不出可捲（2026-10-31 業主回報） */
.nwchat-cards-wrap { position:relative; flex: 1 1 100%; min-width:0; margin-top:8px; }
.nwchat-cards { display:flex; gap:10px; overflow-x:auto; padding: 2px 0 10px;
  scrollbar-width:thin; scrollbar-color:#4154f1 #eef1fc; }
.nwchat-cards::-webkit-scrollbar { height:8px; }
.nwchat-cards::-webkit-scrollbar-track { background:#eef1fc; border-radius:4px; }
.nwchat-cards::-webkit-scrollbar-thumb { background:#4154f1; border-radius:4px; }
/* 未捲到尾端時：右緣白色淡出＋箭頭鈕（使用者反映原設計看不出可橫向捲動） */
.nwchat-fade { position:absolute; right:0; top:0; bottom:10px; width:36px; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95)); opacity:0; transition:opacity .2s; }
.nwchat-cards-wrap.has-more .nwchat-fade { opacity:1; }
.nwchat-scrollhint { position:absolute; right:2px; top:34px; width:30px; height:30px; border-radius:50%;
  background:#4154f1; color:#fff; border:0; cursor:pointer; font-size:17px; line-height:1;
  box-shadow:0 3px 10px rgba(65,84,241,.4); display:none; }
.nwchat-cards-wrap.has-more .nwchat-scrollhint { display:block; }
.nwchat-scrollhint:hover { background:#2f3fd6; }
.nwchat-card {
  flex: 0 0 auto; width: 190px;
  border:1px solid #dfe3ff; border-radius:12px; background:#fff;
  padding:10px; text-decoration:none; color:inherit; display:block;
}
.nwchat-card:hover { border-color:#4154f1; box-shadow:0 4px 14px rgba(65,84,241,.18); }
.nwchat-card-top { display:flex; align-items:center; gap:8px; }
.nwchat-logo { width:34px; height:34px; border-radius:6px; object-fit:contain; background:#f1f3fb; flex:0 0 auto; }
.nwchat-logo-ph { width:34px; height:34px; border-radius:6px; background:#eef0ff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#4154f1; font-weight:700; }
.nwchat-cname { font-weight:700; font-size:13px; line-height:1.25; color:#22263b;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nwchat-cats { margin-top:7px; display:flex; flex-wrap:wrap; gap:4px; }
.nwchat-cat { font-size:11px; color:#2c6a3b; background:#eaf5ec; border:1px solid #bfe0c6; border-radius:6px; padding:1px 6px; }
.nwchat-cta { margin-top:8px; font-size:12px; color:#4154f1; font-weight:600; }

#nwchat-input {
  display:flex; gap:8px; align-items:flex-end;
  padding:10px 12px; border-top:1px solid #e9ebf6; background:#fff;
}
#nwchat-input textarea {
  flex:1 1 auto; resize:none; min-height:40px; max-height:110px;
  border:1px solid #d5daee; border-radius:10px; padding:9px 11px;
  font-size:14px; font-family:inherit; outline:none;
}
#nwchat-input textarea:focus { border-color:#4154f1; box-shadow:0 0 0 3px rgba(65,84,241,.15); }
#nwchat-send, #nwchat-stop {
  border:none; border-radius:10px; cursor:pointer; padding:0 14px; height:40px;
  font-size:14px; font-weight:600;
}
#nwchat-send { background:#4154f1; color:#fff; }
#nwchat-send:disabled { opacity:.55; cursor:default; }
#nwchat-stop { background:#3a8d4a; color:#fff; display:none; }
html.nwchat-busy #nwchat-send{display:none;} html.nwchat-busy #nwchat-stop{display:inline-block;}

.nwchat-hint { font-size:11px; line-height:1.45; color:#5f6478; padding:0 12px 8px; background:#fff; } /* 含隱私告知：色彩對比需達 4.5:1 */
.nwchat-noscript-only { display:none; }
@media (max-width: 430px){
  #nwchat-panel { left:8px; right:8px; width:auto; bottom:88px; height: calc(100vh - 96px); }
}