/* 色票照 workspace/architecture/ui-design-tokens.md,表面走新擬物化(規範 §3.10) */
:root {
  --surface-1: #f2f1f9;
  --surface-2: #d8d9de;
  --surface-3: #bbbcc6;
  --line: #bbbcc6;
  --line-strong: #5e5e63;
  --ink: #262626;
  --ink-muted: #474747;
  --hint: #7a7a81;
  --on-accent: #f7f7f7;
  --accent-text: #802918;
  --accent-tint: #ffd4cb;
  --accent: #ff522f;
  --accent-deep: #b23921;
  --soft-hi: rgba(255, 255, 255, .90);
  --soft-lo: rgba(94, 94, 99, .46);
  --soft-raise: -4px -4px 9px var(--soft-hi), 5px 5px 11px var(--soft-lo);
  --soft-raise-sm: -3px -3px 6px var(--soft-hi), 3px 3px 7px var(--soft-lo);
  --soft-press: inset 3px 3px 6px var(--soft-lo), inset -3px -3px 6px var(--soft-hi);
  --soft-press-sm: inset 2px 2px 4px var(--soft-lo), inset -2px -2px 4px var(--soft-hi);
  --soft-press-color: inset 3px 3px 7px rgba(38, 38, 38, .38), inset -2px -2px 5px rgba(255, 255, 255, .18);
  --gray-3: #7a7a81;   /* 明度梯(規範 §3.5) */
  --frame-pin: #39ff14;       /* 釘選的對話外框:螢光綠(Maxi 10-29),設定裡能用調色盤改 */
  --frame-project: #bc13fe;   /* 專案裡的對話外框:螢光紫 */
  --font: system-ui, "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  /* 脈絡圖的領域色(8 個領域,Maxi 10-30):六個主題色加琥珀、靛藍兩色(同飽和度補的),
     順序照色盲模擬挑過,相鄰最差 ΔE 16.6、一般視力 23.7 */
  --cat-1: #ff522f; --cat-2: #1b9aaa; --cat-3: #4c46c4; --cat-4: #239a63;
  --cat-5: #2f6fe4; --cat-6: #d99100; --cat-7: #7b5cf0; --cat-8: #e8508f;
  --font-brand: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

/* 主題色:使用者在「設定」裡挑,存在帳號上。預設橘是母色票;其他五組照同一套規則:
   按鈕底配 97% 白至少 3:1、深階當線與 hover、淺階當選中底、文字階在淺面上過 4.5 */
html[data-accent="blue"]   { --accent: #2f6fe4; --accent-deep: #1f4fa8; --accent-tint: #d6e3fb; --accent-text: #173a7a; }
html[data-accent="green"]  { --accent: #239a63; --accent-deep: #186b45; --accent-tint: #d3eee1; --accent-text: #0f4a30; }
html[data-accent="purple"] { --accent: #7b5cf0; --accent-deep: #5236c4; --accent-tint: #e5defd; --accent-text: #3a2490; }
html[data-accent="pink"]   { --accent: #e8508f; --accent-deep: #a8336a; --accent-tint: #fbd9e7; --accent-text: #74213f; }
html[data-accent="teal"]   { --accent: #1b9aaa; --accent-deep: #136b77; --accent-tint: #d0eef1; --accent-text: #0c4a52; }

/* 深色:表面換暗、字換亮、新擬物化的亮邊收弱。放在主題色後面,淺階與文字階才會蓋過去 */
html[data-mode="dark"] {
  --surface-1: #2a2a31; --surface-2: #1f1f25; --surface-3: #3a3a43;
  --line: #3a3a43; --line-strong: #8c8b98;
  --ink: #ecebf3; --ink-muted: #b9b8c4; --hint: #8c8b98; --gray-3: #8c8b98;
  --soft-hi: rgba(255, 255, 255, .05); --soft-lo: rgba(0, 0, 0, .55);
  --accent-tint: color-mix(in srgb, var(--accent) 24%, #2a2a31);
  --accent-text: color-mix(in srgb, var(--accent) 50%, #ffffff);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface-2);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--hint); opacity: 1; }
* { scrollbar-color: #7a7a81 var(--surface-3); }

.card { background: var(--surface-1); border-radius: 16px; box-shadow: var(--soft-raise); }
.muted { color: var(--ink-muted); font-size: 13px; }
.err { color: var(--accent-text); font-size: 13px; min-height: 1.2em; margin: 6px 0 0; }

button { cursor: pointer; border: 0; border-radius: 10px; padding: 9px 16px; }
button.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--soft-raise-sm); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-deep); }
button.primary:active:not(:disabled) { box-shadow: var(--soft-press-color); }
button.ghost, label.ghost { background: var(--surface-1); color: var(--ink); box-shadow: var(--soft-raise-sm); }
button.ghost:active, label.ghost:active { box-shadow: var(--soft-press-sm); }
button:disabled { background: var(--surface-3); color: var(--ink-muted); box-shadow: none; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, label.ghost:focus-within {
  outline: 2px solid var(--accent-deep); outline-offset: 2px;
}
button.wide { width: 100%; }

input, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface-1); box-shadow: var(--soft-press-sm); padding: 9px 12px;
}
textarea { resize: vertical; min-height: 72px; max-height: 40vh; }

/* ---- 登入 ---- */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); padding: 28px 24px; display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.login-card label input { font-size: 15px; color: var(--ink); }
.login-card small { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.login-card small b { color: var(--accent-text); }
.login-card label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; cursor: pointer; }
.login-card label.check input { width: 16px; height: 16px; accent-color: var(--accent-deep); }
.me { box-shadow: none; background: transparent; padding: 4px 6px; font-size: 13px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.me:hover { box-shadow: var(--soft-raise-sm); color: var(--ink); }
/* 字樣「協思 / Joint Cognitive System」(Maxi 10-30):側欄中文 20px、英文 9.5px,登入卡片照同比例放大。
   兩行都從 --brand 一個值算:中文 1 倍、英文 0.475 倍。字型直接指定正黑體 UI,換到英文系統或 Mac 比例才不會跑 */
.brand { --brand: 28px; margin: 0; display: flex; flex-direction: column; font-family: var(--font-brand); color: var(--accent-text); }
.brand-zh { font-size: var(--brand); line-height: 1.15; font-weight: 700; letter-spacing: .04em; }
.brand-en { font-size: calc(var(--brand) * .475); line-height: 1.3; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.brand.small { --brand: 20px; }
.hint { margin: 0; color: var(--ink-muted); font-size: 14px; }
#phone-bind { display: grid; gap: 10px; }
#phone-bind[hidden] { display: none; }
.steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink); display: grid; gap: 4px; }
.qr-link { justify-self: center; display: block; line-height: 0; border-radius: 12px; }
.qr { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--soft-press-sm); }
a.button.primary { justify-content: center; background: var(--accent); color: var(--on-accent); box-shadow: var(--soft-raise-sm);
  font-weight: 600; font-size: 14px; padding: 10px 16px; }
.touch-only { display: none !important; }
@media (pointer: coarse) { a.touch-only:not([hidden]) { display: inline-flex !important; } }
button.mini { padding: 2px 10px; font-size: 12px; margin-left: 4px; }

/* ---- 主畫面 ---- */
.app { height: 100%; display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 16px;
  transition: grid-template-columns .22s ease, gap .22s ease; }
.side { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 0; width: 300px;
  transition: transform .22s ease, opacity .22s ease; }
/* 側欄收合(比照 Claude 網頁版):卡片整張往左滑出,寬度不歸零,裡面的字不會在收的途中重排;對話區跟著變寬 */
.app.side-folded { grid-template-columns: 0 1fr; gap: 0; }
.app.side-folded .side { transform: translateX(calc(-100% - 16px)); opacity: 0; pointer-events: none; }
.side-toggle { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0;
  background: transparent; box-shadow: none; color: var(--ink-muted); border-radius: 10px; }
.side-toggle:hover { color: var(--ink); box-shadow: var(--soft-raise-sm); }
.side-toggle:active { box-shadow: var(--soft-press-sm); }
/* 側欄頂:字樣在左、收合鈕在右;值班燈號移到底部使用者上方(Maxi 10-30) */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-head .brand { flex: 1; min-width: 0; }
.side-presence { align-self: flex-start; }   /* 上面的 .lists 撐滿,燈號自然落在使用者那列上方 */
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted);
  padding: 4px 10px; border-radius: 999px; box-shadow: var(--soft-press-sm); white-space: nowrap; }
.presence[data-state="on"] b { color: var(--ink); }
.presence b { font-weight: 500; }

/* ---- 左欄:三顆主動作 + 已釘選 + 最近項目 ---- */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: grid; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; box-shadow: none; padding: 9px 12px; font-size: 15px; color: var(--ink);
}
.nav-item:hover { box-shadow: var(--soft-raise-sm); background: var(--surface-1); }
.nav-item[aria-current="true"] { box-shadow: var(--soft-press-sm); }
#nav-new { box-shadow: var(--soft-raise-sm); font-weight: 600; }
#nav-new .ico { color: var(--accent-deep); }
.nav-item kbd { margin-left: auto; font: 11px/1 var(--font); color: var(--hint); letter-spacing: .02em; }
/* 「專案」這一列:左邊開專案頁,字後面的箭頭收合底下的專案清單(比照「已釘選」,Maxi 10-29)。
   整列算一顆:滑過哪裡都整列浮起,點空白處也開專案頁 */
.nav-split { display: flex; align-items: center; border-radius: 10px; cursor: pointer; }
.nav-split .nav-item { width: auto; padding-right: 4px; }
.nav-split .nav-item:hover { box-shadow: none; background: transparent; }
.nav-split:hover { box-shadow: var(--soft-raise-sm); background: var(--surface-1); }
.nav-split:has(#nav-projects[aria-current="true"]) { box-shadow: var(--soft-press-sm); }
.fold { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
  background: transparent; box-shadow: none; border-radius: 8px; }
.fold:hover { box-shadow: var(--soft-raise-sm); }
.fold .chev { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--ink-muted); margin-top: 5px; }
.fold[aria-expanded="false"] .chev { transform: rotate(-90deg); margin-top: 0; margin-left: 3px; }
/* 「專案」底下的每個專案:縮排對齊「專案」兩個字,外圈跟專案裡的對話列同一套紫框加光暈(Maxi 10-29);
   多了自己捲,上下左右留一點空,光暈才不會被捲動框切掉 */
.side-projects { list-style: none; margin: 0; padding: 6px 6px 6px 22px; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.proj-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent;
  padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--ink);
  outline: 2px solid var(--frame-project); outline-offset: -2px;
  --glow: 0 0 9px color-mix(in srgb, var(--frame-project) 50%, transparent); box-shadow: var(--glow); }
