:root{
  --brand-teal:#00B5AD; --brand-teal-600:#00AFA8; --brand-teal-700:#00938A;
  --brand-teal-300:#7ED1CE; --brand-teal-200:#B2E2E1; --brand-teal-100:#E6F7F6;
  --brand-deep:#203F40;
  --fg:#000000; --fg-2:#4B4B4B; --fg-3:#6F6F6F; --fg-inverse:#FFFFFF;
  --surface:#FFFFFF; --bg:#FFFFFF; --bg-subtle:#FAFAFA; --bg-muted:#F4F4F5;
  --border:#E4E4E7; --border-muted:#F4F4F5;
  --danger:#E50013; --danger-soft:#FDECEC;
  --warn:#D97706; --warn-soft:#FEF3E2;
  --ok:#00938A; --ok-soft:#E6F7F6;
  --t:180ms cubic-bezier(0.2,0,0,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--fg);font-family:"Noto Sans TC",system-ui,-apple-system,"PingFang TC",sans-serif;
  font-size:14px;line-height:1.4;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25}
p{margin:0}
ul{margin:0;padding-left:20px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--brand-teal-300);outline-offset:2px}
svg{display:block;flex:none}
.ic{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 手機頂列 ---------- */
.mtop{display:none;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:70}
.mbtn{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:var(--fg-2);flex:none;
  transition:background-color var(--t),color var(--t)}
.mbtn:hover{background:var(--bg-muted);color:var(--fg)}
.mbrand{font-size:16px;font-weight:700}
.scrim{display:none}

/* ---------- 三欄 ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.shell.col{grid-template-columns:64px 1fr}
.side{background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;padding:20px}
.brand .mk{width:40px;height:40px;border-radius:8px;background:var(--brand-deep);display:grid;place-items:center;
  color:var(--fg-inverse);flex:none}
.brand .tx b{display:block;font-size:16px;line-height:1.25}
.brand .tx span{display:block;font-size:12px;color:var(--fg-3);line-height:1.4}
.shell.col .brand{padding:20px 12px}.shell.col .brand .tx{display:none}
.orgsw{margin:0 20px 16px;height:36px;border-radius:6px;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;gap:8px;padding:0 10px;font-size:13px;width:calc(100% - 40px);
  transition:background-color var(--t),border-color var(--t)}
.orgsw:hover{background:var(--bg-muted)}
.orgsw .nm{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.col .orgsw{display:none}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;overflow-y:auto;scrollbar-width:thin}
.nav .sec{font-size:12px;color:var(--fg-3);padding:12px 12px 4px}
.shell.col .nav .sec{display:none}
.nav button{height:40px;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:12px;font-size:14px;
  color:var(--fg-2);width:100%;transition:background-color var(--t),color var(--t)}
.nav button:hover{background:var(--bg-muted)}
.nav button.on{background:var(--bg-muted);color:var(--fg);font-weight:500}
.nav button .nm{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button .ct{font-size:12px;color:var(--fg-3);font-weight:400}
.shell.col .nav button{justify-content:center;padding:0}
.shell.col .nav button .nm,.shell.col .nav button .ct{display:none}
.sidefoot{margin-top:auto;border-top:1px solid var(--border);padding:12px}
.sidefoot button{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-3);padding:8px 12px;
  border-radius:8px;width:100%;transition:background-color var(--t),color var(--t)}
.sidefoot button:hover{background:var(--bg-muted);color:var(--fg-2)}
.shell.col .sidefoot button{justify-content:center;padding:8px 0}
.shell.col .sidefoot span{display:none}

.content{display:grid;grid-template-columns:minmax(0,1fr) 256px;gap:24px;padding:24px 32px;
  max-width:1440px;width:100%;margin:0 auto;align-items:start}
.col-main{min-width:0;display:flex;flex-direction:column;gap:24px}
.rail{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}

/* ---------- 基本元件 ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.card.tight{padding:16px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.page-h h1{font-size:24px}
.page-h p{font-size:14px;color:var(--fg-3);margin-top:4px}
.sec-h{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.sec-h h2,.sec-h h3{font-size:16px}
.sec-h .ct{font-size:12px;color:var(--fg-3);font-weight:400}
.sec-h .sp{flex:1}

.badge{height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.teal{background:var(--brand-teal-100);color:var(--brand-teal-700)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.warn-solid{background:var(--warn);color:var(--fg-inverse)}
.badge.danger{background:var(--danger);color:var(--fg-inverse)}
.badge.danger-soft{background:var(--danger-soft);color:var(--danger)}
.badge.neutral{background:var(--bg-muted);color:var(--fg-3)}
.chip{height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;background:transparent;border:1px solid currentColor}
.chip.teal{color:var(--brand-teal-700)}.chip.warn{color:var(--warn)}
.chip.danger{color:var(--danger)}.chip.neutral{color:var(--fg-3);border-color:var(--border)}

.btn{height:36px;padding:0 16px;border-radius:6px;font-size:14px;font-weight:500;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
  transition:background-color var(--t),border-color var(--t),color var(--t)}
.btn.pri{background:var(--brand-teal-600);color:var(--fg-inverse)}
.btn.pri:hover{background:var(--brand-teal-700)}
.btn.sec{background:var(--surface);border:1px solid var(--border);color:var(--fg)}
.btn.sec:hover{background:var(--bg-muted)}
.btn.ghost{color:var(--fg-2)}.btn.ghost:hover{background:var(--bg-muted)}
.btn.danger{background:var(--danger);color:var(--fg-inverse)}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));background:var(--bg-muted);
  border-radius:8px;padding:12px 8px;gap:8px}
.statbar .cell{text-align:center}
.statbar .cell .v{font-size:18px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.statbar .cell .v.bad{color:var(--danger)}
.statbar .cell .l{font-size:12px;color:var(--fg-3);margin-top:2px}

.lrow{background:var(--bg-subtle);border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  min-height:60px;transition:background-color var(--t)}
.lrow.act{cursor:pointer}.lrow.act:hover{background:var(--bg-muted)}
.lrow .ib{width:24px;height:24px;border-radius:6px;background:var(--brand-teal-100);color:var(--brand-teal-700);
  display:grid;place-items:center;flex:none}
.lrow .ib.n{background:var(--bg-muted);color:var(--fg-3)}
.lrow .ib.w{background:var(--warn-soft);color:var(--warn)}
.lrow .ib.d{background:var(--danger-soft);color:var(--danger)}
.lrow .tx{flex:1;min-width:0}
.lrow .tx b{display:block;font-size:14px;font-weight:500}
.lrow .tx span{display:block;font-size:12px;color:var(--fg-3);margin-top:2px;white-space:normal;line-height:1.5}
.lrow .rt{font-size:12px;color:var(--fg-3);white-space:nowrap}

.empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 24px;text-align:center}
.empty p{font-size:14px;color:var(--fg-3);max-width:40ch;line-height:1.6}

.tw{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--border-muted);white-space:nowrap}
thead th{background:var(--bg-subtle);font-size:12px;font-weight:500;color:var(--fg-3)}
tbody tr:last-child td{border-bottom:0}
td.n{text-align:right;font-variant-numeric:tabular-nums}
td.n.bad{color:var(--danger)}

/* ---------- 語音主控台 ---------- */
.console{display:flex;flex-direction:column;gap:16px}
.connbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.connbar .sp{flex:1}
.mic{width:56px;height:56px;border-radius:999px;background:var(--brand-teal-600);color:var(--fg-inverse);
  display:grid;place-items:center;flex:none;transition:background-color var(--t)}
.mic:hover{background:var(--brand-teal-700)}
.mic[disabled]{opacity:.5;pointer-events:none}
.mic.live{background:var(--danger)}
.wave{display:flex;align-items:center;gap:3px;height:36px;flex:1;min-width:120px}
.wave i{width:3px;height:4px;border-radius:2px;background:var(--brand-teal-200);display:block;
  transition:height 90ms linear,background-color var(--t)}
.wave.on i{background:var(--brand-teal)}
.wave.idle i{background:var(--border)}

.askbar{display:flex;gap:12px;align-items:center}
.askbar input{flex:1;height:40px;border:1px solid var(--border);border-radius:6px;padding:0 12px;
  font-size:14px;background:var(--surface);color:var(--fg);min-width:0;transition:border-color var(--t)}
.askbar input::placeholder{color:var(--fg-3)}
.askbar input:focus{border-color:var(--brand-teal-300);outline:none}

.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips button{height:32px;padding:0 12px;border-radius:6px;border:1px solid var(--border);font-size:13px;
  color:var(--fg-2);transition:background-color var(--t),border-color var(--t)}
.qchips button:hover{background:var(--bg-muted)}

/* 對話 */
.turns{display:flex;flex-direction:column;gap:16px}
.turn{display:flex;flex-direction:column;gap:12px}
.utter{display:flex;align-items:flex-start;gap:12px}
.utter .ib{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--bg-muted);color:var(--fg-3)}
.utter.me .ib{background:var(--brand-teal-100);color:var(--brand-teal-700)}
.utter .bd{flex:1;min-width:0}
.utter .who{font-size:12px;color:var(--fg-3);margin-bottom:2px}
.utter .tx{font-size:14px;color:var(--fg-2);line-height:1.7}
.utter.me .tx{color:var(--fg);font-weight:500}
.utter .tx.answer{font-size:16px;font-weight:500;color:var(--fg);line-height:1.6}
.cursor{display:inline-block;width:2px;height:1em;background:var(--brand-teal);vertical-align:-2px}

