/* =============================================================================
 * TRANSCRIBE CREATOR (transcribe-creator.php) — its pages, plus the mic and the
 * dictation bar the engine (assets/transcribe/glisting-transcribe.js) adds to every
 * Creative Studio and Glisting Portal page. The pages use the Creative Studio's look
 * (creative-studio.css: the --cs-* colours, buttons, badges); the mic and bar carry
 * their own colours so they look the same in the Portal. Light / Dark follows
 * body.wh-fv-sidebar-dark-mode.
 * ============================================================================= */

.wh-fv-tc { max-width: 1280px; }
.wh-fv-tc a { color: var(--cs-accent); }
.wh-fv-tc .wh-fv-cs-btn { text-decoration: none; }

/* ---------- Header ---------- */
.wh-fv-tc-head { display: flex; align-items: center; gap: 16px; margin: 14px 0 18px; flex-wrap: wrap; }
.wh-fv-tc-head h1 { margin: 2px 0 0; padding: 0; font-size: 26px; font-weight: 600; color: var(--cs-text); }
.wh-fv-tc-head .wh-fv-cs-crumb { margin: 0; }
.wh-fv-tc-head .wh-fv-cs-badge { width: 48px; height: 48px; border-radius: 12px; }
.wh-fv-tc-head .wh-fv-cs-badge .dashicons { color: #fff; font-size: 26px; width: 26px; height: 26px; }
.wh-fv-tc-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.wh-fv-tc-notice { margin: 0 0 16px !important; }
.wh-fv-tc-small { font-size: 12.5px; color: var(--cs-mute); margin: 6px 0 10px; }

/* ---------- Cards, columns ---------- */
.wh-fv-tc-card { background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 12px; padding: 18px 20px; margin: 0 0 18px; }
.wh-fv-tc-card h2 { font-size: 17px; margin: 0 0 8px; color: var(--cs-text); display: flex; align-items: center; gap: 8px; }
.wh-fv-tc-card h3 { font-size: 14px; margin: 18px 0 2px; color: var(--cs-text); }
.wh-fv-tc-card textarea { width: 100%; font-family: Consolas, Menlo, monospace; font-size: 13px; }
.wh-fv-tc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .wh-fv-tc-cols { grid-template-columns: 1fr; } }

