/*
 * 線上詢問對話框（官網與會員中心共用，2026-10-18）。
 * ★ 從 site.css 拆出來：會員中心沒有載入 site.css，而且有自己的 .btn 樣式。
 *   所以顏色變數掛在 .npchat 自己身上、按鈕也自己定義 —— 放到哪一頁都長得一樣。
 * ★ 這份是用「數大括號」整條搬的；第一次一行一行搬，跨行的規則被切斷、畫面整個散掉。
 */
.npchat{ --navy:#0B1B33; --navy-2:#16325C; --ink:#0B1B33; --ink-2:#33425C; --muted:#5E6C84;
  --line:#E2E7EF; --surface:#F5F7FB; --gold:#C9A24B; --gold-ink:#8A6416; --gold-soft:#FBF5E7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  line-height:1.6; color:var(--ink); }
.npchat *,.npchat *::before,.npchat *::after{ box-sizing:border-box; }
.npchat .btn{ display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:600; background:var(--navy); color:#fff; padding:10px 14px; }
.npchat .btn:hover{ background:var(--navy-2); }
.npchat .btn:disabled{ opacity:.6; cursor:wait; }
.npchat .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.npchat{ position:fixed; right:20px; bottom:20px; z-index:80; font-family:var(--sans); }
.npchat-fab{ display:flex; align-items:center; gap:8px; padding:13px 18px; border-radius:99px; border:0; cursor:pointer;
  background:var(--navy); color:#fff; font-size:15px; font-weight:600; box-shadow:0 14px 30px -12px rgba(11,27,51,.6); position:relative; }
.npchat-fab:hover{ background:var(--navy-2); }
.npchat-dot{ position:absolute; top:6px; right:8px; width:11px; height:11px; border-radius:50%; background:#e53935; border:2px solid #fff; }
.npchat-panel{ width:360px; max-width:calc(100vw - 32px); height:600px; min-height:360px; max-height:calc(100vh - 40px); background:#fff; padding:0; margin:0;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 70px -30px rgba(11,27,51,.5);
  display:flex; flex-direction:column; overflow:hidden; }
.npchat-panel[hidden]{ display:none; }
/* ★ 面板原本是 <section>，吃到官網 site.css 的 section{ padding:76px 0 } —— 上下各多 76px 空白、
     訊息區被擠到剩一點點（業主截圖 2026-10-18）。已改成 <div>，這裡再擋一次，放到哪個版面都不受影響。 */
.npchat .npchat-panel{ padding:0; margin:0; }
/* 拖曳把手：往上拉變高、往下拉變矮；高度記在這台瀏覽器（業主：「請預設再拉高並且可以讓操作者調整高度」） */
.npchat-grip{ flex:none; height:12px; cursor:ns-resize; background:var(--navy); display:flex; align-items:center; justify-content:center; touch-action:none; }
.npchat-grip::before{ content:""; width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.45); }
.npchat-grip:hover::before{ background:rgba(255,255,255,.8); }
.npchat-panel header{ padding-top:6px !important; }
.npchat-panel header{ display:flex; justify-content:space-between; align-items:flex-start; padding:14px 16px; background:var(--navy); color:#fff; }
.npchat-panel header b{ display:block; font-size:16px; }
.npchat-panel header small{ display:block; font-size:12px; color:#C9D4E6; margin-top:2px; }
.npchat-x{ background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.npchat-log{ flex:1; overflow-y:auto; padding:14px; background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.npchat-msg{ max-width:82%; display:flex; flex-direction:column; }
.npchat-msg .b{ padding:9px 12px; border-radius:12px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.npchat-msg small{ font-size:11px; color:var(--muted); margin-top:3px; }
.npchat-msg.visitor{ align-self:flex-end; align-items:flex-end; }
.npchat-msg.visitor .b{ background:var(--navy); color:#fff; border-bottom-right-radius:4px; }
.npchat-msg.staff{ align-self:flex-start; }
.npchat-msg.staff .b{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.npchat-msg.system{ align-self:center; max-width:94%; }
.npchat-msg.system .b{ background:var(--gold-soft); color:var(--ink-2); font-size:13px; text-align:center; }
.npchat-who{ border-top:1px solid var(--line); padding:8px 12px; font-size:13px; }
.npchat-who summary{ cursor:pointer; color:var(--gold-ink); }
.npchat-who input{ display:block; width:100%; margin-top:6px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.npchat-form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); align-items:flex-end; }
.npchat-form textarea{ flex:1; resize:none; padding:9px 10px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:14.5px; }
.npchat-form .btn{ padding:10px 14px; }
.npchat-err{ margin:0; padding:0 12px 10px; color:#c62828; font-size:13px; }
.npchat-legal{ margin:0; padding:0 12px 10px; font-size:11px; line-height:1.5; color:var(--muted); }
.npchat-fab[hidden]{ display:none; }
@media(max-width:560px){
  .npchat-grip{ display:none; }
  .npchat{ right:12px; bottom:12px; }
  .npchat-fab span{ display:none; }
  .npchat-panel{ position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; border-radius:0; }
}