/* 一起运动 (docs/WORKOUT_TOGETHER.md + docs/workout-v2-preview.html): the App is gone - this is the
   chat-embedded picker, timer overlay, banner, chat card and companion-line tag. Glass look matches
   .app-confirm-ov/.app-confirm (index.html) and the theme's --pri/--pri-deep/--pri-pale/--bg/--surface
   tokens; --acc in the design docs has no matching token in this codebase, so --pri-deep stands in
   for it throughout (gradients, highlights) - --pri-deep already reads warmer/darker than --pri so
   the two-stop gradients keep the same "shifts to a second hue" feel the design asks for. */

.wk-ic{width:17px;height:17px;flex-shrink:0}

/* ── §2 选类型: centered glass sheet, same overlay class as appConfirm ──
   z-index stays BELOW .app-confirm-ov (500, index.html): §6's 删除这次记录 opens appConfirm on top
   of this same workout-pick-ov class (openWorkoutCardDetail), which must not render behind it. */
.workout-pick-ov{z-index:490}
.workout-pick{width:100%;max-width:340px;max-height:86dvh;overflow-y:auto;border-radius:28px;padding:20px 18px;text-align:center;color:var(--ink);background:rgba(255,255,255,.9);border:1px solid #fff;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 30px 60px -20px rgba(40,60,95,.5);position:relative}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-pick{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:rgba(255,255,255,.1)}}
:root[data-theme="dark"] .workout-pick{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:rgba(255,255,255,.1)}
.workout-pick-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;background:var(--surface-alt);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.workout-pick-close svg{width:14px;height:14px}
.workout-pick-head{margin-bottom:4px}
.workout-pick-avatar{display:inline-flex;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--surface-alt)}
.workout-pick-avatar img{width:100%;height:100%;object-fit:cover}
.workout-pick-head h2{font:600 17px var(--font-display);margin:8px 0 2px}
.workout-pick-head p{font-size:12.5px;color:var(--ink2)}
.workout-pick-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.workout-pick-type{border:1.5px solid transparent;border-radius:14px;background:var(--surface-alt);color:var(--ink);font-family:inherit;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px}
.workout-pick-type-ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.workout-pick-type-ic svg{width:20px;height:20px}
.workout-pick-type.sel{background:var(--pri-pale);border-color:var(--pri-deep);color:var(--ink)}
.workout-pick-duration-label{display:block;font-size:12px;color:var(--ink2);text-align:left;margin-bottom:7px}
.workout-pick-duration-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.workout-pick-mins{border:1.5px solid transparent;border-radius:12px;background:var(--surface-alt);color:var(--ink2);font-family:inherit;font-size:12px;padding:9px 0}
.workout-pick-mins.sel{background:var(--pri-pale);border-color:var(--pri-deep);color:var(--ink)}
.workout-pick-start{width:100%;height:50px;margin-top:16px;border:1px solid color-mix(in srgb,var(--pri) 30%,transparent);border-radius:25px;background:#fff;color:var(--accent-text);font:600 15px var(--font-display);box-shadow:0 6px 14px -8px rgba(40,55,80,.4)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-pick-start{background:var(--surface)}}
:root[data-theme="dark"] .workout-pick-start{background:var(--surface)}
.workout-pick-hint{margin-top:10px;font-size:11.5px;color:var(--ink2)}

/* ── §8 角色主页「一起运动」列表弹窗 (reuse .workout-pick) ── */
.workout-list-pop{max-width:320px}
.workout-list-rows{margin-top:14px;display:flex;flex-direction:column;gap:2px;text-align:left;max-height:50vh;overflow-y:auto}
.workout-list-row{display:flex;align-items:center;gap:10px;border:none;background:none;padding:11px 4px;border-bottom:1px solid color-mix(in srgb,var(--ink2) 12%,transparent);color:var(--ink);font-family:inherit;font-size:13.5px}
.workout-list-row svg{width:18px;height:18px;flex-shrink:0;color:var(--ink2)}
.workout-list-row-date{margin-left:auto;font-size:12px;color:var(--ink2)}

/* ── §6 运动详情: 一张小小的记录卡 (docs/workout-v2-preview.html) ── */
.workout-detail-pop{max-width:320px;padding:0;text-align:left;overflow:hidden}
.workout-detail-x{position:absolute;right:14px;top:14px;z-index:2;width:30px;height:30px;border:none;border-radius:50%;background:rgba(255,255,255,.7);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.workout-detail-x svg{width:14px;height:14px}
.workout-detail-head{position:relative;overflow:hidden;padding:18px 18px 16px;background:linear-gradient(140deg,color-mix(in srgb,var(--pri) 24%,white),color-mix(in srgb,var(--pri-deep) 30%,white))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-detail-head{background:color-mix(in srgb,var(--pri) 32%,var(--surface))}}
:root[data-theme="dark"] .workout-detail-head{background:color-mix(in srgb,var(--pri) 32%,var(--surface))}
.workout-detail-head::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none}
.workout-detail-kicker{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent-text);font-weight:600;position:relative}
.workout-detail-big{display:flex;align-items:baseline;gap:6px;margin-top:8px;position:relative}
.workout-detail-big b{font:400 46px var(--font-display);color:var(--ink)}
.workout-detail-big span{font-size:14px;color:var(--ink2)}
.workout-detail-head small{display:block;margin-top:4px;font-size:12px;color:var(--ink2);position:relative}
.workout-detail-stats{display:flex;gap:8px;padding:14px 18px 0}
.workout-detail-stats div{flex:1;padding:10px;border-radius:14px;background:var(--pri-pale);text-align:center;font-size:11px;color:var(--ink2)}
.workout-detail-stats b{display:block;font:500 18px var(--font-display);color:var(--ink);margin-top:2px}
.workout-detail-timeline{padding:14px 18px 4px}
.workout-tl-row{display:flex;gap:10px;align-items:flex-start;padding-bottom:12px;position:relative}
.workout-tl-row:not(:last-child):before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:1.5px;background:color-mix(in srgb,var(--pri) 25%,transparent)}
.workout-tl-dot{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--pri);background:#fff;margin-top:4px;flex-shrink:0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-tl-dot{background:var(--surface)}}
:root[data-theme="dark"] .workout-tl-dot{background:var(--surface)}
.workout-tl-row div{flex:1;min-width:0}
.workout-tl-row em{font-style:normal;font-size:11px;color:var(--accent-text)}
.workout-tl-row p{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.workout-tl-row.reply .workout-tl-dot{border-color:color-mix(in srgb,var(--pri-deep) 70%,#F7D27A 30%);background:color-mix(in srgb,var(--pri-deep) 40%,#F7D27A 60%)}
.workout-detail-actions{display:flex;gap:10px;align-items:center;padding:6px 18px 18px}
.workout-detail-again{flex:1;height:46px;border:none;border-radius:23px;background:#fff;color:var(--accent-text);font:600 14.5px var(--font-display);box-shadow:0 8px 18px -10px rgba(60,85,125,.45)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-detail-again{background:var(--surface)}}
:root[data-theme="dark"] .workout-detail-again{background:var(--surface)}
.workout-detail-delete-link{font-size:12.5px;color:#b8706a;padding:0 6px;text-decoration:none;white-space:nowrap}

/* ── §3 计时页: full-screen glass layer over the chat ──
   z-index stays BELOW .app-confirm-ov (z-index:500, index.html) - 结束/appConfirm must render on top of this. */
.workout-overlay{position:fixed;inset:0;z-index:490;display:flex;flex-direction:column;align-items:center;max-width:430px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);color:var(--ink)}
.workout-overlay-bg{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),color-mix(in srgb,var(--bg) 85%,transparent));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);z-index:-1}
/* top: just the collapse circle + a balancing spacer, no pill, no "v" glyph */
.workout-overlay-top{width:100%;display:flex;align-items:center;justify-content:space-between}
.workout-overlay-collapse{width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.72);border:1px solid #fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(60,85,125,.3)}
.workout-overlay-collapse svg{width:19px;height:19px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-collapse{background:rgba(255,255,255,.12);border-color:transparent}}
:root[data-theme="dark"] .workout-overlay-collapse{background:rgba(255,255,255,.12);border-color:transparent}
.workout-overlay-top-spacer{width:38px;height:38px}
.workout-overlay-title{text-align:center;margin-top:22px}
.workout-overlay-title b{display:flex;align-items:center;gap:6px;justify-content:center;font:600 16px var(--font-display);color:var(--ink)}
.workout-overlay-title small{display:block;font-size:12px;color:var(--ink2);margin-top:3px}

/* Ring is a real SVG circle (stroke-dasharray), not a conic-gradient div - the glass centre
   (rgba(255,255,255,.85) / --surface 85% dark) now fully hides it instead of letting it show
   through as a pie wedge. */
.workout-overlay-ring{--size:260px;width:var(--size);height:var(--size);margin:22px auto 0;position:relative}
.workout-overlay-ring svg{position:absolute;inset:0;width:100%;height:100%;transition:all .3s}
.workout-ring-track{stroke:color-mix(in srgb,var(--pri) 16%,transparent)}
.workout-ring-fill{stroke:var(--pri-deep);transition:stroke-dasharray .3s}
.workout-overlay-ring.paused{opacity:.55}
.workout-overlay-ring-inner{position:absolute;inset:16px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-ring-inner{background:color-mix(in srgb,var(--surface) 85%,transparent)}}
:root[data-theme="dark"] .workout-overlay-ring-inner{background:color-mix(in srgb,var(--surface) 85%,transparent)}
.workout-overlay-ring-kicker{font-size:12.5px;color:var(--ink2)}
.workout-overlay-ring-time{font-family:var(--font-display);font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.workout-overlay-ring-sub{font-size:12px;color:var(--ink2)}
.workout-overlay-line{display:flex;align-items:flex-start;gap:8px;max-width:320px;margin-top:30px}
.workout-overlay-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface-alt)}
.workout-overlay-av img{width:100%;height:100%;object-fit:cover}
.workout-overlay-bubble{background:rgba(255,255,255,.65);border-radius:16px;padding:10px 13px;font-size:14.5px;line-height:1.5;color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-bubble{background:rgba(255,255,255,.12)}}
:root[data-theme="dark"] .workout-overlay-bubble{background:rgba(255,255,255,.12)}

