/* 客服工作站示範「手機版」那條（ws-phone.js）的樣式：手機外殼（標題列、底部分頁、清單↔詳情、底部抽屜、⋯ 選單、提示位置）與第 1–3 段
   （聊天清單、客人對話、派車卡、定位提醒頁、倒數、派車提示條）。跟 ws.css 載進同一個 Shadow DOM，色票用 ws.css 的 --w-*。
   數值照 apps/workstation/styles.css 的手機規則（@media max-width:767px，註解寫行號）；轉場秒數是工作站的真實值 ÷1.6（示範的 SPEED）。
   第 4–5 段的樣式在 ws-phone-orders.css、第 6 段在 ws-phone-drivers.css、第 7 段在 ws-phone-groups.css。 */

/* 動畫時長與緩動：工作站 --dur-fast 120／--dur-base 220／--dur-sheet 280 ms（styles.css 72-77）÷1.6；給四支手機版樣式共用 */
.ws{--m-fast:75ms;--m-base:138ms;--m-sheet:175ms;--m-eo:cubic-bezier(.32,.72,0,1);--m-ei:cubic-bezier(.4,0,1,1);--m-spring:cubic-bezier(.34,1.3,.64,1);--m-push:cubic-bezier(.2,.8,.2,1)}

/* ───────── 外殼：狀態列以下整塊（標題列 50｜內容｜底部分頁） ───────── */
.m-app{position:absolute;top:47px;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--w-paper);overflow:hidden}
/* 標題列（styles.css 221-243、1035-1051）：清單層車隊名 15px＋@id 12px；詳情層「←」20px（對話頁 44×44）＋標題 16px */
.m-top{position:relative;z-index:3;flex:none;height:50px;display:flex;align-items:center;gap:6px;padding:0 8px;min-width:0;background:var(--w-topbar);border-bottom:1px solid var(--w-line);color:var(--w-topink)}
.m-top .flw{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.m-top .fl{flex:none;font-family:var(--w-serif);font-weight:700;font-size:15px}
.m-top .oa{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--w-mono);font-size:12px;color:var(--w-topink2)}
.m-top .me{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px}
.m-top .w-duty{padding:2px 3px 2px 8px;gap:5px;font-size:12px}
.m-top .w-duty-b{min-height:32px;padding:4px 10px;font-size:13px}
.m-top .bk{flex:none;width:34px;height:34px;margin-left:-2px;display:grid;place-items:center;border-radius:50%;font-size:20px;line-height:1;color:var(--w-topink)}
.m-top.big .bk,.m-top.big .w-more{width:44px;height:44px}
.m-top .tt{display:flex;align-items:center;gap:9px;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;color:var(--w-topink)}
.m-top .tt .w-av{width:30px;height:30px;font-size:13px}
.m-top .tt b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
/* 內容兩層：清單（surface）與詳情（paper）；推入時詳情帶陰影（styles.css 1080-1085） */
.m-body{position:relative;flex:1;min-height:0;overflow:hidden}
.m-pane{position:absolute;inset:0;overflow:hidden;background:var(--w-surface)}
.m-pane.det{z-index:2;background:var(--w-paper)}
.m-pane.det.peek{box-shadow:-10px 0 28px rgba(0,0,0,.14)}
/* 底部分頁（styles.css 1054-1065）：只有字 13px、選中主色＋上緣 2px 線；底下留 34px 安全區；數字左右 4px。
   五格（多了「群組」，0112）時照 styles.css 2888-2890：每格左右留白收成 2px、字與數字間距 2px、兩顆數字相鄰多 2px */