.proj-row .row-title { flex: 1; min-width: 0; }
.proj-row:hover { box-shadow: var(--soft-raise-sm), var(--glow); background: var(--surface-1); }
.proj-row[aria-current="true"] { box-shadow: var(--soft-press-sm), var(--glow); background: var(--surface-1); }
.proj-count { flex: none; font-size: 11px; color: var(--hint); }
.proj-line { display: flex; align-items: center; gap: 2px; }
.proj-line .proj-row { flex: 1; min-width: 0; }
.proj-threads { margin: 6px 0 2px 14px; }   /* 專案底下的對話:往內縮一階,一樣的對話列 */

.lists { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; display: grid; gap: 14px; align-content: start; }
.group-head {
  display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; box-shadow: none;
  padding: 4px 6px; font-size: 13px; color: var(--ink-muted);
}
.group-head .chev { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--ink-muted); margin-top: 5px; }
.group.folded .chev { transform: rotate(-90deg); margin-top: 0; margin-left: 3px; }
.group.folded .rows, .group.folded #recent { display: none; }
.pill { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.bucket { margin: 8px 6px 2px; font-size: 12px; color: var(--hint); }
.empty-note { padding: 8px 6px; margin: 0; }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* 對話列(清單裡的 li):只管 .rows 底下的,設定視窗與輸入框下面那排按鈕也叫 .row,不能被套到 */
.rows > .row { position: relative; display: flex; align-items: center; border-radius: 10px; --glow: 0 0 0 transparent; }
/* 釘選的對話一圈螢光綠、放進專案的一圈螢光紫,外面帶一點光暈;最近項目其他的照舊。兩個都是就算釘選 */
.rows > .row.is-pinned { --frame: var(--frame-pin); }
.rows > .row.is-project { --frame: var(--frame-project); }
.rows > .row.is-pinned, .rows > .row.is-project { outline: 2px solid var(--frame); outline-offset: -2px;
  --glow: 0 0 9px color-mix(in srgb, var(--frame) 50%, transparent); box-shadow: var(--glow); }
.rows > .row:hover, .rows > .row:focus-within { background: var(--surface-1); box-shadow: var(--soft-raise-sm), var(--glow); }
.rows > .row[aria-current="true"] { box-shadow: var(--soft-press-sm), var(--glow); background: var(--surface-1); }
.rows > .row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent-deep); }
.row-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; box-shadow: none; padding: 8px 6px 8px 10px;
}
.row-text { flex: 1; min-width: 0; display: grid; }
.row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rows > .row.is-closed .row-title { color: var(--hint); }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; font-size: 11px; color: var(--ink-muted); }