/* §9 三个按钮: icon circle + label underneath, label is always --ink2 12px regardless of circle colour */
.workout-overlay-actions{width:100%;display:flex;align-items:flex-start;justify-content:space-around;margin-top:auto}
.workout-overlay-actions.failed{gap:10px}
.workout-overlay-btn{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:7px;font-family:inherit}
.workout-overlay-btn span{font-size:12px;color:var(--ink2);font-weight:500}
.workout-overlay-btn i{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink2);box-shadow:var(--shadow)}
.workout-overlay-btn i svg{width:22px;height:22px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-btn i{background:var(--surface)}}
:root[data-theme="dark"] .workout-overlay-btn i{background:var(--surface)}
.workout-overlay-btn.big i{width:76px;height:76px;background:color-mix(in srgb,var(--pri) 22%,white);color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-btn.big i{background:color-mix(in srgb,var(--pri) 25%,var(--surface));color:var(--ink)}}
:root[data-theme="dark"] .workout-overlay-btn.big i{background:color-mix(in srgb,var(--pri) 25%,var(--surface));color:var(--ink)}
.workout-overlay-btn.end i{background:rgba(184,112,106,.1);color:#b8706a}
.workout-overlay-btn.end span{color:#b8706a}
.workout-overlay-discard{margin-top:14px;border:none;background:none;color:var(--ink2);font-size:12.5px;text-decoration:underline}
.workout-overlay-text-btn{flex:1;height:48px;border-radius:24px;border:none;background:#fff;color:var(--ink);font:600 14px var(--font-display);box-shadow:var(--shadow)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-overlay-text-btn{background:var(--surface)}}
:root[data-theme="dark"] .workout-overlay-text-btn{background:var(--surface)}
.workout-overlay-text-btn.danger{color:#b8706a}

/* ── §4 收起成横幅: outside the message scroll area, pinned right under the top bar, above any
   message content (a workout/transfer card's own box-shadow can otherwise read as "on top"). ── */
.workout-banner{position:relative;z-index:5;flex-shrink:0;margin:0 14px 6px;border-radius:24px;background:rgba(255,255,255,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #fff;box-shadow:0 10px 22px -12px rgba(60,85,125,.45);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-banner{background:rgba(255,255,255,.1);border-color:transparent}}
:root[data-theme="dark"] .workout-banner{background:rgba(255,255,255,.1);border-color:transparent}
.workout-banner-main{flex:1;display:flex;align-items:center;gap:8px;border:none;background:none;color:var(--ink);font-family:inherit;text-align:left;min-width:0}
.workout-banner-dot{width:8px;height:8px;border-radius:50%;background:#6f9a7c;flex-shrink:0;animation:workoutBannerPulse 1.6s ease-in-out infinite}
.workout-banner-dot.paused{background:var(--ink2);animation:none}
.workout-banner-dot.failed{background:#b8706a;animation:none}
@keyframes workoutBannerPulse{0%,100%{box-shadow:0 0 0 0 rgba(111,154,122,.45)}50%{box-shadow:0 0 0 5px rgba(111,154,122,0)}}
.workout-banner-time{font-family:var(--font-display);font-size:14.5px;font-variant-numeric:tabular-nums;flex-shrink:0}
/* never truncated - a short clause like "跑步中 · 点开看计时" must read in full, not clip to an ellipsis */
.workout-banner-label{font-size:12.5px;color:var(--ink2);min-width:0}
.workout-banner-main.failed .workout-banner-label{color:#b8706a;font-weight:600}
.workout-banner-toggle{width:28px;height:28px;border:none;border-radius:50%;background:var(--surface-alt);color:var(--ink);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── §6 聊天里的运动卡片 ── */
.workout-chat-card{width:230px;border:none;border-radius:20px;background:rgba(255,255,255,.75);box-shadow:var(--shadow);font-family:inherit;text-align:left;color:var(--ink);overflow:hidden;padding:0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-chat-card{background:rgba(255,255,255,.08)}}
:root[data-theme="dark"] .workout-chat-card{background:rgba(255,255,255,.08)}
.workout-chat-card-top{display:block;position:relative;overflow:hidden;padding:13px 14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 24%,white),color-mix(in srgb,var(--pri-deep) 30%,white))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-chat-card-top{background:color-mix(in srgb,var(--pri) 32%,var(--surface))}}
:root[data-theme="dark"] .workout-chat-card-top{background:color-mix(in srgb,var(--pri) 32%,var(--surface))}
.workout-chat-card-top::after{content:'';position:absolute;right:-24px;top:-24px;width:72px;height:72px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none}
.workout-chat-card-kicker{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--accent-text);font-weight:700;position:relative}
.workout-chat-card-kicker svg{width:13px;height:13px}
.workout-chat-card-mins{display:block;margin-top:8px;font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--ink);position:relative}
.workout-chat-card-mins small{font-size:14px;font-weight:400;color:var(--ink2);margin-left:3px}
.workout-chat-card-bottom{display:block;padding:9px 14px;font-size:11.5px;color:var(--ink2)}
.workout-chat-card-row{display:flex;align-items:center;justify-content:space-between}
.workout-chat-card-with{display:flex;align-items:center;gap:6px;margin-top:6px}
.workout-chat-card-av{width:20px;height:20px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface-alt);display:inline-flex}
.workout-chat-card-av img{width:100%;height:100%;object-fit:cover}

/* ── workout_line: a plain text bubble with a small stage tag above it ── */
.workout-line-bub{display:flex;flex-direction:column;gap:3px}
.workout-line-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--accent-text);opacity:.85}
.workout-line-tag svg{width:11px;height:11px}

/* ── §7 TA 主动约你: text bubble + invite card, two buttons ── */
.workout-invite-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.workout-invite-card{width:210px}
.workout-invite-type{display:block;margin-top:6px;font:400 22px var(--font-display);color:var(--ink)}
.workout-invite-actions{display:flex;gap:6px;padding:10px 14px 12px}
.workout-invite-btn{flex:1;height:34px;border-radius:17px;border:1px solid #fff;background:rgba(255,255,255,.8);color:var(--accent-text);font:600 13px inherit}
.workout-invite-btn.c{color:var(--ink2);font-weight:400;background:rgba(255,255,255,.45)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-invite-btn{background:var(--surface-alt);border-color:transparent}}
:root[data-theme="dark"] .workout-invite-btn{background:var(--surface-alt);border-color:transparent}
.workout-invite-card.declined{opacity:.6}
.workout-invite-done{display:block;width:100%;text-align:center;padding:10px 0;font-size:12.5px;color:var(--ink2)}
/* ===== Workout polish (hand-written, keep LAST) =====
   1) .workout-banner sets display:flex, which beat the [hidden] attribute -> an empty glass bar sat under
      every chat header with no workout running.  2) card / detail header: warm gradient like the mock
      (pri -> acc) instead of grey-blue, and a much fainter ring (it read as a broken line, bright white in dark).
   3) dark ✕ on the detail card was a light grey disc. */
.workout-banner[hidden]{display:none}
.workout-detail-head,.workout-chat-card-top{background:linear-gradient(140deg,color-mix(in srgb,var(--pri) 16%,white),color-mix(in srgb,var(--amber) 22%,white))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.workout-detail-head,.workout-chat-card-top){background:linear-gradient(140deg,color-mix(in srgb,var(--pri) 20%,var(--surface)),color-mix(in srgb,var(--amber) 12%,var(--surface)))}}
:root[data-theme="dark"] :is(.workout-detail-head,.workout-chat-card-top){background:linear-gradient(140deg,color-mix(in srgb,var(--pri) 20%,var(--surface)),color-mix(in srgb,var(--amber) 12%,var(--surface)))}
.workout-detail-head::after,.workout-chat-card-top::after{border:1px solid rgba(255,255,255,.55)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.workout-detail-head,.workout-chat-card-top)::after{border-color:rgba(255,255,255,.1)}}
:root[data-theme="dark"] :is(.workout-detail-head,.workout-chat-card-top)::after{border-color:rgba(255,255,255,.1)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .workout-detail-x{background:rgba(255,255,255,.1);color:var(--ink2)}}
:root[data-theme="dark"] .workout-detail-x{background:rgba(255,255,255,.1);color:var(--ink2)}