.m-tabs{position:relative;z-index:3;flex:none;display:flex;padding-bottom:34px;background:var(--w-surface);border-top:1px solid var(--w-line)}
.m-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;padding:12px 2px;font-size:13px;line-height:1.5;color:var(--w-muted);white-space:nowrap}
.m-tab.on{color:var(--w-act);font-weight:600;box-shadow:inset 0 2px 0 var(--w-act)}
.m-tab .w-count{padding:0 4px}   /* 字重跟著分頁（選中 600）：工作站 .count 沒設字重（styles.css 233、1063） */
.m-tab .w-count:not([hidden]) + .w-count{margin-left:2px}
/* 數字、小籤跳一下：工作站 pop() 220ms、ease-out、放大到 1.18（app.js 1857）÷1.6；電腦版照舊 .w-pop（ws.css） */
.dev[data-kind="p"] .w-pop{animation:mpop var(--m-base) var(--m-eo)}
@keyframes mpop{50%{scale:1.18}}

/* 提示（styles.css 1031、1067、1995-1997；native.css .toast bottom 80＋安全區、圓角 14）：清單層在底部分頁上方（80＋安全區 34），
   客人／司機對話頁貼在標題列下面（47＋標題列 52＋8）；會換行 */
.ws .w-toast.m{bottom:114px;width:max-content;max-width:358px;white-space:normal;line-height:1.45;border-radius:14px}
.ws .w-toast.m.top{top:107px;bottom:auto;transform:translateY(-8px);transform-origin:50% 0}
.ws .w-toast.m.top.on{transform:none}
/* 底部抽屜（styles.css 1147-1153、863；app.js 9641、9669）：全寬、只有上面兩角圓、底下按鈕等寬；滑上來 220ms、收 120ms */
.dev[data-kind="p"] .w-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92%;overflow:hidden;translate:none;scale:1;opacity:1;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform var(--m-fast) var(--m-ei)}
.dev[data-kind="p"] .w-sheet.on{transform:none;transition:transform var(--m-base) var(--m-eo)}
.dev[data-kind="p"] .w-scrim{transition:opacity var(--m-base)}
.dev[data-kind="p"] .w-shh{padding:14px 10px 4px 16px}
.dev[data-kind="p"] .w-shb{padding:6px 16px 14px;gap:14px}
.dev[data-kind="p"] .w-shf{padding:10px 16px 46px}
.dev[data-kind="p"] .w-shf .w-btn{flex:1 1 0;padding:12px}
.dev[data-kind="p"] .w-shf .w-btn.pri{font-size:15px}   /* 只有主鍵 15px（styles.css 1102 .btn-primary）；「取消」與紅色鍵照一般 .btn 14px（1152） */
/* ⋯ 選單（styles.css 244-249、1042；native.css .more-menu）：固定在標題列下面 6px、右邊 12px、圓角 16、半透明；每項 46 高 */
.dev[data-kind="p"] .w-menu{top:105px;right:12px;min-width:160px;padding:6px;border-radius:16px}
.dev[data-kind="p"] .w-mi{display:flex;align-items:center;min-height:46px;padding:0 12px;border-radius:9px}
/* 客人手機上的 LINE（示意）：手機畫面放不下 330 寬 */
.dev[data-kind="p"] .lnc{left:12px;right:12px;width:auto;bottom:100px}