.toolcall{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-subtle)}
.toolcall .hd{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:var(--fg-3);width:100%;
  transition:background-color var(--t)}
.toolcall .hd:hover{background:var(--bg-muted)}
.toolcall .hd b{font-weight:500;color:var(--fg-2)}
.toolcall .hd .sp{flex:1}
.toolcall pre{margin:0;padding:12px;border-top:1px solid var(--border);background:var(--surface);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12px;line-height:1.6;
  color:var(--fg-2);overflow-x:auto;white-space:pre-wrap;word-break:break-all;display:none}
.toolcall.open pre{display:block}

/* 圖表 */
.viz{width:100%;height:auto;display:block;overflow:visible}
.viz text{font-family:"Noto Sans TC",system-ui,sans-serif}
.axl{font-size:12px;fill:var(--fg-3)}
.dlb{font-size:12px;font-weight:500;fill:var(--fg-2)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--fg-3);margin-top:12px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:2px;border-radius:1px;display:block}
.legend i.sq{height:10px;width:10px;border-radius:2px}

/* 事件記錄 */
.evlog{display:flex;flex-direction:column;max-height:320px;overflow-y:auto;scrollbar-width:thin}
.evrow{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-muted);
  font-size:12px}
.evrow:last-child{border-bottom:0}
.evrow .t{color:var(--fg-3);font-variant-numeric:tabular-nums;flex:none}
.evrow .k{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evrow .k.in{color:var(--brand-teal-700)}
.evrow .k.out{color:var(--fg-2)}
.evrow .k.err{color:var(--danger)}

.railcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.railcard h3{font-size:16px;margin-bottom:12px}
.submetric{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px}
.submetric .lb{font-size:12px;color:var(--fg-3)}
.submetric .vl{font-size:24px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.submetric .vl.bad{color:var(--danger)}
.railitem{padding:12px 0;border-bottom:1px solid var(--border-muted);font-size:14px}
.railitem:last-child{border-bottom:0}.railitem:first-child{padding-top:0}
.railitem b{display:block;font-weight:500}
.railitem span{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}

.toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;font-size:14px;box-shadow:0 1px 8px rgba(0,0,0,.10);z-index:90;
  display:none;align-items:center;gap:8px;max-width:360px}
.toast.show{display:flex}
.toast.err{border-color:var(--danger)}

#tip{position:fixed;z-index:100;pointer-events:none;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;font-size:12px;box-shadow:0 1px 8px rgba(0,0,0,.10);display:none;max-width:240px}
#tip.on{display:block}
#tip b{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
#tip .r{display:flex;justify-content:space-between;gap:16px;color:var(--fg-2);font-variant-numeric:tabular-nums}

@media (max-width:1279px){
  .content{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}
}
@media (max-width:1023px){
  .shell{grid-template-columns:64px 1fr}
  .brand .tx,.orgsw,.nav .sec,.nav button .nm,.nav button .ct,.sidefoot span{display:none}
  .nav button{justify-content:center;padding:0}
  .content{padding:24px 20px}
}
/* ---------- 手機：側欄改為抽屜 ----------
   原本在這裡把側欄整個 display:none，等於沒有任何導覽入口。
   設計規範第 8 章要求 768 以下側欄變為抽屜，由頂列的選單鍵開關。 */
@media (max-width:767px){
  .mtop{display:flex}
  .shell{grid-template-columns:1fr}

  .side{position:fixed;left:0;top:0;bottom:0;width:264px;height:100dvh;z-index:90;
    transform:translateX(-100%);transition:transform var(--t);border-right:1px solid var(--border)}
  .side.open{transform:none}
  /* 抽屜要顯示完整標籤，覆蓋 1023 以下的圖示模式 */
  .side .brand .tx,.side .orgsw,.side .nav .sec,
  .side .nav button .nm,.side .nav button .ct{display:block}
  .side .orgsw{display:flex}
  .side .nav button{justify-content:flex-start;padding:0 12px}
  .side .sidefoot{display:none}
  .shell.col .side{width:264px}

  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:80}
  body.locked{overflow:hidden}

  .content{padding:16px}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .tabs{gap:20px}
  .page-h h1{font-size:20px}
  .askbar{flex-wrap:wrap}
  .askbar input{flex:1 1 100%}
  .askbar .btn{flex:1}
  .connbar .wave{flex:1 1 100%;order:3}
  .cardgrid{grid-template-columns:1fr;gap:16px}
  .small{grid-template-columns:repeat(2,1fr)}
  .toast{left:16px;right:16px;bottom:16px;max-width:none}
  .acard,.tcard>div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 側欄預警計數 */
.nav button .ct.al{color:var(--danger);font-weight:500}

/* ======================= 治理看板 ======================= */
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-2);transition:color var(--t)}
.back:hover{color:var(--fg)}

