/* Meeting recorder (recorder.js) and the recording block in a note (meeting.js). Theme colours and easing only. */

/* ---------- the recording screen ---------- */
.rec-pane { position: fixed; inset: 0; z-index: 45; background: var(--desk); display: flex; flex-direction: column;
            padding-top: var(--safe-t, 0px); padding-bottom: var(--safe-b, 0px);
            opacity: 0; transform: translateY(14px); transition: opacity .28s var(--ease), transform .32s var(--ease); }
.rec-pane.in { opacity: 1; transform: none; }
.rec-pane[hidden] { display: none; }
.rc-top { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.rc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(201,48,44,.5); animation: rcPulse 1.6s ease-out infinite; }
.rec-pane.paused .rc-dot { animation: none; background: var(--pencil); }
@keyframes rcPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.45); } 100% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } }
.rc-time { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; min-width: 70px; }
.rc-level { width: 240px; height: 32px; flex: none; }
.rc-state { font-size: 13px; color: var(--pencil); }
.rec-pane.offline .rc-state { color: #B4540A; }
.rc-sp { flex: 1; }
.rc-btn { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.rc-btn:hover { background: var(--desk); }
.rc-btn:disabled { opacity: .5; cursor: default; }
.rc-stop { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.rc-stop:hover { background: #D33C41; }
.rc-stop[data-sure] { background: #B42318; }
.rc-seg { display: none; }
.rc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.rc-tx { overflow-y: auto; padding: 18px 28px 40vh; }
.rc-now { position: sticky; top: -18px; margin: -18px -28px 12px; padding: 10px 28px; background: rgba(247,248,250,.94); backdrop-filter: blur(8px);
          font-size: 13px; color: var(--blue); min-height: 0; }
.rc-now:empty { display: none; }
.rc-lines { max-width: 760px; }
.rc-line { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 6px 0; line-height: 1.7; font-size: 16px; }
.rc-line .t { color: var(--pencil); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 4px; }
.rc-line.wait .x { color: var(--pencil); letter-spacing: 2px; }
.rc-line.fail .x, .rc-line.off .x { color: var(--pencil); font-size: 13px; }
.rc-line.gap .x { color: #B4540A; font-size: 13px; }
.rc-line.mark .x { color: var(--warn); font-weight: 600; }
.rc-line.fresh .x { animation: rcFresh .9s var(--ease) both; }
@keyframes rcFresh { from { opacity: .2; } to { opacity: 1; } }
.rc-pts { border-left: 1px solid var(--rule); background: #fff; overflow-y: auto; padding: 16px 18px 40px; }
.rc-pts-h { font-weight: 700; font-size: 15px; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.rc-pts-h small { font-weight: 400; color: #B4540A; font-size: 12px; }
.rc-col h4 { margin: 14px 0 6px; font-size: 12px; color: var(--pencil); font-weight: 600; letter-spacing: .04em; }
.rc-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-col li { font-size: 14px; line-height: 1.55; padding: 6px 10px; border-radius: 8px; background: var(--desk); }
.rc-col ul:empty::after { content: "—"; color: #C6CCD5; font-size: 13px; padding-left: 10px; }
.rc-col li.fresh { animation: rcPt 1.4s var(--ease) both; }
@keyframes rcPt { 0% { background: rgba(43,89,255,.22); transform: translateX(-4px); } 30% { transform: none; } 100% { background: var(--desk); } }
#rcTodo li { background: #FFF6E5; }
@keyframes rcPtTodo { 0% { background: rgba(43,89,255,.22); } 100% { background: #FFF6E5; } }
#rcTodo li.fresh { animation-name: rcPtTodo; }
.rc-empty { color: var(--pencil); font-size: 13px; margin-top: 18px; }

/* the global entry: right of the logo (desktop), in the top bar (phone). While recording: red, with the time */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-go { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
          border: 1px solid rgba(229,72,77,.35); background: #fff; color: var(--danger); font: inherit; font-size: 13px; font-weight: 600;
          cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.rec-go:hover { background: #FFF1F1; }
.rec-go:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.rg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.rec-go.on { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 0 0 1px var(--rule); }
.rec-go.on .rg-dot { background: #fff; animation: rgBlink 1.2s ease-in-out infinite; }
@keyframes rgBlink { 50% { opacity: .25; } }

/* "+录音" menu */
.rec-menu { position: fixed; z-index: 46; width: 260px; background: #fff; border-radius: 12px; padding: 6px;
            box-shadow: 0 0 0 1px var(--rule); animation: popIn .18s var(--ease) both; }
.rm-i { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; }
.rm-i:hover, .rm-i:focus-visible { background: var(--desk); outline: none; }
.rm-i strong { font-size: 14px; } .rm-i small { color: var(--pencil); font-size: 12px; }

/* ---------- the recording in a note ---------- */
.dr-blocks.doc > .blk.meet { padding: 14px 16px; }
.mt { display: grid; gap: 10px; }
.mt-h { display: flex; align-items: center; gap: 8px; }
.mt-ico { display: inline-flex; color: var(--pencil); }
.mt-star { display: inline-flex; vertical-align: -2px; margin-inline-end: 4px; color: var(--warn); }
.mt-name { font-weight: 600; font-size: 14px; }
.mt-st { font-size: 12px; color: var(--pencil); margin-left: auto; }
.mt-st.processing { color: var(--blue); }
.mt-st.processing::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
                            background: var(--blue); animation: dot 1s var(--ease) infinite; }
.mt-st.failed { color: #B42318; }
.mt-au { width: 100%; height: 40px; }
.mt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.mt-speed { border: 1px solid var(--rule); border-radius: 6px; padding: 2px 4px; font: inherit; font-size: 13px; background: #fff; }
.mt-q { border: 1px solid var(--rule); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 13px; width: 160px; }
.mt-sp { flex: 1; }
.mt-fold { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mt-fold::before { content: "▾ "; color: var(--pencil); }
.mt-fold[aria-expanded="false"]::before { content: "▸ "; }
.mt-lines { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--rule); padding-top: 6px; position: relative; }
.mt-l { display: grid; grid-template-columns: 52px auto 1fr; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1.65; font-size: 14px; }
.mt-l:hover { background: var(--desk); }
.mt-l:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mt-l.on { background: var(--blue-soft); }
.mt-l.on .mt-t { color: var(--blue); }
.mt-t { color: var(--pencil); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; }
.mt-who { color: var(--blue); font-weight: 600; white-space: nowrap; cursor: text; }
.mt-who:hover { text-decoration: underline; }
.mt-l:not(:has(.mt-who, .mt-guess)) { grid-template-columns: 52px 1fr; }   /* no name cell: two columns (a guess is a name cell too) */
.mt-l.gap .mt-x { color: #B4540A; font-size: 13px; }
.mt-l.mark .mt-x { color: var(--warn); font-weight: 600; }
.mt-empty, .mt-note { color: var(--pencil); font-size: 13px; margin: 6px 8px; }

/* ---------- phone ---------- */
.m-note-acts { display: none; }
body.mobile .m-note-acts { display: flex; gap: 8px; padding: 8px 0 4px; }
body.mobile .m-note-acts button { flex: 1; border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 10px; font: inherit; font-size: 15px; }
@media (max-width: 760px) {
  .rc-top { padding: 10px 14px; gap: 8px; }
  .rc-level { width: 120px; height: 28px; }
  .rc-state { order: 9; width: 100%; }
  .rc-btn { padding: 7px 12px; }
  .rc-seg { display: flex; gap: 4px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--rule); }
  .rc-seg button { flex: 1; border: 0; border-radius: 8px; padding: 7px; font: inherit; font-size: 14px; background: var(--desk); color: var(--pencil); }
  .rc-seg button.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
  .rc-body { display: block; position: relative; }
  .rc-tx, .rc-pts { position: absolute; inset: 0; }
  .rc-tx { padding: 14px 16px 40vh; }
  .rc-now { margin: -14px -16px 10px; padding: 8px 16px; top: -14px; }
  .rc-pts { border-left: 0; }
  .rec-pane[data-v="tx"] .rc-pts, .rec-pane[data-v="pts"] .rc-tx { display: none; }
  .rc-line { grid-template-columns: 46px 1fr; font-size: 16px; }
  .m-top-r { display: flex; align-items: center; }
  .m-top .rec-go { height: 30px; padding: 0 10px 0 9px; font-size: 13px; margin-right: 2px; }
  .m-top .m-btn { min-width: 44px; }
  .mt-q { width: 120px; }
  .mt-lines { max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-pane { transition: none; } .rc-dot, .rec-go.on .rg-dot { animation: none; }
  .rc-line.fresh .x, .rc-col li.fresh, .mt-st.processing::before { animation: none; }
}
/* after "结束": the sound is still being sent, in the background */
.rec-go.saving { background: #fff7e6; border-color: #f0c36d; color: #8a5a00; }
.rec-go.saving .rg-dot { background: #d98a00; animation: rgBlink 1.2s ease-in-out infinite; }

/* the speaker-name dialog (meeting.js speakerDialog): a floating card, float shadow and radius from the tokens */
.spk-dlg { position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; background: var(--sheet); border-radius: 14px; padding: 16px; box-shadow: var(--sh-float); box-sizing: border-box; }
.spk-dlg > .spk-t, .spk-dlg > .spk-in, .spk-dlg > .spk-foot { flex: none; }
.spk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; overscroll-behavior: contain; }
.spk-t { font-size: var(--fs-sm); color: var(--pencil); margin-bottom: 8px; }
.spk-in { width: 100%; box-sizing: border-box; height: 38px; border: 1px solid var(--rule); border-radius: 12px; padding: 0 12px; font-size: var(--fs-md); }
.spk-sugg { margin: 6px 0 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--sheet); }
.spk-sugg .at-row { width: 100%; }
.spk-hint { margin: 8px 0; padding: 8px 10px; background: var(--blue-soft); border-radius: 8px; font-size: var(--fs-sm); }
.spk-sw { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: var(--fs-sm); color: var(--pencil); }
.spk-warn { margin: 8px 0; padding: 8px 10px; background: var(--warn-soft); border-radius: 8px; font-size: var(--fs-sm); color: var(--ink); }
.spk-warn p { margin: 0 0 6px; }
.spk-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 760px) { .spk-in { height: 44px; font-size: var(--fs-lg); } .spk-foot .btn { height: 44px; min-width: 64px; } }

.pv-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: var(--fs-sm); }

/* "sounds like X?": a guess from the voice, one click to confirm (the check) or drop (the cross). New pattern, for the design group. */
.mt-guess { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.mt-gy { border: 0; background: var(--warn-soft); color: var(--warn); font: inherit; font-weight: 600; border-radius: 8px; padding: 0 8px; cursor: pointer; }
.mt-gn { border: 0; background: transparent; color: var(--pencil); border-radius: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mt-gy:hover, .mt-gn:hover { text-decoration: underline; }
@media (max-width: 760px) { .mt-gy, .mt-gn { min-height: 44px; } .mt-gn { width: 44px; } }

.mt-note.mt-ok { color: var(--done); }
.mt-note.mt-bad { color: var(--warn); font-weight: 600; }

/* 设置与数据 → 声纹：列表行样式照人物页（行、灰字状态、右侧按钮） */
.vp-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin: 12px 0; }
.vp-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--sheet); padding: 12px 16px; }
.vp-txt { min-width: 0; }
.vp-name { font-size: var(--fs-md); color: var(--ink); }
.vp-st { margin-top: 2px; font-size: var(--fs-sm); color: var(--pencil); }
.vp-st.failed, .vp-st.pending { color: var(--warn); }
.vp-acts { display: flex; gap: 8px; flex-shrink: 0; }
.vp-empty, .vp-warn, .vp-use { margin: 12px 0; font-size: var(--fs-sm); }
.vp-warn { color: var(--warn); }
@media (max-width: 760px) { .vp-row { flex-wrap: wrap; } .vp-acts { width: 100%; } .vp-acts .btn { flex: 1; height: 44px; } }

/* 命名说话人时「哪几句是他说的」：勾句子取样（转写混了别人的声音时用） */
.spk-pick { margin: 8px 0; }
.spk-pick-sum { margin: 4px 0 6px; font-size: var(--fs-sm); color: var(--pencil); }
.spk-pick-list { max-height: 200px; overflow: auto; border: 1px solid var(--rule); border-radius: 10px; }
.spk-pick-row { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: var(--fs-sm); cursor: pointer; }
.spk-pick-row + .spk-pick-row { border-top: 1px solid var(--rule); }
.spk-pick-row > span:nth-of-type(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .spk-pick-row { padding: 10px; } }

.spk-need { margin: 2px 0 6px 26px; font-size: var(--fs-sm); color: var(--pencil); }
.spk-sugg-t { padding: 6px 12px; font-size: var(--fs-sm); color: var(--pencil); }

/* 窗口很矮（13 寸笔记本、浏览器放大）也能用：标题和输入框、底部按钮固定，中间滚动；句子列表自己的高度跟着窗口 */
.spk-pick-list { max-height: min(200px, 28vh); }
.spk-why-more { margin-top: 6px; }
.spk-warn { padding: 6px 10px; }
.spk-pick-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spk-pick-row > span:nth-of-type(2) { flex: none; }
@media (max-height: 640px) { .spk-pick-list { max-height: 22vh; } .spk-dlg { padding: 12px; } }

.spk-fail { margin: 6px 0; }
.spk-fail .mt-note { margin: 0 0 4px; }