/* ───────── 聊天清單（mchat_list.js 55-225；styles.css 1224-1279、1099、1174-1179） ───────── */
.m-lhead{position:relative;z-index:1;display:grid;gap:8px;padding:8px 16px 10px;background:var(--w-surface);border-bottom:1px solid var(--w-line)}
.m-search{position:relative;display:flex;align-items:center;height:44px;padding:0 12px 0 38px;border-radius:12px;background:var(--w-selected);color:var(--w-muted);font-size:16px;white-space:nowrap;overflow:hidden}
.m-search svg{position:absolute;left:12px;top:50%;translate:0 -50%;width:18px;height:18px}
.m-chips{display:flex;gap:8px}
.m-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 15px;border:1px solid var(--w-line-strong);border-radius:999px;background:var(--w-surface);color:var(--w-ink2);font-size:14px;font-weight:600;white-space:nowrap}
.m-chip.on{background:var(--w-act-soft);border-color:var(--w-act);color:var(--w-act)}
.m-chip .n{display:inline-block;min-width:1ch;font-family:var(--w-mono);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--w-ink2)}
.m-chip.on .n{color:inherit}
.m-rows{position:relative}
/* 客人列：沒有框線，分隔線從名字那欄開始畫（頭像底下不畫） */
.m-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;min-height:72px;padding:12px 16px;background:linear-gradient(var(--w-line),var(--w-line)) right bottom/calc(100% - 72px) 1px no-repeat var(--w-surface)}
.m-row .w-av{width:44px;height:44px;font-size:16px}
.m-main{min-width:0}
.m-name{display:flex;align-items:baseline;min-width:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--w-ink);white-space:nowrap;overflow:hidden}
.m-name>span:first-child{flex:none}
.m-name .w-note{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:6px;padding:1px 8px;font-size:11.5px;vertical-align:1px}
.m-name .w-fu{flex:none;margin-left:6px;padding:1px 8px;font-size:11.5px;vertical-align:1px}
/* 0136 對話上面的「待處理 · 誰標記」（工作站 #note-strip，手機在標題列下面） */
.m-strip{flex:none;display:flex;align-items:center;gap:8px;padding:6px 16px;background:var(--w-surface);border-bottom:1px solid var(--w-line);font-size:13px}
.m-strip[hidden]{display:none}
.m-msg{margin-top:2px;font-size:17px;line-height:1.4;color:var(--w-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-row.unread .m-msg{color:var(--w-ink)}
.m-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.m-time{padding-top:3px;font-family:var(--w-mono);font-size:12px;color:var(--w-muted);white-space:nowrap}
.m-row.unread .m-time{color:var(--w-act);font-weight:600}
/* 進行中車趟籤：字用墨色，狀態靠底色與小圓點 */
.m-trip{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;min-height:26px;margin-top:6px;padding:2px 9px;border-radius:8px;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--w-ink);overflow:hidden}
.m-trip.o{background:var(--w-open-bg)}.m-trip.a{background:var(--w-accepted-bg)}.m-trip.h{background:var(--w-held-bg)}
.m-trip i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--w-open)}
.m-trip.a i{background:var(--w-accepted)}.m-trip.h i{background:var(--w-held)}
.m-trip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-trip .mono{font-weight:700}
.m-trip .more{flex:none;font-family:var(--w-mono);font-size:11.5px;font-weight:500;color:var(--w-ink2)}
/* 來訊的那一列淡紫亮一下（app.js replayFlash 1841：FLASH_COLOR.msg＝act-soft，0→滿（20%）→滿（45%）→0、線性 900ms）÷1.6 */
.m-row.m-rowin{animation:mrowin .5625s linear}
@keyframes mrowin{0%,100%{background-color:var(--w-surface)}20%,45%{background-color:var(--w-act-soft)}}

