.tab-l-short { display: none; }
:root {
/* Brand-green palette (rebrand 2026-05-06) — variable names preserved
so every existing rule referencing --violet-* inherits the new
values with zero per-rule edits. The "violet" labels are now legacy
names for what is the lime/green ramp matching the landing. */
--violet-950: #1a2e05; /* deep forest — was deep purple */
--violet-900: #365314; /* lime-900 */
--violet-800: #4d7508; /* darker brand-green */
--violet-700: #6da00f; /* brand-700 — the canonical landing accent */
--violet-600: #84cc16; /* lime-500 */
--violet-500: #a3dc2d; /* brand-2 — same as the gradient's mid stop */
--violet-300: #d9f99d; /* lime-200 — light tint */
--violet-100: #ecfccb; /* lime-100 — hover background */
--violet-50: #f7fee7; /* lime-50 — subtle wash */
--amber-400: #fbbf24; --emerald-500: #10b981; --rose-500: #f43f5e; --rose-600: #e11d48;
--white: #ffffff;
--ink-900: #0f172a; --ink-700: #334155; --ink-500: #64748b;
--ink-300: #cbd5e1; --ink-200: #e2e8f0; --ink-100: #f1f5f9; --ink-50: #f8fafc;
/* Brand-aligned aliases — opt-in for any new rules. */
--brand-1: #c5f44f; --brand-2: #a3dc2d; --brand-700: #6da00f; --brand-800: #4d7508;
--green-text: #14532d;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0;
/* Calm light-mint surface instead of the dark purple ribbon — matches
the landing's reading-friendly background so /view feels like part
of the same product rather than a separate purple application. */
background: linear-gradient(180deg, #f7fee7 0%, #ffffff 240px) #ffffff;
background-attachment: fixed; min-height: 100vh;
color: var(--ink-900);
font: 15px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
-webkit-font-smoothing: antialiased; }
/* nav: all styles live in shared-nav.js */
/* layout — main padding-top is 0 so the side rails + center-sticky
header start IMMEDIATELY below the global nav. With sticky-top
also pinned just below the nav, there's zero scroll-before-pin
gap (operator feedback: "they should be sticky with no change in
position due to scroll"). The 16px breathing room moves to a
small spacer above the first content card instead. */
main { max-width: 1320px; margin: 0 auto; padding: 0 24px 120px;
display: grid; grid-template-columns: 260px 1fr 280px; gap: 20px;
align-items: start; }
/* Right rail empty (see _pruneRightRail): drop its track rather than
leave a 280px hole. Declared HERE, with the base grid, not further
down the sheet — main:has() and main have the same specificity under
a media query, so a late base rule would beat every breakpoint below
on source order. It did: at 384px the transcript column collapsed to
102px because this rule outranked the single-column phone layout. */
main:has(aside.right.is-empty) { grid-template-columns: 260px 1fr; }
/* STUDY MODE — chat docked beside the transcript instead of replacing it.
Operator chose this over a split centre or a bottom drawer: the transcript
keeps the full reading column and the shell already exists, since the
right rail is usually pruned away on this page anyway (measured: the grid
is 260px 992px at 1440).
Declared here WITH the base grid for the reason in the comment above —
main.is-study and main:has(...) have equal specificity, so a rule placed
later in the sheet would beat every breakpoint below on source order.
The .is-study rules must therefore be repeated in each media query. */
main.is-study { grid-template-columns: 260px 1fr 420px; }
main.is-study:has(aside.right.is-empty) { grid-template-columns: 260px 1fr 420px; }
@media (max-width: 1180px) {
main { grid-template-columns: 240px 1fr 260px; gap: 16px; }
main:has(aside.right.is-empty) { grid-template-columns: 240px 1fr; }
/* Left rail goes before the transcript does — reading width is the
thing being protected. */
main.is-study,
main.is-study:has(aside.right.is-empty) { grid-template-columns: 1fr 380px; }
main.is-study aside.left { display: none; }
}
@media (max-width: 1024px) {
main { grid-template-columns: 1fr 260px; }
main:has(aside.right.is-empty) { grid-template-columns: 1fr; }
aside.left { display: none; }
main.is-study,
main.is-study:has(aside.right.is-empty) { grid-template-columns: 1fr 340px; }
}
@media (max-width: 820px) {
main { grid-template-columns: 1fr; padding: 0 8px 120px; gap: 14px; }
main:has(aside.right.is-empty) { grid-template-columns: 1fr; }
aside.right { position: static; max-height: none; overflow: visible; }
/* Below 900px there is no honest side-by-side: two 380px columns would
leave a transcript nobody can read. JS un-docks before this ever
applies, but the rule is here so a resize mid-session cannot strand
the layout in a broken state. */
main.is-study,
main.is-study:has(aside.right.is-empty) { grid-template-columns: 1fr; }
}
/* Operator 2026-05-17 ticket c766vh: more horizontal real-estate on
phones — main padding 12→4px and insights card inner padding tighter. */
@media (max-width: 560px) {
main { padding: 0 4px 130px; }
.insights .ins-head { padding: 12px 14px; }
.insights .ins-body { padding: 0 12px 14px; }
.insights .ins-section { padding-top: 14px; margin-top: 14px; }
}
/* common card */
.card { background: var(--white); color: var(--ink-900);
border-radius: 16px; padding: 20px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08); }
/* Left sidebar transparent — operator 2026-05-17 ticket 1l99d8. */
aside.left .card {
background: transparent !important;
box-shadow: none !important;
padding: 12px 14px !important;
}
/* left sidebar — sticky pinned to the bottom of the global nav.
top:55 matches the nav's height + main has padding-top:0 above,
so the rail is in its sticky position from the very first paint:
scroll-before-pin gap is zero. max-height + overflow-y means a
long recent-transcripts list scrolls inside the rail without
pushing other surfaces. */
aside.left {
position: sticky;
top: 55px;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
aside.left .card h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); }
.recent-item { display: block; padding: 8px 10px; border-radius: 8px;
font-size: 13px; color: var(--ink-700); text-decoration: none;
margin-bottom: 2px; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: background 0.15s; }
.recent-item:hover { background: var(--violet-50); color: var(--violet-700); }
.recent-item.current { background: var(--violet-100); color: var(--violet-700); font-weight: 600; }
.recent-empty { color: var(--ink-500); font-size: 12px; padding: 8px 10px; }
.recent-new { display: block; padding: 10px 12px; border-radius: 8px;
background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
color: var(--white); text-decoration: none; font-size: 13px; font-weight: 700;
text-align: center; margin: 0 0 10px; }
/* center */
/* Sticky wrapper: pins the title block + tab strip below the global nav
so the transcript / insights body scrolls underneath while the user
keeps the title, status, and tab switch in reach. Global nav is
sticky at top:0 with height ~55px — top:55px clears it cleanly.
Solid bg + soft shadow so transcript content scrolling behind doesn't
bleed through the sticky header. */
.center .center-sticky {
position: sticky;
top: 55px;
z-index: 20;
background: linear-gradient(180deg, #f7fee7 0%, #ffffff 100%);
padding: 0 0 6px;
margin: 0 0 8px;
box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.18);
border-radius: 0 0 12px 12px;
}
/* The sticky header sits ABOVE the transcript in the same scroll
context, so a segment scrolled to the top of the list slides under it
and reads as chopped in half — which is exactly what the first line
did on a phone. scroll-margin lifts any segment we scroll to (and any
:target / click-to-seek jump) clear of the header; scroll-padding does
the same for the scroll container itself. */
#transcript { scroll-padding-top: 8px; }
/* Derived at runtime from the real sticky header (see _whipSyncStickyH).
The fallback is only for the first paint; a hardcoded guess here is
what left the spoken line 56px behind the header. */
#transcript .segment { scroll-margin-top: calc(var(--whip-sticky-h, 206px) + 14px); }
@media (max-width: 700px) {
/* Phone: nav 55px + tabs + the title/duration row is ~150px of
chrome. Give the list that much breathing room at the top so the
first segment starts BELOW the header instead of behind it, and
keep the header's own padding tighter so it costs less height. */
.center .center-sticky { padding-bottom: 4px; margin-bottom: 4px; }
#transcript { padding-top: 10px; }
#transcript .segment:first-child { margin-top: 2px; }
/* The jump-to-time input was running past the right edge next to the
icon row; let the toolbar wrap instead of overflowing. */
.center .center-sticky .head-actions,
.center .center-sticky .head-row { flex-wrap: wrap; row-gap: 6px; }
}
/* Tabs come first — most prominent action surface. Compact head sits
below as a single thin line: title · duration · language · status. */
.center .center-sticky .view-tabs { margin: 0 0 4px; background: transparent; }
.center .center-sticky .head { margin-bottom: 4px; }
/* Sticky pinned IMMEDIATELY under the global nav — zero gap (operator
2026-05-15: "white gap between menu and Transcripts/Intelligence/Notes
menu, remove this gap"). The negative top compensates for default
browser/main spacing that was pushing the sticky 19px below the nav
on mobile (and ~6px on desktop). */
.center .center-sticky { top: 55px !important; padding-top: 0; margin-top: 0; }
/* Pull .center's first child flush against the top of main — kills the
~19px gap visible on mobile between the nav and the sticky bar. */
main > .center > *:first-child { margin-top: 0 !important; }
main { padding-top: 0 !important; }
@media (max-width: 768px) {
/* On mobile the global nav is shorter (~36px tall); pin the sticky to
match so there is no white gap, and tighten the sticky's own internal
padding to zero. */
.center .center-sticky { top: 36px !important; padding: 0 0 4px !important; margin: 0 !important; }
}
.center .head {
background: transparent;
border-radius: 0;
padding: 8px 4px;
box-shadow: none;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
color: var(--ink-700);
}
.center .head h1 {
margin: 0;
font-size: 14px; font-weight: 700;
letter-spacing: -0.005em;
color: var(--ink-500); /* match #meta-duration muted slate */
word-break: break-word;
max-width: 60ch;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* min-height reserves the row BEFORE its fields un-hide. Measured
2026-08-04 on prod: the meta line went 0 -> 19px at ~1200ms as date,
duration and language were revealed, growing .head and .center-sticky
by 12px and shoving the transcript down mid-read. One of three shifts
that put this page at CLS 0.30 (poor). Reserving costs nothing when
the fields are absent — the row is empty either way. */
.center .head .meta-line { margin: 0; color: var(--ink-500); font-size: 12.5px;
display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
min-height: 19px; }
.center .head .meta-line .dot { opacity: 0.4; }
.center .head .meta-line .status { display: inline-flex; align-items: center; gap: 4px;
color: var(--ink-500); font-weight: 500; font-size: 12px; }
/* Status colour variants — operator 2026-05-17 wsh8eo: keep both
done + running at the same muted slate as the lang chip so the
status reads as metadata, not a chrome accent. */
.center .head .meta-line .status.is-done { color: var(--ink-500); }
.center .head .meta-line .status.is-running { color: var(--ink-500); }
/* Status dot — smaller + very light grey, hollow appearance via low
opacity (operator 2026-05-17 x1zwvq). */
.center .head .meta-line .status .status-dot {
display: inline-block;
font-size: 8px; line-height: 1;
color: var(--ink-300, #cbd5e1);
vertical-align: 1.5px;
margin-right: 1px;
}
/* Sample-attribution line removed per operator 2026-05-15 — keep the
header thin: only title · duration · language · status. */
.center .head #sample-attribution { display: none !important; }
.center .head .sample-attr a { color: var(--ink-500); text-decoration: underline; text-underline-offset: 2px; }
.center .head .sample-attr a:hover { color: var(--ink-900); }
.transcript { background: var(--white); color: var(--ink-900); border-radius: 16px;
padding: 14px 24px; line-height: 1.8; font-size: 16px;
margin-top: 0;
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06); }
/* ───────────────────────────────────────────────────────────────────
Viewport-locked shell (2026-08-03). Operator: "scroll bar should be next
to the transcript."
Three earlier attempts capped .transcript with max-height: calc(...) and
all failed for the same reason: the PAGE still scrolled, so there were two
bars and the window one -- taller, at the far edge -- stayed the one the
eye finds. .whip-share-footer alone puts the document 367px past the fold
at 1440x900, which no transcript height can absorb.
So lock the shell instead. body becomes a flex column of exactly viewport
height with overflow hidden; the transcript is the only thing that can
scroll, and its height comes from the layout rather than from arithmetic
on constants that drift.
min-height: 0 on every ancestor is load-bearing, not decoration: a flex or
grid item defaults to min-height:auto and refuses to shrink below its
content, so without it the transcript stays 68,000px tall and the shell
overflows anyway.
Scoped to >=1024 wide and >=640 tall. Measured gap from the transcript's
right edge to the window edge is 84px at 1440 but 4px at 390 -- on a phone
the bar is already beside the text, and locking the shell there would pin
the chrome and cost real reading area. Narrow and short viewports keep the
page scroll they have always had. */
@media (min-width: 1024px) and (min-height: 640px) {
html { height: 100%; }
body {
height: 100%;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
/* The audio bar is position:fixed, so reserve its strip here and the
flex column simply ends above it. --dock-bottom is kept in sync
with the bar's real height by JS.
max() is the floor, and it is load-bearing. The bar starts short
and settles at 81px, so --dock-bottom RISES as it measures. In
this shell body is a fixed-height flex column and main is
flex:1 1 auto, so a growing reserve comes straight out of main:
measured on prod, main went 748 -> 678px at ~2.1s, the single
largest layout shift on the page. Flooring at the settled value
means the reserve can only shrink, which costs nothing. */
padding-bottom: var(--dock-bottom, 93px);
}
main {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 0; /* the 120px existed to clear the fixed bar */
/* width:100% is the whole layout-shift fix, after five wrong guesses.
body here is display:flex + column, which makes main a flex ITEM whose
cross axis is horizontal. `margin: 0 auto` on main CANCELS the default
align-items:stretch, so main became shrink-to-fit — sized by its own
content. Measured on prod as the transcript streamed in:
934ms w= 935 marginLeft=252.66px
956ms w=1010
1198ms w=1320 marginLeft=60px
a 385px widening and a 193px slide left, which is why the shift's own
source read `main 215,59 1010x748 -> 60,59 1341x678` and why every
fix aimed at a CHILD (nav strip, dock offset, share footer, audio
reserve) missed: nothing inside main was moving it. width:100% gives
it a definite cross size, max-width still caps it at 1320 and the auto
margins still centre it, so the box is identical from first paint and
no longer depends on what has loaded. */
width: 100%;
}
/* align-self, not align-items: the grid keeps `align-items: start` so the
left rail and right rail stay top-aligned; only the centre column is
stretched to full height. */
main > .center {
align-self: stretch;
min-height: 0;
display: flex;
flex-direction: column;
}
.center > .view-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.transcript {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(132, 204, 22, 0.75) rgba(15, 23, 42, 0.06);
}
.whip-share-footer { flex: 0 0 auto; }
/* WebKit needs the explicit track/thumb. Green matches the lime already
used for the mobile page scrollbar; 12px is a mouse target. */
.transcript::-webkit-scrollbar { width: 12px; }
.transcript::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.06); border-radius: 8px; margin: 6px 0; }
.transcript::-webkit-scrollbar-thumb {
background: rgba(132, 204, 22, 0.75); border-radius: 8px;
border: 3px solid transparent; background-clip: padding-box; }
.transcript::-webkit-scrollbar-thumb:hover {
background: rgba(132, 204, 22, 0.95); }
}
/* A touch user on a wide screen still needs a thumb-sized target. */
@media (pointer: coarse) and (min-width: 1024px) and (min-height: 640px) {
.transcript::-webkit-scrollbar { width: 16px; }
}
/* Two-phase paint fast-preview: plain-text block shown for the brief
window between JSON-parse and rich-segment-DOM construction on long
transcripts. Subtle fade-in so the upgrade to the timestamp DOM in
the next frame doesn't feel jarring. */
.transcript .transcript-fastpaint {
white-space: pre-wrap;
color: var(--ink-700);
animation: tx-fastpaint-fade 0.18s ease-out both;
}
@keyframes tx-fastpaint-fade {
from { opacity: 0; } to { opacity: 1; }
}
.transcript .segment {
margin-bottom: 14px;
/* Auto-scroll lands the active segment with block:'start'; this
margin lifts it below the sticky stack (~145px) AND leaves ~2
lines of preceding context visible above it, so the playing line
sits as the 3rd visible row (operator 2026-05-20: "current playing
should be 2 lines below the top visible line"). Desktop line-
height ~27px × 2 + sticky-buffer → 240px. Mobile ~20px × 2 → 150px. */
scroll-margin-top: 240px;
}
@media (max-width: 768px) {
.transcript .segment { scroll-margin-top: 150px; }
}
.transcript .segment p {
margin: 0;
/* Operator 2026-05-17 u9n80y: justified text for prettier reading.
hyphens auto keeps words from leaving big rivers on narrow lines. */
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
/* Force wrapping of unbreakable runs (Whisper hallucinated 3000+
repeats of Malayalam syllable ത്ത on transcript ab218bd1 with no
spaces — to CSS that was one word, .segment grew to 4630px wide
and broke the whole layout. overflow-wrap:anywhere caps any glyph
run at the column width. min-width:0 lets the flex/grid parent
contract the cell. Operator 2026-05-29 fix.)
overflow-wrap:anywhere ALONE doesn't break Indic virama-joined
sequences in Chrome — pair with line-break:anywhere + word-break:
break-all to force breaks regardless of script's joining rules. */
overflow-wrap: anywhere;
word-break: break-all;
line-break: anywhere;
min-width: 0;
}
.transcript .segment { min-width: 0; max-width: 100%; }
/* CSS grid quirk: a 1fr column has `min-width: auto`, so a cell with
unbreakable-ish content can force the column to grow past its track.
`min-width: 0` on the grid item lets the column actually be 1fr.
Same trick on .transcript so its own intrinsic width can't push the
parent. (operator 2026-05-29 — same runaway segment also expanded
the whole .center column to 1580px in a 1501px viewport.) */
main > .center { min-width: 0; }
.transcript { min-width: 0; max-width: 100%; }
/* Operator 2026-05-17 ticket ggcs1q: text selection must always work
inside transcript even though paragraph clicks also seek. Pointer
for legibility, but text remains selectable via mouse drag. */
.transcript .segment,
.transcript .segment p,
.transcript .w { user-select: text !important; -webkit-user-select: text !important; cursor: text; }
/* Timestamp — bold dark-green chip with a fixed min-width so swapping
to .ts-pause on the active segment never shifts the body text
(operator 2026-05-17 ticket ev4mks). */
.transcript .ts { color: #15803d; font-weight: 800; font-size: 12.5px;
font-family: ui-monospace, Menlo, monospace; cursor: pointer;
margin-right: 6px; user-select: none; padding: 2px 5px;
border-radius: 5px; transition: all 0.15s; vertical-align: 1px;
background: rgba(132, 204, 22, 0.10);
display: inline-block; min-width: 50px; text-align: center; }
.transcript .ts:hover { background: #dcfce7; color: #14532d; }
.transcript .ts.active { background: #16a34a; color: #fff; }
/* Per-segment play button (ticket 5svfdb → 5mbq5q → p7mlct → vtwony
→ myqliv): ACTIVE segment hides timestamp + shows play button.
The has-played gate was dropped so the FIRST segment (always
.active on load) shows the play button immediately instead of
a blank gap. */
.transcript .ts-pause { display: none; }
.transcript .segment.active .ts { display: none; }
.transcript .segment.active .ts-pause { display: inline-flex; }
/* Operator 2026-05-17 ticket 2v1h8g + ev4mks: transparent + futuristic
pill that's the SAME width as the timestamp chip — swapping between
timestamp (inactive) and play (active) keeps body text at the
exact same x-position. */
.transcript .ts-pause {
align-items: center; justify-content: center;
appearance: none; cursor: pointer;
margin-right: 6px; padding: 2px 5px;
min-width: 50px; height: 22px;
border: 1px solid rgba(132, 204, 22, 0.45);
background: transparent;
color: rgba(21, 128, 61, 0.78);
border-radius: 11px;
font: 700 11px/1 ui-monospace, Menlo, monospace;
vertical-align: 1px;
transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
}
.transcript .ts-pause:hover {
background: rgba(132, 204, 22, 0.14);
color: #15803d;
border-color: rgba(132, 204, 22, 0.7);
transform: scale(1.06);
}
/* Default: every play button shows ▶. The HTML ships with ❚❚ text
content (active+playing default), so use ::before override to keep
a consistent visual without DOM mutation. */
.transcript .ts-pause { font-size: 0; }
.transcript .ts-pause::before { content: "▶"; font-size: 10px; }
/* On the currently-active+playing segment swap to pause. */
body:not(.audio-paused) .transcript .segment.active .ts-pause::before {
content: "❚❚"; font-size: 9px;
}
/* Spoken-word highlight — current 3 words get a light-green
underline (no background fill). Operator 2026-05-17. Clears on
pause/stop. */
.transcript .w { transition: text-decoration-color 0.18s; }
/* Spoken-word marker removed entirely per operator 2026-05-17 —
no underline, no fill. The active-segment left-edge accent is
the only "currently-playing" indicator. */
.transcript .w.w-now { text-decoration: none; }
/* Nav-jump flash — when TOP/NOW/END pills land the user on a segment,
briefly tint it lime so the eye catches WHERE the jump went.
Auto-removes after 1.3s via JS. */
@keyframes navFlashFade {
0% { background: rgba(132, 204, 22, 0.32); }
60% { background: rgba(132, 204, 22, 0.18); }
100% { background: transparent; }
}
.transcript .segment.nav-flash {
animation: navFlashFade 1.2s ease-out forwards;
border-radius: 6px;
}
/* Quick-nav dock for long transcripts — fixed right edge, mid-screen.
Three vertical pills: Top · Now (current playing position) · End.
Visible only on the Transcript tab (not Intelligence/Notes) via a
body class flipped by the tab switcher. */
/* Never paint the un-hoisted (sticky right rail) variant. Operator
2026-05-17 ticket hqthht: even when the JS reparent fails or races
a slow .head paint, the visitor must NEVER see the floating dock
in the page center-right. Show only when .is-hoisted has been
applied by the reparenter below. */
.transcript-nav-dock:not(.is-hoisted) { display: none !important; }
/* Hoisted nav-dock — floating fixed above the audio bar on the
right edge on every viewport (operator 2026-05-17 ticket znsgvb:
'didn't appear when i scrolled past actively playing section').
Was inline in .head on desktop; switched to fixed so it stays
visible regardless of scroll. Bottom anchored by --dock-bottom
CSS var that JS keeps in sync with audio-bar height. */
.transcript-nav-dock.is-hoisted {
/* Operator 2026-05-17 ticket 7naotb: visible on EVERY tab + always
while scrolling — explicit display:flex overrides the
body.tab-transcript guard so leaving Transcript for Summary
doesn't hide the pills. */
display: flex !important;
position: fixed !important;
right: 12px !important;
bottom: var(--dock-bottom, 93px) !important;
flex-direction: row !important;
gap: 4px !important;
margin: 0 !important;
padding: 4px 6px !important;
background: rgba(255, 255, 255, 0.96) !important;
border: 1px solid var(--ink-200, #e2e8f0) !important;
border-radius: 999px !important;
box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.3) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
top: auto !important; left: auto !important; transform: none !important;
z-index: 45; /* above audio-bar (40) — operator 2026-05-17 2fofu0 */
width: fit-content;
}
.transcript-nav-dock.is-hoisted .nav-pill {
width: 32px; height: 22px;
gap: 0; padding: 0;
border-radius: 999px;
position: relative; /* anchors the hit-box overlay below */
}
/* Touch target without a visual change. The pill stays 32x22; a centred
overlay carries the tap area. Measured on prod at 430px: 32x22 with
centres 36px apart.
Height goes to the full 44px. Width is capped at 36px — the centre-to-
centre distance — because two 44px-wide boxes cannot sit 36px apart
without overlapping, and an overlap here means tapping "Top" and getting
"Now". A hit box that steals its neighbour's taps is worse than a small
one. Closing the remaining 8px needs a wider gap, which is a visual
change the operator has not asked for. */
.transcript-nav-dock.is-hoisted .nav-pill::after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 36px; height: 44px;
}
.transcript-nav-dock.is-hoisted .nav-pill .nav-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.transcript-nav-dock.is-hoisted .nav-pill .nav-label { display: none; }
/* Hoisted Now should match the other pills (no green fill), matching mobile */
.transcript-nav-dock.is-hoisted .nav-pill.is-current {
background: transparent !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: inherit !important;
}
.transcript-nav-dock.is-hoisted .nav-pill.is-current .nav-icon svg circle { fill: currentColor; }
/* Cancel the old docked-rail ::before icon overrides that don't apply once hoisted. */
.transcript-nav-dock.is-hoisted .nav-pill[data-nav] .nav-icon::before { content: none !important; }
.transcript-nav-dock.is-hoisted .nav-pill .nav-icon svg { width: 12px; height: 12px; display: block; }
.transcript-nav-dock {
position: fixed;
/* Land in the gap between the transcript column and the right rail
(Ask AI panel) so the pills sit at the transcript's right edge,
not the browser's. Math: half the viewport-vs-1320-overflow,
plus 24 px outer padding, plus 280 px right sidebar, minus a
30 px nudge so the 36 px-wide dock sits inside the gap with a
small overlap into the sidebar's left edge instead of
cantilevered into the browser margin. */
right: max(16px, calc((100vw - 1320px) / 2 + 294px));
top: 50%;
transform: translateY(-50%);
z-index: 25;
display: none; flex-direction: column; gap: 8px;
pointer-events: none;
}
body.tab-transcript .transcript-nav-dock { display: flex; }
.transcript-nav-dock .nav-pill {
pointer-events: auto;
appearance: none; cursor: pointer;
width: 36px; height: 36px;
border: 1px solid rgba(15,23,42,0.08);
background: rgba(255,255,255,0.96);
color: var(--ink-700);
border-radius: 999px;
box-shadow:
0 1px 2px rgba(15,23,42,0.04),
0 6px 18px -6px rgba(15,23,42,0.18);
font: 700 12px/1.1 -apple-system, "Inter", system-ui, sans-serif;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
}
.transcript-nav-dock .nav-pill .nav-icon { font-size: 14px; line-height: 1; }
.transcript-nav-dock .nav-pill .nav-label {
font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--ink-500); font-weight: 700;
}
.transcript-nav-dock .nav-pill:hover {
background: var(--brand-1); border-color: var(--brand-2); color: #1a2e05;
transform: translateX(-2px);
}
.transcript-nav-dock .nav-pill:hover .nav-label { color: #1a2e05; }
.transcript-nav-dock .nav-pill.is-current {
background: var(--violet-700); color: var(--white); border-color: var(--violet-700);
}
.transcript-nav-dock .nav-pill.is-current .nav-label { color: rgba(255,255,255,0.85); }
@media (max-width: 820px) {
.transcript-nav-dock { right: 10px; }
.transcript-nav-dock .nav-pill { width: 40px; height: 40px; }
}
/* No-speech (VAD-rejected) state — calm explainer panel where the
transcript would normally render. */
.no-speech {
text-align: center;
padding: 56px 24px 64px;
color: var(--ink-700);
}
.no-speech-headline {
font-size: 22px; font-weight: 700;
color: var(--ink-900);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.no-speech-body {
font-size: 15px; line-height: 1.55;
max-width: 520px; margin: 0 auto 14px;
color: var(--ink-700);
}
.no-speech-ratio {
font-family: ui-monospace, Menlo, monospace;
font-size: 12px; color: var(--ink-500);
}
/* Sidebar utility — used by renderTranscriptData when hiding export
panels for VAD-rejected jobs. */
aside.right .is-hidden { display: none !important; }
/* Segment-level highlight while the audio plays this segment's range */
.transcript .segment {
padding: 6px 10px;
border-radius: 8px;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Active segment — soft lime wash matching the brand green used on the
jump-to-current / focus-ring affordances (operator 2026-05-20:
"the highlight tinge is the greenish tinge we use on going to the
current row"). Same rgba(132,204,22,~0.10) used by .recent-search
focus + the existing left-edge accent. */
.transcript .segment.active {
background: rgba(132, 204, 22, 0.10);
box-shadow: inset 3px 0 0 var(--violet-600);
border-radius: 6px;
transition: background 0.18s ease-out;
}
body.hide-ts .transcript .ts { display: none; }
/* Removed-artifact rows: off by default, on via View → Show removed artifacts (the detailed view). */
.seg-gap { display: none; gap: 10px; align-items: baseline; margin: 6px 0 6px 0; padding: 4px 8px; border-left: 3px dashed var(--line, #d9d9d9); color: var(--muted, #6b6b6b); font-size: 13px; font-style: italic; }
body.wt-show-gaps .seg-gap { display: flex; }
.seg-gap small { font-style: normal; font-size: 11px; opacity: .8; }
.transcript .loading, .transcript .errored {
text-align: center; color: var(--ink-500); padding: 40px 0; font-size: 14px; }
.transcript .errored { color: var(--rose-600); }
/* Tab strip above transcript / intelligence panels.
Operator 2026-05-17 2ht11r → 29pzt2: more padding top + bigger
tab height for breathing room. */
.view-tabs {
display: flex; align-items: stretch; gap: 4px;
border-bottom: 1px solid #e5e7eb;
margin: 36px 0 22px;
padding-top: 8px;
}
.view-tabs .view-tab {
min-height: 44px;
padding: 0 18px !important;
font-size: 14.5px !important;
line-height: 1 !important;
}
/* Explicit color (not via font:inherit) so the contrast is clear
against the white/cream background — earlier the inactive tab
could collapse to the page text color and disappear. */
.view-tabs .view-tab {
background: transparent; border: 0;
padding: 9px 16px;
margin-bottom: -1px;
font-family: inherit; font-size: 14px; font-weight: 600;
color: #1e1b4b !important; /* dark indigo — readable on white */
cursor: pointer;
border-bottom: 2px solid transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
border-radius: 8px 8px 0 0;
}
.view-tabs .view-tab:hover:not(:disabled) {
color: #4d7508 !important;
background: #faf7ff;
}
.view-tabs .view-tab.is-active {
color: #4d7508 !important;
background: transparent !important; /* operator 2026-05-17 vop3sb */
border-bottom-color: #84cc16;
font-weight: 700;
}
.view-tabs .view-tab:disabled {
color: #94a3b8 !important; cursor: not-allowed; opacity: 0.85;
}
/* Tiny ✓ pill on the Notes tab when there are saved notes for this
transcript — gives the user a glanceable signal that they have
content stashed under that tab without having to switch to it. */
.view-tabs .view-tab .notes-saved-pill {
font: 700 9.5px/1.2 var(--sans, "Inter", system-ui, sans-serif);
background: var(--violet-700, #4d7508);
color: #ffffff;
width: 14px; height: 14px;
display: inline-grid; place-items: center;
border-radius: 50%;
margin-left: 2px;
}
.view-tabs .view-tab .notes-saved-pill[hidden] { display: none; }
/* Notes panel — clean cream card with one big textarea. */
.notes-card {
background: #ffffff;
border-radius: 14px;
padding: 18px 20px 16px;
box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.notes-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.notes-head h3 {
margin: 0; font: 700 14px/1.2 var(--sans, "Inter", system-ui, sans-serif);
letter-spacing: -0.005em; color: var(--ink-900, #0f172a);
}
.notes-status {
font: 600 11.5px/1.2 var(--sans, "Inter", system-ui, sans-serif);
color: var(--ink-500, #64748b);
background: var(--ink-50, #f8fafc);
border: 1px solid rgba(15, 23, 42, 0.06);
padding: 3px 9px; border-radius: 999px;
}
.notes-status.is-saving { color: var(--violet-700, #4d7508); }
.notes-status.is-saved { color: #14532d; background: var(--violet-100, #ecfccb); border-color: rgba(132, 204, 22, 0.4); }
#notes-textarea {
width: 100%; min-height: 360px;
padding: 14px 16px;
font: 400 15px/1.7 var(--sans, "Inter", system-ui, sans-serif);
color: var(--ink-900, #0f172a);
background: var(--ink-50, #fafbfc);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
resize: vertical;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
#notes-textarea:focus {
border-color: var(--violet-500, #84cc16);
box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15);
background: #ffffff;
}
/* Operator ticket e26dxj: Edit/Preview toggle for the notes panel.
The buttons sit inline with the head; the preview pane mirrors
the markdown styles used in chat bubbles so notes feel consistent. */
.notes-mode {
display: inline-flex; gap: 0;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px; overflow: hidden;
margin-right: 8px;
}
.notes-mode button {
background: transparent; border: none;
padding: 5px 12px;
font: 600 12px/1.2 var(--sans, "Inter", system-ui, sans-serif);
color: var(--ink-500, #64748b);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.notes-mode button:hover { color: var(--ink-900, #0f172a); }
.notes-mode button.is-active {
background: var(--violet-100, #ecfccb);
color: #14532d;
}
.notes-preview {
min-height: 360px;
padding: 14px 16px;
font: 400 15px/1.7 var(--sans, "Inter", system-ui, sans-serif);
color: var(--ink-900, #0f172a);
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
}
.notes-preview > *:first-child { margin-top: 0 !important; }
.notes-preview > *:last-child { margin-bottom: 0 !important; }
.notes-preview p { margin: 0 0 10px; }
.notes-preview h2 { font-size: 18px; font-weight: 700; margin: 14px 0 8px; }
.notes-preview h3 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; }
.notes-preview h4 { font-size: 14.5px; font-weight: 700; margin: 10px 0 5px; }
.notes-preview ul, .notes-preview ol { margin: 8px 0 12px; padding-left: 24px; }
.notes-preview li { margin: 3px 0; }
.notes-preview code {
background: #f1f5f9; padding: 1.5px 6px; border-radius: 4px;
font-family: var(--mono, ui-monospace, Menlo, monospace);
font-size: 13px; color: #334155;
}
.notes-preview pre {
background: #0f172a; color: #e2e8f0;
padding: 12px 14px; border-radius: 8px; overflow-x: auto;
margin: 10px 0; font-size: 13px;
}
.notes-preview pre code { background: transparent; padding: 0; color: inherit; }
.notes-preview a { color: var(--violet-700, #4d7508); text-decoration: underline; }
.notes-preview blockquote {
border-left: 3px solid #cbd5e1;
margin: 8px 0; padding: 2px 14px; color: #475569;
}
.notes-preview-empty { color: var(--ink-500, #64748b); font-style: italic; }
/* Quote-context pill above the chat form (operator ticket pekd60). */
.chat-quote-ctx {
margin: 8px 14px 0;
padding: 8px 12px;
background: linear-gradient(90deg, #f7fee7 0%, #ecfccb 100%);
border: 1px solid rgba(132, 204, 22, 0.4);
border-radius: 8px;
font-size: 13px; color: #14532d;
display: flex; align-items: flex-start; gap: 8px;
}
.chat-quote-ctx .ctx-body { flex: 1; min-width: 0; }
.chat-quote-ctx .ctx-label {
font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em;
text-transform: uppercase; color: #4d7508;
margin-bottom: 2px;
}
.chat-quote-ctx .ctx-quote { font-style: italic; color: #1f2937; }
.chat-quote-ctx button {
flex: none;
background: transparent; border: none;
color: #4d7508; font-size: 18px; line-height: 1;
padding: 0 2px; cursor: pointer;
}
.chat-quote-ctx button:hover { color: #14532d; }
.notes-meta {
margin: 8px 4px 0;
font: 500 11.5px/1.4 var(--sans, "Inter", system-ui, sans-serif);
color: var(--ink-500, #64748b);
font-variant-numeric: tabular-nums;
}
.view-tabs .view-tab .tab-beta {
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
background: #ecfccb; color: #6da00f;
padding: 2px 5px; border-radius: 4px;
line-height: 1.2;
}
.view-tabs .view-tab:disabled .tab-beta { background: #f1f5f9; color: #94a3b8; }
.view-panel[hidden] { display: none; }
/* Recent transcripts — search input + paginator */
.recent-search {
width: 100%;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 7px 10px; font: inherit; font-size: 13px;
color: #0f172a; outline: none;
margin-bottom: 8px;
transition: border-color 0.15s;
}
.recent-search:focus { border-color: #bef264; box-shadow: 0 0 0 3px rgba(132, 204, 22,0.10); }
.recent-search::placeholder { color: #94a3b8; }
.recent-pager {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px; padding-top: 8px;
border-top: 1px solid #f1f5f9;
font-size: 11.5px; color: #64748b;
font-variant-numeric: tabular-nums;
}
.recent-pager button {
background: transparent; border: 1px solid #e5e7eb;
color: #475569;
width: 24px; height: 24px;
border-radius: 6px; cursor: pointer;
display: inline-grid; place-items: center;
font: inherit; font-size: 12px; line-height: 1;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.recent-pager button:hover:not(:disabled) {
border-color: #bef264; color: #4d7508; background: #ecfccb;
}
.recent-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Insight panel — post-transcript intelligence layer (summary, pull
quotes, topics, per-speaker contributions). Mounts above the
transcript on /view once the transcript is ready. Kept visually
distinct from the transcript card: same rounded white surface, but a
violet-tinted header and chip rail so it reads as "derived analysis"
rather than "raw data". */
.insights {
background: var(--white); color: var(--ink-900); border-radius: 16px;
padding: 0; margin-bottom: 16px; overflow: hidden;
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
}
.insights[hidden] { display: none; }
/* Panel scrolling for the fixed-height shell. Declared HERE, after
`.insights { overflow: hidden }` above, and NOT up with the other shell
rules — the two selectors have equal specificity and a media query adds
none, so source order decides. Placed earlier it lost silently: measured
on staging, overflow-y still computed to `hidden` and only JS could reach
the clipped 458px. The same trap is documented on main:has() in this file.
body is a fixed-height flex column with overflow:hidden above 1024x640, so
any panel that outgrows the viewport is clipped and unreachable unless it
scrolls itself. .transcript was the only one that did. */
@media (min-width: 1024px) and (min-height: 640px) {
.insights,
#panel-notes .notes-card,
#chat-inline-mount {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(132, 204, 22, 0.75) rgba(15, 23, 42, 0.06);
}
.insights::-webkit-scrollbar { width: 12px; }
.insights::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.06); border-radius: 8px; margin: 6px 0; }
.insights::-webkit-scrollbar-thumb {
background: rgba(132, 204, 22, 0.75); border-radius: 8px;
border: 3px solid transparent; background-clip: padding-box; }
}
.insights .ins-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px; gap: 12px;
background: linear-gradient(135deg, var(--violet-50), rgba(196,181,253,0.25));
border-bottom: 1px solid var(--violet-100);
}
.insights .ins-head-left { display: flex; align-items: center; gap: 10px; }
.insights .ins-head h2 {
margin: 0; font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--violet-700);
}
.insights .ins-beta {
display: inline-block; padding: 2px 8px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
color: var(--violet-700); background: var(--violet-100);
border-radius: 999px; text-transform: uppercase;
}
.insights .ins-beta-note {
font-size: 11.5px; color: var(--ink-500);
font-weight: 500; text-transform: none; letter-spacing: 0;
}
.insights .ins-body { padding: 20px 24px 26px; }
.insights .ins-section { margin-top: 22px; padding-top: 18px;
border-top: 1px solid var(--ink-100); }
.insights .ins-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.insights .ins-section-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-500);
}
.insights .ins-toggle {
appearance: none; cursor: pointer; font: inherit;
background: var(--ink-50);
border: 1px solid var(--ink-200);
color: var(--ink-700);
font-size: 12px; font-weight: 600;
padding: 5px 12px; border-radius: 999px;
text-transform: none; letter-spacing: 0;
transition: background 0.15s, border-color 0.15s, color 0.15s;
display: inline-flex; align-items: center; gap: 6px;
}
.insights .ins-toggle::after {
content: "▾"; font-size: 10px; line-height: 1;
transition: transform 0.18s;
}
.insights .ins-section[data-collapsed="true"] .ins-toggle::after {
transform: rotate(-90deg);
}
.insights .ins-toggle:hover {
background: var(--brand-1); border-color: var(--brand-2); color: #1a2e05;
}
.insights .ins-section[data-collapsed="true"] .ins-section-body { display: none; }
.insights .ins-section[data-collapsed="true"] .ins-section-head { margin-bottom: 0; }
/* Summary — reads like a paragraph. */
.insights .ins-summary {
font-size: 15.5px; line-height: 1.65; color: var(--ink-900);
}
/* Quotes — left rule + speaker + clickable timestamp. */
.insights .ins-quote {
position: relative;
padding: 10px 14px 10px 18px;
margin-bottom: 10px;
border-left: 3px solid var(--violet-500);
background: var(--ink-50);
border-radius: 0 10px 10px 0;
font-size: 14.5px; line-height: 1.55; color: var(--ink-900);
}
.insights .ins-quote:last-child { margin-bottom: 0; }
.insights .ins-quote-meta {
margin-top: 6px;
display: flex; gap: 10px; align-items: center;
font-size: 12px; color: var(--ink-500);
}
.insights .ins-quote-speaker {
font-weight: 600; color: var(--ink-700);
}
/* Chapter navigation in the Summary tab. Rows rather than pills: a label is
a phrase, and pills wrap into an unreadable mosaic once there are eight. */
.insights .ins-chapters { display: grid; gap: 4px; }
.insights .ins-chapter {
display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline;
width: 100%; text-align: left; appearance: none; border: 0; cursor: pointer;
background: transparent; padding: 8px 10px; border-radius: 8px; font: inherit;
}
.insights .ins-chapter:hover { background: var(--violet-50); }
.insights .ins-chapter-t {
font: 600 12px/1.5 ui-monospace, Menlo, monospace; color: var(--violet-600);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.insights .ins-chapter-l { font-size: 14.5px; line-height: 1.5; color: var(--ink-900); }
@media (max-width: 560px) {
.insights .ins-chapter { grid-template-columns: 54px 1fr; gap: 8px; padding: 7px 8px; }
.insights .ins-chapter-l { font-size: 14px; }
}
.insights .ins-quote-seek {
appearance: none; background: transparent; border: 0;
color: var(--violet-600); cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600;
font-family: ui-monospace, Menlo, monospace;
padding: 1px 6px; border-radius: 4px;
}
/* ── Transcript search ───────────────────────────────────────────────
Sits in .center-sticky, transcript tab only. See the markup comment
for why it exists (session dfd20b57). */
.tsearch { display: none; margin: 0 0 10px; }
body.tab-transcript .tsearch { display: block; }
.tsearch-open { display: none; }
.tsearch-field {
display: flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid var(--ink-200);
border-radius: 10px; padding: 0 8px 0 10px;
transition: border-color .15s, box-shadow .15s;
}
.tsearch-field:focus-within {
border-color: var(--violet-500);
box-shadow: 0 0 0 3px var(--violet-50);
}
.tsearch-ico { color: var(--ink-500); flex: 0 0 auto; }
.tsearch input {
flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 14.5px; color: var(--ink-900);
padding: 9px 0; -webkit-appearance: none;
}
.tsearch input::-webkit-search-cancel-button { display: none; }
.tsearch-count {
flex: 0 0 auto; font: 600 12px/1 ui-monospace, Menlo, monospace;
color: var(--ink-500); font-variant-numeric: tabular-nums;
white-space: nowrap; padding: 0 2px;
}
.tsearch-count.is-none { color: #b91c1c; }
.tsearch-nav {
appearance: none; border: 0; background: transparent; cursor: pointer;
color: var(--ink-500); font-size: 14px; line-height: 1;
padding: 6px 5px; border-radius: 6px; flex: 0 0 auto;
}
.tsearch-nav:hover { background: var(--ink-100); color: var(--ink-900); }
.tsearch-clear { font-size: 18px; }
/* Results: timestamp + the line, so relevance is judged without jumping. */
.tsearch-results {
margin: 0 0 12px; max-height: 34vh; overflow-y: auto;
border: 1px solid var(--ink-200); border-radius: 10px;
background: #fff; box-shadow: 0 10px 24px -18px rgba(15,23,42,.35);
}
.tsr {
display: grid; grid-template-columns: 74px 1fr; gap: 10px;
align-items: baseline; width: 100%; text-align: left;
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 9px 12px; border-bottom: 1px solid var(--ink-100);
font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink-700);
}
.tsr:last-child { border-bottom: 0; }
.tsr:hover, .tsr:focus-visible { background: var(--violet-50); outline: none; }
.tsr.is-current { background: var(--violet-50); box-shadow: inset 3px 0 0 var(--violet-500); }
.tsr-t {
font: 600 12px/1.5 ui-monospace, Menlo, monospace;
color: var(--violet-600); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tsr-x { min-width: 0; }
.tsr mark, .transcript mark {
background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px;
}
.transcript mark.is-current { background: #fbbf24; box-shadow: 0 0 0 2px #fbbf24; }
.tsearch-empty {
padding: 12px 14px; font-size: 13.5px; color: var(--ink-500);
}
.tsearch-empty b { color: var(--ink-900); }
/* Clickable citation inside a chat answer — deliberately the same violet
mono treatment as .ins-quote-seek so "a time you can click" reads the
same everywhere on the page. */
.chat-msg.assistant .cts {
appearance: none; border: 0; cursor: pointer;
background: var(--violet-50); color: var(--violet-700);
font: 600 12px/1.35 ui-monospace, Menlo, monospace;
padding: 2px 7px; border-radius: 6px;
display: inline-flex; align-items: center; gap: 5px;
vertical-align: baseline; white-space: nowrap;
}
.chat-msg.assistant .cts:hover { background: var(--violet-100); color: var(--violet-700); }
.chat-msg.assistant .cts-ico { font-size: 9px; opacity: .8; }
.chat-msg.assistant .cts-spk { opacity: .75; font-weight: 500; }
/* The segment a citation or a result points at. */
.transcript .segment.seg-flash {
animation: segFlash 1.6s ease-out 1;
border-radius: 8px;
}
@keyframes segFlash {
0%, 30% { background: #fef3c7; }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.transcript .segment.seg-flash { animation: none; background: #fef3c7; }
}
/* Phone: the header is scarce, so collapse to an icon until it is used.
The mm.ss control was removed from this same row for taking 44px of a
169px header on a 699px screen — this must not repeat that. */
@media (max-width: 760px) {
body.tab-transcript .tsearch { display: flex; justify-content: flex-end; }
.tsearch-open {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--ink-200); background: #fff;
color: var(--ink-700); cursor: pointer;
}
.tsearch .tsearch-field { display: none; }
.tsearch.is-open { display: block; }
.tsearch.is-open .tsearch-open { display: none; }
.tsearch.is-open .tsearch-field { display: flex; }
.tsearch-results { max-height: 44vh; }
.tsr { grid-template-columns: 62px 1fr; gap: 8px; font-size: 13px; }
}
.insights .ins-quote-seek:hover { background: var(--violet-100); color: var(--violet-700); }
/* Per-quote chat button (operator 2026-05-17 ticket faerlh) — opens
the chat modal preloaded with this quote as context + quick prompts. */
.insights .ins-quote-chat {
appearance: none; background: transparent; border: 0;
color: var(--ink-500); cursor: pointer;
padding: 2px 4px; border-radius: 4px; margin-left: 4px;
display: inline-flex; align-items: center;
transition: background 0.12s, color 0.12s;
}
.insights .ins-quote-chat:hover { background: rgba(132, 204, 22, 0.16); color: #15803d; }
/* Topics — plain selectable text per operator 2026-05-17 ticket 0w6okw.
No button chrome, no hover color change, no filter click. Selecting
text triggers an automatic copy-to-clipboard via JS below. */
.insights .ins-topics {
display: block;
line-height: 1.7;
color: var(--ink-700);
font-size: 13.5px;
}
.insights .ins-topic {
appearance: none; border: 0; background: transparent;
color: inherit;
padding: 0 4px 0 0;
font: inherit;
cursor: text;
user-select: text;
}
.insights .ins-topic::after { content: ' · '; color: var(--ink-300); }
.insights .ins-topic:last-child::after { content: ''; }
.insights .ins-topic:hover,
.insights .ins-topic.active { background: transparent; color: inherit; border: 0; }
/* Per-speaker contributions. */
.insights .ins-speaker {
padding: 10px 0; border-bottom: 1px solid var(--ink-100);
}
.insights .ins-speaker:last-child { border-bottom: 0; padding-bottom: 0; }
.insights .ins-speaker-label {
font-size: 12px; font-weight: 700; color: var(--violet-700);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 4px;
}
.insights .ins-speaker-summary { font-size: 14.5px; line-height: 1.55; color: var(--ink-900); }
/* Skeleton loading bars — match the section layout so the user's eye
doesn't jump when real content swaps in. */
.insights .ins-elapsed {
font: 600 11.5px/1.2 var(--sans, "Inter");
color: var(--violet-700, #4d7508);
background: var(--violet-100, #ecfccb);
border: 1px solid var(--violet-300, #d9f99d);
padding: 3px 9px; border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.insights .ins-prep-bar {
height: 4px;
background: var(--ink-100, #f1f5f9);
border-radius: 999px;
overflow: hidden;
margin: 10px 0 14px;
}
.insights .ins-prep-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--violet-500, #a3dc2d), var(--violet-700, #4d7508));
transition: width 0.6s ease-out;
}
.insights .ins-skel {
height: 12px; background: var(--ink-100); border-radius: 6px;
margin-bottom: 8px;
background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 50%, var(--ink-100) 75%);
background-size: 200% 100%;
animation: ins-shimmer 1.3s ease-in-out infinite;
}
.insights .ins-skel.w-80 { width: 80%; }
.insights .ins-skel.w-60 { width: 60%; }
.insights .ins-skel.w-40 { width: 40%; }
@keyframes ins-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.insights .ins-fallback {
padding: 24px 22px 28px; font-size: 13.5px; color: var(--ink-500);
text-align: center;
}
.insights .ins-retry-btn {
appearance: none; border: 0;
background: linear-gradient(135deg, var(--violet-500, #a3dc2d), var(--violet-700, #4d7508));
color: #ffffff;
font: 700 13px/1.2 var(--sans, "Inter", system-ui, sans-serif);
padding: 9px 20px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s;
box-shadow: 0 6px 16px -8px rgba(77, 117, 8, 0.4);
}
.insights .ins-retry-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(77, 117, 8, 0.5);
}
/* First paint shows the chosen tab's panel before the script switches (no Transcript flash). */
html[data-whip-tab="intelligence"] #panel-transcript, html[data-whip-tab="ai-chat"] #panel-transcript { display: none; }
html[data-whip-tab="intelligence"] #panel-intelligence { display: block; }
html[data-whip-tab="ai-chat"] #panel-ai-chat { display: block; }
/* Overview tab layout (operator 2026-09-25): band, two lanes, create cards, FAQ. */
.ov-cost { margin-top: 8px; font-size: 12.5px; color: #6b7280; }
.ov-cost b { color: #374151; }
.ov-band { background: linear-gradient(135deg, var(--violet-50), #f8faf3); border: 1px solid var(--violet-100); border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; }
.ov-band-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.ov-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-700); }
.ov-ai { font-size: 12px; color: #6b7280; background: #eef2e6; padding: 3px 9px; border-radius: 999px; }
.ov-title { margin: 6px 0 4px; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.ov-meta { font-size: 13px; color: #6b7280; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-lane { min-width: 0; }
.ov-card { background: #fff; border: 1px solid var(--violet-100); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.ov-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ov-card-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.ov-copy, .ov-plan { font: inherit; font-size: 13px; color: var(--violet-700); background: transparent; border: 0; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.ov-copy:hover, .ov-plan:hover { background: var(--violet-50); }
.ov-plan { border: 1px solid var(--violet-700); padding: 8px 14px; font-weight: 600; }
.ov-thesis { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.ov-takeaways { margin: 0; padding-left: 0; list-style: none; counter-reset: tk; }
.ov-takeaways li { counter-increment: tk; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #eef2e6; }
.ov-takeaways li::before { content: counter(tk); width: 24px; height: 24px; border-radius: 50%; background: var(--violet-700); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ov-takeaways strong { display: block; font-size: 14px; } .ov-takeaways span { font-size: 13px; color: #6b7280; }
.ov-sub { font-size: 12px; color: #6b7280; margin: 0 0 8px; }
.ov-chapters { margin: 0; padding: 0; list-style: none; max-height: 372px; overflow: auto; scrollbar-width: thin; }
.ov-chapter { width: 100%; display: grid; grid-template-columns: 52px 12px 1fr; gap: 8px; align-items: start; text-align: left; background: transparent; border: 0; padding: 8px 4px; font: inherit; cursor: pointer; border-radius: 8px; }
.ov-chapter:hover { background: var(--violet-50); }
.ov-chapter .t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--violet-700); padding-top: 2px; }
.ov-chapter .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet-700); margin-top: 6px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--violet-100); }
.ov-chapter strong { display: block; font-size: 14px; } .ov-chapter span { display: block; font-size: 12.5px; color: #6b7280; }
.ov-chapter.is-now { background: var(--violet-50); } .ov-chapter.is-now strong { color: var(--violet-700); }
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-chip { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f8faf3; cursor: pointer; }
.ov-chip.num { background: #fdf3e4; border-color: #f3e2c0; } .ov-chip.person { background: var(--violet-50); border-color: var(--violet-100); }
.ov-chip:hover { border-color: var(--violet-700); }
.ov-lock { margin-top: 10px; padding: 12px; border-radius: 10px; background: #fdf3e4; border: 1px solid #f3e2c0; }
.ov-lock p { margin: 0 0 8px; font-size: 13px; }
.ov-sample { opacity: .55; pointer-events: none; }
.ov-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .ov-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ov-actions { grid-template-columns: 1fr; } }
.ov-action { text-align: left; font: inherit; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 3px; }
.ov-action:hover { border-color: var(--violet-700); background: var(--violet-50); }
.ov-action strong { font-size: 14px; } .ov-action span { font-size: 12.5px; color: #6b7280; }
.ov-action[disabled] { opacity: .6; cursor: default; }
.ov-q { border-top: 1px solid #eef2e6; padding: 6px 0; }
.ov-q summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; list-style: none; display: flex; gap: 8px; }
.ov-q summary::before { content: '▸'; color: var(--violet-700); } .ov-q[open] summary::before { content: '▾'; }
.ov-q p { margin: 2px 0 8px 18px; font-size: 14px; color: #374151; }
.ov-play { font: inherit; font-size: 12.5px; color: var(--violet-700); background: var(--violet-50); border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; margin-left: 18px; }
.ov-play:hover { background: var(--violet-100); }
.ov-play-inline { margin-left: 6px; padding: 1px 8px; font-size: 12px; vertical-align: 1px; white-space: nowrap; }
.seg-flash { animation: ov-flash 1.6s ease-out; }
@keyframes ov-flash { 0% { background: #fdf3e4; } 100% { background: transparent; } }
/* Intelligence-Beta layout (matches landing /Q3-earnings mock):
Executive Summary card with "AI" pill + green-dot bullets;
Topics & mentions chip rail;
KEY QUOTE block — large italic line + speaker attribution. */
.insights .ins-exec-card {
background: linear-gradient(135deg, var(--violet-50), #ffffff 60%);
border: 1px solid var(--violet-100);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
}
.insights .ins-exec-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 12px;
}
.insights .ins-exec-head .ins-exec-title {
font-size: 13px; font-weight: 800;
color: var(--ink-900);
letter-spacing: -0.01em;
}
.insights .ins-exec-head .ins-ai-pill {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--violet-700); color: #ffffff;
padding: 2px 6px; border-radius: 4px;
line-height: 1.2;
}
.insights .ins-exec-bullets {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.insights .ins-exec-bullets li {
position: relative;
padding-left: 18px;
font-size: 14.5px; line-height: 1.55;
color: var(--ink-900);
}
.insights .ins-exec-bullets li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--violet-600);
}
.insights .ins-key-quote {
background: #ffffff;
border: 1px solid var(--violet-100);
border-left: 4px solid var(--violet-600);
border-radius: 10px;
padding: 18px 22px;
margin-top: 14px;
}
.insights .ins-key-quote-label {
font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--violet-700);
margin-bottom: 8px;
}
.insights .ins-key-quote-text {
font-size: 17px; line-height: 1.5; font-style: italic;
color: var(--ink-900);
font-weight: 500;
}
.insights .ins-key-quote-attr {
margin-top: 10px;
font-size: 12.5px; color: var(--ink-500);
display: flex; gap: 8px; align-items: center;
flex-wrap: wrap;
}
.insights .ins-key-quote-attr .ins-quote-seek { font-size: 12px; }
/* Per-quote AI Chat button right-aligned (operator 2026-05-17 wk3g99). */
.insights .ins-key-quote-attr .ins-quote-chat,
.insights .ins-quote-meta .ins-quote-chat { margin-left: auto; }
/* Filter-mode — when a topic chip is active, non-matching segments dim. */
.transcript.filter-active .segment { opacity: 0.28; transition: opacity 0.2s; }
.transcript.filter-active .segment.filter-match { opacity: 1; }
.transcript.filter-active .segment.filter-match .ts {
background: var(--violet-100); color: var(--violet-700);
}
/* Share footer — small, muted, below the transcript. Light surface
to match the cream-wash page background; ink text + lime accent
keeps it on-brand with landing/pricing. Copy button is a bordered
pill so it's obviously clickable but doesn't dominate. */
/* Operator 2026-05-17 lm3zhh: share footer always visible + clears
the audio bar overlap. Embed/LP variants still hide via earlier
overrides. */
/* (Removed 2026-08-05: a leftover from the footer-reservation experiment
that survived its own revert. It forced the footer to render while
[hidden], costing ~70px of reading area to buy ~0.01 CLS. The real
cause of the shift was main being shrink-to-fit, now fixed.) */
#view-share-footer { margin-bottom: 130px; }
/* Post-done top-up nudge (2026-05-29) — soft lime accent matching
the focus ring + active-segment tint. Stays inline, not modal,
so it doesn't break the read flow. */
.whip-topup-nudge {
display: block;
margin: 28px 0 24px;
padding: 18px 20px;
background: rgba(132, 204, 22, 0.06);
border: 1px solid rgba(132, 204, 22, 0.25);
border-radius: 12px;
}
.whip-topup-nudge .wtn-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.whip-topup-nudge .wtn-h { font: 600 16px / 1.3 var(--sans); color: #1e3a0f; }
.whip-topup-nudge .wtn-sub { font: 500 13px / 1.4 var(--sans); color: var(--ink-500); }
.whip-topup-nudge .wtn-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.whip-topup-nudge .wtn-btn-primary {
background: var(--violet-600, #84cc16); color: #fff;
padding: 10px 16px; border-radius: 8px;
font: 600 14px / 1 var(--sans); text-decoration: none;
transition: filter 0.15s;
}
.whip-topup-nudge .wtn-btn-primary:hover { filter: brightness(1.08); }
.whip-topup-nudge .wtn-btn-secondary {
color: var(--ink-700); padding: 10px 14px;
font: 500 14px / 1 var(--sans); text-decoration: none;
border: 1px solid var(--rule, #e2e8f0); border-radius: 8px;
}
.whip-topup-nudge .wtn-btn-secondary:hover { background: var(--paper, #f8fafc); }
.whip-topup-nudge .wtn-note { margin: 10px 0 0; font: 500 12px / 1.4 var(--sans); color: var(--ink-500); }
/* Floating placement (2026-08-02): the inline card renders after the
ENTIRE transcript — measured y=387,309 on a 387,719px page for a
12-hour job, ~430 viewports below the fold — so a reader who never
scrolls to the absolute end is never asked. When revealed, the card
floats above the audio bar instead. Same copy, same 2-show session
cap, plus an explicit dismiss. Anchored bottom-LEFT because the
nav-dock owns bottom-right (right:12px, z-index 45). */
.whip-topup-nudge.is-floating {
position: fixed;
left: 12px;
bottom: calc(var(--dock-bottom, 93px) + 10px);
z-index: 44; /* above audio-bar (40), below nav-dock (45) */
max-width: 380px;
margin: 0;
background: #f8fcf1; /* opaque equivalent of the inline lime tint —
this now paints over transcript text */
box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.3);
}
.whip-topup-nudge .wtn-dismiss {
display: none; /* inline placement scrolls away; no dismiss needed */
position: absolute; top: 8px; right: 8px;
width: 28px; height: 28px;
border: 0; border-radius: 8px; background: transparent;
color: var(--ink-500); font: 400 18px / 1 var(--sans);
cursor: pointer;
}
.whip-topup-nudge .wtn-dismiss:hover { background: rgba(15, 23, 42, 0.06); color: var(--ink-700); }
.whip-topup-nudge.is-floating .wtn-dismiss { display: block; }
@media (max-width: 640px) {
.whip-topup-nudge.is-floating { left: 10px; right: 10px; max-width: none; }
}
.whip-share-footer {
display: flex; align-items: center; justify-content: flex-start;
gap: 12px; flex-wrap: wrap;
margin-top: 20px; padding: 14px 16px;
background: var(--white);
border: 1px solid rgba(15,23,42,0.08);
border-radius: 12px;
color: var(--ink-700);
font-size: 13px;
box-shadow:
0 1px 2px rgba(15,23,42,0.04),
0 4px 14px -2px rgba(15,23,42,0.05);
}
.whip-share-footer .wsf-link {
color: var(--brand-800); font-weight: 600; text-decoration: underline;
text-decoration-color: rgba(109,160,15,0.45); text-underline-offset: 3px;
}
.whip-share-footer .wsf-link:hover { text-decoration-color: var(--brand-700); }
.whip-share-footer .wsf-copy {
appearance: none; background: var(--ink-50); color: var(--ink-900);
border: 1px solid rgba(15,23,42,0.14); border-radius: 8px;
padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.whip-share-footer .wsf-copy:hover {
background: var(--brand-1); border-color: var(--brand-2); color: #1a2e05;
}
.whip-share-footer .wsf-copy.copied {
background: var(--brand-1); border-color: var(--brand-2); color: #1a2e05;
}
/* Anonymous email-capture — sits directly under the share footer,
only renders for visitors who haven't given us an email yet.
Same light card surface as the share footer so it reads as one
cohesive footer block tuned to the cream-wash background. */
.whip-email-capture { margin-top: 12px; padding: 18px 20px;
background: var(--white);
border: 1px solid rgba(15,23,42,0.08);
border-radius: 14px;
color: var(--ink-900);
box-shadow:
0 1px 2px rgba(15,23,42,0.04),
0 8px 24px -10px rgba(15,23,42,0.08);
transition: box-shadow 0.3s, border-color 0.3s, background 0.3s; }
/* Value-realization pulse (2026-05-29). Triggered after the user
successfully downloads or copies — soft lime accent to draw the eye
without being aggressive. */
.whip-email-capture.wec-pulse {
border-color: rgba(132, 204, 22, 0.55);
background: rgba(132, 204, 22, 0.05);
box-shadow:
0 0 0 4px rgba(132, 204, 22, 0.18),
0 8px 24px -10px rgba(132, 204, 22, 0.4);
}
.whip-email-capture .wec-h { font-weight: 700; font-size: 15px;
color: var(--ink-900); margin: 0 0 4px; letter-spacing: -0.005em; }
.whip-email-capture .wec-sub { font-size: 13px;
color: var(--ink-500); margin: 0 0 12px; line-height: 1.55; }
.whip-email-capture form { display: flex; gap: 10px; flex-wrap: wrap; }
.whip-email-capture input[type="email"] {
flex: 1 1 240px; min-width: 0;
padding: 10px 14px; font: inherit; font-size: 14px;
color: var(--ink-900); background: #fff;
border: 1px solid var(--ink-200);
border-radius: 10px;
transition: border-color 0.15s, box-shadow 0.15s; }
.whip-email-capture input[type="email"]::placeholder { color: var(--ink-300); }
.whip-email-capture input[type="email"]:focus { outline: none;
border-color: var(--brand-2);
box-shadow: 0 0 0 3px rgba(197,244,79,0.35); }
.whip-email-capture button { appearance: none;
padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 700;
color: #1a2e05; background: var(--brand-1, #c5f44f);
border: 1px solid var(--brand-2, #a3dc2d);
border-radius: 10px; cursor: pointer;
transition: transform 0.12s, box-shadow 0.15s, background 0.15s; }
.whip-email-capture button:hover:not(:disabled) { transform: translateY(-1px);
background: var(--brand-2);
box-shadow: 0 8px 18px -8px rgba(109,160,15,0.45); }
.whip-email-capture button:disabled { opacity: 0.55; cursor: not-allowed; }
.whip-email-capture .wec-consent { font-size: 11.5px;
color: var(--ink-500); margin: 10px 0 0; line-height: 1.5; }
.whip-email-capture .wec-consent a { color: var(--ink-700); text-decoration: underline; text-underline-offset: 2px; }
.whip-email-capture .wec-consent a:hover { color: var(--brand-800); }
.whip-email-capture .wec-success { color: var(--brand-800); font-size: 13.5px;
font-weight: 600; margin: 0; }
/* right sidebar — taste pass: tiled SVG icons, primary download
button, tighter panels, real brand marks for AI destinations.
Pinned just below the global nav (top: 55px) with no scroll-
before-pin gap. max-height + overflow-y means the rail stays
reachable even when the visitor zooms in. */
aside.right { position: sticky; top: 55px;
max-height: calc(100vh - 60px);
overflow-y: auto;
display: flex; flex-direction: column; gap: 12px; }
.panel {
background: var(--white); color: var(--ink-900);
border-radius: 14px;
padding: 14px 14px;
box-shadow: 0 18px 40px -20px rgba(0,0,0,0.25);
}
.panel h2.panel-heading {
margin: 2px 4px 12px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500);
}
/* Primary Download button — visually heavier than any row item. */
.panel .btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 11px 16px;
border: 0; border-radius: 10px;
background: linear-gradient(135deg, var(--violet-700), var(--violet-800));
color: var(--white);
font: inherit; font-size: 14px; font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 22px -8px rgba(109, 40, 217, 0.5);
transition: transform 0.1s, box-shadow 0.15s;
margin-top: 10px;
}
.panel .btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }
.panel .btn-primary:hover { transform: translateY(-1px);
box-shadow: 0 12px 28px -8px rgba(109, 40, 217, 0.6); }
.panel .btn-primary:active { transform: translateY(0); }
.panel .btn-primary:disabled { opacity: 0.85; cursor: wait; transform: none; }
/* Spinner shown inside the Download button while a download fetch is
in flight. Same stroke as the static download arrow so it doesn't
visually shift when swapping in. */
.panel .btn-primary .dl-spin {
width: 16px; height: 16px; flex-shrink: 0;
animation: dl-spin 0.8s linear infinite;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }
/* Format select — matches the primary button's rhythm. */
.panel .fmt-select {
width: 100%;
padding: 10px 12px;
font: inherit; font-size: 13.5px;
color: var(--ink-900);
background: var(--ink-50);
border: 1px solid var(--ink-200);
border-radius: 10px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.panel .fmt-select:focus { outline: none; border-color: var(--violet-500);
box-shadow: 0 0 0 3px rgba(163, 220, 45, 0.15); }
/* Row-style items (secondary actions + AI destinations). */
.panel .item {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px;
border-radius: 8px; cursor: pointer;
font-size: 13.5px; color: var(--ink-900);
text-decoration: none;
border: 0; background: transparent;
width: 100%; text-align: left; font-family: inherit;
transition: background 0.12s, color 0.12s;
}
.panel .item:hover { background: var(--violet-50); color: var(--violet-800); }
.panel .item:focus-visible { outline: none;
box-shadow: inset 0 0 0 2px var(--violet-300); background: var(--violet-50); }
.panel .item + .item { margin-top: 2px; }
/* Icon tile — consistent geometry across every row + brand-agnostic
so feather-style glyphs, inline brand SVGs, and coloured brand marks
all occupy the same optical weight. */
.panel .tool-ico {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: var(--violet-50);
color: var(--violet-700);
border-radius: 7px;
flex-shrink: 0;
}
.panel .tool-ico svg { width: 16px; height: 16px; }
/* Brand-coloured tiles — white background + brand glyph so Chrome,
Claude, etc. read as themselves and not as violet chrome. */
.panel .tool-ico.brand-openai { background: #fff; color: #10a37f; border: 1px solid var(--ink-200); }
.panel .tool-ico.brand-claude { background: #fff; color: #cc7a5c; border: 1px solid var(--ink-200); }
.panel .tool-ico.brand-perplexity { background: #fff; color: #20808d; border: 1px solid var(--ink-200); }
.panel .tool-ico.brand-gemini { background: #fff; border: 1px solid var(--ink-200); padding: 4px; }
.panel .tool-ico.brand-gemini svg { width: 18px; height: 18px; }
.panel .tool-ico.brand-obsidian { background: #fff; border: 1px solid var(--ink-200); padding: 4px; }
.panel .tool-ico.brand-obsidian svg { width: 18px; height: 18px; }
.panel .item.danger { color: var(--rose-600); }
.panel .item.danger .tool-ico { background: #fef2f2; color: var(--rose-600); }
.panel .item.danger:hover { background: #fef2f2; color: var(--rose-600); }
/* Toggle — same row geometry, switch on the right. */
.panel .item.toggle { justify-content: space-between; }
.panel .item.toggle .item-label { display: flex; align-items: center; gap: 10px; }
.panel .item.toggle .switch {
width: 34px; height: 20px; background: var(--ink-200); border-radius: 100px;
position: relative; transition: background 0.15s; flex-shrink: 0;
}
.panel .item.toggle.on .switch { background: var(--violet-600); }
.panel .item.toggle .switch::before {
content: ""; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--white); transition: transform 0.15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.panel .item.toggle.on .switch::before { transform: translateX(14px); }
/* Collapsible panel variant — details/summary without default disclosure UI. */
.panel-details { padding: 0; }
.panel-details > summary {
list-style: none;
padding: 14px 14px 12px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-500);
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
border-radius: 14px;
user-select: none;
}
.panel-details > summary::-webkit-details-marker { display: none; }
.panel-details > summary::marker { content: ''; }
.panel-details > summary:hover { color: var(--ink-900); }
.panel-details > summary .h4-inline { text-transform: inherit; letter-spacing: inherit; }
.panel-details > summary .summary-chevron {
font-size: 14px; color: var(--ink-500);
transition: transform 0.15s;
line-height: 1;
}
.panel-details[open] > summary .summary-chevron { transform: rotate(90deg); }
.panel-details > summary .summary-chevron svg {
width: 14px; height: 14px; display: block;
}
.panel-details .panel-details-body { padding: 0 14px 14px; }
.panel-details .panel-details-body .fmt-select,
.panel-details .panel-details-body .ai-template-select { margin-bottom: 8px; }
.panel-details .panel-details-body .ai-note {
margin-top: 10px; padding: 10px 12px;
background: var(--ink-50);
border-radius: 8px;
font-size: 11.5px; color: var(--ink-500);
line-height: 1.45;
}
.panel .item .item-label { display: flex; align-items: center; gap: 10px; }
/* Operator ticket sqw9yx: hide the audio bar on Notes + AI Chat
tabs — those surfaces have nothing to do with playback and the
bar was just covering the input. Audio element keeps playing
(display:none on the bar doesn't pause the underlying