/* 「問 Museon」全站客服元件樣式。
   token 全部沿用 public/assets/site.css 既有 :root（--paper/--ink/--line/--accent/--serif/--sans/--mono）；
   本檔只新增兩個元件私有變數（陰影值抄自 public/asa.css 的 --asa-shadow，
   因為 home/about/media 與部落格頁不一定載入 asa.css）。
   來源：docs/chat-widget/DESIGN_2026-09-22.md §3–§4、docs/chat-widget/prototype.html（已 Playwright 驗證 38/38）。
   2026-09-22 深夜｜版面比例修訂：面板尺寸／身份列／首問列／首開告知列改依
   docs/chat-widget/LAYOUT_REVISION_2026-09-22.md §3 施工，理由與十視窗實測見該文 §4。 */
.mchat{
  --mc-shadow:0 24px 70px rgba(63,48,25,.10);
  --mc-ease:cubic-bezier(.4,0,.2,1);
  --mc-size:56px;
  font-family:var(--sans, sans-serif);
  color:var(--ink, #211D16);
}
/* 2026-09-22 修正：原本 position:absolute 且無 top/left、無定位祖先，
   靜態位置落在文件流最底（.mchat 是 body 最後一個元素，本身因子層全是
   fixed/absolute 而零高度）；label 點擊會把 focus 轉給這顆 checkbox，
   瀏覽器把它捲入視野＝整頁捲到底。改 fixed 釘在視窗左上角，永遠在視野內，
   不需要任何捲動（見 docs/chat-widget，桌機/手機重現腳本）。 */
.mchat-toggle{position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none}

/* 收合態：紙色印章 */
.mchat-launcher{position:fixed; z-index:50; right:20px; bottom:20px; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; transition:opacity .22s var(--mc-ease), transform .22s var(--mc-ease)}
.mchat-launcher .seal{position:relative; width:var(--mc-size); height:var(--mc-size); border-radius:50%; background:var(--paper); border:1px solid var(--line); box-shadow:var(--mc-shadow); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:26px; color:var(--accent); transition:transform .22s var(--mc-ease), box-shadow .22s var(--mc-ease)}
.mchat-launcher .seal::after{content:""; position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .22s var(--mc-ease), transform .22s var(--mc-ease)}
.mchat[data-unread="1"] .mchat-launcher .seal::after{opacity:1; transform:none}
.mchat-launcher .label{font-size:13.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); padding:6px 12px; border-radius:999px; box-shadow:var(--mc-shadow)}
.mchat-launcher:hover .seal,.mchat-toggle:focus-visible ~ .mchat-launcher .seal{transform:scale(1.04); box-shadow:0 28px 80px rgba(63,48,25,.16)}
.mchat-toggle:focus-visible ~ .mchat-launcher .seal{outline:2px solid var(--accent); outline-offset:3px}
.mchat-toggle:checked ~ .mchat-launcher{opacity:0; pointer-events:none; transform:translateY(8px)}

/* 手機 scrim（桌機不用） */
.mchat-scrim{position:fixed; inset:0; z-index:49; background:rgba(33,29,22,.18); opacity:0; visibility:hidden; transition:opacity .22s var(--mc-ease), visibility .22s; display:none}

/* 展開態：桌機面板 */
.mchat-panel{position:fixed; z-index:50; right:20px; bottom:20px; width:420px; max-width:calc(100% - 40px); height:min(760px, 100dvh - 40px); background:var(--paper); border:1px solid var(--line); border-radius:4px; box-shadow:var(--mc-shadow); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .22s var(--mc-ease), transform .22s var(--mc-ease), visibility .22s}
.mchat-toggle:checked ~ .mchat-panel{opacity:1; visibility:visible; transform:none}

/* 1 頭 */
.mchat-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--line-soft)}
.mchat-head .name{display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:.03em; margin:0}
.mchat-head .name small{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase}
.mchat-close{min-width:44px; min-height:44px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; font-size:13.5px; text-decoration:underline; text-underline-offset:5px}
.mchat-close:hover{color:var(--ink)}
.mchat-back{display:none}
/* 會員狀態格（2026-09-22 D-09 推翻後補：留位置，登入功能不在本批） */
.mchat-member-status{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:2px 8px; margin-left:2px; white-space:nowrap}