/* ───────── 客人對話（mchat.js；styles.css 1320-1443） ───────── */
.m-chat{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--w-paper)}
/* 時間軸是唯一捲動的地方：訊息少時從上面排，展開派車卡時貼著最底（ws-phone.js pinBottom） */
.m-tl{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;padding:8px 16px 12px;overflow-wrap:anywhere}
.m-tl::-webkit-scrollbar{display:none}
.m-tl>*{flex:none}
.m-note{margin:4px 8px 10px;font-size:12.5px;line-height:1.5;color:var(--w-ink2);text-align:center}
.m-tl .w-day{margin:14px 0 4px}
.m-tl .w-unr{align-self:stretch;margin:14px 0 4px;line-height:1.4}
/* 客人來訊：頭像 30＋（泡泡、時間與小籤） */
.m-in{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 8px;margin-top:4px}
.m-in.first{margin-top:12px}
.m-in>.w-av{width:30px;height:30px;flex:0 0 30px;font-size:12px}
.m-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:calc(100% - 64px)}
.m-bub{max-width:100%;padding:9px 13px;border:1px solid var(--w-bubble-line);border-radius:18px;background:var(--w-bubble);color:var(--w-ink);font-size:16px;line-height:1.55;white-space:pre-wrap;transition:border-color var(--m-base) var(--m-eo),box-shadow var(--m-base) var(--m-eo),scale var(--m-fast) var(--m-eo)}
.m-in.first .m-bub{border-top-left-radius:6px}
/* 派車卡開著、還有空格：能點的泡泡淡紫描框（點一下就填，Ives 1006；示範不演動作列，所以沒有選中光圈 .sel） */
.m-tl.filling .m-bub.fill{border-color:color-mix(in srgb,var(--w-act) 80%,transparent);box-shadow:0 0 0 3px var(--w-focus-ring)}
.m-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:20px;margin-top:3px;padding:0 4px;font-size:12px;color:var(--w-ink2)}
.m-meta time,.m-ometa time{font-family:var(--w-mono);font-size:11.5px}
.m-tags{display:contents}
/* 訊息下的小籤：填入時「上車／下車」，派出後變灰「上車 · TEST000235」 */
.m-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap}
.m-tag.p{background:var(--w-pick-bg);color:var(--w-pick)}
.m-tag.d{background:var(--w-drop-bg);color:var(--w-drop)}
.m-tag.u{background:var(--w-selected);color:var(--w-ink2);font-weight:600}
/* 我們送出的：靠右、「發訊人 · 時間 · 狀態 · ［上車］［下車］」在泡泡下面一行（「·」是 CSS 畫的） */
.m-out{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-top:8px}
.m-out .m-bub{max-width:80%;border-color:var(--w-out-line);border-radius:18px 18px 6px 18px;background:var(--w-out);color:var(--w-out-ink)}
.m-ometa{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:flex-end;max-width:100%;padding:0 4px;font-size:12px;color:var(--w-ink2);white-space:nowrap}
.m-ometa>*+*::before{content:"·";margin:0 6px;color:var(--w-muted);font-family:var(--w-sans);font-weight:400}
.m-ometa .by{font-size:11.5px;font-weight:600}
.m-ometa .st{font-size:11px}
.m-ometa .bf{display:inline-flex;gap:4px}
.m-ometa .bf i{padding:7px 9px;border:1px solid;border-radius:8px;font-size:12.5px;font-style:normal;line-height:1}
.m-ometa .bf .p{color:var(--w-pick);border-color:var(--w-pick-line);background:var(--w-pick-bg)}
.m-ometa .bf .d{color:var(--w-drop);border-color:var(--w-drop-line);background:var(--w-drop-bg)}