/* ---------- Create Transcript ---------- */
.wh-fv-tc-studio { display: grid; gap: 16px; }
.wh-fv-tc-rec-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 14px; padding: 16px 18px; }
.wh-fv-tc-rec-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 24px 14px 18px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); box-shadow: 0 6px 18px rgba(124, 58, 237, .28); transition: transform .12s ease, box-shadow .12s ease; }
.wh-fv-tc-rec-btn:hover { transform: translateY(-1px); }
.wh-fv-tc-rec-btn .dashicons { font-size: 24px; width: 24px; height: 24px; }
.wh-fv-tc-rec-btn.is-on { background: #dc2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, .18); animation: wh-fv-tc-pulse 1.4s ease-in-out infinite; }
.wh-fv-tc-rec-info { flex: 1 1 260px; min-width: 0; }
.wh-fv-tc-wave { display: block; width: 100%; max-width: 480px; height: 56px; color: var(--a1, #7c3aed); }
.wh-fv-tc-rec-status { margin: 4px 0 0; color: var(--cs-mute); font-size: 13px; }
.wh-fv-tc-rec-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-fv-tc-upload { cursor: pointer; }

.wh-fv-tc-doc { background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 14px; overflow: hidden; }
.wh-fv-tc-title { display: block; width: 100%; border: 0 !important; border-bottom: 1px solid var(--cs-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 18px !important; font-size: 18px; font-weight: 600; background: transparent; color: var(--cs-text); }
.wh-fv-tc-text { display: block; width: 100%; min-height: 380px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 18px !important; font-size: 15px; line-height: 1.65; resize: vertical; background: transparent; color: var(--cs-text); }
.wh-fv-tc-doc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 10px 14px; border-top: 1px solid var(--cs-line); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.wh-fv-tc-count { color: var(--cs-mute); font-size: 12.5px; }
.wh-fv-tc-saved { color: var(--cs-mute); font-size: 12.5px; margin-right: auto; }
.wh-fv-tc-text[contenteditable] { outline: none; overflow-wrap: anywhere; cursor: text; caret-color: var(--cs-text, #1d2327); }
.wh-fv-tc-text[contenteditable]:empty::before, .wh-fv-tc-text[contenteditable] > p:only-child:has(> br:only-child)::before { content: attr(data-placeholder); color: var(--cs-mute); pointer-events: none; position: absolute; margin-right: 18px; }
.wh-fv-tc-text p, .wh-fv-tc-text ul, .wh-fv-tc-text ol, .wh-fv-tc-text blockquote { margin: 0 0 .75em; }
.wh-fv-tc-text h2 { font-size: 1.45em; margin: .6em 0 .35em; color: var(--cs-text); }
.wh-fv-tc-text h3 { font-size: 1.2em; margin: .6em 0 .3em; color: var(--cs-text); }
.wh-fv-tc-text blockquote { border-left: 3px solid var(--cs-line); padding-left: 12px; color: var(--cs-mute); font-style: italic; }
.wh-fv-tc-text ul, .wh-fv-tc-text ol { padding-left: 1.6em; }
::highlight(wh-fv-tc-now) { background-color: #fde68a; color: #111; }

/* ---------- A voice for each paragraph ---------- */
.wh-fv-tc-docwrap { position: relative; }
.wh-fv-tc-docwrap .wh-fv-tc-text { padding-left: 146px !important; }
.wh-fv-tc-gutter { position: absolute; left: 0; top: 0; width: 138px; height: 0; }
.wh-fv-tc-pgrip { position: absolute; left: 2px; display: flex; align-items: center; justify-content: center; width: 18px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--cs-mute, #6b7280); cursor: grab; opacity: .45; touch-action: none; }
.wh-fv-tc-pgrip:hover, .wh-fv-tc-pgrip:focus-visible { opacity: 1; background: rgba(124, 58, 237, .1); color: #6d28d9; }
.wh-fv-tc-pgrip.is-grabbing, html.wh-fv-tc-grabbing, html.wh-fv-tc-grabbing * { cursor: grabbing !important; }
html.wh-fv-tc-grabbing { user-select: none; -webkit-user-select: none; }
.wh-fv-tc-dragging { opacity: .45; outline: 2px dashed rgba(124, 58, 237, .55); outline-offset: 2px; border-radius: 4px; }
.wh-fv-tc-dropline { position: absolute; left: 138px; right: 8px; z-index: 40; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--a1, #7c3aed), var(--a2, #db2777)); pointer-events: none; }
.wh-fv-tc-dropline[hidden] { display: none; }
.wh-fv-tc-pplay { position: absolute; left: 24px; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: rgba(124, 58, 237, .1); color: #6d28d9; font-size: 10px; line-height: 24px; cursor: pointer; opacity: .6; }
.wh-fv-tc-pplay:hover, .wh-fv-tc-pplay:focus-visible { opacity: 1; }
.wh-fv-tc-pplay.is-playing { opacity: 1; color: #fff; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-pmark { position: absolute; left: 138px; width: 3px; border-radius: 3px; background: linear-gradient(var(--a1, #7c3aed), var(--a2, #db2777)); pointer-events: none; }
.wh-fv-tc-pmark[hidden] { display: none; }
.wh-fv-tc-chip { position: absolute; left: 52px; width: 82px; height: 24px; margin-top: 2px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--cs-line); border-radius: 999px; background: transparent; color: var(--cs-text); font-size: 11.5px; font-weight: 600; cursor: pointer; opacity: .8; }
.wh-fv-tc-chip:hover, .wh-fv-tc-chip:focus-visible { opacity: 1; border-style: solid; color: var(--cs-text); }
.wh-fv-tc-chip.is-set { opacity: 1; border: 0; color: #fff; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-vmenu { position: absolute; left: 10px; z-index: 50; width: 290px; max-height: 380px; overflow: auto; margin-top: 30px; padding: 6px; background: var(--cs-bg, #fff); border: 1px solid var(--cs-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.wh-fv-tc-vmenu-h { margin: 4px 8px 6px; font-size: 12px; color: var(--cs-mute); font-weight: 600; }
.wh-fv-tc-vmenu button { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--cs-text); font-size: 13px; cursor: pointer; }
.wh-fv-tc-vmenu button:hover, .wh-fv-tc-vmenu button:focus-visible { background: rgba(124, 58, 237, .1); }
.wh-fv-tc-vmenu button[aria-checked="true"] { font-weight: 700; }
.wh-fv-tc-vmenu hr { border: 0; border-top: 1px solid var(--cs-line); margin: 6px 0; }
.wh-fv-tc-vscope { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 4px 6px; }
.wh-fv-tc-vmenu .wh-fv-tc-vscope button { display: inline-block; width: auto; padding: 3px 10px; border: 1px solid var(--cs-line); border-radius: 999px; font-size: 12px; }
.wh-fv-tc-vmenu .wh-fv-tc-vscope button[aria-checked="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-vmenu-lang { display: block; width: calc(100% - 8px); margin: 0 4px 6px; font-size: 13px; }
.wh-fv-tc-vall[hidden] { display: none !important; }
@media (max-width: 600px) { .wh-fv-tc-docwrap .wh-fv-tc-text { padding-left: 104px !important; } .wh-fv-tc-gutter { width: 98px; } .wh-fv-tc-pgrip { left: 1px; width: 16px; } .wh-fv-tc-pplay { left: 19px; width: 22px; height: 22px; line-height: 22px; } .wh-fv-tc-chip { left: 45px; width: 48px; font-size: 10.5px; } .wh-fv-tc-pmark, .wh-fv-tc-dropline { left: 98px; } }

/* ---------- The voice lists: a panel down the right, from the top of Start talking to the bottom bar (Save) ---------- */
.wh-fv-tc-doc { position: relative; }
.wh-fv-tc-studio > .wh-fv-tc-side { box-sizing: border-box; position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 90; display: flex; flex-direction: column; width: min(420px, 70%); max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--cs-line, #dcdcde); border-radius: 14px; background: var(--cs-bg, #fff); box-shadow: -12px 0 30px rgba(0, 0, 0, .14); }
.wh-fv-tc-side-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--cs-line, #dcdcde); background: var(--cs-bg, #fff); color: var(--cs-text, #1d2327); font-size: 14px; }
.wh-fv-tc-side .wh-fv-tc-side-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cs-mute, #6b7280); font-size: 24px; line-height: 1; cursor: pointer; }
.wh-fv-tc-side .wh-fv-tc-side-x:hover, .wh-fv-tc-side .wh-fv-tc-side-x:focus-visible { background: rgba(124, 58, 237, .1); color: var(--cs-text, #1d2327); }
.wh-fv-tc-side-in { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; background: var(--cs-bg, #fff); }
.wh-fv-tc-side .wh-fv-tc-vp-top, .wh-fv-tc-side .wh-fv-tc-vscope, .wh-fv-tc-side .wh-fv-tc-vp-more, .wh-fv-tc-side .wh-fv-tc-vp-note { flex: 0 0 auto; }
.wh-fv-tc-side .wh-fv-tc-vp-list { flex: 1 1 auto; min-height: 120px; max-height: none; overflow: auto; grid-template-columns: 1fr; align-content: start; }
.wh-fv-tc-side .wh-fv-tc-vscope { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.wh-fv-tc-side .wh-fv-tc-vscope button { padding: 4px 12px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 999px; background: none; color: var(--cs-text, #1d2327); font-size: 12px; cursor: pointer; }
.wh-fv-tc-side .wh-fv-tc-vscope button[aria-checked="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-vp-more { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tc-vp-more [hidden] { display: none !important; }
.wh-fv-tc-vcard-doc { border-style: dashed; }
@media (max-width: 600px) { .wh-fv-tc-studio > .wh-fv-tc-side { left: 0; width: auto; } }

/* ---------- Volume, Pitch, Speed and Effect ---------- */
.wh-fv-tc-tool-fx { gap: 4px; font-size: 13px; font-weight: 600; }
.wh-fv-tc-tool-fx.is-set { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.wh-fv-tc-fxval { font-size: 11px; font-weight: 700; color: #6d28d9; }
.wh-fv-tc-fxval:empty { display: none; }
.wh-fv-tc-fxpop { width: 290px; }
.wh-fv-tc-fxpop .wh-fv-tc-fx-scope { font-weight: 600; }
.wh-fv-tc-fxpop .wh-fv-tc-fx-scope select { flex: 1 1 auto; min-width: 0; }
.wh-fv-tc-fx-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.wh-fv-tc-fx-row input[type="range"] { flex: 1 1 auto; accent-color: #7c3aed; }
.wh-fv-tc-fx-row output { min-width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wh-fv-tc-fx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 0 12px; }
.wh-fv-tc-fx-list button { padding: 6px 10px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 8px; background: none; color: var(--cs-text, #1d2327); font-size: 13px; text-align: left; cursor: pointer; }
.wh-fv-tc-fx-list button:hover { border-color: #93b4f5; }
.wh-fv-tc-fx-list button[aria-checked="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
@media (max-width: 960px) { .wh-fv-tc-tool-fx .wh-fv-tc-tool-label { display: none; } }
select[data-tc-voice] option:disabled { color: #8c8f94; }

/* ---------- Choosing a voice ---------- */
.wh-fv-tc-vhidden { display: none !important; }
.wh-fv-tc-play-head { position: relative; }
.wh-fv-tc-av { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 260), 55%, 52%), hsl(calc(var(--h, 260) + 40), 60%, 42%)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.wh-fv-tc-av b { font: 600 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wh-fv-tc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wh-fv-tc-av.is-small { width: 28px; height: 28px; }
.wh-fv-tc-av.is-small b { font-size: 12px; }
.wh-fv-tc-vcard-t { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.25; }
.wh-fv-tc-vcard-t b { font-size: 14px; color: var(--cs-text, #1d2327); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-fv-tc-vcard-t small { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--cs-mute, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-fv-tc-vpick { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; max-width: 100%; padding: 5px 12px 5px 6px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 12px; background: var(--cs-bg, #fff); cursor: pointer; }
.wh-fv-tc-vpick:hover, .wh-fv-tc-vpick[aria-expanded="true"] { border-color: #93b4f5; }
.wh-fv-tc-vpick .wh-fv-tc-av { width: 34px; height: 34px; }
.wh-fv-tc-vpick-more { margin-left: auto; color: var(--cs-mute, #6b7280); }
.wh-fv-tc-vp { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(560px, calc(100vw - 32px)); padding: 12px; background: var(--cs-bg, #fff); border: 1px solid var(--cs-line, #dcdcde); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.wh-fv-tc-vp-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.wh-fv-tc-vp-top input[type="search"] { flex: 1 1 150px; min-width: 120px; }
.wh-fv-tc-vp-top select { flex: 1 1 170px; max-width: 100%; }
.wh-fv-tc-vp-g { display: inline-flex; gap: 4px; }
.wh-fv-tc-vp-g button { padding: 4px 12px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 999px; background: none; color: var(--cs-text, #1d2327); font-size: 12px; cursor: pointer; }
.wh-fv-tc-vp-g button[aria-checked="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-vp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 380px; overflow: auto; padding: 2px; }
.wh-fv-tc-vcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cs-line, #e2e4e7); border-radius: 12px; background: var(--cs-bg, #fff); cursor: pointer; outline: none; }
.wh-fv-tc-vcard:hover, .wh-fv-tc-vcard:focus-visible { border-color: #93b4f5; }
.wh-fv-tc-vcard.is-on { border-color: #7aa2f7; background: #eef4ff; }
.wh-fv-tc-vcard.is-wait { cursor: default; opacity: .55; }
.wh-fv-tc-vcard-play { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(124, 58, 237, .1); color: #6d28d9; font-size: 11px; cursor: pointer; }
.wh-fv-tc-vcard-play:hover { background: rgba(124, 58, 237, .2); }
.wh-fv-tc-vcard.is-loading .wh-fv-tc-vcard-play, .wh-fv-tc-pplay.is-loading { animation: wh-fv-tc-pulse 1s ease-in-out infinite; }
.wh-fv-tc-vcard.is-playing .wh-fv-tc-vcard-play { color: #fff; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
@keyframes wh-fv-tc-pulse { 50% { opacity: .35; } }
.wh-fv-tc-vp-note { margin: 10px 2px 0; }
.wh-fv-tc-vmenu .wh-fv-tc-vrow { display: flex; align-items: center; gap: 8px; }
.wh-fv-tc-vmenu .wh-fv-tc-vrow .wh-fv-tc-vcard-t b { font-size: 13px; }
@media (max-width: 600px) { .wh-fv-tc-vp { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; } .wh-fv-tc-vp-list { max-height: 55vh; } .wh-fv-tc-vpick { min-width: 0; width: 100%; } }

/* ---------- All Transcripts: the player ---------- */
.wh-fv-tc-row-play { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 8px 0 0; padding: 0; vertical-align: middle; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); }
.wh-fv-tc-row-play.is-open { background: #1d2327; }
.wh-fv-tc-player-row td { padding: 0 10px 12px !important; }
.wh-fv-tc-player { background: #1d2327; color: #f0f0f1; border-radius: 10px; padding: 8px 10px; outline: none; }
.wh-fv-tc-player:focus-visible { box-shadow: 0 0 0 2px #7c3aed; }
.wh-fv-tc-pl-tabs { display: flex; gap: 4px; margin: 0 0 6px; }
.wh-fv-tc-pl-tabs button { border: 0; border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; color: #c3c4c7; background: rgba(255, 255, 255, .08); }
.wh-fv-tc-pl-tabs button[aria-checked="true"] { color: #fff; background: #7c3aed; }
.wh-fv-tc-pl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wh-fv-tc-pl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: #f0f0f1; cursor: pointer; text-decoration: none; }
.wh-fv-tc-pl-btn:hover, .wh-fv-tc-pl-btn:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.wh-fv-tc-pl-btn i { position: absolute; bottom: 1px; right: 2px; font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-style: normal; }
.wh-fv-tc-pl-play { width: 40px; height: 40px; border-radius: 50%; background: #7c3aed; }
.wh-fv-tc-pl-play:hover { background: #6d28d9; }
.wh-fv-tc-pl-time { font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; color: #dcdcde; }
.wh-fv-tc-pl-seek { flex: 1 1 160px; min-width: 120px; height: 6px; margin: 0 4px; border-radius: 3px; appearance: none; -webkit-appearance: none; cursor: pointer; background: linear-gradient(to right, #a78bfa 0, #a78bfa var(--p, 0%), #50575e var(--p, 0%), #50575e 100%); }
.wh-fv-tc-pl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.wh-fv-tc-pl-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.wh-fv-tc-pl-vol { width: 70px; accent-color: #a78bfa; }
.wh-fv-tc-pl-sel { height: 28px; min-height: 28px !important; padding: 0 22px 0 8px !important; border: 1px solid #50575e !important; border-radius: 6px !important; background-color: #2c3338 !important; color: #f0f0f1 !important; font-size: 12px !important; }
.wh-fv-tc-pl-note { margin: 4px 0 0; font-size: 12px; color: #f0b849; }
.wh-fv-tc-pl-note:empty { display: none; }
@media (max-width: 600px) { .wh-fv-tc-pl-seek { order: 10; flex-basis: 100%; margin: 6px 0 2px; } .wh-fv-tc-pl-vol { display: none; } }

/* ---------- Toolbar ---------- */
.wh-fv-tc-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; padding: 6px 10px; border-bottom: 1px solid var(--cs-line); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.wh-fv-tc-toolbar::-webkit-scrollbar, .wh-fv-tc-doc-bar::-webkit-scrollbar { display: none; }
.wh-fv-tc-toolbar > *, .wh-fv-tc-doc-bar > * { flex-shrink: 0; white-space: nowrap; }
.wh-fv-tc-barwrap { position: relative; }
.wh-fv-tc-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; padding: 0; border: 0; background: var(--cs-bg, #fff); color: var(--cs-text, #1d2327); font-size: 18px; cursor: pointer; }
.wh-fv-tc-arrow[hidden] { display: none; }
.wh-fv-tc-arrow:hover { background: rgba(124, 58, 237, .1); }
.wh-fv-tc-arrow[data-dir="-1"] { left: 0; box-shadow: 6px 0 8px -4px rgba(0, 0, 0, .25); }
.wh-fv-tc-arrow[data-dir="1"] { right: 0; box-shadow: -6px 0 8px -4px rgba(0, 0, 0, .25); }
.wh-fv-tc-toolbar select { min-height: 30px; margin-right: 6px; }
.wh-fv-tc-tool { min-width: 32px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--cs-text); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.wh-fv-tc-tool:hover, .wh-fv-tc-tool:focus-visible { background: rgba(124, 58, 237, .1); }
.wh-fv-tc-tool .dashicons { font-size: 18px; width: 18px; height: 18px; }
.wh-fv-tc-sep { width: 1px; height: 20px; background: var(--cs-line); margin: 0 6px; }
.wh-fv-tc-flex { flex: 1 1 auto; }

/* ---------- Live words while talking ---------- */
.wh-fv-tc-live { margin: 4px 0 0; min-height: 1.4em; color: var(--cs-mute); font-style: italic; font-size: 14px; }
.wh-fv-tc-live:not(:empty)::before { content: "\201C"; }
.wh-fv-tc-live:not(:empty)::after { content: "\2026\201D"; }

/* ---------- Listen ---------- */
.wh-fv-tc-play { background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 14px; padding: 14px 18px; }
.wh-fv-tc-play-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wh-fv-tc-play-head h2 { margin: 0 8px 0 0; font-size: 17px; color: var(--cs-text); display: flex; align-items: center; gap: 6px; }
.wh-fv-tc-seg { display: inline-flex; border: 1px solid var(--cs-line); border-radius: 999px; overflow: hidden; }
.wh-fv-tc-seg label { padding: 5px 12px; cursor: pointer; font-size: 13px; color: var(--cs-text); }
.wh-fv-tc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wh-fv-tc-seg label:has(input:checked) { background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); color: #fff; }
.wh-fv-tc-seg label:has(input:focus-visible) { outline: 2px solid var(--a1, #7c3aed); outline-offset: -2px; }
.wh-fv-tc-play-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; flex-wrap: wrap; }
.wh-fv-tc-play-row input[type="range"] { flex: 1 1 200px; accent-color: var(--a1, #7c3aed); }
.wh-fv-tc-play-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); display: inline-flex; align-items: center; justify-content: center; }
.wh-fv-tc-play-btn .dashicons { font-size: 22px; width: 22px; height: 22px; }
.wh-fv-tc-time { font-variant-numeric: tabular-nums; color: var(--cs-mute); font-size: 13px; min-width: 90px; }
.wh-fv-tc-now { margin: 8px 0 0; min-height: 1.4em; font-size: 15px; color: var(--cs-text); }
.wh-fv-tc-vstat { color: var(--cs-mute); font-size: 12.5px; }
.wh-fv-tc-danger { color: #b32d2e !important; }
.wh-fv-tc-pill-rec { background: #dcfce7; color: #166534; }
.wh-fv-tc-pill-voice { background: #e0f2fe; color: #075985; }

/* ---------- From Transcripts (Video and Slides Creators) ---------- */
.wh-fv-tc-pick-btn { margin-left: 6px; }
.wh-fv-tc-pick { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wh-fv-tc-pick-panel { width: min(560px, 100%); max-height: min(560px, 90vh); display: flex; flex-direction: column; background: #fff; color: #1d2327; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.wh-fv-tc-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.wh-fv-tc-pick-head button { border: 0; background: none; font-size: 18px; cursor: pointer; color: inherit; }
.wh-fv-tc-pick-list { overflow: auto; padding: 8px 16px 16px; }
.wh-fv-tc-pick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #f0f0f1; }
.wh-fv-tc-pick-name { flex: 1 1 200px; font-weight: 600; }
.wh-fv-tc-pick-name small { font-weight: 400; color: #646970; }
.wh-fv-tc-pick-use { border: 1px solid #c4b5fd; background: #f5f3ff; color: #5b21b6; border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.wh-fv-tc-pick-use:hover { background: #ede9fe; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-pick-panel { background: #1f2023; color: #f0f0f1; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-pick-head, body.wh-fv-sidebar-dark-mode .wh-fv-tc-pick-row { border-color: #33353a; }
body.wh-fv-sidebar-dark-mode ::highlight(wh-fv-tc-now) { background-color: #854d0e; color: #fff; }

.wh-fv-tc-help { color: var(--cs-mute); font-size: 13px; }
.wh-fv-tc-help summary { cursor: pointer; color: var(--cs-text); font-weight: 600; }
.wh-fv-tc-help li { margin: 4px 0; }
.wh-fv-tc-voice-help, .wh-fv-tc-play .wh-fv-tc-help { margin: 10px 0 0; }
.wh-fv-tc-voice-help .wh-fv-tc-small { margin: 6px 0 0; }

/* ---------- All Transcripts ---------- */
.wh-fv-tc-search { margin: 0 0 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wh-fv-tc-search input[type="search"] { min-width: 260px; }
.wh-fv-tc-bulk { margin: 0 0 10px; }
.wh-fv-tc-table td, .wh-fv-tc-table th { vertical-align: top; }
.wh-fv-tc-row-title { font-weight: 600; text-decoration: none; }
.wh-fv-tc-preview { display: block; color: var(--cs-mute); font-size: 12.5px; margin-top: 2px; max-width: 640px; }
.wh-fv-tc-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #ede9fe; color: #5b21b6; }
.wh-fv-tc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.wh-fv-tc .wh-fv-tc-crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--cs-text); font-size: 15px; font-weight: 600; text-decoration: none; }
.wh-fv-tc a.wh-fv-tc-crumb:not(.is-on) { color: var(--cs-accent); }
.wh-fv-tc-crumb .dashicons { font-size: 18px; width: 18px; height: 18px; }
.wh-fv-tc-crumb .wh-fv-tc-folder-icon { margin: 0; }
.wh-fv-tc-crumb-n { padding: 1px 9px; border-radius: 999px; background: rgba(0, 0, 0, .07); color: var(--cs-text); font-size: 12px; font-weight: 700; }
.wh-fv-tc-crumb-mb { display: inline-flex; align-items: center; gap: 3px; color: var(--cs-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.wh-fv-tc-crumb-mb .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wh-fv-tc-crumb-sep { margin: 0 2px; color: var(--cs-mute); }
.wh-fv-tc-folder-icon { margin-right: 6px; color: #dba617; font-size: 22px; width: 22px; height: 22px; vertical-align: middle; }
.wh-fv-tc-search-box { position: relative; display: inline-flex; align-items: center; }
.wh-fv-tc-search-box input[type="search"] { padding-right: 52px; }
.wh-fv-tc-search-x, .wh-fv-tc-search-go { position: absolute; display: flex; align-items: center; padding: 0 4px; border: 0; background: none; color: #555; line-height: 1; cursor: pointer; }
.wh-fv-tc-search-x { right: 28px; font-size: 14px; }
.wh-fv-tc-search-go { right: 4px; }
.wh-fv-tc-search-x[hidden], .wh-fv-tc-bulk select[hidden] { display: none; }
.wh-fv-tc-bulk select { min-height: 32px; }
.wh-fv-tc-table-wrap { overflow-x: auto; }
.wh-fv-tc-table .wh-fv-tc-col-dl, .wh-fv-tc-table .wh-fv-tc-col-del { width: 76px; text-align: center; }
/* All Post Audio (transcribe-reader.php): Out of date; Bit Rate and File (here and on All Transcripts). */
.wh-fv-tc-pa-table .wh-fv-tc-pa-type-col { width: 110px; }
.wh-fv-tc .wh-fv-tc-pill-stale { background: #fef3c7; color: #92400e; cursor: help; }
.wh-fv-tc-table .wh-fv-tc-kbps, .wh-fv-tc-table .wh-fv-tc-file { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* All Post Audio's Type menu - the same as All Media's (media.css isn't loaded on these pages):
   a filter icon left of the title, its menu floating over the page (wh_fv_images_type_button_html()). */
.wh-fv-tc .wh-fv-type-head { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wh-fv-tc .wh-fv-type-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8c8f94; line-height: 1; cursor: pointer; }
.wh-fv-tc .wh-fv-type-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wh-fv-tc .wh-fv-type-btn:hover, .wh-fv-tc .wh-fv-type-btn:focus, .wh-fv-tc .wh-fv-type-btn[aria-expanded="true"] { background: #f0f0f1; border-color: #c3c4c7; color: #1d2327; }
.wh-fv-tc .wh-fv-type-btn.wh-fv-type-btn-on, .wh-fv-tc .wh-fv-type-btn.wh-fv-type-btn-on:hover, .wh-fv-tc .wh-fv-type-btn.wh-fv-type-btn-on:focus { background: #e8f0fb; border-color: #2271b1; color: #2271b1; }
.wh-fv-tc .wh-fv-type-current { margin-left: 4px; padding: 3px 7px; border-radius: 9px; background: #2271b1; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }
.wh-fv-type-pop { position: fixed; z-index: 100003; display: flex; flex-direction: column; min-width: 130px; padding: 4px 0; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.wh-fv-type-pop-item { position: relative; padding: 6px 14px 6px 28px; border: 0; background: none; color: #1d2327; font-size: 13px; text-align: left; cursor: pointer; }
.wh-fv-type-pop-item:hover, .wh-fv-type-pop-item:focus { background: #f0f6fc; outline: none; }
.wh-fv-type-pop-current { font-weight: 600; }
.wh-fv-type-pop-current::before { content: "\2713"; position: absolute; left: 10px; }
.wh-fv-tc .wh-fv-tc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-bg); color: var(--cs-text); text-decoration: none; cursor: pointer; }
.wh-fv-tc .wh-fv-tc-icon-btn:hover, .wh-fv-tc .wh-fv-tc-icon-btn:focus-visible { border-color: #93b4f5; }
.wh-fv-tc-rename { padding: 0 2px; border: 0; background: none; color: var(--cs-mute); font-size: 14px; cursor: pointer; }
.wh-fv-tc-rename:hover, .wh-fv-tc-rename:focus-visible { color: var(--cs-accent); }
.wh-fv-tc-version { white-space: nowrap; }
.wh-fv-tc-empty-row td { padding: 32px 12px !important; color: var(--cs-mute); text-align: center; }
.wh-fv-tc-versions { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-bg); }
.wh-fv-tc-versions summary { cursor: pointer; color: var(--cs-text); font-size: 16px; }
.wh-fv-tc-version-table { max-width: 700px; margin-top: 12px; }
.wh-fv-tc-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.wh-fv-tc-modal[hidden] { display: none; }
.wh-fv-tc-modal-box { position: relative; width: min(460px, 100%); max-height: 85vh; overflow: auto; padding: 22px 24px; border-radius: 12px; background: var(--cs-bg, #fff); color: var(--cs-text, #1d2327); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.wh-fv-tc-modal-box h2 { margin: 0 0 12px; font-size: 18px; color: var(--cs-text, #1d2327); }
.wh-fv-tc-modal-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cs-mute); font-size: 22px; line-height: 1; cursor: pointer; }
.wh-fv-tc-modal-x:hover { background: rgba(0, 0, 0, .06); }
.wh-fv-tc-modal-b { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 0; }
.wh-fv-tc-dl-fmts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.wh-fv-tc-dl-fmt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-bg, #fff); color: var(--cs-text); cursor: pointer; }
.wh-fv-tc-dl-fmt b { font-size: 16px; }
.wh-fv-tc-dl-fmt small { color: var(--cs-mute); font-size: 11px; }
.wh-fv-tc-dl-fmt:hover:not(:disabled), .wh-fv-tc-dl-fmt:focus-visible { border-color: #93b4f5; background: rgba(124, 58, 237, .06); }
.wh-fv-tc-dl-fmt:disabled { opacity: .4; cursor: not-allowed; }
.wh-fv-tc-dl-which { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0; font-weight: 600; }
.wh-fv-tc-dl-which[hidden] { display: none; }
.wh-fv-tc-dl-which label { font-weight: 400; }
.wh-fv-tc-dl-status { min-height: 1.4em; margin: 6px 0 0; color: var(--cs-mute); font-size: 13px; }
@media (max-width: 600px) { .wh-fv-tc-dl-fmts { grid-template-columns: 1fr 1fr; } .wh-fv-tc-search-box, .wh-fv-tc-search-box input[type="search"] { width: 100%; min-width: 0; } }
.wh-fv-tc-del { color: #b32d2e !important; }
.wh-fv-tc-empty { text-align: center; padding: 48px 16px; color: var(--cs-mute); border: 1px dashed var(--cs-line); border-radius: 14px; }
.wh-fv-tc-empty .dashicons { font-size: 40px; width: 40px; height: 40px; opacity: .5; }

/* ---------- Dictionary & Snippets, Settings ---------- */
.wh-fv-tc-snips { display: grid; gap: 8px; margin: 0 0 10px; }
.wh-fv-tc-snip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: start; }
.wh-fv-tc-snip textarea { font-family: inherit; }
.wh-fv-tc-snip-x { border: 0; background: none; font-size: 20px; line-height: 30px; cursor: pointer; color: var(--cs-mute); }
@media (max-width: 600px) { .wh-fv-tc-snip { grid-template-columns: 1fr auto; } .wh-fv-tc-snip textarea { grid-column: 1 / -1; grid-row: 2; } }
.wh-fv-tc-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.wh-fv-tc-field > span { min-width: 150px; font-weight: 600; color: var(--cs-text); }
.wh-fv-tc-field-top { align-items: flex-start; }
.wh-fv-tc-field textarea { flex: 1 1 280px; font-family: Consolas, Menlo, monospace; font-size: 13px; }
.wh-fv-tc-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; color: var(--cs-text); }
.wh-fv-tc-check input { margin-top: 2px; }
.wh-fv-tc-check small { display: block; color: var(--cs-mute); font-size: 12.5px; }

/* ---------- The mic beside a text box (every page) ---------- */
.wh-fv-tc-mic { position: fixed; z-index: 2147482000; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 2px 6px rgba(0, 0, 0, .22); opacity: .85; transition: opacity .12s ease, transform .12s ease; }
.wh-fv-tc-mic:hover, .wh-fv-tc-mic:focus-visible { opacity: 1; transform: scale(1.08); }
.wh-fv-tc-mic .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 15px; }
.wh-fv-tc-mic.is-on { background: #dc2626; opacity: 1; animation: wh-fv-tc-pulse 1.4s ease-in-out infinite; }
.wh-fv-tc-portal-mic.is-active { color: #dc2626 !important; }

/* ---------- The dictation bar (every page) ---------- */
.wh-fv-tc-bar { position: fixed; left: 50%; bottom: 22px; z-index: 2147483000; display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 32px)); padding: 8px 10px 8px 14px; border-radius: 999px; background: #18181b; color: #fafafa; font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; }
.wh-fv-tc-bar.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.wh-fv-tc-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #a1a1aa; flex: 0 0 auto; }
.wh-fv-tc-bar.is-listening .wh-fv-tc-bar-dot { background: #ef4444; animation: wh-fv-tc-blink 1s ease-in-out infinite; }
.wh-fv-tc-bar.is-working .wh-fv-tc-bar-dot { background: #a78bfa; animation: wh-fv-tc-blink .7s ease-in-out infinite; }
.wh-fv-tc-bar.is-done .wh-fv-tc-bar-dot { background: #22c55e; }
.wh-fv-tc-bar.is-error .wh-fv-tc-bar-dot { background: #f59e0b; }
.wh-fv-tc-bar.is-speaking .wh-fv-tc-bar-dot { background: #38bdf8; animation: wh-fv-tc-blink 1.2s ease-in-out infinite; }

/* ---------- Read aloud (every page) ---------- */
.wh-fv-tc-read { position: fixed; z-index: 2147482500; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 9px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: #18181b; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wh-fv-tc-read:hover, .wh-fv-tc-read:focus-visible { background: #7c3aed; }
.wh-fv-tc-read svg { display: block; }
.wh-fv-tc-mic svg { display: block; }
::highlight(wh-fv-tc-reading) { background-color: #bae6fd; color: #0c4a6e; }
.wh-fv-tc-bar-wave { display: none; width: 120px; height: 28px; color: #c4b5fd; flex: 0 0 auto; }
.wh-fv-tc-bar.is-listening .wh-fv-tc-bar-wave { display: block; }
.wh-fv-tc-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wh-fv-tc-bar-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.wh-fv-tc-bar-btn { border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer; color: #fafafa; background: rgba(255, 255, 255, .12); text-decoration: none; }
.wh-fv-tc-bar-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.wh-fv-tc-bar-btn.is-primary { background: #7c3aed; }
.wh-fv-tc-bar-btn.is-primary:hover { background: #6d28d9; }
@media (max-width: 600px) { .wh-fv-tc-bar { border-radius: 16px; bottom: 12px; } .wh-fv-tc-bar-wave { width: 70px; } }

@keyframes wh-fv-tc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } }
@keyframes wh-fv-tc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wh-fv-tc-mic.is-on, .wh-fv-tc-rec-btn.is-on, .wh-fv-tc-bar-dot { animation: none !important; } .wh-fv-tc-bar { transition: none; } }

/* ---------- Pauses ---------- */
/* The pause between paragraphs (Transcribe Settings), shown under each one: an icon and its seconds (--tc-gap). */
.wh-fv-tc-text > :not(ul):not(ol):not(:last-child)::after, .wh-fv-tc-text > ul > li::after, .wh-fv-tc-text > ol > li::after { content: var(--tc-gap, "0.35s"); display: block; width: max-content; margin: 6px 0 -2px; padding: 0 8px 0 21px; border-radius: 999px; background: rgba(124, 58, 237, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%237c3aed' d='M2 1h2v8H2zM6 1h2v8H6z'/%3E%3C/svg%3E") 7px 50% / 9px 9px no-repeat; color: #7c3aed; font-size: 11px; font-style: normal; font-weight: 600; line-height: 18px; text-align: left; opacity: .7; pointer-events: none; user-select: none; -webkit-user-select: none; visibility: hidden; }
.wh-fv-tc-text > :last-child > li:last-child::after { display: none; }
.wh-fv-tc-text > p:has(> br:only-child)::after { display: none; }
.wh-fv-tc-studio { position: relative; }
.wh-fv-tc-pause { display: inline-block; margin: 0 3px; padding: 0 8px; border-radius: 999px; background: rgba(124, 58, 237, .12); color: #6d28d9; font-size: .78em; font-weight: 600; font-style: normal; line-height: 1.7; vertical-align: .08em; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; }
.wh-fv-tc-pause::before { content: "Pause " attr(data-pause) "s"; }
.wh-fv-tc-pause:hover { background: rgba(124, 58, 237, .22); }
.wh-fv-tc-tool-pause { gap: 4px; font-size: 13px; font-weight: 600; }
.wh-fv-tc-pausepop { position: absolute; z-index: 70; width: 260px; padding: 12px; background: var(--cs-bg, #fff); border: 1px solid var(--cs-line, #dcdcde); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); color: var(--cs-text, #1d2327); }
.wh-fv-tc-pausepop label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wh-fv-tc-pausepop input[type="number"] { width: 80px; }
.wh-fv-tc-pausepop-q { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.wh-fv-tc-pausepop-q button { padding: 3px 10px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 999px; background: none; color: var(--cs-text, #1d2327); font-size: 12px; cursor: pointer; }
.wh-fv-tc-pausepop-q button:hover { border-color: #93b4f5; }
.wh-fv-tc-pausepop-b { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- Favorite voices ---------- */
.wh-fv-tc-vp-h { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--cs-mute, #6b7280); }
.wh-fv-tc-vp-h:first-child { margin-top: 0; }
.wh-fv-tc-vcard-fav { margin-left: auto; flex: 0 0 auto; width: 28px; height: 30px; padding: 0; border: 0; background: none; color: var(--cs-mute, #9ca3af); font-size: 18px; line-height: 30px; cursor: pointer; }
.wh-fv-tc-vcard-fav:hover, .wh-fv-tc-vcard-fav.is-fav { color: #f59e0b; }
.wh-fv-tc-vcard-fav + .wh-fv-tc-vcard-play { margin-left: 2px; }

/* ---------- Cloned Voices ---------- */
.wh-fv-tc-vcard-del { margin-left: auto; flex: 0 0 auto; width: 28px; height: 30px; padding: 0; border: 0; background: none; color: var(--cs-mute, #9ca3af); cursor: pointer; }
.wh-fv-tc-vcard-del:hover, .wh-fv-tc-vcard-del:focus-visible { color: #dc2626; }
.wh-fv-tc-vcard-del .dashicons { font-size: 18px; width: 18px; height: 18px; }
.wh-fv-tc-vcard-del + .wh-fv-tc-vcard-play { margin-left: 2px; }
.wh-fv-tc-av.is-clone { background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-av.is-clone .dashicons { font-size: 22px; width: 22px; height: 22px; }
.wh-fv-tc-vcard.is-fresh small { color: #15803d; font-weight: 600; }
.wh-fv-tc-vcard-proc { cursor: default; }
.wh-fv-tc-clone-spin { margin-left: auto; flex: 0 0 auto; width: 22px; height: 22px; border: 3px solid rgba(124, 58, 237, .2); border-top-color: #7c3aed; border-radius: 50%; animation: wh-fv-tc-spin .8s linear infinite; }
@keyframes wh-fv-tc-spin { to { transform: rotate(360deg); } }
.wh-fv-tc-clone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px; border: 1px dashed var(--cs-line, #dcdcde); border-radius: 12px; text-align: center; }
.wh-fv-tc-clone b { font-size: 15px; color: var(--cs-text, #1d2327); }
.wh-fv-tc-clone p { margin: 0; color: var(--cs-mute, #6b7280); font-size: 13px; }
.wh-fv-tc-clone-mic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); }
.wh-fv-tc-clone-mic .dashicons { font-size: 24px; width: 24px; height: 24px; }
.wh-fv-tc-clone.is-listen .wh-fv-tc-clone-mic { animation: wh-fv-tc-pulse 1.4s ease-in-out infinite; }
.wh-fv-tc-clone-read { margin: 6px 0; padding: 10px 12px; border-left: 3px solid var(--a1, #7c3aed); border-radius: 6px; background: rgba(124, 58, 237, .06); color: var(--cs-text, #1d2327); font-size: 14px; line-height: 1.55; text-align: left; }
.wh-fv-tc-clone-meter { width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--cs-line, #e2e4e7); }
.wh-fv-tc-clone-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--a1, #7c3aed), var(--a2, #db2777)); transition: width .15s; }
.wh-fv-tc-clone-left { font-weight: 600; font-variant-numeric: tabular-nums; }
.wh-fv-tc-clone .wh-fv-cs-btn .dashicons, .wh-fv-tc-clone-more .dashicons { font-size: 16px; width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; }
.wh-fv-tc-clone-more { align-self: center; margin-top: 4px; }
.wh-fv-tc-clone-err { margin: 4px 0; color: #b91c1c; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .wh-fv-tc-clone-spin, .wh-fv-tc-clone.is-listen .wh-fv-tc-clone-mic { animation: none; } }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-vcard.is-fresh small { color: #4ade80; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-clone-err { color: #f87171; }

/* ---------- Default voice ---------- */
.wh-fv-tc .wh-fv-tc-vdef { min-height: 30px; font-size: 12.5px; }
.wh-fv-tc .wh-fv-tc-vdef.is-def { opacity: 1; color: #15803d; border-color: #86efac; cursor: default; }
.wh-fv-tc-vdef-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }

/* ---------- Folders ---------- */
.wh-fv-tc-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wh-fv-tc .wh-fv-tc-pill-folder { background: #fef3c7; color: #92400e; text-decoration: none; }
.wh-fv-tc-pill-folder .dashicons { font-size: 12px; width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.wh-fv-tc-size { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wh-fv-tc-folder-pick { display: inline-flex; align-items: center; gap: 4px; color: var(--cs-mute); }
.wh-fv-tc-folder-pick select { max-width: 180px; min-height: 30px; }

/* ---------- Dark ---------- */
body.wh-fv-sidebar-dark-mode .wh-fv-tc-pill { background: #3b2a63; color: #ddd6fe; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-bar { background: #fafafa; color: #18181b; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-bar-btn { color: #18181b; background: rgba(0, 0, 0, .08); }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-bar-btn.is-primary { color: #fff; background: #7c3aed; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-bar-wave { color: #7c3aed; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-read { background: #fafafa; color: #18181b; }
body.wh-fv-sidebar-dark-mode ::highlight(wh-fv-tc-reading) { background-color: #075985; color: #fff; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-pause { background: #3b2a63; color: #ddd6fe; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-crumb-n { background: rgba(255, 255, 255, .1); }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-search-x, body.wh-fv-sidebar-dark-mode .wh-fv-tc-search-go { color: #c3c4c7; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-fxval, body.wh-fv-sidebar-dark-mode .wh-fv-tc-tool-fx.is-set, body.wh-fv-sidebar-dark-mode .wh-fv-tc-pgrip:hover { color: #c4b5fd; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc .wh-fv-tc-pill-folder { background: #4a3410; color: #fde68a; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-vdef-tag { background: #14532d; color: #bbf7d0; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc .wh-fv-tc-vdef.is-def { color: #86efac; border-color: #166534; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-text > :not(ul):not(ol):not(:last-child)::after, body.wh-fv-sidebar-dark-mode .wh-fv-tc-text > ul > li::after, body.wh-fv-sidebar-dark-mode .wh-fv-tc-text > ol > li::after { color: #c4b5fd; background-color: rgba(196, 181, 253, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b5fd' d='M2 1h2v8H2zM6 1h2v8H6z'/%3E%3C/svg%3E"); }

/* ---------- Dragging transcripts into a folder ---------- */
.wh-fv-tc-drag-row td { cursor: grab; -webkit-touch-callout: none; }
.wh-fv-tc-drag-row td a, .wh-fv-tc-drag-row td button { cursor: pointer; }
html.wh-fv-tc-dropping, html.wh-fv-tc-dropping * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.wh-fv-tc-row-dragging td, .wh-fv-tc-row-dragging th { opacity: .45; }
html.wh-fv-tc-dropping .wh-fv-tc-folder-row td, html.wh-fv-tc-dropping .wh-fv-tc-crumb[data-tcl-drop] { outline: 1px dashed #dba617; outline-offset: -3px; }
.wh-fv-tc-folder-row.is-drop-over td { background: #fef3c7 !important; outline: 2px solid #dba617 !important; }
.wh-fv-tc .wh-fv-tc-crumb.is-drop-over { padding: 2px 8px; border-radius: 8px; background: #fef3c7; outline: 2px solid #dba617 !important; }
.wh-fv-tc-drag-ghost { position: fixed; z-index: 100001; max-width: 280px; padding: 6px 12px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-folder-row.is-drop-over td, body.wh-fv-sidebar-dark-mode .wh-fv-tc .wh-fv-tc-crumb.is-drop-over { background: #4a3410 !important; }

/* ---------- The pause after each paragraph (a button where the stylesheet keeps its room) ---------- */
.wh-fv-tc-gaps { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 3; }
.wh-fv-tc-gapbtn { position: absolute; height: 18px; padding: 0 8px 0 21px; border: 0; border-radius: 999px; background: rgba(124, 58, 237, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%237c3aed' d='M2 1h2v8H2zM6 1h2v8H6z'/%3E%3C/svg%3E") 7px 50% / 9px 9px no-repeat; color: #7c3aed; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer; opacity: .7; }
.wh-fv-tc-gapbtn:hover, .wh-fv-tc-gapbtn:focus-visible { opacity: 1; background-color: rgba(124, 58, 237, .16); }
.wh-fv-tc-gapbtn.is-set { opacity: 1; background-color: rgba(124, 58, 237, .14); }
.wh-fv-tc-gappop input[type="number"] { width: 80px; }
body.wh-fv-sidebar-dark-mode .wh-fv-tc-gapbtn { color: #c4b5fd; background-color: rgba(196, 181, 253, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b5fd' d='M2 1h2v8H2zM6 1h2v8H6z'/%3E%3C/svg%3E"); }

/* ---------- "For": the voices a change is for (check boxes) ---------- */
.wh-fv-tc-ms { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.wh-fv-tc-ms-btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 6px; background: var(--cs-bg, #fff); color: var(--cs-text, #1d2327); font-size: 13px; text-align: left; cursor: pointer; }
.wh-fv-tc-ms-list { flex: 1 1 100%; max-height: 200px; overflow: auto; padding: 6px; border: 1px solid var(--cs-line, #dcdcde); border-radius: 8px; background: var(--cs-bg, #fff); }
.wh-fv-tc-ms-list[hidden] { display: none; }
.wh-fv-tc-ms-list label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-weight: 500; cursor: pointer; }
.wh-fv-tc-ms-list label:hover { background: rgba(124, 58, 237, .08); }
.wh-fv-tc-ms-list small { color: var(--cs-mute, #6b7280); }

/* ---------------------------------------------------------------- AI bar and dialogs (transcribe-ai.js, Nov 12 2026) */
.wh-fv-tc-ai-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 14px; padding: 10px 14px; margin: 12px 0; }
.wh-fv-tc-ai-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--a1, #7c3aed); margin-right: 4px; }
.wh-fv-tc-ai-bar .dashicons { font-size: 17px; width: 17px; height: 17px; vertical-align: -3px; }
.wh-fv-tc-ai-note { margin-left: auto; font-size: 12px; color: var(--cs-mute); }
.wh-fv-tcai-ov { position: fixed; inset: 0; z-index: 100050; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wh-fv-tcai-ov.is-float { inset: auto 20px 20px auto; background: none; padding: 0; display: block; }
.wh-fv-tcai-dlg { background: var(--cs-bg, #fff); color: var(--cs-text, #1d2327); border: 1px solid var(--cs-line, #dcdcde); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.wh-fv-tcai-dlg.is-wide { width: min(820px, 100%); }
.is-float .wh-fv-tcai-dlg { width: min(460px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 80px)); }
.is-float.is-small .wh-fv-tcai-body, .is-float.is-small .wh-fv-tcai-btns { display: none; }
.wh-fv-tcai-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tcai-head b { flex: 1; font-size: 15px; }
.wh-fv-tcai-x, .wh-fv-tcai-min { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; color: var(--cs-mute, #646970); }
.wh-fv-tcai-x:hover, .wh-fv-tcai-min:hover { background: rgba(0, 0, 0, .06); }
.wh-fv-tcai-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.wh-fv-tcai-l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cs-mute, #646970); }
.wh-fv-tcai-l select, .wh-fv-tcai-l input[type=text], .wh-fv-tcai-l input[type=number] { font-weight: 400; width: 100%; max-width: none; }
.wh-fv-tcai-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.wh-fv-tcai-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .wh-fv-tcai-two, .wh-fv-tcai-four { grid-template-columns: 1fr; } }
.wh-fv-tcai-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.wh-fv-tcai-check span { color: var(--cs-mute, #646970); }
.wh-fv-tcai-note { font-size: 12px; color: var(--cs-mute, #646970); margin: 0; }
.wh-fv-tcai-mic-row { display: flex; gap: 6px; }
.wh-fv-tcai-mic-row .is-on { color: #fff; background: #dc2626; border-color: #dc2626; }
.wh-fv-tcai-result { border: 1px solid var(--cs-line, #dcdcde); border-radius: 10px; padding: 10px 14px; max-height: 340px; overflow: auto; font-size: 14px; line-height: 1.55; outline: none; }
.wh-fv-tcai-result h2, .wh-fv-tcai-result h3 { margin: .6em 0 .3em; font-size: 1.1em; }
.wh-fv-tcai-status { padding: 8px 16px; font-size: 12.5px; border-top: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tcai-status.is-error { color: #b32d2e; }
.wh-fv-tcai-status.is-ok { color: #008a20; }
.wh-fv-tcai-prog { height: 4px; background: rgba(0, 0, 0, .08); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.wh-fv-tcai-prog i { display: block; height: 100%; width: 0; background: var(--a1, #7c3aed); transition: width .2s; }
.wh-fv-tcai-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tcai-btns:empty { display: none; }
.wh-fv-tcai-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wh-fv-tcai-table th, .wh-fv-tcai-table td { border-bottom: 1px solid var(--cs-line, #dcdcde); padding: 6px 8px; text-align: left; vertical-align: top; }
.wh-fv-tcai-table th { font-size: 12px; color: var(--cs-mute, #646970); position: sticky; top: 0; background: var(--cs-bg, #fff); }
.wh-fv-tcai-table td[contenteditable], .wh-fv-tcai-table [data-t] { outline: none; border-radius: 4px; }
.wh-fv-tcai-table td[contenteditable]:focus, .wh-fv-tcai-table [data-t]:focus { background: rgba(124, 58, 237, .07); }
.wh-fv-tcai-cues { max-height: 360px; overflow: auto; }
.wh-fv-tcai-cues td:nth-child(2), .wh-fv-tcai-cues td:nth-child(3) { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--cs-mute, #646970); }
.wh-fv-tcai-del { border: 0; background: none; cursor: pointer; color: var(--cs-mute, #646970); }
.wh-fv-tcai-meet-top { display: flex; align-items: center; gap: 10px; }
.wh-fv-tcai-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: wh-fv-tcai-blink 1.2s infinite; }
@keyframes wh-fv-tcai-blink { 50% { opacity: .3; } }
.wh-fv-tcai-meter { width: 60px; height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.wh-fv-tcai-meter i { display: block; height: 100%; width: 0; background: #16a34a; transition: width .1s; }
.wh-fv-tcai-meter.is-b i { background: #2563eb; }
.wh-fv-tcai-lines { max-height: 320px; overflow: auto; font-size: 13.5px; line-height: 1.5; }
.wh-fv-tcai-lines p { margin: 0 0 6px; }

/* Transcribe Settings in tabs (Nov 13, 2026): the same tab bar as AI Search Settings, one section below it. */
.wh-fv-tc-tabs { position: sticky; top: 32px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 12px; background: var(--cs-soft, #f6f7f7); border: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tc-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--cs-mute, #646970); font-weight: 600; font-size: 13px; cursor: pointer; }
.wh-fv-tc-tabs button .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wh-fv-tc-tabs button:hover { color: var(--cs-text, #1d2327); background: var(--cs-bg, #fff); }
.wh-fv-tc-tabs button:focus-visible { outline: 2px solid var(--a1, #7c3aed); outline-offset: 1px; }
.wh-fv-tc-tabs button.is-on { background: linear-gradient(135deg, var(--a1, #7c3aed), var(--a2, #db2777)); color: #fff; }
.wh-fv-tc-tab[hidden] { display: none !important; }
.wh-fv-tc-find { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 9px; background: var(--cs-bg, #fff); border: 1px solid var(--cs-line, #dcdcde); }
.wh-fv-tc-find .dashicons { color: var(--cs-mute, #646970); font-size: 16px; width: 16px; height: 16px; }
.wh-fv-tc-find input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 32px; width: 170px; padding: 0 2px; }
.wh-fv-tc-settings label[hidden], .wh-fv-tc-settings .wh-fv-tc-field[hidden], .wh-fv-tc-settings .wh-fv-tc-card[hidden] { display: none !important; }
.wh-fv-tc-settings.is-finding .wh-fv-tc-tab { margin-bottom: 6px; }
.wh-fv-tc-settings.is-finding .wh-fv-tc-card:not(.is-whole) h3, .wh-fv-tc-settings.is-finding .wh-fv-tc-card:not(.is-whole) p.wh-fv-tc-small, .wh-fv-tc-settings.is-finding .wh-fv-tc-card:not(.is-whole) .wh-fv-tc-ms, .wh-fv-tc-settings.is-finding .wh-fv-tc-card:not(.is-whole) details { display: none; }
.wh-fv-tc-save { display: flex; align-items: center; gap: 10px; }
@media (max-width: 782px) { .wh-fv-tc-tabs { top: 46px; flex-wrap: nowrap; overflow-x: auto; } .wh-fv-tc-tabs button { white-space: nowrap; } .wh-fv-tc-find { margin-left: 0; } .wh-fv-tc-find input[type="search"] { width: 130px; } }

/* Nov 14: live dictation - the words being said, written into the box as they come (tidied when it's stopped). */
.wh-fv-tc-dictating { background: rgba(124, 58, 237, .10); border-radius: 3px; box-shadow: 0 0 0 1px rgba(124, 58, 237, .18); font-style: normal; }
.wh-fv-tc-bar-btn svg { vertical-align: -2px; }