/* Tab prototype · the Tab UI. Liquid Glass = translucent blur + bright inner rim + soft shadow.
   Radii: candidate 10 / inset 4 / item 6 · panel 12 / inset 4 / row 8 · pill 30 high, key 20, 5 from end
   · card 18 / inset 6 / body 12 · clipboard 24, cards 196×178 radius 14. */

.ov { position: absolute; inset: 0; z-index: 300; pointer-events: none; }

.glass {
  isolation: isolate;
  background: rgba(251, 251, 253, .72);
  -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(255, 255, 255, .6),
    0 0 0 .5px rgba(0, 0, 0, .11), 0 2px 6px -1px rgba(0, 0, 0, .08), 0 18px 40px -10px rgba(16, 24, 48, .26);
}
.glass.dark {
  background: rgba(34, 34, 38, .72); color: #f5f5f7;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .24), inset 0 0 0 .5px rgba(255, 255, 255, .1),
    0 0 0 .5px rgba(0, 0, 0, .45), 0 18px 40px -10px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------- key hints (filled capsules, no border) */
.kh {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: none;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(0, 0, 0, .075); color: rgba(60, 60, 67, .72);
  font: 500 11px/1 var(--font); letter-spacing: .01em;
}
.kh svg.ic { width: 11px; height: 11px; stroke-width: 2.3; }
.kh.on { background: rgba(255, 255, 255, .24); color: #fff; }
.dark .kh, .kh.dk { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- text fields, caret, ghost text */
.fld { white-space: pre-wrap; word-break: break-word; outline: none; }
.fld .caret { display: none; }
.fld.focus .caret {
  display: inline-block; width: 2px; height: 1.22em; margin: 0 -1px; vertical-align: -.24em;
  border-radius: 1px; background: var(--accent); animation: blink 1.06s steps(1) infinite;
}
.fld.typing .caret { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.gh { color: rgba(60, 60, 67, .34); }
.gh .kh-g { display: inline-flex; height: 1.08em; min-width: 1.75em; padding: 0 .3em; margin-left: 6px; vertical-align: -.16em; border-radius: .54em; background: rgba(0, 0, 0, .075); }
.gh .kh-g svg.ic { width: .72em; height: .72em; stroke-width: 2.4; color: rgba(60, 60, 67, .62); }
.dark .gh { color: rgba(235, 235, 245, .36); }
.dark .gh .kh-g { background: rgba(255, 255, 255, .14); }
.dark .gh .kh-g svg.ic { color: rgba(235, 235, 245, .7); }
.gh.rw .ght span { animation: ghIn .34s var(--soft) both; }
.gh.rw .kh-g { animation: ghIn .3s var(--soft) both .12s; }
@keyframes ghIn { from { opacity: 0; filter: blur(3px); } }
.ins.flash { animation: insIn .9s var(--soft) both; border-radius: 3px; }
@keyframes insIn { from { color: rgba(60, 60, 67, .34); background: rgba(0, 122, 255, .12); } 40% { background: rgba(0, 122, 255, .1); } }
.pop { animation: popIn .45s var(--spring) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } }

/* ---------------------------------------------------------------- candidate window (IME) */
.cand { position: absolute; z-index: 70; padding: 4px; border-radius: 10px; }
.cand.hide { display: none; }
.cand-pre { height: 20px; padding: 3px 7px 0; font-size: 12px; line-height: 14px; color: var(--ink2); letter-spacing: .02em; white-space: nowrap; }
.cand-pre:empty { display: none; }
.cand-items { display: flex; align-items: center; gap: 2px; }
.ci { display: inline-flex; align-items: center; height: 26px; padding: 0 7px; border-radius: 6px; white-space: nowrap; }
.ci.sel { background: var(--accent); color: #fff; }
.cl { margin-right: 4px; font: 500 11px/1 var(--font); color: var(--ink3); font-variant-numeric: tabular-nums; }
.ci.sel .cl { color: rgba(255, 255, 255, .72); }
.ct { font-size: 15px; line-height: 1; }
.cc { margin-left: 4px; font-size: 12px; color: var(--ink3); }
.cc.tag { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; font-weight: 600; background: rgba(0, 122, 255, .12); color: var(--accent); }
.ci.sel .cc.tag { background: rgba(255, 255, 255, .24); color: #fff; }
.cand-more { display: flex; align-items: center; justify-content: center; width: 18px; color: var(--ink3); }
.cand-more svg.ic { width: 11px; height: 11px; stroke-width: 2.2; }

/* ---------------------------------------------------------------- companion (one glass, nine forms) */
.cmp { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; transition: opacity .3s; --fs: 1; }
.cmp.hide, .cmp.docked { opacity: 0; }
/* 光点外的一圈呼吸环：纯色描边，不用光晕渐变 */
.cmp::after {
  content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(10, 132, 255, .32);
  opacity: 0; transition: opacity .3s; animation: breathe 3.2s ease-in-out infinite; z-index: -1;
}
.cmp[data-state="dot"]::after { opacity: 1; }
.cmp.faint[data-state="dot"]::after { opacity: .4; }
@keyframes breathe { 50% { transform: scale(1.3); opacity: .35; } }
.cmp-shell {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; overflow: hidden; border-radius: 999px;
  isolation: isolate;
  background: rgba(251, 251, 253, .76);
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(255, 255, 255, .6),
    0 0 0 .5px rgba(0, 0, 0, .11), 0 2px 6px -1px rgba(0, 0, 0, .1), 0 14px 30px -10px rgba(16, 24, 48, .3);
  transform: scale(var(--fs));
  transition: width .5s var(--spring), height .5s var(--spring), left .5s var(--spring), top .5s var(--spring),
    border-radius .4s var(--soft), background-color .3s, box-shadow .3s, transform .35s var(--spring);
}
.cmp.hide .cmp-shell { transform: scale(.3); }
.cmp-measure { visibility: hidden; position: absolute; left: -9999px; top: 0; width: auto !important; height: auto !important; transition: none; }
.cmp-c { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 5px 0 12px; white-space: nowrap; font-size: 13px; color: var(--ink); }
.cmp-measure .cmp-c { height: auto; min-height: inherit; }
.cmp-c.new { animation: cIn .32s var(--soft) both .08s; }
.cmp-c.old { position: absolute; left: 0; top: 0; animation: cOut .18s ease-in both; }
@keyframes cIn { from { opacity: 0; filter: blur(4px); } }
@keyframes cOut { to { opacity: 0; filter: blur(3px); } }

.s-dot {
  background: var(--accent-d);
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px rgba(0, 60, 160, .16), 0 2px 5px rgba(0, 40, 120, .3);
}
.s-dot .cmp-c { padding: 0; }
.cmp.faint .s-dot { opacity: .6; }
.cmp-measure.s-dot { width: 12px !important; height: 12px !important; }
.cmp-measure.s-need-dot { width: 14px !important; height: 14px !important; }

.s-pill, .s-think, .s-done, .s-need { height: 30px; min-height: 30px; border-radius: 15px; }
.ci-ic { display: flex; color: var(--accent); }
.ci-ic svg.ic { width: 15px; height: 15px; }
.ci-t { font-weight: 500; }
.ci-d { font-size: 12px; color: var(--ink2); }
.ci-k { display: flex; gap: 3px; margin-left: 1px; }
.ci-k:empty { width: 6px; }
.s-pill.soft { background: rgba(246, 246, 249, .82); box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 16px -8px rgba(16, 24, 48, .22); }
.s-pill.soft .ci-t { font-weight: 500; color: rgba(29, 29, 31, .86); }
.s-pill.soft .ci-ic { color: var(--orange); }

/* 想: flowing light */
.s-think.only { width: 22px; height: 22px; min-height: 22px; }
.s-think.only .cmp-c { padding: 0; justify-content: center; }
/* 想：三个依次跳动的小点 + 文字轻轻明暗，不用流光渐变 */
.shim-dot { position: relative; flex: none; width: 4px; height: 4px; margin: 0 6px; border-radius: 50%; background: var(--accent); animation: thinkDot 1.1s ease-in-out infinite .18s; }
.shim-dot::before, .shim-dot::after { content: ""; position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: thinkDot 1.1s ease-in-out infinite; }
.shim-dot::before { left: -6px; }
.shim-dot::after { left: 6px; animation-delay: .36s; }
@keyframes thinkDot { 0%, 100% { background-color: rgba(0, 122, 255, .25); } 40% { background-color: rgba(0, 122, 255, 1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.shim { padding-right: 8px; font-weight: 500; color: rgba(29, 29, 31, .8); animation: shimText 1.6s ease-in-out infinite; }
@keyframes shimText { 50% { color: rgba(60, 60, 67, .45); } }
@keyframes shim { 50% { opacity: .45; } }

/* 听: voice bar (dark pill; the red dot is the only colour) */
.s-listen { height: 34px; border-radius: 17px; }
.cmp-shell.dark {
  background: rgba(30, 30, 34, .74); color: #fff;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .24), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 0 0 .5px rgba(0, 0, 0, .4), 0 16px 34px -10px rgba(0, 0, 0, .45);
}
.s-listen .cmp-c { display: block; padding: 0; color: #fff; }
.vb-row { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 7px 0 13px; }
.rec { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 3px rgba(255, 69, 58, .22); animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 5px rgba(255, 69, 58, .08); } }
.wave { display: flex; align-items: center; gap: 2px; height: 18px; flex: none; }
.wave i { width: 2.5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .92); }
.vb-l { display: flex; justify-content: flex-end; max-width: 380px; overflow: hidden; font-size: 13px; color: rgba(235, 235, 245, .55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); padding-left: 2px; }
.vb-l.on { color: #fff; }
.s-listen.wide { width: 470px; border-radius: 20px; }
.s-listen.wide .vb-l { max-width: none; -webkit-mask-image: none; mask-image: none; flex: 1; justify-content: flex-start; }
.vb-tx { width: 470px; padding: 2px 18px 16px; white-space: normal; font-size: 15.5px; line-height: 1.62; letter-spacing: .01em; color: #fff; }
.vb-tx .filler { color: rgba(235, 235, 245, .42); transition: color .4s; }
.vb-tx .corr { color: rgba(235, 235, 245, .4); text-decoration: line-through; text-decoration-color: rgba(255, 105, 97, .95); text-decoration-thickness: 1.5px; }
.vb-tx .fix { color: #82c0ff; }
.vb-tx .tail { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: rgba(255, 255, 255, .7); animation: blink 1s steps(1) infinite; }

/* 做: step bar */
.s-do { height: 32px; min-height: 32px; border-radius: 16px; }
.s-do .cmp-c { gap: 8px; padding-left: 10px; }
.do-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(0, 122, 255, .2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.do-n { font-size: 12px; font-weight: 700; color: var(--accent); }
.do-t { font-weight: 500; }
.do-seg { display: flex; gap: 3px; margin-left: 2px; }
.do-seg i { width: 14px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .1); }
.do-seg i.f { background: var(--accent); }
.do-seg i.c { background: var(--accent); animation: shim 1.2s ease-in-out infinite; }

/* 需要你 */
.s-need-dot { width: 14px; height: 14px; background: #ff9f0a; box-shadow: 0 0 0 .5px rgba(150, 70, 0, .3), 0 0 0 4px rgba(255, 159, 10, .22), 0 2px 6px rgba(150, 70, 0, .3); }
.cmp[data-state="need-dot"] .cmp-shell { animation: needPulse 1.6s ease-in-out infinite; }
@keyframes needPulse { 50% { box-shadow: 0 0 0 .5px rgba(150, 70, 0, .3), 0 0 0 8px rgba(255, 159, 10, .1), 0 2px 6px rgba(150, 70, 0, .3); } }
.need-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .22); }
.s-need { background: rgba(255, 248, 238, .86); }

/* 完成 */
.ok { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--green); color: #fff; }
.ok svg.ic { width: 12px; height: 12px; stroke-width: 2.6; }
.s-done .cmp-c { padding-left: 7px; }

.cmp-trail i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: rgba(10, 132, 255, .5); transform-origin: center; scale: .6; opacity: 0; }

/* ---------------------------------------------------------------- next-step panel */
.np { position: absolute; z-index: 50; width: 380px; padding: 4px; border-radius: 12px; transition: opacity .24s, transform .36s var(--spring), filter .24s; }
.np.in, .card.in { animation: npIn .5s var(--spring) both; }
@keyframes npIn { from { opacity: 0; transform: scale(.2); filter: blur(8px); } 55% { opacity: 1; filter: none; } }
.np.hide, .card.hide { opacity: 0; transform: scale(.88); filter: blur(4px); }
.np.gone, .card.gone { opacity: 0; transform: translateY(6px) scale(.97); }
.np-hd { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; font-size: 11.5px; color: var(--ink2); }
.np-kind { display: inline-flex; align-items: center; gap: 5px; flex: none; font-weight: 600; color: var(--accent); }
.np-kind svg.ic { width: 13px; height: 13px; stroke-width: 1.9; }
.np-kind svg.ic path[fill] { stroke: none; }
.np-ctx { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-list { display: flex; flex-direction: column; gap: 1px; }
.np-list.slide { animation: slideL .32s var(--soft); }
.np-list.slideb { animation: slideR .32s var(--soft); }
@keyframes slideL { from { opacity: 0; transform: translateX(18px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(-18px); } }
.np-row { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 5px 0 6px; border-radius: 8px; transition: background-color .16s; }
.np-row.sel { background: var(--accent); color: #fff; }
.np-ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: rgba(118, 118, 128, .1); color: rgba(29, 29, 31, .7); }
.np-ic svg.ic { width: 15px; height: 15px; }
.np-ic svg.fi { width: 22px; height: 22px; }
.np-row.sel .np-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.np-tt { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.np-t { flex: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.np-d { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--ink2); }
.np-row.sel .np-d { color: rgba(255, 255, 255, .78); }
.np-k { display: flex; gap: 3px; flex: none; }
.np-more { display: flex; color: var(--ink3); padding-right: 4px; }
.np-more svg.ic { width: 12px; height: 12px; stroke-width: 2.2; }
.np-n { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 1px; flex: none; border-radius: 50%; background: rgba(118, 118, 128, .12); font-size: 11.5px; font-weight: 700; color: rgba(29, 29, 31, .62); }
.np-n svg.ic { width: 12px; height: 12px; stroke-width: 2.6; }
.np-row.sel .np-n { background: #fff; color: var(--accent); }
.np-row.done .np-n { background: var(--green); color: #fff; }
.np-row.done .np-t { color: var(--ink2); font-weight: 400; }
.np-row.next { opacity: .78; }
.np-row.nudge { animation: nudge .5s ease-in-out; }
@keyframes nudge { 15% { transform: translateX(-5px); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
.np-back { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 5px 0 6px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.np-back svg.ic { width: 13px; height: 13px; stroke-width: 2.2; }
.np-back span { flex: 1; }
.np-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; margin-top: 3px; padding: 0 6px 0 4px; font-size: 11.5px; color: var(--ink2); }
.why { display: inline-flex; align-items: center; gap: 5px; height: 22px; min-width: 0; padding: 0 9px 0 7px; border-radius: 11px; background: rgba(118, 118, 128, .1); }
.why svg.ic { width: 13px; height: 13px; flex: none; }
.why b { flex: none; font-weight: 600; color: rgba(29, 29, 31, .78); }
.why span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-hint { flex: none; white-space: nowrap; color: var(--ink3); }
.np-note { display: none; }
.np-note.on { display: flex; align-items: center; gap: 6px; height: 30px; margin: 4px 0 0; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; background: rgba(255, 149, 0, .13); color: #b25f00; }
.np-note.on.ok { background: rgba(52, 199, 89, .14); color: #1d7f3a; }
.np-note.in { animation: popIn .4s var(--spring) both; }
.np-note svg.ic { width: 14px; height: 14px; }
.np.dark .np-row:not(.sel) .np-ic { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.np.dark .np-d, .np.dark .np-hd, .np.dark .np-ft { color: rgba(235, 235, 245, .6); }
.np.dark .why { background: rgba(255, 255, 255, .1); }
.np.dark .why b { color: rgba(255, 255, 255, .85); }
.np.dark .np-hint { color: rgba(235, 235, 245, .35); }
.np.dark .np-n { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.np.dark .np-back, .np.dark .np-more { color: rgba(235, 235, 245, .6); }
.np.dark .np-row.done .np-t { color: rgba(235, 235, 245, .6); }
.np.dark .np-row.done .np-n { background: var(--green); color: #fff; }
.np.dark .kh:not(.on) { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- cards */
.card { position: absolute; z-index: 55; padding: 6px; border-radius: 18px; transition: opacity .26s, transform .4s var(--spring), filter .26s; }
.cd-hd { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; font-size: 12px; color: var(--ink2); }
.cd-hd b { color: var(--ink); font-size: 12.5px; }
.cd-body { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04); }
.cd-ft { display: flex; align-items: center; gap: 6px; padding: 8px 4px 2px; font-size: 11.5px; color: var(--ink2); }
.sp { flex: 1; }
.rb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(118, 118, 128, .1); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.rb .kh { height: 18px; min-width: 20px; padding: 0 5px; }
.rb.pri { padding-right: 5px; background: var(--accent); color: #fff; }
.rb.on { box-shadow: 0 0 0 2px rgba(0, 122, 255, .4); }

/* talk card (说) */
.tk-hd { display: flex; padding: 2px 2px 6px; }
.seen { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px 0 9px; border-radius: 12px; background: rgba(118, 118, 128, .1); font-size: 11.5px; color: var(--ink2); }
.seen svg.ic { width: 13px; height: 13px; }
.seen-x { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(118, 118, 128, .16); }
.seen-x svg.ic { width: 9px; height: 9px; stroke-width: 2.6; }
.tk-body { padding: 12px 14px 14px; border-radius: 12px; background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04); }
.tk-q { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.tk-q:empty { display: none; }
.tk-q::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(60, 60, 67, .3); }
.tk-a { font-size: 14px; line-height: 1.68; color: var(--ink); white-space: pre-wrap; }
.tk-a:empty { display: none; }
.tk-a + .tk-q { margin-top: 12px; padding-top: 10px; box-shadow: 0 -.5px 0 var(--sep); }
.tk-a.streaming::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: blink .9s steps(1) infinite; }
.tk-a .num { font-weight: 600; }
.tk-ft { display: flex; align-items: center; gap: 6px; padding: 8px 2px 1px; }
.tk-esc { display: flex; align-items: center; gap: 5px; padding-right: 4px; font-size: 11px; color: var(--ink2); }
.src { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 5px 0 8px; margin: 2px 6px 0 0; border-radius: 13px; background: rgba(118, 118, 128, .1); font-size: 12px; font-weight: 500; color: var(--ink); vertical-align: middle; }
.src .appic { width: 16px; height: 16px; }
.src small { font-size: 11px; font-weight: 400; color: var(--ink2); }
.src.on { background: var(--accent); color: #fff; }
.src.on small { color: rgba(255, 255, 255, .78); }
.src.on .kh { background: rgba(255, 255, 255, .24); color: #fff; }
.mini-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: rgba(118, 118, 128, .1); font-size: 11.5px; font-weight: 500; color: var(--ink); }
.mini-chip svg.ic { width: 13px; height: 13px; color: var(--accent); }
.mini-chip.acc { background: rgba(0, 122, 255, .12); color: var(--accent); }

/* ---------------------------------------------------------------- highlight ring (指) */
.ring { position: absolute; z-index: 45; pointer-events: none; transition: opacity .3s; }
.ring svg { position: absolute; inset: 0; overflow: visible; }
.ring rect { fill: rgba(10, 132, 255, .06); stroke: var(--accent-d); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ring.in rect { animation: ringDraw .8s var(--soft) both; }
@keyframes ringDraw { from { stroke-dashoffset: 1; fill: rgba(10, 132, 255, 0); } }
.ring-glow { position: absolute; inset: -4px; border-radius: calc(var(--r) + 4px); box-shadow: 0 0 0 4px rgba(10, 132, 255, .1); }
.ring-pulse { position: absolute; inset: 0; border-radius: var(--r); box-shadow: 0 0 0 2px rgba(10, 132, 255, .5); animation: ringPulse 1.9s ease-out infinite .6s; opacity: 0; }
@keyframes ringPulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.14); } }
.ring.hide { opacity: 0; }
.ring.orange rect { stroke: #ff9f0a; fill: rgba(255, 159, 10, .06); }
.ring.orange .ring-pulse { box-shadow: 0 0 0 2px rgba(255, 159, 10, .5); }
.ring.orange .ring-glow { box-shadow: 0 0 0 4px rgba(255, 159, 10, .1); }

/* ---------------------------------------------------------------- edge glow (做) */
.edge { position: absolute; inset: 0; z-index: 80; pointer-events: none; transition: opacity .45s; }
.edge.in { animation: fadeIn .5s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } }
.edge.hide { opacity: 0; }
.edge-ring { position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(10, 132, 255, .92), inset 0 0 0 7px rgba(10, 132, 255, .12); animation: edgeBreath 2.4s ease-in-out infinite; }
@keyframes edgeBreath { 50% { box-shadow: inset 0 0 0 3px rgba(10, 132, 255, .6), inset 0 0 0 7px rgba(10, 132, 255, .06); } }
.edge.paused .edge-ring { animation: none; box-shadow: inset 0 0 0 3px rgba(255, 159, 10, .92), inset 0 0 0 7px rgba(255, 159, 10, .12); }
.edge-pill { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 5px 0 12px; border-radius: 15px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.edge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-d); box-shadow: 0 0 0 3px rgba(10, 132, 255, .3); animation: recPulse 1.4s ease-in-out infinite; }
.edge.paused .edge-dot { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .3); }
.edge-k { display: flex; align-items: center; gap: 4px; padding-left: 4px; font-size: 11.5px; color: rgba(235, 235, 245, .6); }

/* ---------------------------------------------------------------- mouse pointer */
.ptr { position: absolute; left: 0; top: 0; z-index: 90; pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .35)); }
.ptr svg { position: absolute; left: -5.5px; top: -2.6px; }
.ptr.hide { opacity: 0; }
.ptr-click { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .16); opacity: 0; }
.ptr.click .ptr-click { animation: clickR .5s ease-out; }
@keyframes clickR { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.2); } }

/* ---------------------------------------------------------------- key-press visualiser */
.kv { position: absolute; left: 0; right: 0; bottom: 90px; height: 58px; z-index: 600; display: flex; justify-content: center; pointer-events: none; }
.chrome-0 .kv { bottom: 28px; }
.kv.high { bottom: 296px; }
.kv-g {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 17px;
  background: rgba(28, 28, 32, .64);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .2), 0 0 0 .5px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .45);
  transition: opacity .3s, transform .3s;
}
.kv-g.in { animation: kvIn .4s var(--spring) both; }
@keyframes kvIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.kv-g.out { opacity: 0; transform: translateY(6px) scale(.96); }
.kc {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 11px;
  border-radius: 10px; background: #f6f6f8; color: #1d1d1f; font: 500 17px/1 var(--font);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(0, 0, 0, .08), inset 0 0 0 .5px rgba(0, 0, 0, .14);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.kc svg.ic { width: 17px; height: 17px; stroke-width: 2; }
.kc small { font-size: 12.5px; font-weight: 500; color: rgba(0, 0, 0, .58); }
.kc small.only { font-size: 14px; color: #1d1d1f; }
.kc.w { min-width: 70px; }
.kc.sp { min-width: 140px; }
.kc.p { animation: kcPress .36s ease-out both; animation-delay: calc(var(--i) * 70ms + 60ms); }
@keyframes kcPress { 40% { transform: translateY(2px); background: #e0e0e6; box-shadow: 0 0 0 rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(0, 0, 0, .16); } }
.kv-g.held .kc { transform: translateY(2px); background: #e3e3e8; box-shadow: 0 0 0 rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(0, 0, 0, .16); animation: none; }
.kv-g.held .kv-cap::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: #ff453a; vertical-align: 2px; animation: recPulse 1.2s infinite; }
.kv-cap { padding: 0 10px 0 6px; font-size: 14px; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .95); }

/* ---------------------------------------------------------------- clipboard strip (⇧⌘V) */
.clip { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 252px; z-index: 65; border-radius: 24px; transition: transform .5s var(--spring), opacity .3s; }
.clip.in { animation: clipIn .55s var(--spring) both; }
@keyframes clipIn { from { transform: translateY(290px); opacity: .5; } }
.clip.hide { transform: translateY(300px); opacity: 0; }
.clip-bar { display: flex; align-items: center; gap: 12px; height: 30px; margin-top: 14px; padding: 0 14px; }
.clip-search { display: flex; align-items: center; gap: 6px; width: 220px; height: 28px; padding: 0 8px 0 10px; border-radius: 14px; background: rgba(118, 118, 128, .11); font-size: 13px; }
.clip-search svg.ic { width: 13px; height: 13px; color: var(--ink2); stroke-width: 2; }
.cs-ph { color: var(--ink3); }
.clip.has-q .cs-ph { display: none; }
.clip-search .caret { width: 2px; height: 15px; margin-left: -5px; border-radius: 1px; background: var(--accent); animation: blink 1.06s steps(1) infinite; }
.clip-chips { display: flex; gap: 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 500; color: rgba(29, 29, 31, .72); }
.chip svg.ic { width: 12px; height: 12px; }
.chip.on { background: rgba(0, 122, 255, .15); color: var(--accent); }
.clip-hints { display: flex; gap: 11px; white-space: nowrap; font-size: 11px; color: var(--ink2); }
.clip-hints b { margin-right: 3px; font-weight: 600; }
.clip-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ink2); }
.clip-btn svg.ic { width: 15px; height: 15px; }
.clip-btn svg.ic path[fill] { fill: none; stroke: currentColor; }
.clip-strip { display: flex; padding: 14px 14px 16px; }
.cc-card {
  display: flex; flex-direction: column; flex: none; width: 196px; height: 178px; margin-right: 12px; overflow: hidden;
  border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .07);
  transition: width .45s var(--soft), margin .45s var(--soft), opacity .3s, box-shadow .2s, transform .45s var(--spring);
}
.cc-card.off { width: 0; margin-right: 0; opacity: 0; box-shadow: none; }
.cc-card.sel { box-shadow: 0 0 0 2.5px var(--accent), 0 6px 16px -6px rgba(0, 122, 255, .45); }
.cc-hd { display: flex; align-items: center; gap: 7px; min-width: 196px; padding: 10px 10px 8px; flex: none; }
.cc-app .appic { display: block; width: 18px; height: 18px; }
.cc-meta { flex: 1; min-width: 0; }
.cc-meta b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.cc-meta span { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink2); }
.cc-pin { display: flex; color: var(--orange); }
.cc-pin svg.ic { width: 12px; height: 12px; }
.cc-body { flex: 1; min-width: 196px; padding: 0 10px; overflow: hidden; }
.cb-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.cb-link b { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 15px; font-weight: 600; }
.cb-link b svg.ic { width: 13px; height: 13px; color: var(--accent); stroke-width: 2; }
.cb-link span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--ink2); word-break: break-all; }
.cb-img { height: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.cb-img .mshot { font-size: 6.8px; }
.cb-img .ms-m { margin-bottom: 3px; }
.cb-file { display: flex; flex-direction: column; gap: 6px; }
.cb-file b { font-size: 12.5px; font-weight: 500; }
.cb-color i { display: block; height: 62px; margin-top: 2px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cb-color b { display: block; margin-top: 8px; font: 600 13px var(--mono); }
.cc-ft { display: flex; align-items: center; gap: 6px; min-width: 176px; height: 20px; margin: 6px 10px 8px; flex: none; }
.cc-f { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; color: var(--ink3); }
.cc-hit { display: none; }
.cc-card.ocr .cc-f { display: none; }
.cc-card.ocr .cc-hit { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-right: auto; padding: 0 7px 0 5px; border-radius: 9px; background: rgba(255, 204, 0, .24); color: #8a5a00; font-size: 10.5px; font-weight: 600; }
.cc-hit svg.ic { width: 11px; height: 11px; }
.cc-card .kh { height: 18px; min-width: 26px; font-size: 10.5px; }
.cc-card.ocr .ocr-w { background: rgba(255, 214, 10, .6); box-shadow: 0 0 0 1.5px rgba(255, 190, 0, .85); border-radius: 2px; }