/* ───────── 底座：提示條 → 派車卡 → 回覆列（styles.css 1613-1914） ───────── */
.m-dock{position:relative;z-index:3;flex:none;padding-bottom:34px;background:var(--w-surface);border-top:1px solid var(--w-line)}
.m-tip{display:flex;align-items:center;gap:8px;padding:4px 4px 0 16px;font-size:13.5px;color:var(--w-ink2)}
.m-tip>svg{flex:none;color:var(--w-act)}
.m-tip>span{flex:1;min-width:0}
.m-tip .x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--w-muted)}
/* 派車卡：一直在，收著時高度 0；打開＝原地展開（grid 0fr→1fr 280ms＋淡入、從 14px 下方移上來） */
.m-form{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--m-sheet) var(--m-ei)}
.m-form.on{grid-template-rows:1fr;transition:grid-template-rows var(--m-sheet) var(--m-eo)}
.m-clip{min-height:0;overflow:hidden}
.m-card{display:grid;gap:8px;padding:8px 16px;opacity:0;translate:0 14px;transition:opacity var(--m-fast) var(--m-ei),translate var(--m-sheet) var(--m-eo)}
.m-form.on .m-card{opacity:1;translate:none;transition:opacity var(--m-base) var(--m-eo),translate var(--m-sheet) var(--m-eo)}
.m-chd{display:flex;align-items:center;gap:8px;min-height:44px}
.m-chd b{flex:none;font-size:15px;font-weight:700;white-space:nowrap}
.m-typ{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:44%;min-height:44px;padding:0 10px 0 14px;border-radius:22px;background:var(--w-selected);color:var(--w-ink2);font-size:13.5px;font-weight:600;white-space:nowrap}
.m-typ>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-typ svg{flex:none}
.m-nb{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px dashed var(--w-line-strong);border-radius:12px;color:var(--w-act);font-size:13.5px;font-weight:600}
.m-cx{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;color:var(--w-muted)}
/* 上車、下車兩格：一個圓角框，左邊圓點（沒字空心、有字填滿），兩點之間一條線；下一個要填的那格淡紫底 */
.m-slots{position:relative;border:1px solid var(--w-line-strong);border-radius:14px;background:var(--w-field)}
.m-slots::before{content:"";position:absolute;z-index:1;left:17px;top:30px;bottom:30px;width:1.5px;background:var(--w-line-strong)}
.m-slot{position:relative;display:flex;align-items:center;gap:6px;height:48px;padding-left:12px;transition:background-color var(--m-base) var(--m-eo)}
.m-slot:first-child{border-radius:13px 13px 0 0}.m-slot:last-child{border-radius:0 0 13px 13px}
.m-slot+.m-slot{border-top:1px solid var(--w-line)}
.m-slot.next{background:color-mix(in srgb,var(--w-act-soft) 70%,transparent)}
.m-slot .dt{position:relative;z-index:2;flex:none;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--w-pick);background:var(--w-field);transition:background-color var(--m-base) var(--m-eo)}
.m-slot.d .dt{border-color:var(--w-drop)}
.m-slot.has .dt{background:var(--w-pick)}.m-slot.d.has .dt{background:var(--w-drop)}
.m-slot .lb{flex:none;width:46px;font-size:13px;color:var(--w-ink2);white-space:nowrap}
.m-slot .v{flex:1;min-width:0;padding-left:6px;font-size:16px;color:var(--w-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-slot .v.ph{color:var(--w-muted)}
.m-slot .w-tag{flex:none}
.m-slot .x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--w-muted)}
.m-slot:not(.has) .x{display:none}
.m-slot .cv{flex:none;display:grid;place-items:center;width:32px;color:var(--w-ink2)}
.m-slot.m-flp{animation:mflp .56s}.m-slot.m-fld{animation:mfld .56s}
@keyframes mflp{0%{background-color:transparent}20%,45%{background-color:var(--w-pick-bg)}100%{background-color:transparent}}
@keyframes mfld{0%{background-color:transparent}20%,45%{background-color:var(--w-drop-bg)}100%{background-color:transparent}}
.m-tools{display:flex;padding:6px 2px 0}
.m-add{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px dashed var(--w-line-strong);border-radius:12px;color:var(--w-act);font-size:14px;font-weight:600}
/* 底列：即時／預約滑塊＋摘要＋派車鍵（上車地還沒填：淡紫底；送出中：光帶掃過；派出：綠色） */
.m-foot{display:flex;align-items:center;gap:8px}
.m-seg{position:relative;flex:none;display:flex;height:50px;padding:3px;border-radius:13px;background:var(--w-selected)}
.m-seg span{position:relative;z-index:1;width:54px;display:grid;place-items:center;border-radius:10px;color:var(--w-ink2);font-size:15px;font-weight:700}
.m-seg span.on{color:var(--w-ink)}
.m-seg i{position:absolute;top:3px;bottom:3px;left:3px;width:54px;border-radius:10px;background:var(--w-surface);box-shadow:0 1px 2px color-mix(in srgb,var(--w-ink) 10%,transparent);transition:translate var(--m-base) var(--m-spring)}
.m-seg.sch i{translate:54px 0}
.m-sum{flex:1;min-width:0;display:flex;flex-direction:column;padding:2px 4px;line-height:1.25}
.m-sum b{font-size:14.5px;white-space:nowrap}
.m-sum span{overflow:hidden;font-size:12px;color:var(--w-ink2);white-space:nowrap;text-overflow:ellipsis}
.m-go{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:104px;min-height:48px;padding:0 18px;border-radius:14px;background:var(--w-act);color:var(--w-act-ink);font-size:17px;font-weight:700;white-space:nowrap;transition:background-color var(--m-base) var(--m-eo),scale var(--m-fast) var(--m-eo)}
.m-go.inv{background:var(--w-act-soft);color:var(--w-act)}
.m-go.done{background:var(--w-accepted);color:var(--w-act-ink)}
.m-go .lab{position:relative;display:inline-flex;align-items:center;gap:6px}
.m-go.busy::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:color-mix(in srgb,var(--w-act-ink) 28%,transparent);animation:mgorun .5625s linear infinite}
@keyframes mgorun{from{translate:-100% 0}to{translate:250% 0}}
.m-hint{font-size:12.5px;color:var(--w-ink2)}
.m-res{margin-bottom:2px;padding:12px 14px;border-left:3px solid var(--w-accepted);border-radius:0 10px 10px 0;background:var(--w-accepted-bg);font-size:13.5px;line-height:1.5;color:var(--w-ink)}
.m-res strong{display:block}
.m-res .lk{color:var(--w-act)}.m-res .mu{color:var(--w-muted)}
/* 派車前 5 秒倒數（styles.css 2396-2417）：接在藏起來的底列後面 */
.m-card .m-cd{padding:8px 10px}
.m-card .m-cd .cd-t{font-size:14.5px}
.m-card .m-cd .cd-n{font-size:18px}
.m-card .m-cd .w-btn{flex:none;min-height:48px;padding:0 16px;border-radius:14px;font-size:16px;font-weight:700}
.m-card .m-cd .w-btn:not(.pri){background:var(--w-surface)}
/* 回覆列：沒有提示字；主鍵三態 car（88 寬「派車」）／send（主色圓）／down（灰色圓，收起卡片） */
.m-comp{display:flex;align-items:flex-end;gap:8px;padding:8px 12px 8px 16px}
.m-cin{flex:1 1 auto;min-width:0;height:44px;padding:10px 15px;border:1px solid var(--w-line-strong);border-radius:22px;background:var(--w-field);font-size:16px;line-height:1.4;white-space:nowrap;overflow:hidden}
.m-btn{position:relative;flex:none;width:88px;height:44px;border-radius:22px;background:var(--w-act-soft);color:var(--w-act);transition:width var(--m-base) var(--m-eo),background-color var(--m-base) var(--m-eo),color var(--m-base) var(--m-eo),scale var(--m-fast) var(--m-eo)}
.m-btn[data-s="send"]{width:44px;background:var(--w-act);color:var(--w-act-ink)}
.m-btn[data-s="down"]{width:44px;background:var(--w-selected);color:var(--w-ink2)}
.m-btn>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;font-size:15px;font-weight:700;white-space:nowrap;opacity:0;scale:.5;transition:opacity var(--m-fast) var(--m-ei),scale var(--m-base) var(--m-spring)}
.m-btn[data-s="car"] .c,.m-btn[data-s="send"] .s,.m-btn[data-s="down"] .dn{opacity:1;scale:1;transition:opacity var(--m-base) var(--m-eo),scale var(--m-base) var(--m-spring)}

