/* 台股資金地圖 · 鎮上留言／我的角色 (r21) — talk.js, avatar.js. The talk layer sits at z-index 1: above the map, under the effect
   canvas (2), the map's labels (3) and every panel — so a comment can never cover a company's name, change, the date or an effect. */
#talk-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#talk-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
#talk-bubbles { position: absolute; inset: 0; pointer-events: none; }
.tk-b { position: absolute; left: 0; top: 0; display: flex; gap: 7px; align-items: flex-start; max-width: 236px; padding: 6px 10px 7px 6px; border-radius: 12px; background: rgba(13,18,26,.94); border: 1px solid rgba(148,163,184,.38); box-shadow: 0 6px 18px rgba(0,0,0,.38); color: var(--fg); font: calc(12px * var(--fz, 1))/1.42 var(--font-ui); pointer-events: auto; cursor: pointer; animation: tk-pop .24s ease-out both; transition: opacity .3s; will-change: transform; }
.tk-b:hover { border-color: #fff; }
.tk-b.bull { border-color: rgba(61,220,203,.62); } .tk-b.bear { border-color: rgba(255,169,64,.62); } .tk-b.watch { border-color: rgba(167,179,193,.55); }
.tk-b.mine { border-color: rgba(243,198,94,.9); box-shadow: 0 0 0 1px rgba(243,198,94,.35), 0 6px 18px rgba(0,0,0,.38); }
.tk-b.sys { border-style: dashed; border-color: rgba(143,163,184,.62); background: rgba(16,22,30,.92); }
.tk-b.out { opacity: 0 !important; }
.tk-b.still { animation: tk-fade .3s both; }
/* r25: a short tail on the edge facing the company (beside its body, at the sign's height) or the speaker's head — no leader lines */
.tk-tail { position: absolute; display: none; width: 11px; height: 11px; box-sizing: border-box; background: inherit; border: inherit; border-radius: 0; transform: rotate(45deg); pointer-events: none; z-index: -1; } /* under the text, over the border it crosses (.tk-b is its own stacking context: will-change) */
.tk-tail.l, .tk-tail.r, .tk-tail.t, .tk-tail.b { display: block; }
.tk-tail.l { left: -6px; border-top-width: 0; border-right-width: 0; } .tk-tail.r { right: -6px; border-bottom-width: 0; border-left-width: 0; }
.tk-tail.t { top: -6px; border-right-width: 0; border-bottom-width: 0; } .tk-tail.b { bottom: -6px; border-top-width: 0; border-left-width: 0; }
/* r25: compact bubble — used only when the full one has no room right beside its company (2 lines, no company name: the tail says whose) */
.tk-b.cmp { max-width: 144px; gap: 5px; padding: 4px 8px 5px 5px; } .tk-b.cmp .tk-co { display: none; } .tk-b.cmp .tk-bt { -webkit-line-clamp: 2; line-clamp: 2; }
@keyframes tk-pop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes tk-fade { from { opacity: 0; } to { opacity: 1; } }
.tk-av { flex: none; display: inline-flex; line-height: 0; }
.tk-bb { display: flex; flex-direction: column; min-width: 0; }
.tk-bh { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; font-size: calc(11px * var(--fz, 1)); color: var(--fg-2); min-width: 0; }
.tk-bh b { color: var(--fg); font-weight: 600; max-width: 8em; overflow: hidden; text-overflow: ellipsis; } .tk-co { color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; }
.tk-bt { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; margin-top: 1px; }
.tk-st { font-style: normal; font-size: calc(10.5px * var(--fz, 1)); line-height: 1.5; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.tk-st.bull { color: var(--buy); } .tk-st.bear { color: var(--sell); } .tk-st.watch { color: var(--fg-2); }
.tk-sysb { font-style: normal; font-size: calc(10px * var(--fz, 1)); line-height: 1.6; padding: 0 5px; border-radius: 4px; background: rgba(143,163,184,.2); color: #C3CEDB; white-space: nowrap; }
/* dock: 💬 mode button + the 跑馬燈 strip (bottom left, beside 圖例) */
#talk-dock { position: absolute; left: 14px; bottom: 14px; z-index: 10; display: flex; align-items: stretch; height: 30px; }
#talk-dock.ticker { right: calc(var(--panel-w) + 42px); }
#talk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(15,21,29,.92); color: var(--fg-2); font-size: calc(12px * var(--fz, 1)); white-space: nowrap; }
#talk-pill i { font-style: normal; } #talk-pill:hover { color: var(--fg); } #talk-pill.off span { color: var(--fg-3); }
#talk-dock.ticker #talk-pill { border-radius: 8px 0 0 8px; }
#talk-ticker { flex: 1 1 auto; min-width: 0; overflow: hidden; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 8px 8px 0; background: rgba(10,14,20,.92); display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.tk-tt { white-space: nowrap; min-width: 0; padding-left: 12px; }
.tk-run { display: inline-flex; align-items: center; animation: tk-scroll 40s linear infinite; }
#talk-ticker:hover .tk-run { animation-play-state: paused; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tk-w, 50%))); } }
.tk-ti { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.tk-ti b { color: var(--fg); font-weight: 600; } .tk-ti u { text-decoration: none; color: var(--gold); } .tk-ti.sys b { color: #C3CEDB; } .tk-ti .av-svg { flex: none; }
.tk-ti:hover span { color: var(--fg); }
.tk-sep { font-style: normal; color: var(--fg-3); margin: 0 12px; }
#talk-menu { position: absolute; left: 14px; bottom: 50px; z-index: 41; width: 272px; padding: 8px; border-radius: 12px; background: rgba(12,17,24,.98); border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
#talk-menu .tm-h { font: 500 calc(10.5px * var(--fz, 1)) var(--font-mono); letter-spacing: .06em; color: var(--fg-3); padding: 2px 6px 4px; } .tm-h small { float: right; letter-spacing: 0; color: var(--fg-2); }
#talk-menu button[data-tm="mode"] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px 6px 26px; border-radius: 8px; text-align: left; position: relative; }
#talk-menu button[data-tm="mode"]::before { content: ''; position: absolute; left: 9px; top: 11px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg-3); }
#talk-menu button[data-tm="mode"].on::before { border-color: var(--buy); background: var(--buy); box-shadow: 0 0 0 2px rgba(61,220,203,.25); }
#talk-menu button[data-tm="mode"]:hover { background: var(--bg-3); } #talk-menu b { font-size: calc(12.5px * var(--fz, 1)); font-weight: 600; color: var(--fg); } #talk-menu small { font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); line-height: 1.35; }
#talk-menu .tm-d { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px 26px; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); } #talk-menu .tm-d button { padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(11.5px * var(--fz, 1)); } #talk-menu .tm-d button.on { color: var(--buy); border-color: rgba(61,220,203,.6); background: rgba(61,220,203,.12); }
#talk-menu .tm-me { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 8px; border-radius: 8px; border-top: 1px solid var(--line); text-align: left; } #talk-menu .tm-me:hover { background: var(--bg-3); } #talk-menu .tm-me span { display: flex; flex-direction: column; }
#talk-menu .tm-n { margin: 4px 6px 2px; font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); line-height: 1.4; }
.tm-plus { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--fg-3); color: var(--fg-2); font-size: calc(15px * var(--fz, 1)); flex: none; }
#talk-dmx { position: absolute; right: calc(var(--panel-w) + 30px); top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 48px); z-index: 10; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(15,21,29,.92); color: var(--fg-2); font-size: calc(11.5px * var(--fz, 1)); }
#talk-dmx b { color: var(--fg); margin-left: 3px; } #talk-dmx:hover { color: var(--fg); border-color: #fff; }
#talk-perf { position: absolute; left: 14px; top: calc(var(--top-h) + 64px); z-index: 12; font: calc(11px * var(--fz, 1)) var(--font-mono); color: #FFD166; background: rgba(0,0,0,.72); padding: 3px 8px; border-radius: 6px; pointer-events: none; }
body.tl-open #talk-dock { bottom: 62px; } body.tl-open #talk-menu { bottom: 98px; }
/* r42 散步: 🚶 at the front of the dock (the 💬 pill and the 跑馬燈 strip stay joined), the driving bar after it, the phone joystick */
#walk-btn { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(15,21,29,.92); color: var(--fg-2); font-size: calc(12px * var(--fz, 1)); white-space: nowrap; flex: none; }
#walk-btn i { font-style: normal; } #walk-btn:hover { color: var(--fg); border-color: rgba(243,198,94,.55); }
#walk-btn.on { color: #1A1406; background: var(--gold); border-color: var(--gold); font-weight: 600; }
#walk-bar { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 0 3px 0 10px; border-radius: 8px; border: 1px solid rgba(243,198,94,.45); background: rgba(15,21,29,.94); color: var(--fg-3); font-size: calc(11.5px * var(--fz, 1)); white-space: nowrap; flex: none; }
#walk-btn[hidden], #walk-bar[hidden], #walk-joy[hidden] { display: none; }
#walk-bar.note .wk-hint { color: #F3D27A; }
#walk-bar button { height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(11.5px * var(--fz, 1)); }
#walk-bar .wk-cam.on { color: var(--gold); border-color: rgba(243,198,94,.6); background: rgba(243,198,94,.1); } #walk-bar button:hover { color: var(--fg); }
#walk-joy { position: absolute; right: 16px; bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px); z-index: 12; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle, rgba(243,198,94,.12), rgba(10,14,20,.6) 70%); border: 1.5px solid rgba(243,198,94,.55); touch-action: none; -webkit-user-select: none; user-select: none; }
#walk-joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(243,198,94,.88); box-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform .12s; }
#walk-joy.on i { transition: none; } body.tl-open #walk-joy { bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 64px); }
@media (max-width: 860px) {
  #talk-dock { left: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 10px); height: 30px; } #talk-dock.ticker { right: 8px; }
  #talk-menu { left: 8px; right: 8px; width: auto; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 46px); }
  #talk-dmx { right: 8px; top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 44px); }
  body.tl-open #talk-dock { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 58px); }
  body.tcm-ana #talk-dock, body[data-nav="panel"] #talk-dock, body[data-nav="panel"] #talk-dmx { display: none; }
  #walk-btn { padding: 0 9px; } #walk-btn span, #walk-bar .wk-hint, #walk-bar .wk-cam span { display: none; } #walk-bar { padding-left: 3px; } body[data-nav="panel"] #walk-joy { display: none; }
  /* r44: the standing hint (W A S D…) still has no room on a phone, but a note («前面是公司廣場，繞過去») shows here instead of being
     toasted over the street — short, in the corner, and gone with the bar when you press ✕. */
  #walk-bar.note .wk-hint { display: inline-block; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; } #walk-bar.note { padding-left: 8px; }
  .tk-b { max-width: 196px; font-size: calc(11.5px * var(--fz, 1)); }
}
/* the stock card section */
.tk-sec { margin: 12px 0 10px; padding: 10px 10px 8px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.tk-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .tk-sh h4 { margin: 0 0 6px !important; font-size: calc(12.5px * var(--fz, 1)) !important; color: var(--fg) !important; font-weight: 600 !important; }
.tk-mebtn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 9px 0 3px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(11.5px * var(--fz, 1)); } .tk-mebtn:hover { color: var(--fg); border-color: rgba(243,198,94,.6); }
.tk-mq { overflow: hidden; height: 22px; margin: 0 0 6px; border-radius: 6px; background: rgba(5,8,12,.55); display: flex; align-items: center; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); }
.tk-mqr { display: inline-flex; white-space: nowrap; padding-left: 10px; } .tk-mqr.run { animation: tk-scroll 30s linear infinite; } .tk-mqr i { font-style: normal; color: var(--fg-3); margin: 0 10px; }
.tk-list { display: flex; flex-direction: column; gap: 2px; }
.tk-c { position: relative; display: flex; gap: 8px; padding: 6px 4px 6px 2px; border-top: 1px solid var(--line); } .tk-c:first-child { border-top: 0; }
.tk-c.sys { background: rgba(143,163,184,.05); border-radius: 8px; border-top-color: transparent; } .tk-c.mine .tk-ch b { color: var(--gold); }
.tk-cb { flex: 1 1 auto; min-width: 0; } .tk-cb p { margin: 2px 0 0; font-size: calc(12.5px * var(--fz, 1)); line-height: 1.5; color: var(--fg); word-break: break-word; white-space: pre-wrap; }
.tk-ch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: calc(11.5px * var(--fz, 1)); } .tk-ch b { font-weight: 600; } .tk-ch time, .tk-ch small { font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.tk-me-b { font-style: normal; font-size: calc(10px * var(--fz, 1)); padding: 0 4px; border-radius: 4px; background: rgba(243,198,94,.16); color: var(--gold); }
.tk-act { margin-left: auto; } .tk-act button { font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); padding: 1px 4px; border-radius: 4px; } .tk-act button:hover { color: var(--fg); background: var(--bg-4); } .tk-act button.sure { color: #FF8A7A; }
.tk-rep { position: absolute; right: 2px; top: 26px; z-index: 5; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border-radius: 10px; background: rgba(12,17,24,.98); border: 1px solid var(--line-2); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.tk-rep b { font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); font-weight: 500; padding: 2px 6px 4px; } .tk-rep button { text-align: left; font-size: calc(12px * var(--fz, 1)); padding: 5px 8px; border-radius: 6px; color: var(--fg-2); } .tk-rep button:hover { background: var(--bg-3); color: var(--fg); }
.tk-more { width: 100%; margin: 4px 0 2px; height: 28px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--fg-2); font-size: calc(12px * var(--fz, 1)); } .tk-more:hover { color: var(--fg); }
.tk-login { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(5,8,12,.45); } .tk-login p { margin: 0 0 6px; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); line-height: 1.5; } .tk-g { gap: 7px; }
.tk-form { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(5,8,12,.45); border: 1px solid var(--line); }
.tk-fh { display: flex; align-items: center; gap: 7px; font-size: calc(12px * var(--fz, 1)); margin-bottom: 6px; } .tk-fh b { font-weight: 600; } .tk-lk { margin-left: auto; font-size: calc(11.5px * var(--fz, 1)); color: var(--gold); } .tk-lk:hover { text-decoration: underline; }
.tk-ta { width: 100%; min-height: 54px; resize: vertical; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; color: var(--fg); font: calc(13px * var(--fz, 1))/1.5 var(--font-ui); padding: 7px 9px; }
.tk-ta:focus { outline: 2px solid rgba(61,220,203,.55); outline-offset: 0; }
.tk-fr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .tk-stance { display: inline-flex; gap: 4px; }
.tk-stance .tk-st { height: 26px; padding: 0 10px; border-radius: 8px; font-size: calc(12px * var(--fz, 1)); border-color: var(--line-2); color: var(--fg-2); background: var(--bg-2); }
.tk-stance .tk-st.bull.on { color: var(--buy); border-color: var(--buy); background: rgba(61,220,203,.14); } .tk-stance .tk-st.bear.on { color: var(--sell); border-color: var(--sell); background: rgba(255,169,64,.14); } .tk-stance .tk-st.watch.on { color: var(--fg); border-color: var(--fg-2); background: rgba(167,179,193,.14); }
.tk-cnt { margin-left: auto; font: calc(11px * var(--fz, 1)) var(--font-mono); color: var(--fg-3); } .tk-cnt.over { color: #FF8A7A; }
.tk-send[disabled] { opacity: .45; cursor: not-allowed; }
.tk-hint { margin: 6px 0 0; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); line-height: 1.45; }
.tk-agree { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); } .tk-agree input { accent-color: var(--buy); width: 15px; height: 15px; margin: 0; } .tk-agree .tk-lk { margin: 0; }
.tk-rep p { margin: 0 6px 8px; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); line-height: 1.45; } .tk-rep small { display: block; margin: 6px 6px 2px; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); } .tk-rep .tk-g { margin: 0 6px 4px; }
.tk-rules .tk-rc { width: min(520px, 100%); height: auto; } .tk-rules ol { margin: 4px 20px 10px 34px; padding: 0; font-size: calc(13px * var(--fz, 1)); line-height: 1.6; color: var(--fg); } .tk-rules li { margin: 4px 0; }
#talk-menu .tm-out { display: block; margin-top: 2px; padding: 6px 8px; border-radius: 8px; font-size: calc(12px * var(--fz, 1)); color: var(--fg-3); text-decoration: none; } #talk-menu .tm-out:hover { background: var(--bg-3); color: var(--fg); }
.tk-rule { margin: 8px 2px 0; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); line-height: 1.45; }
/* 我的留言 (entries in the 💬 menu and beside 我的角色) and the author card: heads and names of members open it, 鎮民 never does */
.tk-shb { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: none; max-width: 62%; }
.tk-mpb { padding: 0 10px 0 8px; } .tm-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--fg-2); }
#talk-menu .tm-mp { margin-top: 0; border-top: 0; } #talk-menu .tm-mp .tm-ico { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); }
.tk-who { display: inline-flex; align-items: baseline; min-width: 0; border-radius: 4px; } .tk-av.tk-who { align-items: flex-start; border-radius: 50%; }
.tk-av.tk-who:hover { box-shadow: 0 0 0 2px rgba(243,198,94,.55); } .tk-nk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11em; } .tk-nk:hover b { text-decoration: underline; text-underline-offset: 2px; }
.tk-b [data-tkw] { cursor: pointer; } .tk-b b[data-tkw]:hover { text-decoration: underline; text-underline-offset: 2px; } .tk-b .tk-av[data-tkw] { border-radius: 50%; } .tk-b .tk-av[data-tkw]:hover { box-shadow: 0 0 0 2px rgba(243,198,94,.6); }
.tk-dlg .tk-dc { width: min(560px, 100%); }
.tk-dh { flex: none; padding: 16px 52px 10px 18px; border-bottom: 1px solid var(--line); }
.tk-dt { display: flex; align-items: center; gap: 12px; min-width: 0; } .tk-dt > div { min-width: 0; } .tk-dav { flex: none; line-height: 0; }
.tk-dt h3 { margin: 0 0 3px; font-size: calc(17px * var(--fz, 1)); overflow-wrap: anywhere; } .tk-dt h3.gone { color: var(--fg-2); font-weight: 500; } .tk-dt p { margin: 0; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); } .tk-dt p b { color: var(--fg); font-weight: 600; }
.tk-dn { margin: 8px 0 0; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-3); line-height: 1.5; } .tk-dn .tk-lk { margin: 0; font-size: inherit; }
.tk-ds { display: flex; gap: 8px; margin-top: 12px; } .tk-ds span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); }
.tk-ds b { font: 600 calc(17px * var(--fz, 1))/1.2 var(--font-mono); color: var(--fg); }
.tk-dl { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 18px 16px; outline: none; overscroll-behavior: contain; }
.tk-dsub { margin: 12px 0 2px; font-size: calc(11.5px * var(--fz, 1)); font-weight: 600; letter-spacing: .04em; color: var(--fg-3); }
.tk-pr { padding: 8px 2px 8px 0; } .tk-pr .tk-ch { row-gap: 2px; }
.tk-go { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; font-size: calc(12.5px * var(--fz, 1)); font-weight: 600; color: var(--gold); border-radius: 4px; }
.tk-go small { font: 400 calc(10.5px * var(--fz, 1)) var(--font-mono); color: var(--fg-3); } .tk-go i { font-style: normal; color: var(--fg-3); font-weight: 400; } .tk-go:hover { text-decoration: underline; text-underline-offset: 2px; } .tk-go.off { color: var(--fg-2); cursor: default; text-decoration: none; }
.tk-pr.hid .tk-cb > p:not(.tk-hid) { color: var(--fg-2); }
.tk-cb p.tk-hid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 6px 0 0; padding: 5px 8px; border-radius: 8px; background: rgba(255,169,64,.09); border: 1px solid rgba(255,169,64,.34); font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); white-space: normal; }
.tk-hid b { color: var(--sell); font-weight: 600; } .tk-hid small { margin-left: auto; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.tk-dm { margin: 16px 0 8px; padding: 14px 12px; border-radius: 10px; background: rgba(5,8,12,.45); text-align: center; } .tk-dm p { margin: 0 0 10px; font-size: calc(12.5px * var(--fz, 1)); color: var(--fg-2); line-height: 1.55; } .tk-dm p:last-child { margin: 0; }
.tk-dw { margin: 12px 0 4px; text-align: center; font-size: calc(12px * var(--fz, 1)); color: var(--fg-3); }
.tk-art { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-top: 1px solid var(--line); border-radius: 6px; color: var(--fg); text-decoration: none; font-size: calc(12.5px * var(--fz, 1)); }
.tk-art b { font-weight: 600; } .tk-art small { font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); } .tk-art:hover { background: var(--bg-3); } .tk-art.more { color: var(--gold); font-size: calc(12px * var(--fz, 1)); }
.tk-dlg .tk-rule { margin-top: 14px; }
/* 自介: a line on the author card; in 我的留言 a row with 編輯, or a one-line editor */
.tk-bio { margin: 10px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: calc(12.5px * var(--fz, 1)); line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.tk-biorow { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: calc(12.5px * var(--fz, 1)); line-height: 1.5; } .tk-biol { flex: none; font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); }
.tk-biot { flex: 1 1 auto; min-width: 0; color: var(--fg); overflow-wrap: anywhere; } .tk-biot.none { color: var(--fg-3); } .tk-biorow .tk-lk { flex: none; margin: 0; }
.tk-bioed { margin-top: 10px; } .tk-biof { display: flex; align-items: center; gap: 8px; }
.tk-bio-in { flex: 1 1 auto; min-width: 0; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); padding: 0 10px; font: calc(13px * var(--fz, 1)) var(--font-ui); }
.tk-bio-in:focus { outline: 2px solid rgba(61,220,203,.55); outline-offset: 0; } .tk-biof .tk-cnt { flex: none; margin-left: 0; }
.tk-bioerr { margin: 6px 0 0; font-size: calc(12px * var(--fz, 1)); color: #FF8A7A; line-height: 1.45; }
.tk-biob { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tk-biob .btn[disabled] { opacity: .45; cursor: not-allowed; }
.tk-biob .tk-lk { margin-left: auto; } .tk-biob .tk-lk.sure { color: #FF8A7A; } .tk-bioed .tk-hint { margin-top: 6px; }
@media (max-width: 860px) {
  .tk-shb { max-width: 58%; }
  .av-modal.tk-dlg { align-items: flex-end; } .tk-dlg .tk-dc { height: auto; max-height: calc(100% - 40px - env(safe-area-inset-top, 0px)); border-radius: 16px 16px 0 0; }
  .tk-dh { padding: 12px 48px 8px 14px; } .tk-dl { padding: 2px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .tk-hid small { margin-left: 0; flex-basis: 100%; }
}
/* avatar.js — portraits and the creator */
.av-svg { display: block; } .av-por { border-radius: 50%; } .av-neon { filter: drop-shadow(0 0 2px #3DF2FF) drop-shadow(0 0 3px #FF4FD8); }
.av-led { animation: av-led 1.4s linear infinite; } @keyframes av-led { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) { .av-led, .tk-run, .tk-mqr.run { animation: none !important; } .tk-b { animation: tk-fade .3s both; } }
.av-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,8,12,.74); }
.av-card { position: relative; width: min(860px, 100%); max-height: calc(100% - 24px); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; }
.av-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 8px; color: var(--fg-2); font-size: calc(15px * var(--fz, 1)); z-index: 2; } .av-x:hover { background: var(--bg-3); color: var(--fg); }
.av-head { padding: 16px 52px 8px 20px; } .av-head h3 { margin: 0 0 3px; font-size: calc(17px * var(--fz, 1)); } .av-head p { margin: 0; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); } .av-head p b { color: var(--gold); font-family: var(--font-mono); font-weight: 500; }
.av-body { display: grid; grid-template-columns: 236px 1fr; gap: 16px; padding: 4px 20px 12px; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.av-prev { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #1E2A38, #111821 70%); border: 1px solid var(--line); overflow: hidden; }
.av-2d { line-height: 0; } .av-3d { display: flex; flex-direction: column; align-items: center; gap: 2px; } .av-3d canvas { border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(61,220,203,.08), transparent 70%); } .av-3d small { font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.av-3d.off canvas { display: none; } .av-3d.off small::after { content: '（地圖載入後才有 3D）'; }
.av-por-row { display: flex; align-items: center; gap: 8px; align-self: stretch; padding: 6px 4px 0; border-top: 1px solid var(--line); } .av-por-row b { display: block; font-size: calc(12px * var(--fz, 1)); } .av-por-row small { display: block; font: calc(10px * var(--fz, 1)) var(--font-mono); color: var(--fg-3); word-break: break-all; }
.av-pick { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.av-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .av-tabs button { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(12.5px * var(--fz, 1)); } .av-tabs button.on { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.av-opts { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-right: 4px; max-height: 420px; }
.av-f { margin-bottom: 10px; } .av-fl { font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); margin: 0 0 5px; } .av-fl small { color: var(--fg-3); font-size: calc(10.5px * var(--fz, 1)); }
.av-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; } .av-ch.sw { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.av-o { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg-2); font-size: calc(11px * var(--fz, 1)); min-width: 0; }
.av-o span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .av-o:hover { border-color: var(--line-2); color: var(--fg); }
.av-o.on { border-color: var(--gold); background: rgba(243,198,94,.12); color: var(--fg); box-shadow: 0 0 0 1px rgba(243,198,94,.4); }
.av-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.av-nick { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); } .av-nick small { color: var(--fg-3); font-size: calc(10.5px * var(--fz, 1)); }
.av-nick input { height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg); padding: 0 10px; font: calc(13px * var(--fz, 1)) var(--font-ui); }
.av-note { margin: 8px 0 0; font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); line-height: 1.45; } .av-err { margin: 6px 0 0; font-size: calc(12px * var(--fz, 1)); color: #FF8A7A; }
.av-foot { display: flex; align-items: center; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--line); } .av-sp { flex: 1; }
.av-b { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(12.5px * var(--fz, 1)); white-space: nowrap; } .av-b:hover { color: var(--fg); background: var(--bg-3); }
.av-save { color: #10161E; background: var(--gold); border-color: var(--gold); font-weight: 600; } .av-save:hover { background: #FFD883; color: #10161E; } .av-save[disabled] { opacity: .6; }
@media (max-width: 860px) {
  .av-modal { padding: 0; align-items: stretch; } .av-card { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .av-body { grid-template-columns: 1fr; gap: 8px; padding: 0 12px 8px; overflow-y: auto; } .av-head { padding: 12px 48px 6px 14px; } .av-head p { font-size: calc(11.5px * var(--fz, 1)); }
  .av-prev { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px; } .av-2d svg { width: 108px; height: 144px; } .av-3d canvas { width: 116px !important; height: 145px !important; } .av-por-row { flex-basis: 100%; justify-content: center; }
  .av-opts { max-height: none; overflow: visible; } .av-foot { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; } .av-b { padding: 0 11px; }
}