/* 現在輪到誰:每一列右邊都看得到 */
.state { flex: none; font-size: 11px; white-space: nowrap; border-radius: 999px; padding: 1px 8px; color: var(--ink-muted); }
.state.s-new { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.state.s-busy { color: var(--accent-text); font-weight: 600; }
.state.s-busy::after { content: "…"; animation: blink 1.2s infinite; }
.state.s-closed { color: var(--hint); }

.row-act { flex: none; display: none; background: transparent; box-shadow: none; padding: 6px; color: var(--ink-muted); border-radius: 8px; }
.rows > .row:hover .row-act, .rows > .row:focus-within .row-act { display: inline-flex; }
.row-act:hover { color: var(--ink); box-shadow: var(--soft-raise-sm); }
.row-act.pin.on { display: inline-flex; color: var(--accent-deep); }
.row-act.pin.on .ico { fill: var(--accent-deep); }
@media (hover: none) { .row-act { display: inline-flex; } }
.rows.big .row { padding: 4px 4px; }
.rows.big .row-title { font-weight: 600; }
/* 原地改名的輸入框:跟原本的字一樣大,凹進去表示正在改 */
input.rename { width: 100%; min-width: 0; font: inherit; color: var(--ink); padding: 2px 8px; border: 0; border-radius: 8px;
  background: var(--surface-1); box-shadow: var(--soft-press-sm); outline: none; }
input.rename:focus-visible { box-shadow: var(--soft-press-sm), 0 0 0 2px var(--accent); }
.row-btn { flex: none; font-size: 12px; padding: 5px 10px; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-muted); }
.row-btn:hover { color: var(--ink); box-shadow: var(--soft-raise-sm); }
.row-btn:active { box-shadow: var(--soft-press-sm); }
.rows.big .row-act:not(.pin) { display: inline-flex; }   /* 專案頁的「⋯」一直看得到 */