/* ───────── 定位提醒頁（那一格變全螢幕；styles.css 1928-1992） ───────── */
.m-ed{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--w-surface)}
.m-edbar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 8px 0 16px;border-bottom:1px solid var(--w-line)}
.m-edbar h3{flex:1;min-width:0;margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--w-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-edbar .dn{flex:none;display:grid;place-items:center;min-width:64px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--w-act-soft);color:var(--w-act);font-size:15px;font-weight:700}
.m-edrem{flex:none;display:grid;gap:8px;padding:10px 16px 12px;background:var(--w-warn-bg);border-bottom:1px solid var(--w-line)}
.m-edrem p{margin:0;height:calc(1.45em * 2);overflow:hidden;font-size:14px;line-height:1.45;color:var(--w-ink)}
.m-edrem .raw{display:grid;place-items:center;min-height:48px;padding:0 14px;border:1px solid var(--w-line-strong);border-radius:12px;background:var(--w-surface);color:var(--w-ink);font-size:15px;font-weight:600}
.m-edin{flex:none;display:flex;align-items:center;gap:6px;height:56px;padding-left:16px;border-bottom:1px solid var(--w-line);font-size:16px;color:var(--w-ink)}
.m-edin .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-edin .w-tag{flex:none}
.m-edin .x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--w-muted)}
.m-edin .cv{flex:none;display:grid;place-items:center;width:32px;color:var(--w-act)}
.m-edin .cv svg{rotate:180deg}
.m-opts{flex:1;min-height:0;overflow:hidden}
.m-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:52px;padding:10px 16px;color:var(--w-ink);transition:background-color var(--m-fast)}
.m-opt.hi{background:var(--w-act-soft)}
.m-opt .m{font-size:16px;line-height:1.35}
.m-opt .s{grid-column:1;font-size:13px;line-height:1.35;color:var(--w-muted)}
.m-opt .src{grid-column:2;grid-row:1/span 2;font-size:12px;color:var(--w-muted);opacity:.8}