/* 2 身份列 */
.mchat-who{padding:8px 16px; font-size:12.5px; color:var(--ink-faint); border-bottom:1px solid var(--line-soft); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px}
.mchat-who .sw{display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink-soft)}
.mchat-who .sw input{accent-color:var(--accent); width:16px; height:16px; margin:0}
.mchat-who .sw.sw-disabled{cursor:default; opacity:.55}
.mchat-who details{font-size:12.5px; flex:1 1 auto; min-width:0}
.mchat-who details .sw{margin-top:6px}
.mchat-who summary{cursor:pointer; color:var(--ink-soft); list-style:none; display:inline}
.mchat-who summary::-webkit-details-marker{display:none}
.mchat-who summary::before{content:"▸ "; color:var(--accent)}
.mchat-who details[open] summary::before{content:"▾ "}
.mchat-who ul{margin:6px 0 2px; padding-left:14px}
.mchat-who li{margin:2px 0}
.mchat-who .fact{display:block; color:var(--ink-faint)}
/* W5/W6（D-31/D-34，2026-09-25）：失敗提示與「刪掉我已存的」——兩者都要在畫面上看得到，
   不是只寫進 DOM 就算數（D-25 的教訓）。 */
.mchat-who .mchat-consent-error,.mchat-who .mchat-delete-status{flex-basis:100%; margin:2px 0 0; color:var(--accent)}
.mchat-who .mchat-delete{font:inherit; font-size:11.5px; color:var(--ink-soft); background:none; border:1px solid var(--line-soft); border-radius:999px; padding:2px 10px; cursor:pointer}
.mchat-who .mchat-delete:hover{color:var(--accent); border-color:var(--accent)}

/* 3 對話區 */
.mchat-log{overflow:auto; overscroll-behavior:contain; padding:14px 16px; display:flex; flex-direction:column; gap:10px; scrollbar-color:var(--line) transparent}
.mchat-notice{font-size:12.5px; color:var(--ink-soft); background:color-mix(in srgb, var(--paper) 88%, var(--ink)); border:1px solid var(--line-soft); padding:10px 12px; border-radius:4px; display:flex; align-items:center; gap:10px}
.mchat-notice a{color:var(--accent)}
.mchat-notice button{margin:0; min-height:44px; min-width:44px; display:inline-flex; align-items:center; border:0; background:transparent; color:var(--accent); text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:0 6px 0 0; font-size:13.5px; flex:0 0 auto}
.msg{max-width:85%; padding:10px 12px; font-size:16px; line-height:1.7; white-space:pre-wrap}
.msg.bot{align-self:flex-start; background:color-mix(in srgb, var(--paper) 92%, var(--ink)); border-radius:.6rem .15rem .6rem .6rem}
.msg.user{align-self:flex-end; background:var(--ink); color:var(--paper); border-radius:.15rem .6rem .6rem .6rem}
.msg.honest{align-self:flex-start; background:transparent; border:1px dashed var(--line); color:var(--ink-soft); border-radius:.6rem .15rem .6rem .6rem}
.msg.error{align-self:flex-start; background:transparent; border:1px dashed rgba(176,63,40,.5); color:var(--ink-soft); border-radius:.6rem .15rem .6rem .6rem}
.msg.supp{align-self:flex-start; background:transparent; border:1px solid var(--line-soft); color:var(--ink-soft); font-size:14px}
.msg.bot,.msg.honest,.msg.error,.msg.supp{max-width:100%}
.msg.supp b,.msg .tag{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); margin-bottom:4px; font-weight:500}
.msg .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.msg .acts button,.msg .acts a{min-height:36px; padding:4px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:2px; cursor:pointer; font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center}
.msg .acts .pri{border-color:var(--accent); color:var(--accent)}
.msg .note{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-faint)}
.msg.pending{color:var(--ink-faint)}
.dots{display:inline-flex; gap:4px; margin-right:8px; vertical-align:middle}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:mc-breathe 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes mc-breathe{0%,100%{opacity:.25}50%{opacity:1}}

/* 4 快捷列 */
.mchat-chips{display:flex; flex-wrap:wrap; gap:8px; padding:0}
.mchat-chips:empty{display:none}
.mchat-chips button{min-height:44px; padding:6px 12px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:2px; cursor:pointer; font-size:13.5px; text-align:left}
.mchat-chips button:hover{border-color:var(--ink)}
.mchat-chips button:disabled{opacity:.55; cursor:default}