.tabs{display:flex;gap:32px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:10px 4px;font-size:14px;color:var(--fg-3);border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;transition:color var(--t),border-color var(--t)}
.tabs button.on{color:var(--fg);font-weight:500;border-bottom-color:var(--brand-teal)}

.metric .lb{font-size:12px;color:var(--fg-3)}
.metric .vl{font-size:24px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.metric .vl.bad{color:var(--danger)}
.metric .un{font-size:12px;color:var(--fg-3);margin-left:4px}
.delta{font-size:12px;display:inline-flex;align-items:center;gap:2px}
.delta.up{color:var(--danger)}.delta.dn{color:var(--ok)}.delta.fl{color:var(--fg-3)}

/* 主題卡片 */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--t)}
.tile .top{height:96px;background:var(--bg-subtle);display:flex;align-items:center;
  justify-content:space-between;padding:0 16px}
.tile .top .ib{width:44px;height:44px;border-radius:10px;background:var(--brand-teal-100);
  color:var(--brand-teal-700);display:grid;place-items:center}
.tile .bd{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.tile .bd .hd{display:flex;align-items:center;gap:8px}
.tile .bd .hd h3{font-size:15px;font-weight:700;flex:1}
.tile .bd .ds{font-size:13px;color:var(--fg-3);line-height:1.4;min-height:36px}
.tile .bd .kv{display:flex;align-items:baseline;gap:6px}
.tile .bd .kv .v{font-size:24px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.tile .bd .kv .v.bad{color:var(--danger)}
.tile .bd .kv .u{font-size:12px;color:var(--fg-3)}
.tile .bd .kv .d{margin-left:auto}

/* 事件列 */
.erow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-muted)}
.erow:last-child{border-bottom:0}
.erow .lv{width:28px;height:20px;border-radius:4px;background:var(--bg-muted);color:var(--fg-2);
  font-size:12px;font-weight:500;display:grid;place-items:center;flex:none}