.main { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.main-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.main-head h2 { margin: 0; font-size: 17px; }
.main-head p { margin: 0; }
.titles { min-width: 0; flex: 1; }
.titles h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.icon-only { padding: 8px; display: inline-flex; }
.icon-only.pin.on { color: var(--accent-deep); }
.icon-only.pin.on .ico { fill: var(--accent-deep); }
.back { display: none; padding: 4px 12px; font-size: 20px; line-height: 1; }

.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--ink-muted); padding: 24px; }

/* 搜尋 */
.search { padding: 16px 20px; gap: 12px; }

/* ---- 脈絡圖(Maxi 10-30):線的顏色代表領域,取自色彩系統的六個主題色(--cat-1 到 6),其他領域走灰;
   平常半透明,選到的詞整條亮起、其他淡下去。字一律走文字色,不吃領域色 ---- */
.map { padding: 12px 20px 16px; }
.map-body { flex: 1; min-height: 0; display: flex; }
.map-stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; }
/* 操作說明:左下角一行小字,不壓在圓上;滑鼠與觸控各講各的 */
/* 3D 畫布(three.js,Maxi 10-30):線與弧畫在畫布上,字是疊在上面的按鈕,跟著看的範圍移動與縮放。
   --u 是圖面一個單位等於幾像素,字的大小都從它算,放大縮小時字跟圖一起變 */
.map-3d { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.map-3d.dragging { cursor: grabbing; }
.map-3d.dragging .map-labels > * { pointer-events: none; }   /* 拖的時候不觸發滑過 */
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-canvas.over { cursor: pointer; }
.map-labels { position: absolute; inset: 0; pointer-events: none; --u: .7px; }
.map-labels > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; pointer-events: auto; }
.map-labels button { background: none; box-shadow: none; padding: 0; border: 0; border-radius: 0; font: inherit; line-height: 1.25; min-height: 0; }
.k-label, .t-label { font-family: var(--font); font-size: calc(var(--u) * 20 * var(--fs, 1)); white-space: pre; text-align: right; color: var(--ink-muted); cursor: pointer; outline: none; transition: color .2s ease; }
.k-label { color: var(--ink); }
.k-label .k-count { font-size: calc(var(--u) * 14 * var(--fs, 1)); color: var(--hint); opacity: 0; margin-left: calc(var(--u) * 6); transition: opacity .25s ease; }
.map-3d.zoomed .k-count { opacity: 1; }   /* 放大才看得到次數 */
.k-label.near { font-weight: 600; }
.k-label.on { color: var(--accent-text); font-weight: 700; }
.k-label.bridge .k-text { text-decoration: underline dotted; text-underline-offset: calc(var(--u) * 4); }   /* 橋接詞:點狀底線 */
.t-label { text-align: left; }
.t-label.on { color: var(--ink); font-weight: 600; }
.t-label.cur { font-weight: 700; }
.k-label:focus-visible, .t-label:focus-visible { text-decoration: underline; color: var(--accent-text); }
.f-label { font-size: calc(var(--u) * 16 * var(--fs, 1)); font-weight: 700; color: var(--ink-muted); pointer-events: none;
  text-shadow: 0 0 calc(var(--u) * 3) var(--surface-1), 0 0 calc(var(--u) * 3) var(--surface-1); }