/* ───────── 派車提示條（styles.css 2006-2025）：浮在時間軸底部（負邊界，不推動時間軸），墨色底，撤回是實心紅 ───────── */
.m-snack{position:relative;z-index:4;flex:none;display:flex;align-items:center;gap:8px;height:60px;margin:-72px 12px 12px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--w-ink);color:var(--w-on-ink);box-shadow:var(--w-shadow)}
.m-snack b{flex:1;min-width:0;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-snack .acts{flex:none;display:flex;gap:8px}
.m-snack .b{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:10px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--w-on-ink) 45%,transparent);font-size:14px;font-weight:700;white-space:nowrap}
.m-snack .b.dg{background:var(--w-danger);color:var(--w-danger-ink);box-shadow:none}

/* ───────── 原生操作感（Native v1，2026-10-12 起正式工作站的樣子；照 apps/workstation/native.css 的 @media (max-width:767px)＋ui.css） ─────────
   這段蓋過上面原本 styles.css 手機規則的數值：標題列 52 高、半透明（狀態列用同一個不透明色）、返回與 ⋯ 主色 44×44；
   底部分頁五格「圖示＋10px 小字」、選中主色、沒有上緣線、數字在圖示右上；清單頁＝灰底（--w-paper）上 32px 粗體大標題＋放大鏡（搜尋收起）、
   分段切換＝灰底膠囊裡的白色選中塊、清單＝圓角 18 的白色卡片群組；抽屜圓角 24＋上面一條把手 */
