/* 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: #E5484D; box-shadow: 0 0 0 0 rgba(229,72,77,.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: 160px; height: 28px; color: var(--blue); }
.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: #E5484D; border-color: #E5484D; 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: #B5BDC9; 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: #B07A00; 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: #B5BDC9; 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: #C4373C; 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 #E5484D; outline-offset: 2px; }
.rg-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; flex: none; }
.rec-go.on { background: #E5484D; border-color: #E5484D; color: #fff; box-shadow: 0 6px 18px -8px rgba(229,72,77,.7); }
.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), 0 16px 40px -12px rgba(14,23,38,.3); 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 { font-size: 16px; }
.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)) { grid-template-columns: 52px 1fr; }
.mt-l.gap .mt-x { color: #B4540A; font-size: 13px; }
.mt-l.mark .mt-x { color: #B07A00; 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: 70px; }
  .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; }
}