/* 5 輸入區 */
.mchat-form{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 16px; border-top:1px solid var(--line-soft); align-items:end}
.mchat-form textarea{width:100%; resize:none; min-height:44px; max-height:calc(4 * 1.55em + 20px); padding:10px 12px; border:1px solid var(--line); background:#fff; color:var(--ink); font:16px/1.55 var(--sans); border-radius:2px}
.mchat-form textarea:disabled{opacity:.55}
.mchat-send{min-width:64px; min-height:44px; border:0; background:var(--accent); color:#fff; border-radius:2px; cursor:pointer; font-size:15px}
.mchat-send:disabled{opacity:.45; cursor:default}
.mchat-count{grid-column:1 / -1; font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:right; min-height:0}
.mchat-count:empty{display:none}
.mchat-limit{padding:14px 16px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--ink-soft)}
.mchat-limit a{color:var(--accent)}
.mchat[data-limit="1"] .mchat-form{display:none}
.mchat:not([data-limit="1"]) .mchat-limit{display:none}

/* 沒登入不能送出（2026-09-22 深夜裁決）：form／首三問整個收起，換登入卡 */
.mchat-login{padding:14px 16px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--ink-soft)}
.mchat-login p{margin:0 0 10px}
.mchat-login-status{color:#b03f28}
.mchat-login-status:empty{display:none}
.mchat-login-google{min-height:40px}
.mchat-login a{color:var(--accent)}
.mchat[data-login="1"] .mchat-form,.mchat[data-login="1"] .mchat-chips{display:none}
.mchat:not([data-login="1"]) .mchat-login{display:none}
/* 登入卡優先權比額度用完卡高：沒登入時就算裝置本機軟計數剛好也滿，也不該疊兩張卡 */
.mchat[data-login="1"] .mchat-limit{display:none}

/* 6 腳 */
.mchat-foot{padding:6px 16px 10px; font-size:12px; color:var(--ink-faint); margin:0}
.mchat-foot a{color:var(--ink-faint)}

/* 手機：右緣抽屜（Zeal 09-14「所有功能列都應該這樣設計」） */
@media(max-width:820px){
  .mchat{--mc-size:52px}
  .mchat-launcher{right:16px; bottom:calc(16px + env(safe-area-inset-bottom))}
  .mchat-launcher .label{display:none}
  .mchat-scrim{display:block}
  .mchat-toggle:checked ~ .mchat-scrim{opacity:1; visibility:visible}
  .mchat-panel{inset:0 0 0 auto; right:0; bottom:0; width:min(100% - 44px, 420px); max-width:100%; height:100dvh; border-radius:0; border-width:0 0 0 1px; box-shadow:none; transform:translateX(100%); transition:transform .22s var(--mc-ease), visibility .22s; opacity:1}
  .mchat-toggle:checked ~ .mchat-panel{transform:none}
  .mchat-back{display:inline-flex; align-items:center; min-width:44px; min-height:44px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; font-size:18px; margin-left:-10px}
  .mchat-head{padding-top:calc(10px + env(safe-area-inset-top))}
  .mchat-form{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
/* site.css 的全域 reduced-motion 只關 transition，不關 animation；
   波紋點是本檔新增的唯一 animation，另外補一條，不重複整段既有規則 */
@media (prefers-reduced-motion:reduce){.dots i{animation:none}}

/* ── B0U V-3：秘書圖示的另外三個狀態（設計 §2.3.1）。全線條，不用任何圖片。
   🔴 「有話想說」那一態**不在這裡**：站上早就有了（上面的 .seal::after ＋ [data-unread="1"]）。
      再畫一顆小點就是同一件事的第二份實作，漂移時沒有人會紅。 */
/* 🔴 「有話想說」沿用上面那顆既有的小點（不另畫第二顆），只是多接一個觸發條件：
   data-seal 也要能點亮它。瀏覽器實測抓到的：原本只設 data-seal="unread" 時畫面毫無變化，
   五個狀態實際只有四種長相——**函數吐出五個不同的值 ≠ 畫面上真的有五種樣子**。 */
.mchat[data-seal="unread"] .mchat-launcher .seal::after{opacity:1; transform:none}
.mchat[data-seal="working"] .mchat-launcher .seal{border-style:dashed; animation:mchat-seal-spin 6s linear infinite}
@keyframes mchat-seal-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* 幅度上限 2px：56px 圓上 scale(1.03) 約 1.7px（本地模型原寫 1.05 ≈ 2.8px，超標，主控改掉）。 */
.mchat[data-seal="talking"] .mchat-launcher .seal{animation:mchat-seal-talk 1.6s ease-in-out infinite}
@keyframes mchat-seal-talk{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
/* 勿擾：外圈頂端缺一口（靜音線），不加任何圖示。 */
.mchat[data-seal="dnd"] .mchat-launcher .seal{border-top-color:transparent}
/* 「不對」那一列：只有文字，點擊區 44px，平常是最淡的灰，碰到才變強調色。 */
.mchat .msg .acts.guess{justify-content:flex-end; gap:10px}
.mchat .msg .acts.guess button{background:none; border:0; padding:0 4px; min-height:44px; font-size:13px; color:var(--ink-faint); cursor:pointer}
.mchat .msg .acts.guess button:hover,.mchat .msg .acts.guess button:focus-visible{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .mchat[data-seal="working"] .mchat-launcher .seal,
  .mchat[data-seal="talking"] .mchat-launcher .seal{animation:none}
}