.erow .lv.d{background:var(--danger-soft);color:var(--danger)}
.erow .lv.w{background:var(--warn-soft);color:var(--warn)}
.erow .tx{flex:1;min-width:0}
.erow .tx b{display:block;font-size:14px;font-weight:500}
.erow .tx span{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}

/* 任務卡 */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.tcard.fail{border-color:var(--danger)}
.tcard .l1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tcard .l1 .nm{font-size:14px;font-weight:500;flex:1;min-width:140px}
.tcard .l2{font-size:12px;color:var(--fg-3)}
.tcard .l3{display:flex;gap:24px;flex-wrap:wrap}
.tcard .l3 span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-2)}

/* 排行 */
.rank{display:flex;flex-direction:column;gap:2px}
.rk{display:grid;grid-template-columns:96px minmax(80px,1fr) 100px 64px;gap:12px;align-items:center;
  padding:8px 12px;border-radius:8px;text-align:left;width:100%;transition:background-color var(--t)}
button.rk:hover{background:var(--bg-muted)}
.rk .nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .bar{height:8px;background:var(--bg-muted);border-radius:4px;position:relative;overflow:hidden}
.rk .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--brand-teal)}
.rk .bar i.bad{background:var(--danger)}.rk .bar i.w{background:var(--warn)}
.rk .bar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg-3);text-decoration:none}
.rk .vl{font-size:14px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.rk .vl.bad{color:var(--danger)}
.rk .dl{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;justify-content:flex-end}

/* 熱力圖與小倍數 */
.heat{display:grid;gap:2px}
.heat i{aspect-ratio:1;border-radius:2px;display:block}
.small{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.smallitem .hd{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.smallitem .hd b{font-size:14px;font-weight:500}
.smallitem .hd span{font-size:12px;color:var(--fg-3);margin-left:auto;font-variant-numeric:tabular-nums}

@media (max-width:767px){
  .rk{grid-template-columns:88px 1fr 72px}
  .rk .dl{display:none}
}

/* 拒答示範的問句：外框式，與可取數的問句區分 */
.qchip-r{height:32px;padding:0 12px;border-radius:6px;border:1px dashed var(--border);font-size:13px;
  color:var(--fg-3);transition:background-color var(--t),border-color var(--t),color var(--t)}
.qchip-r:hover{background:var(--bg-muted);border-color:var(--fg-3);color:var(--fg-2)}

/* 問答紀錄：一問一答為一組，由新到舊 */
.exchange{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px;
  display:flex;flex-direction:column;gap:12px}
.exchange:first-child{border-color:var(--brand-teal-300)}
.exhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;
  border-bottom:1px solid var(--border-muted)}
.exhead .no{font-size:12px;font-weight:500;color:var(--fg-2);background:var(--bg-muted);
  border-radius:999px;padding:2px 10px}
.exhead .t{font-size:12px;color:var(--fg-3);display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums}
.exhead .sp{flex:1}
.utter .who .ts{margin-left:8px;color:var(--fg-3);font-variant-numeric:tabular-nums}
@media (max-width:767px){
  .exhead .sp{display:none}
  .exchange{padding:12px}
}