.k-new { width: calc(var(--u) * 8); height: calc(var(--u) * 8); pointer-events: none; }
.k-new::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: k-breathe 2.4s ease-in-out infinite; }
.map-3d.enter .map-labels > * { animation: map-fade .7s ease both; }
.map-fallback { margin: auto; padding: 24px; text-align: center; }
/* 顏色探針:畫布從這裡讀色彩系統算好的顏色(線 = 領域色相 × 目的深淺) */
.map-probe { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; color: oklch(from var(--hue) var(--l, l) c h); }
.map-probe.pr-solid { color: var(--hue); }
.map-probe.pr-accent { --hue: var(--accent); }
.map-probe.pr-flow { color: var(--surface-1); }
.map-probe.pr-tband { color: var(--surface-3); }
.map-hint { position: absolute; left: 10px; bottom: 6px; margin: 0; font-size: 11px; color: var(--hint); }
.map-hint .hint-touch { display: none; }
@media (hover: none) { .map-hint .hint-mouse { display: none; } .map-hint .hint-touch { display: inline; } }
button.link { background: none; box-shadow: none; padding: 0 2px; font-size: inherit; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* 說明區:固定在右欄最上方、固定高度,滑過什麼就說明什麼,版面不跳;圖上不壓字(Maxi 10-30) */
/* 右側說明欄:收起時寬度 0,點了才滑出;裡面固定 300 寬,滑動時字不重排 */
.map-right { width: 0; flex: none; min-height: 0; overflow: hidden; transition: width .25s ease; }
.map-body.open .map-right { width: 316px; }
.map-right-inner { width: 300px; height: 100%; margin-left: 16px; display: flex; flex-direction: column; gap: 10px; }
.map-right-head { display: flex; justify-content: flex-end; }
.map-right-head button { font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.map-peek { flex: none; height: 112px; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-1); box-shadow: var(--soft-press-sm); font-size: 12px; color: var(--ink-muted); }
.map-peek b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-hit.current { background: var(--surface-1); box-shadow: var(--soft-press-sm); }
/* 活的脈絡圖:開場畫線、滑過的小卡、相關詞、選中的流動、放大才看得到的次數、新詞呼吸。減少動態時只留靜態的亮起 */
@keyframes map-fade { from { opacity: 0; } }
.tip-bridge { color: var(--accent-text); }
.msg .meta .sure { font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--surface-1); box-shadow: var(--soft-press-sm); color: var(--ink-muted); cursor: help; }
.msg .meta .sure.s-low { color: var(--accent-text); }
@keyframes k-breathe { 50% { opacity: .35; scale: 1.5; } }
.map-tip { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; max-width: 240px; display: grid; gap: 3px;
  padding: 8px 12px; border-radius: 12px; background: var(--surface-1); box-shadow: var(--soft-raise); font-size: 12px; color: var(--ink-muted);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
.map-tip.show { opacity: 1; transform: none; }
.map-tip b { font-size: 14px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .map-labels > *, .map-tip, .map-right { transition: none; }
  .k-new::after { animation: none; }
}
.hue0 { --hue: var(--cat-1); } .hue1 { --hue: var(--cat-2); } .hue2 { --hue: var(--cat-3); }
.hue3 { --hue: var(--cat-4); } .hue4 { --hue: var(--cat-5); } .hue5 { --hue: var(--cat-6); }
.hue6 { --hue: var(--cat-7); } .hue7 { --hue: var(--cat-8); } .huex { --hue: var(--gray-3); }
/* 目的:同一色相、同樣彩度,只換明度六階(OKLCH 的 L);瀏覽器不支援相對色就退回原色 */
.aim0 { --l: .40; } .aim1 { --l: .48; } .aim2 { --l: .56; } .aim3 { --l: .64; } .aim4 { --l: .72; } .aim5 { --l: .80; }
html[data-mode="dark"] .aim0 { --l: .52; } html[data-mode="dark"] .aim1 { --l: .59; } html[data-mode="dark"] .aim2 { --l: .66; }
html[data-mode="dark"] .aim3 { --l: .73; } html[data-mode="dark"] .aim4 { --l: .80; } html[data-mode="dark"] .aim5 { --l: .87; }
.map-note { margin: 0; font-size: 13px; color: var(--ink); }
.map-aim { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); padding: 2px 8px 2px 4px; }
.aim-sw { --hue: var(--line-strong); width: 18px; height: 4px; border-radius: 2px; background: var(--hue); background: oklch(from var(--hue) var(--l, l) c h); }
.fdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); margin-right: 6px; vertical-align: 1px; }
.map-side { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 4px 4px 12px; }
.map-field { display: grid; gap: 6px; }
.map-field > b { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--surface-1); box-shadow: var(--soft-raise-sm); }
.map-chip small { color: var(--hint); }
.map-chip:hover { color: var(--accent-text); }
.map-chip.pro { box-shadow: var(--soft-press-sm); }
.map-chip.plain { box-shadow: none; color: var(--ink-muted); }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.map-hit { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; background: transparent; }
.map-hit:hover { background: var(--surface-1); box-shadow: var(--soft-raise-sm); }
.map-hit small { font-size: 12px; }
.map-want { color: var(--ink); }
.map-term { margin: 0; font-size: 22px; color: var(--accent-text); }
.map-meta { margin: 0; font-size: 13px; color: var(--ink-muted); }
.map-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-1); box-shadow: var(--soft-press-sm); color: var(--ink); font-size: 12px; }
.map-back { justify-self: start; font-size: 13px; padding: 4px 12px; }
.map-list.evo li { display: grid; gap: 2px; padding: 6px 10px; font-size: 13px; color: var(--ink); }
.evo-state { justify-self: start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-1); box-shadow: var(--soft-press-sm); color: var(--ink-muted); }
.evo-state.s-applied { color: var(--accent-text); }
.results { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; flex: 1; }
.result {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; box-shadow: none; padding: 10px 12px; border-radius: 12px;
}
.results li[aria-selected="true"] .result { background: var(--surface-1); box-shadow: var(--soft-raise-sm); }
.result .ico { color: var(--ink-muted); }
.snippet { white-space: normal; display: block; }
mark { background: var(--accent-tint); color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* 專案 */
.projects { padding: 16px 20px; gap: 16px; overflow-y: auto; }
.new-project { display: flex; gap: 10px; }
.new-project input { flex: 1; }
.cards { list-style: none; margin: 0; padding: 4px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.project-card {
  width: 100%; height: 100%; text-align: left; display: grid; gap: 8px; align-content: start;
  background: var(--surface-1); box-shadow: var(--soft-raise); border-radius: 14px; padding: 14px 16px;
}
.project-card:active { box-shadow: var(--soft-press-sm); }
.card-title { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.card-title .ico { color: var(--accent-deep); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-muted); }
.card-time { font-size: 12px; color: var(--hint); }
.project { padding: 12px 16px; overflow-y: auto; }

/* 選單與提示 */
.menu { position: fixed; z-index: 10; min-width: 200px; max-width: 320px; padding: 6px; display: grid; gap: 2px; border-radius: 12px; }
.menu button { text-align: left; background: transparent; box-shadow: none; padding: 8px 12px; border-radius: 8px; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); outline: none; }
.menu button.checked::after { content: "  ✓"; color: var(--accent-deep); }
.flash {
  position: fixed; z-index: 11; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0;
  background: var(--ink); color: var(--on-accent); padding: 10px 16px; border-radius: 12px; font-size: 14px;
  box-shadow: var(--soft-raise-sm); max-width: calc(100% - 32px);
}
.messages { list-style: none; margin: 0; padding: 20px 38px 20px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px;
  position: relative; scrollbar-width: none; }   /* 原生滾軸收起來,右邊的思路軌道取代它 */
.messages::-webkit-scrollbar { display: none; }

/* ---- 對話捲動(Maxi 10-30「用最簡約的方式做到最人性化」):日期黏頂、思路軌道、回到最新 ---- */
.scroller { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.day { position: sticky; top: -12px; z-index: 1; align-self: center; }
.day span { display: inline-block; font-size: 12px; color: var(--ink-muted); background: var(--surface-1);
  padding: 3px 12px; border-radius: 999px; box-shadow: var(--soft-raise-sm);
  min-width: 132px; text-align: center; }   /* 一樣寬:黏在頂端時後一天整個蓋住前一天,邊緣不會露出來 */
.rail { position: absolute; top: 14px; bottom: 14px; right: 8px; width: 20px; cursor: pointer; touch-action: none; }
.rail::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--line); }
.rail-thumb { position: absolute; left: 7px; width: 6px; min-height: 18px; border-radius: 3px; background: var(--gray-3); opacity: .35; transition: opacity .15s; }
.rail:hover .rail-thumb, .rail:active .rail-thumb { opacity: .6; }
.mark { position: absolute; left: 10px; transform: translate(-50%, -50%); pointer-events: none; }
.m-ask { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); }
.m-file { width: 7px; height: 7px; background: var(--accent-deep); transform: translate(-50%, -50%) rotate(45deg); }
.m-hit { width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.m-day { width: 12px; height: 1px; background: var(--gray-3); }
.peek { position: absolute; right: 34px; z-index: 3; margin: 0; max-width: min(320px, 70%); display: grid; gap: 2px;
  padding: 8px 12px; border-radius: 12px; background: var(--surface-1); box-shadow: var(--soft-raise); pointer-events: none; }
.peek b { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.peek span { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-end { position: absolute; right: 40px; bottom: 12px; z-index: 2; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.to-end.has-new { color: var(--accent-text); font-weight: 600; }
.msg .bubble { transition: box-shadow .5s ease; }
.messages .msg.landed .bubble { box-shadow: 0 0 0 2px var(--accent), var(--soft-raise-sm); }
.msg { max-width: min(720px, 90%); }
.msg.mine { align-self: flex-end; }
.msg .bubble { padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.wren .bubble { background: var(--surface-1); box-shadow: var(--soft-raise-sm); border-top-left-radius: 6px; }
.msg.mine .bubble { background: var(--surface-2); box-shadow: var(--soft-press-sm); border-top-right-radius: 6px; }
/* Wren 的回覆一個字一個字打出來時,最後面跟著一個游標 */
/* 程式碼區塊:等寬字、標語言、單獨複製;太寬就在框裡橫捲 */
.bubble .code { margin: 8px 0; border-radius: 10px; background: var(--surface-2); box-shadow: var(--soft-press-sm); overflow: hidden; white-space: normal; }
.msg.mine .bubble .code { background: var(--surface-1); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 2px 12px; font-size: 12px; color: var(--ink-muted); }
.code-copy { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; box-shadow: none; background: transparent; }
.code-copy:hover { box-shadow: var(--soft-raise-sm); }
.code-copy .ico { width: 13px; height: 13px; }
.bubble .code pre { margin: 0; padding: 4px 12px 12px; overflow-x: auto; white-space: pre; tab-size: 4;
  font: 12.5px/1.55 ui-monospace, Consolas, "Cascadia Mono", monospace; color: var(--ink); }
.bubble .code pre code { background: none; padding: 0; font: inherit; }
.bubble.typing-in::after { content: "▍"; color: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg .meta { font-size: 12px; color: var(--ink-muted); display: flex; gap: 8px; }
.msg.mine .meta { justify-content: flex-end; }
.msg .tag { color: var(--accent-text); font-weight: 600; }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files button { font-size: 13px; padding: 5px 12px; }
.msg.mine .files { justify-content: flex-end; }

.typing { margin: 0 20px 8px; color: var(--ink-muted); font-size: 13px; }
.typing .dot { font-style: normal; animation: blink 1.2s infinite; }
.typing .dot:nth-of-type(2) { animation-delay: .2s; }
.typing .dot:nth-of-type(3) { animation-delay: .4s; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > * { min-width: 0; }
#set-avatar, #claim-avatars { display: grid; gap: 8px; min-width: 0; }   /* 風格那一排可以橫向捲,不能把整個欄位撐寬 */
.field-label { font-size: 13px; color: var(--ink-muted); }
@keyframes blink { 0%, 80%, 100% { color: transparent; } 40% { color: var(--ink-muted); } }

.composer { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 10px; }
.attach { cursor: pointer; border-radius: 10px; padding: 9px 14px; font-size: 14px; }
.file-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
/* 附件縮圖列:輸入框上方,圖片顯示縮圖、文件顯示格式;滑過看全名,右上角 × 拿掉 */
.file-tray { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.file-tray[hidden] { display: none; }
.file-tile { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: var(--surface-1); box-shadow: var(--soft-press-sm); display: grid; place-items: center; }
.file-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-tile .ext { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.file-tile .fname { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font-size: 10px; color: var(--ink-muted);
  background: var(--surface-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tile.blind .ext { color: var(--hint); }
.file-tile .rm { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%;
  font-size: 12px; line-height: 20px; background: var(--surface-1); box-shadow: var(--soft-raise-sm); color: var(--ink-muted); }
.file-tile .rm:hover { color: var(--accent-text); }
/* 拖檔案進來時,對話區蓋一層提示 */
.chat { position: relative; }
.drop { position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; border-radius: 16px; pointer-events: none;
  background: color-mix(in oklch, var(--surface-1) 86%, transparent); border: 2px dashed var(--accent); }
.drop[hidden] { display: none; }
.drop p { margin: 0; font-size: 15px; color: var(--accent-text); font-weight: 600; }
.closed-note { margin: 0; padding: 16px 20px; color: var(--ink-muted); border-top: 1px solid var(--line); }

/* ---- 動態頭像:DiceBear 10 角色類(CC0),動畫寫在 SVG 裡;這裡只加狀態動作,慢、軟、幅度小 ---- */
.av { position: relative; display: inline-block; width: var(--av, 36px); height: var(--av, 36px); flex: none; }
.av img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 30%; transform-origin: 50% 92%;
  user-select: none; }
/* 規則的先後就是優先順序:睡著 < 正在回 < 滑過 < 彈一下 */
.av[data-state="off"] img { animation: av-sleep 6s ease-in-out infinite; }
.av[data-state="off"]::after {
  content: "z"; position: absolute; right: -2px; top: -6px; font: 700 calc(var(--av, 36px) * .32)/1 var(--font);
  color: var(--gray-3); transform-origin: 0 100%; animation: av-z 3.6s ease-in-out infinite;
}
.av[data-state="busy"] img { animation: av-nod 1.1s ease-in-out infinite; }
.av:hover img { animation: av-wiggle .9s ease-in-out 1; }
.av.hop img { animation: av-hop .7s cubic-bezier(.3, .7, .4, 1.3) 1; }

@keyframes av-sleep { 0%, 100% { transform: translateY(6%) scale(.94, .92); } 50% { transform: translateY(6%) scale(.95, .94); } }
@keyframes av-z { 0% { transform: translate(0, 4px) scale(.2); } 40% { transform: translate(2px, 0) scale(1); } 80%, 100% { transform: translate(5px, -6px) scale(.2); } }
@keyframes av-nod { 0%, 100% { transform: rotate(0) translateY(0); } 45% { transform: rotate(8deg) translateY(4%); } }
@keyframes av-hop {
  0% { transform: translateY(0) scale(1); } 20% { transform: translateY(0) scale(1.1, .88); }
  45% { transform: translateY(-20%) scale(.94, 1.08); } 72% { transform: translateY(0) scale(1.06, .93); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes av-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.04); } 75% { transform: rotate(8deg) scale(1.04); } }


/* 對話裡:分身在泡泡旁邊,同一個人連續講只出現一次 */
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg.mine { flex-direction: row-reverse; }
.msg .col { display: grid; gap: 4px; min-width: 0; }
.msg .av-gap { width: 36px; flex: none; }

/* 挑動態頭像:上面一排風格,下面八個變化 */
.av-styles { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.av-styles button { flex: none; padding: 5px 10px; font-size: 12px; border-radius: 999px;
  background: var(--surface-1); box-shadow: var(--soft-raise-sm); color: var(--ink); }
.av-styles button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--soft-press-color); }
.avatar-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.avatar-picker button {
  display: grid; justify-items: center; padding: 8px 4px; border-radius: 14px;
  background: var(--surface-1); box-shadow: var(--soft-raise-sm);
}
.avatar-picker button[aria-checked="true"] { box-shadow: var(--soft-press-sm); outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.av-shuffle { justify-self: start; font-size: 13px; padding: 6px 14px; margin-top: 2px; }
.field > .av-shuffle, .settings .av-shuffle { display: inline-block; }

/* 設定視窗:名字、動態頭像、配色 */
.settings { border: 0; border-radius: 16px; padding: 22px; background: var(--surface-1); box-shadow: var(--soft-raise);
  color: var(--ink); width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); }
.settings::backdrop { background: rgba(38, 38, 38, .45); }
.settings h3 { margin: 0 0 14px; font-size: 17px; }
.settings .field { margin-bottom: 18px; }
.settings .row { justify-content: flex-end; margin-top: 8px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; padding: 0; box-shadow: var(--soft-raise-sm); }
.swatches button[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatches [data-accent="orange"] { background: #ff522f; }
.swatches [data-accent="blue"] { background: #2f6fe4; }
.swatches [data-accent="green"] { background: #239a63; }
.swatches [data-accent="purple"] { background: #7b5cf0; }
.swatches [data-accent="pink"] { background: #e8508f; }
.swatches [data-accent="teal"] { background: #1b9aaa; }
.custom-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: var(--surface-1); box-shadow: var(--soft-raise-sm); font-size: 13px; cursor: pointer; }
.custom-swatch[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.custom-swatch input[type="color"] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: none; cursor: pointer; }
.custom-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.custom-swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.custom-swatch input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.modes { display: flex; gap: 8px; margin-top: 10px; }
.frames { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.settings a:not(.button) { color: var(--accent-text); }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; margin: 0; font-size: 13px; align-items: baseline; }
.keys dt, .keys dd { margin: 0; }
.keys dt { white-space: nowrap; }
.keys dd { color: var(--ink-muted); }
.keys kbd { font: 12px/1 var(--font); padding: 3px 7px; border-radius: 6px; background: var(--surface-1); box-shadow: var(--soft-press-sm); color: var(--ink); }
.modes button { padding: 6px 14px; font-size: 13px; background: var(--surface-1); box-shadow: var(--soft-raise-sm); color: var(--ink); }
.modes button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--soft-press-color); }
/* 複製對話、Wren 交的 .md、接上 agent */
.copy-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; }
.msg .meta button.copy { padding: 1px; background: none; box-shadow: none; color: var(--ink-muted); opacity: 0; transition: opacity .15s; }
.msg .meta button.copy .ico { width: 14px; height: 14px; }
.msg:hover .meta button.copy, .msg:focus-within .meta button.copy { opacity: 1; }
/* 評價鈕:平常藏著,滑過或評過才出現;評過的用主題色 */
.msg .meta button.rate { padding: 1px; background: none; box-shadow: none; color: var(--ink-muted); opacity: 0; transition: opacity .15s; }
.msg .meta button.rate .ico { width: 14px; height: 14px; }
.msg .meta button.rate.down .ico { transform: rotate(180deg); }
.msg:hover .meta button.rate, .msg:focus-within .meta button.rate { opacity: 1; }
.msg .meta button.rate[aria-pressed="true"] { opacity: 1; color: var(--accent-text); }
.msg .meta button.rate[aria-pressed="true"] .ico { fill: var(--accent-tint); }
@media (hover: none) { .msg .meta button.rate { opacity: .7; } }
@media (hover: none) { .msg .meta button.copy { opacity: .7; } }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-1); box-shadow: var(--soft-raise-sm); width: min(420px, 100%); }
.doc-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.doc .doc-left { grid-column: 1; font-size: 12px; }
.doc button { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 6px; }
.doc.gone .doc-name { color: var(--ink-muted); text-decoration: line-through; }
.kit { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.button { display: inline-flex; align-items: center; border-radius: 10px; padding: 6px 14px; font-size: 13px; text-decoration: none; }
a.button.ghost { background: var(--surface-1); color: var(--ink); box-shadow: var(--soft-raise-sm); }
a.button.ghost:active { box-shadow: var(--soft-press-sm); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 6px; overflow-wrap: anywhere; }
.small { font-size: 12px; }

.presence .av { margin: -4px 0; }
.typing { display: flex; align-items: center; gap: 8px; }
.side-foot .who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .typing .dot { animation: none; color: var(--ink-muted); }
  .av img, .av::after { animation: none !important; }
  .app, .side { transition: none; }
}

/* 手機:一次只看一欄 */
@media (max-width: 760px) {
  .app, .app.side-folded { grid-template-columns: 1fr; padding: 12px 16px; gap: 0; }
  .side { width: auto; }
  /* 一次一欄:收合鈕改成在清單與對話之間切換,取代原本的「‹」 */
  .app.side-folded .side { transform: none; opacity: 1; pointer-events: auto; }
  .app[data-view="list"] .main { display: none; }
  .app[data-view="chat"] .side { display: none; }
  .messages { padding: 16px 34px 16px 16px; }
  .map { padding: 12px 16px; }
  .map-body { flex-direction: column; overflow-y: auto; }
  .map-stage { flex: none; }
  .map-3d { flex: none; width: 100%; height: auto; aspect-ratio: 1; }
  .map-right { width: auto; display: none; }
  .map-body.open .map-right { width: auto; display: block; }
  .map-right-inner { width: auto; margin: 12px 0 0; }
  .map-side { width: auto; overflow: visible; }
  .rail { right: 4px; width: 24px; }   /* 手指好按 */
  .rail::before { left: 11px; }
  .rail-thumb { left: 9px; }
  .mark { left: 12px; }
  .to-end { right: 36px; }
  .composer { padding: 12px 16px 16px; }
  .msg { max-width: 92%; }
}