.dev[data-kind="p"] .ws{background:var(--w-chrome-solid)}
.m-top{height:52px;gap:6px;padding:0 12px;background:var(--w-chrome);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--w-ink)}
.m-top .fl{font-weight:650;letter-spacing:-.025em;color:var(--w-ink)}
.m-top .oa{font-size:11px;color:var(--w-muted)}
.m-top .bk,.m-top.big .bk{width:44px;height:44px;margin-left:-10px;border-radius:50%;color:var(--w-act)}
.m-top .bk .m-tab-i{width:23px;height:23px}
.m-top .w-more,.m-top.big .w-more{width:44px;height:44px;margin-right:-8px;color:var(--w-act)}
.m-top .tt{gap:9px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--w-ink)}
.m-top .me{gap:4px}
.m-top .w-duty{color:var(--w-ink)}
/* 底部分頁（native.css .bottom-tabs）：每格 54 高、圖示 24＋字 10px，選中主色粗字、圖示線加粗；數字（16 高、白邊 2px）在圖示右上，第二顆往下排 */
.m-tabs{padding:4px 6px 34px;background:var(--w-chrome);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.m-tab{position:relative;flex:1 1 0;min-width:0;min-height:54px;flex-direction:column;gap:3px;padding:4px 2px 6px;border-radius:10px;font-size:10px;font-weight:500;line-height:1.2;color:var(--w-muted)}
.m-tab.on{color:var(--w-act);font-weight:700;box-shadow:none}
.m-tab-i{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-tab.on .m-tab-i{stroke-width:2.2}
.m-tab .w-count{position:absolute;top:0;left:calc(50% + 5px);min-width:16px;min-height:16px;padding:1px 4px;border:2px solid var(--w-surface);border-radius:10px;font-size:10px;font-weight:600;line-height:14px;box-sizing:content-box}
.m-tab .w-count:not([hidden]) + .w-count{top:20px;margin-left:0}
/* 清單那一層的底色是灰的（.app[data-level=list] .pane-list{background:var(--paper)}） */
.m-pane.list{background:var(--w-paper)}
/* 清單上方：32px 粗體大標題（.native-list-title）＋放大鏡（.native-search-toggle 44×44、主色、svg 22） */
.m-nh{display:flex;align-items:center;gap:8px;min-width:0}
.m-nh h2{margin:0;font-size:32px;line-height:1.2;font-weight:750;letter-spacing:-.035em;color:var(--w-ink);white-space:nowrap}
.m-ntog{flex:0 0 44px;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--w-act)}
.m-ntog svg{display:block;width:22px;height:22px}
/* 聊天清單（native.css .mlist-head／.mlist-chips／.mlist-rows） */
.m-lhead{gap:16px;padding:18px 16px 12px;background:var(--w-paper);border-bottom:0}
.m-chips{gap:0;padding:3px;background:var(--w-control);border-radius:12px}
.m-chip{flex:1 0 auto;justify-content:center;gap:4px;height:40px;padding:0 7px;border:0;border-radius:9px;background:transparent;color:var(--w-ink2);font-size:13px;font-weight:500}
.m-chip.on{background:var(--w-surface);color:var(--w-ink);box-shadow:0 1px 4px #0002}
.m-chip .n,.m-chip.on .n{font-family:var(--w-sans);font-size:11px;color:var(--w-ink2)}
.m-rows{margin:4px 16px 16px;border-radius:18px;background-color:var(--w-surface);overflow:hidden}
.m-row{grid-template-columns:46px minmax(0,1fr) auto;gap:12px;min-height:0;padding:16px 14px}
.m-row:last-child{background-image:none}
.m-row .w-av{width:46px;height:46px}
.m-name{font-size:17px;letter-spacing:-.02em}
.m-msg{margin-top:5px;font-size:14px}
.m-time{font-size:11px}
/* 底部抽屜（native.css .sheet 手機）：圓角 24、上面一條 34×5 的把手；標題列 12 16 10 20、關閉 44×44 灰底圓；底下按鈕等寬 46 高 */
.dev[data-kind="p"] .w-sheet{border-radius:24px 24px 0 0}
.dev[data-kind="p"] .w-sheet::before{content:"";display:block;width:34px;height:5px;margin:9px auto 0;border-radius:5px;background:var(--w-line-strong)}
.dev[data-kind="p"] .w-shh{padding:12px 16px 10px 20px}
.dev[data-kind="p"] .w-shx{width:44px;height:44px}
.dev[data-kind="p"] .w-shb{padding:8px 20px 20px}
.dev[data-kind="p"] .w-shf{padding:12px 20px 46px}
.dev[data-kind="p"] .w-shf .w-btn{min-height:46px}
/* 卡片：手機上不畫框（.app[data-tab=admin] .card{border:0}），白卡直接浮在灰底上 */
.dev[data-kind="p"] .w-card{border:0}