:root {
  --navy: #19345F;
  --navy-deep: #122745;
  /* Solid navy fill for buttons/badges/icon-bars that pair navy with white
     text (.btn-navy, .topbar-coin, the mobile menu hamburger bars, ...) —
     kept constant across themes on purpose. --navy itself is overwhelmingly
     used as a *text* color (140+ call sites: headings, links, active
     states) rather than a fill, so it flips to a light tint in dark mode
     for legibility; a handful of solid-navy-background components need a
     token that does NOT flip, or they'd turn into a pale blue button. */
  --navy-fill: #19345F;
  /* Constant dark-navy hover/pressed shade for the same non-flipping fill
     contexts as --navy-fill (.btn-navy:hover, .wave-btn's gradient) — kept
     at its light-mode --navy-deep value in both themes so those white-text
     fills never end up light-on-light when --navy-deep flips for dark mode. */
  --navy-fill-deep: #122745;
  --red: #CC1F27;
  --red-deep: #A01820;
  --gold: #FBC530;
  --gold-soft: #FFE9A3;

  --ink: #19345F;
  --ink-soft: #3d4f6a;
  --muted: #6b7a8f;
  --paper: #e8ecf2;
  --paper-deep: #d9e0ea;
  --surface: rgba(255, 255, 255, 0.92);
  /* RGB triplet (no alpha) matching --surface-solid, for the many
     rgba(var(--surface-base), <opacity>) glass-panel backgrounds/gradients/glows
     scattered through the sheet at their own one-off opacities — rewritten
     to rgba(var(--surface-base), <same opacity>) so each keeps its exact
     transparency while still flipping to a dark tint in dark mode. */
  --surface-base: 255, 255, 255;
  /* Solid (non-translucent) equivalents of --paper/--surface, for the ~50
     card/panel/table backgrounds across the sheet that were hardcoded to
     literal #fff / soft blue tints instead of a variable — introduced here
     specifically so dark mode can retarget them without touching every
     call site's color by hand. */
  --surface-solid: #fff;
  --surface-tint: #f8fafc;
  --line: rgba(25, 52, 95, 0.12);
  /* Neutral to mix into per-speaker currentColor borders (.speaker-picker)
     so they stay legible in dark mode — several speaker colors (speaker-1,
     -2, -4) are constant, non-flipping mid-dark hues (see the .speaker-N
     rules below) that read as an almost-invisible outline against a dark
     surface without a lightening mix. No-op in light mode. */
  --speaker-border-fade: transparent;
  /* .speech-region fill in the player timeline — kept as its own token
     (not a plain color-mix off --red) because dark mode needs a much
     higher opacity, not just --red's flipped hue, to read as a visibly
     light block against the near-black --paper-deep track; at --red's
     usual ~22%/40% mix it stayed a barely-visible dark smudge. */
  --speech-region-fill: rgba(204, 31, 39, 0.22);
  --speech-region-fill-hover: rgba(204, 31, 39, 0.4);
  --accent: var(--red);
  --accent-deep: var(--red-deep);
  --accent-soft: #fde8e9;
  /* Dark-mode-only blue accent for a curated set of call-to-action spots
     (pricing audience switcher, tariff card hover/featured, tariff buttons,
     theme switch, sign-in/sign-up submit) — stays on the red --accent in
     light mode. Explicit, repeated request to flip *these specific*
     buttons blue in dark mode, even though most of the UI deliberately
     keeps --navy/--navy-deep flipped to near-white instead of an accent
     hue there (see the dark-theme block below). Kept as its own token and
     applied per-selector rather than editing --accent directly, so the
     rest of the site's red accent (other buttons, links, badges) is
     unaffected. */
  --accent-blue: var(--accent);
  /* Focus/selection ring — sky in both themes. --accent-blue is red in
     light mode (CTA buttons), so it cannot stand in for a focus outline. */
  --focus-ring: #3b82f6;
  --highlight: var(--gold);
  --danger: var(--red);
  --shadow: 0 18px 50px rgba(25, 52, 95, 0.14);
  --radius: 22px;
  --btn-radius: 6px;
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --sidebar-width: 16rem;
  --sidebar-collapsed-width: 5rem;
  --body-gradient: linear-gradient(180deg, #e9eef4 0%, #e3e8f0 45%, #dde3ec 100%);
  color-scheme: light;
}

/* Dark theme: a saved "dark" preference sets [data-theme="dark"] on <html>
   (see theme_controller.js + the inline head script in
   layouts/application.html.erb that applies it before first paint to avoid
   a flash of the wrong theme); "system" leaves the attribute off and just
   follows prefers-color-scheme, same as no preference at all. "light" is
   the default :root above, so it only needs to win over the media query.

   Palette is Kubuntu Focus's desktop theme, at the user's request — its
   Plasma color scheme (kfocus-source, package-settings/.../desktoptheme/
   kfocus) is literally KDE's stock Breeze Dark (ColorScheme=BreezeDark in
   its look-and-feel defaults), so most values below are Breeze Dark's own
   [Colors:Window]/[Colors:View]/[Colors:Selection] RGB triplets converted
   to hex: #da4453 negative/red, #f67400 neutral/orange, #202326 window bg
   over #141618 view bg, #fcfcfc/#a1a9b1 foreground. --navy/--navy-deep are
   the one deliberate departure from Breeze Dark's own #3daee9 accent blue —
   per explicit request, dark mode must not read as "blue" anywhere, so
   these flip to near-white/light-gray instead of an accent hue. Solid-fill
   contexts that pair navy with white text (.btn-navy:hover, .wave-btn's
   gradient) use --navy-fill/--navy-fill-deep instead, which stay pinned to
   their light-mode values in both themes for exactly that reason. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #f2f4f7;
    --navy-deep: #c7ccd2;
    --red: #da4453;
    --red-deep: #b03745;
    --gold: #f67400;
    --ink: #fcfcfc;
    --ink-soft: #c3c9cf;
    --muted: #a1a9b1;
    --paper: #202326;
    --paper-deep: #141618;
    --surface: rgba(41, 44, 48, 0.88);
    --surface-solid: #292c30;
    --surface-base: 41, 44, 48;
    --surface-tint: #1d1f22;
    --line: rgba(252, 252, 252, 0.12);
    --speaker-border-fade: rgba(252, 252, 252, 0.45);
    --speech-region-fill: rgba(218, 68, 83, 0.65);
    --speech-region-fill-hover: rgba(218, 68, 83, 0.85);
    --accent-soft: #3a1b1f;
    --accent-blue: #3b82f6;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --body-gradient: linear-gradient(180deg, #202326 0%, #1a1d20 45%, #141618 100%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --navy: #f2f4f7;
  --navy-deep: #c7ccd2;
  --red: #da4453;
  --red-deep: #b03745;
  --gold: #f67400;
  --ink: #fcfcfc;
  --ink-soft: #c3c9cf;
  --muted: #a1a9b1;
  --paper: #202326;
  --paper-deep: #141618;
  --surface: rgba(41, 44, 48, 0.88);
  --surface-solid: #292c30;
  --surface-base: 41, 44, 48;
  --surface-tint: #1d1f22;
  --line: rgba(252, 252, 252, 0.12);
  --speaker-border-fade: rgba(252, 252, 252, 0.45);
  --speech-region-fill: rgba(218, 68, 83, 0.65);
  --speech-region-fill-hover: rgba(218, 68, 83, 0.85);
  --accent-soft: #3a1b1f;
  --accent-blue: #3b82f6;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --body-gradient: linear-gradient(180deg, #202326 0%, #1a1d20 45%, #141618 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  /* Own fill so the body gradient is not copied onto the canvas and tiled. */
  background-color: var(--paper);
}

.site-body {
  position: relative;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--body-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 1.55;
}

/* Decorative wave art — pinned to the viewport bottom. */
.site-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.site-bg img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: 0.1;
}

.site-body > :not(.site-bg):not(.topbar):not(.sidebar):not(.toast-stack):not(.app-tooltip) {
  position: relative;
  z-index: 1;
}

.site-shell {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-shell > main {
  flex: 1 0 auto;
}

/* Desktop split pages (recordings / signatures) fill the viewport. The list
   and detail panes scroll internally; the document itself must not grow with
   the rows. Mobile stays in normal page flow — see the max-width: 900px
   overrides. Footer is already hidden from 901px up. */
@media (min-width: 901px) {
  html:has(.recordings-split),
  html:has(.voiceprints-split) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    scrollbar-gutter: auto;
  }

  .site-body:has(.recordings-split),
  .site-body:has(.voiceprints-split) {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
  }

  .site-body:has(.recordings-split) .site-bg,
  .site-body:has(.voiceprints-split) .site-bg {
    position: absolute;
  }

  .site-body:has(.recordings-split) > .site-shell,
  .site-body:has(.voiceprints-split) > .site-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .site-body:has(.recordings-split) .site-shell > main,
  .site-body:has(.voiceprints-split) .site-shell > main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

h1, h2, h3, .brand-name, .brand-hero {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Portaled to <body>; must stay position:fixed so it is not a flex item and
   cannot shift the footer when a [data-tooltip] host is hovered. */
.app-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 8px 24px rgba(25, 52, 95, 0.12);
  pointer-events: none;
}

.app-tooltip.is-html {
  max-width: min(32rem, calc(100vw - 1rem));
  white-space: normal;
}

.app-tooltip-card {
  display: grid;
  gap: 0.28rem;
}

.app-tooltip-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}

.app-tooltip-k {
  color: var(--muted);
  font-weight: 500;
}

.app-tooltip-v {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.app-tooltip-line .status-marker,
.app-tooltip-line .status-ready-check,
.app-tooltip-line .status-share-mark {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.58rem;
}

.app-tooltip-line .status-ready-check svg,
.app-tooltip-line .status-share-mark svg {
  width: 1.15rem;
  height: 1.15rem;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(1280px, calc(100% - 2.5rem)) !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.container.narrow {
  width: min(720px, calc(100% - 2.5rem)) !important;
}

.container.container-full,
.admin-page > .container {
  width: calc(100% - 2.5rem) !important;
}

.topbar {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(25, 52, 95, 0.04);
  --topbar-control-h: 2.4rem;
}

.topbar.is-pinned {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Only exposed on mobile (see the media query below) — desktop keeps the
   topbar always sticky, matching its previous unconditional behavior. */
.topbar-bar > .speaker-pin-btn {
  display: none;
}

.topbar-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  font-weight: 700;
  line-height: 0;
}

.brand-logo-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.brand-logo-img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: cover;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  margin-left: 0.5rem;
}

.sidebar {
  display: none;
}

.sidebar-icon {
  flex-shrink: 0;
  display: block;
}

.sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-toggle-collapsed {
  display: none;
}

html.sidebar-collapsed .sidebar-toggle-expanded {
  display: none;
}

html.sidebar-collapsed .sidebar-toggle-collapsed {
  display: flex;
}

@media (min-width: 981px) {
  /* Key off the sidebar node, not html.is-signed-in. Turbo Drive replaces
     <body> and morphs same-URL refreshes, but it never rewrites <html>
     attributes — after sign-out the class would stick and keep hiding the
     guest topbar while leaving a sidebar-sized hole. */
  html:has(aside.sidebar) .topbar {
    display: none;
  }

  /* Guests keep the classic header/footer chrome; signed-in desktop uses
     the left sidebar instead. Always-sticky matches the topbar's previous
     unconditional desktop behavior (the pin control is mobile-only). */
  html:not(:has(aside.sidebar)) .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-shrink: 0;
  }

  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: var(--sidebar-width);
    flex-direction: column;
    background: var(--surface-solid);
    border-right: 1px solid var(--line);
    box-shadow: 1px 0 0 rgba(25, 52, 95, 0.04);
    overflow-x: hidden;
    transition: width 200ms ease;
  }

  html.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
  }

  html:has(aside.sidebar) .site-shell {
    margin-left: var(--sidebar-width);
    transition: margin-left 200ms ease, margin-right 200ms ease;
  }

  html.sidebar-collapsed:has(aside.sidebar) .site-shell {
    margin-left: var(--sidebar-collapsed-width);
  }

  /* Home page: matching right inset so the landing layout stays optically
     centered in the viewport despite the fixed left sidebar. */
  html:has(aside.sidebar) .site-body:has(.hero) > .site-shell {
    margin-right: var(--sidebar-width);
  }

  html.sidebar-collapsed:has(aside.sidebar) .site-body:has(.hero) > .site-shell {
    margin-right: var(--sidebar-collapsed-width);
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: calc(2.4rem + 1.3rem);
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line);
  }

  html.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding-inline: 0.5rem;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: var(--navy);
    text-decoration: none;
  }

  .sidebar-brand .brand-logo {
    gap: 0;
  }

  .sidebar-brand .brand-logo-mark,
  .sidebar-brand .brand-logo-img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
  }

  .sidebar-brand-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .sidebar-toggle-row {
    display: flex;
    justify-content: center;
    padding: 0.4rem;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }

  .sidebar-toggle:hover {
    background: rgba(25, 52, 95, 0.08);
    color: var(--navy);
  }

  .sidebar-nav,
  .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .sidebar-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
  }

  .sidebar-link,
  .sidebar-cta {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.4rem;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--navy);
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .sidebar-link:hover,
  .sidebar-cta:hover {
    background: rgba(25, 52, 95, 0.08);
  }

  .sidebar-link.is-active {
    color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
  }

  .sidebar-link.is-active:hover {
    filter: brightness(1.12);
  }

  .sidebar-link-danger {
    color: var(--muted);
  }

  .sidebar-link-danger:hover {
    background: rgba(25, 52, 95, 0.08);
    color: var(--muted);
  }

  .sidebar-cta {
    justify-content: center;
    background: var(--accent-blue);
    color: #fff;
  }

  .sidebar-cta:hover {
    filter: brightness(1.12);
    background: var(--accent-blue);
  }

  .sidebar-signout {
    width: 100%;
    margin: 0;
  }

  .sidebar-invite {
    position: relative;
  }

  .sidebar-invite .topbar-dot {
    position: static;
    display: inline-block;
    border: 0;
    margin-left: auto;
  }

  .sidebar-account {
    padding: 0.15rem 0 0.35rem;
    max-height: 24rem;
    overflow: hidden;
    /* Width animates 200ms; keep this block away until the rail is full. */
    transition: visibility 0s linear 200ms, opacity 0.12s ease 200ms, max-height 0s linear 200ms, padding 0s linear 200ms;
  }

  .sidebar-account .topbar-account-summary {
    padding: 0;
  }

  .sidebar-footer .chrome-switches {
    margin: 0.35rem 0;
    padding: 0.55rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .sidebar-footer .chrome-switches:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  html.sidebar-collapsed .sidebar-label,
  html.sidebar-collapsed .sidebar-footer .chrome-switches,
  html.sidebar-collapsed .sidebar-footer .topbar-locales,
  html.sidebar-collapsed .sidebar-footer .topbar-theme-switch {
    display: none;
  }

  html.sidebar-collapsed .sidebar-account {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar,
    .site-shell,
    .sidebar-account {
      transition: none;
    }
  }

  html.sidebar-collapsed .sidebar-link,
  html.sidebar-collapsed .sidebar-cta {
    justify-content: center;
    gap: 0;
    padding-inline: 0.45rem;
  }

  html.sidebar-collapsed .sidebar-invite .topbar-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    margin: 0;
    border: 2px solid var(--surface-solid);
  }

  html:has(aside.sidebar) .container {
    margin-left: 1.25rem;
    margin-right: auto;
  }

  /* Landing page stays centered in the remaining viewport, unlike app
     pages that hug the sidebar. */
  html:has(aside.sidebar) .site-body:has(.hero) .container {
    margin-left: auto;
    margin-right: auto;
  }
}

.topbar-section {
  position: relative;
  display: none;
  min-width: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.topbar-section-group {
  display: none;
  align-items: center;
  gap: 0.1rem;
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-section-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  max-width: 100%;
  padding: 0 0.65rem;
  border-radius: var(--btn-radius);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

.topbar-section-btn:hover,
.topbar-section.is-open > .topbar-section-btn {
  background: rgba(25, 52, 95, 0.08);
}

.topbar-section .topbar-menu {
  left: 0;
  right: auto;
  transform: none;
  min-width: 12.5rem;
}

.topbar-item { position: relative; }

.topbar-link,
.topbar-account-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.topbar-menu-button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: var(--ink-soft);
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  gap: 0.35rem;
  padding: 0 0.75rem;
  border-radius: var(--btn-radius);
  white-space: nowrap;
}

.topbar-link:hover,
.topbar-item.is-open > .topbar-link {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
}

/* The current page's nav item — red in light mode, blue in dark (same
   --accent-blue token as the pricing/sign-in buttons elsewhere). Hover on
   top of that only nudges brightness rather than swapping to the neutral
   navy hover tint above, so it still reads as "this is the active one,
   and you're pointing at it" rather than losing the accent entirely. */
.topbar-link.is-active,
.topbar-item.is-active > .topbar-link {
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}

.topbar-link.is-active:hover,
.topbar-item.is-active > .topbar-link:hover {
  filter: brightness(1.12);
}

.topbar-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
}

.topbar-item.is-open > .topbar-link .topbar-chevron,
.topbar-item.is-open > .topbar-account-btn .topbar-chevron,
.topbar-section.is-open > .topbar-section-btn .topbar-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.topbar-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 220px;
  padding: 0.4rem;
  background: var(--surface-solid);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: calc(var(--btn-radius) + 2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  z-index: 50;
}

.topbar-menu-right {
  left: auto;
  right: 0;
  min-width: 320px;
}

.topbar-menu-right .topbar-menu-meta,
.topbar-menu-right .topbar-menu-link {
  text-align: center;
}

.topbar-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-radius: var(--btn-radius);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
}

button.topbar-menu-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.topbar-menu-link:hover,
.topbar-menu-link.is-active {
  background: var(--paper-deep);
  color: var(--navy);
}

.topbar-menu-link.is-active {
  font-weight: 700;
}

.topbar-menu .topbar-menu-action {
  width: 100%;
  margin-top: 0.25rem;
}

.topbar-menu .topbar-menu-action + .topbar-menu-action {
  margin-top: 0.4rem;
}

.topbar-menu-meta {
  padding: 0.55rem 0.8rem 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.topbar-menu-meta {
  display: block;
  text-decoration: none;
}

a.topbar-menu-meta:hover,
a.topbar-menu-meta:focus-visible {
  color: var(--navy);
}

.topbar-menu-separator {
  height: 1px;
  margin: 0.35rem 0.45rem;
  background: var(--line);
}

.topbar-account-summary {
  display: grid;
  gap: 0.15rem;
  padding: 0.2rem 0.15rem 0.1rem;
  text-align: left;
}

.topbar-account-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--btn-radius);
  color: var(--ink-soft);
  text-decoration: none;
}

.topbar-account-summary-row:hover,
.topbar-account-summary-row:focus-visible {
  background: rgba(25, 52, 95, 0.08);
  color: var(--navy);
}

.topbar-account-summary-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted);
}

.topbar-account-summary-row.is-stack .topbar-account-summary-heading {
  align-self: start;
}

.topbar-account-summary-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.topbar-account-summary-go {
  flex: 0 0 auto;
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  opacity: 0.72;
}

.topbar-account-summary-row:hover .topbar-account-summary-go,
.topbar-account-summary-row:focus-visible .topbar-account-summary-go {
  opacity: 1;
  color: var(--navy);
}

.topbar-account-summary-value {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: right;
}

.topbar-account-summary-row.is-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
}

.topbar-account-summary-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.promo-dialog-summary {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.promo-dialog-summary-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-deep);
}

.promo-dialog-summary-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.promo-dialog-summary-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.promo-code-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.promo-code-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.promo-code-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.topbar-aside {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Shared chrome-switch track. Theme options are <button>s that inherit
   .site-body's 1.55 line-height, so they paint taller than the Рус/Eng
   <a>s even with the same padding — lock both to the topbar control
   height (2.4rem on .topbar; same fallback in the sidebar). */
.topbar-locales,
.topbar-theme-switch {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  box-sizing: border-box;
  height: var(--topbar-control-h, 2.4rem);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-tint);
}

.topbar-menu-right .topbar-locales {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.15rem 0 0.2rem;
}

.topbar-locale,
.topbar-theme-option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 0 0.5rem;
  min-height: 0;
  font: inherit;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.topbar-locale {
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-locale:hover {
  color: var(--navy);
}

.topbar-locale.is-active {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
  color: var(--accent-blue);
}

.topbar-menu .topbar-theme-switch,
.topbar-mobile-sheet .topbar-theme-switch {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.15rem 0 0.2rem;
}

.chrome-switches {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
}

.topbar-aside .chrome-switches {
  width: auto;
  flex: 0 0 auto;
}

.chrome-switches .topbar-locales,
.chrome-switches .topbar-theme-switch {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
}

.topbar-theme-option svg {
  display: block;
  flex-shrink: 0;
}

/* Outline only, not a filled pill — the icon itself (colored via
   currentColor) is enough to read as selected without also competing with
   the tariff/sign-in buttons' solid --accent-blue fill elsewhere. */
.topbar-theme-option.is-active {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
  color: var(--accent-blue);
}

.topbar-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border-radius: var(--btn-radius);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.topbar-pill-soft {
  background: rgba(25, 52, 95, 0.06);
  color: var(--navy);
  border: 1px solid rgba(25, 52, 95, 0.12);
}

.topbar-pill-soft.is-active {
  background: rgba(204, 31, 39, 0.08);
  border-color: rgba(204, 31, 39, 0.25);
  color: var(--red-deep);
}

.topbar-pill-outline {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  color: var(--navy);
}

.topbar-pill-icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--navy);
  display: grid;
  place-items: center;
}

.topbar-pill-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.topbar-coin {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--navy-fill);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.topbar-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.topbar-dot-green { background: #22c55e; }
.topbar-dot-red { background: var(--red); }

.topbar-account-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  gap: 0.35rem;
  padding: 0 0.75rem;
  border-radius: var(--btn-radius);
  color: var(--navy);
  background: transparent;
}

.topbar-account-btn:hover {
  background: rgba(25, 52, 95, 0.08);
}

.topbar-invite-btn {
  position: relative;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--topbar-control-h);
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.topbar-invite-btn:hover {
  background: rgba(25, 52, 95, 0.08);
}

.topbar-invite-btn .topbar-dot {
  top: 0;
  right: 0;
}

.topbar-mobile-invite-link {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.topbar-mobile-invite-link .topbar-dot {
  position: static;
  display: inline-block;
  border: 0;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.topbar-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 9rem;
  height: auto;
  padding: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--navy);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0.01em;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-avatar .topbar-dot {
  top: -1px;
  right: -1px;
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  padding: 0 0.95rem;
  border-radius: var(--btn-radius);
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
}

.topbar-cta:hover { filter: brightness(1.12); }

.topbar-auth-link { font-weight: 700; color: var(--navy); }

.brand-name { font-size: 1.35rem; }

.btn, button.btn, a.btn, input.btn[type="submit"], input.btn[type="button"] {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  padding: 0.5rem 0.95rem;
  min-height: 2.4rem;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn-secondary {
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: var(--paper-deep);
  border-color: rgba(25, 52, 95, 0.22);
}

.btn-danger {
  background: #fff1f0;
  color: var(--danger);
  border-color: rgba(204, 31, 39, 0.22);
}

.btn-danger:hover {
  background: #ffe0de;
}

.btn-success {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.btn-success:hover {
  background: #15803d;
  border-color: #15803d;
}

.btn-navy {
  background: var(--navy-fill);
  color: #fff;
  border-color: var(--navy-fill);
}

.btn-navy:hover {
  background: var(--navy-fill-deep);
  border-color: var(--navy-fill-deep);
}

.btn-sky {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.btn-sky:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-record {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-record:hover {
  background: #a8181f;
  border-color: #a8181f;
}

.btn-warning {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.btn-warning:hover {
  background: #e5b122;
  border-color: #e5b122;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding-inline: 0.75rem;
}

.btn-lg {
  padding: 0.7rem 1.25rem;
  min-height: 2.85rem;
}

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 180ms ease, transform 180ms ease;
  cursor: pointer;
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(0.35rem);
}

.toast-notice,
.flash-notice {
  background: #16a34a;
  color: #fff;
  border-color: rgba(21, 128, 61, 0.35);
}

.toast-alert,
.flash-alert {
  background: var(--red);
  color: #fff;
  border-color: rgba(160, 24, 32, 0.35);
}

@media (max-width: 900px) {
  .toast-stack {
    right: 0.75rem;
    left: 0.75rem;
    bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    width: auto;
    align-items: stretch;
  }
}

.flash {
  width: 100%;
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 3.5rem;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(204, 31, 39, 0.08), transparent 40%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2319345F' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero-copy {
  text-align: center;
}

.brand-hero {
  margin: 0 auto 0.4rem;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  color: var(--navy);
}

.hero-copy h1 {
  margin: 0 auto 1rem;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 16ch;
}

.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 auto 1.5rem;
}

.hero-copy .cta-row,
.home-cta-row {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.95rem;
}

.hero-copy .wave-btn,
.home-cta-row .wave-btn {
  align-self: center;
}

.home-cta-section .home-cta-row {
  margin: 0 auto;
}

.home-cta-section .hero-consent {
  justify-content: center;
  text-align: center;
}

.hero-consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 26rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
}

.hero-consent input {
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--navy);
}

.hero-consent a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wave-btn[aria-disabled="true"] {
  opacity: 0.42;
  box-shadow: none;
  pointer-events: none;
  transform: none;
  filter: none;
  cursor: not-allowed;
}

.wave-btn[aria-disabled="true"]:hover {
  filter: none;
  box-shadow: none;
  transform: none;
}

.cta-row, .stat-row, .page-head, .page-actions, .meta-line, .transcript-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.stat-row {
  margin-top: 2rem;
  gap: 1.25rem;
}

.stat-row div {
  display: flex;
  flex-direction: column;
  min-width: 5.5rem;
}

.stat-row strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.stat-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.upload-panel, .form-panel, .player-panel, .empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.upload-panel { padding: 1rem; animation: rise 700ms ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.upload-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.upload-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.7rem;
  border-radius: var(--btn-radius);
  font-weight: 700;
  color: var(--muted);
}

.upload-tab.is-active {
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(20, 33, 43, 0.08);
}

.dropzone {
  border: 1.5px dashed rgba(25, 52, 95, 0.28);
  border-radius: 18px;
  padding: 2rem 1.25rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(var(--surface-base), 0.95), rgba(59, 130, 246, 0.12));
  transition: border-color 160ms ease, background 160ms ease;
}

.dropzone.is-dragover,
.dropzone:hover {
  border-color: var(--navy);
  background:
    linear-gradient(180deg, rgba(var(--surface-base), 0.98), rgba(59, 130, 246, 0.2));
}

.dropzone-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(204, 31, 39, 0.18), rgba(217, 164, 65, 0.25)),
    white;
  box-shadow: inset 0 0 0 1px var(--line);
}

.dropzone-title { margin: 0 0 0.35rem; font-weight: 700; }
.dropzone-meta { color: var(--muted); font-size: 0.92rem; }
.dropzone-file {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}
.dropzone-form { cursor: pointer; position: relative; }
.dropzone-form:focus {
  outline: 2px solid rgba(25, 52, 95, 0.25);
  outline-offset: 2px;
}
.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Clicks go to the dropzone; upload-drop#browse opens the picker via .click().
     Avoids accidental native file-picker opens on mobile (pull-to-refresh residual taps). */
  pointer-events: none;
}

.section { padding: 4rem 0; }
.section-muted { background: rgba(var(--surface-base),0.35); }
.page-section { padding-top: 1rem; padding-bottom: 4rem; }

.section-head { margin-bottom: 2rem; max-width: 42rem; }
.section-head h2, .page-head h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
}
.section-head p, .split p { color: var(--ink-soft); }

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.android-app-meta {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.android-app-hint {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  max-width: 42rem;
}

.wave-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 10.875rem;
  min-height: 3.6rem;
  padding: 0.75rem 1.725rem;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--red) 0%, var(--navy-fill) 55%, var(--navy-fill-deep) 100%);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 27px rgba(25, 52, 95, 0.23);
  flex: 0 0 auto;
  width: max-content;
  align-self: flex-start;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wave-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 31px rgba(25, 52, 95, 0.29);
  transform: translateY(-1.5px);
}

.wave-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.wave-text {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 6.9rem;
}

.wave-text-bars,
.wave-text-label {
  grid-area: 1 / 1;
}

.wave-text-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: absolute;
  inset: 0.18rem 0.075rem;
  width: auto;
  height: auto;
  transition: opacity 0.85s ease, filter 0.85s ease;
}

.wave-text-bar {
  flex: 1 1 0;
  max-width: 4.5px;
  min-width: 2.25px;
  height: calc((0.18 + 0.82 * var(--envelope, 0.5)) * 100%);
  border-radius: 999px;
  background: var(--surface-solid);
  opacity: calc(0.22 + 0.78 * var(--envelope, 0.5));
  transform-origin: center;
  transform: scaleY(0.5);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease;
  will-change: transform, opacity;
}

.wave-btn.is-waving .wave-text-bar {
  animation: wave-bar-pulse 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.05s);
  transition: none;
}

.wave-btn .wave-text-label {
  margin: 0;
  text-align: center;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: var(--font-display);
  font-size: 1.425rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(6px);
  pointer-events: none;
}

.wave-btn.is-reveal .wave-text-label {
  animation: text-pulse-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wave-btn.is-reveal .wave-text-bars {
  opacity: 0.72;
  filter: blur(0.6px);
}

.wave-btn.is-text .wave-text-label {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  animation: text-pulse-beat 1.2s ease-in-out;
}

.wave-btn.is-text .wave-text-bars {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

.wave-btn.is-fade .wave-text-label {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(6px);
  transition:
    opacity 0.85s ease,
    transform 0.85s ease,
    filter 0.85s ease;
}

.wave-btn.is-fade .wave-text-bars {
  opacity: 0;
}

@keyframes wave-bar-pulse {
  0%, 100% { transform: scaleY(0.38); }
  40% { transform: scaleY(calc(0.65 + 0.35 * var(--envelope, 0.5))); }
  70% { transform: scaleY(calc(0.5 + 0.28 * var(--envelope, 0.5))); }
}

@keyframes text-pulse-in {
  0% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px);
  }
  38% {
    opacity: 0.72;
    transform: scale(1.05);
    filter: blur(1.5px);
  }
  62% {
    opacity: 0.45;
    transform: scale(0.97);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes text-pulse-beat {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .status-marker-busy.status-marker-transcription {
    animation: none;
    background: color-mix(in srgb, #16a34a var(--marker-progress), #fff);
    border-color: color-mix(in srgb, #15803d var(--marker-progress), color-mix(in srgb, var(--navy) 28%, var(--line)));
  }

  .status-marker-busy.status-marker-summary {
    animation: none;
    background: color-mix(in srgb, #16a34a 42%, #fff);
    border-color: color-mix(in srgb, #15803d 55%, color-mix(in srgb, var(--navy) 28%, var(--line)));
  }

  .wave-btn.is-waving .wave-text-bar {
    animation: none;
    transform: scaleY(0.85);
  }

  .wave-btn.is-reveal .wave-text-label,
  .wave-btn.is-text .wave-text-label {
    animation: none;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  .wave-btn:hover {
    transform: none;
  }

  .wave-text-bars,
  .wave-btn .wave-text-label,
  .wave-text-bar {
    transition: none !important;
  }
}

.feature-grid, .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.feature-item, .step {
  background: rgba(var(--surface-base),0.72);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.25rem 1.3rem;
}

.feature-item h3, .step h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.feature-item p, .step p { margin: 0; color: var(--ink-soft); }

.step-num {
  display: inline-block;
  margin-bottom: 0.7rem;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 0.75rem 0;
  color: var(--ink-soft);
  background: var(--surface-solid);
  overflow-anchor: none;
}

@media (min-width: 901px) {
  html:has(aside.sidebar) .site-footer {
    display: none;
  }

  .recording-detail .speaker-pin-btn {
    display: none;
  }
}

.site-footer a {
  color: var(--navy);
}

.footer-tagline {
  max-width: 36rem;
  margin: 0.6rem 0 0;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.footer-copy {
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.legal-page {
  max-width: 48rem;
}

.legal-page .page-lead,
.contacts-page .page-lead {
  margin: 0;
  color: var(--muted);
}

.legal-place-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-card {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem 1.35rem 1.25rem;
}

.documents-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.documents-link {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  color: var(--navy);
  text-decoration: none;
}

.documents-link:hover {
  background: rgba(25, 52, 95, 0.08);
}

.documents-link-title {
  font-weight: 700;
}

.documents-link-hint {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.legal-card .legal-meta {
  margin: 0 0 1.1rem;
}

.legal-card .requisites-group > h2 {
  margin: 0 0 0.65rem;
  font-size: 1.12rem;
}

.legal-doc section + section {
  margin-top: 1.75rem;
}

.legal-doc h2 {
  margin: 0 0 0.75rem;
  font-size: 1.12rem;
}

.legal-doc h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 1rem;
}

.legal-doc p {
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.legal-doc section:last-child p:last-child,
.legal-doc section:last-child ul:last-child {
  margin-bottom: 0;
}

.legal-doc ul {
  margin: 0.35rem 0 0.9rem;
  padding-left: 1.25rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.legal-doc a {
  color: var(--navy);
}

.requisites-group + .requisites-group {
  margin-top: 1.75rem;
}

.contacts-layout {
  min-width: 0;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-channels > li {
  display: flex;
  min-width: 0;
}

.contact-channels > li > .contact-channel {
  flex: 1;
  width: 100%;
}

.contact-channel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  min-height: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  color: inherit;
  text-decoration: none;
}

.contact-channel-icon {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1;
}

.contact-channel-icon svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}

.contact-channel-icon-telegram {
  color: #26A5E4;
}

.contact-channel-icon-whatsapp {
  color: #25D366;
}

.contact-channel-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.contact-channel:hover {
  border-color: var(--navy);
}

button.contact-channel {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.contact-channel-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.contact-channel-value {
  font-weight: 600;
  color: var(--navy);
}

.contacts-form {
  position: relative;
}

.contacts-form textarea.input {
  min-height: 8rem;
  resize: vertical;
}

.contacts-account {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .contact-channels {
    grid-template-columns: 1fr;
  }
}

.requisites-list {
  margin: 0;
}

.requisites-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: 0.15rem 1rem;
  padding: 0.22rem 0;
}

.requisites-row dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.requisites-row dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.requisites-row[data-tooltip] {
  cursor: help;
}

.page-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.page-head > [data-controller="modal"] > .btn-success {
  margin-top: 0.2rem;
}

.voiceprints-list-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

.voiceprint-list {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}

[data-tooltip],
[data-tooltip-html] {
  -webkit-tap-highlight-color: transparent;
}

[data-tooltip]:has(:disabled),
[data-tooltip]:has([aria-disabled="true"]) {
  display: inline-flex;
  cursor: not-allowed;
}

[data-tooltip] :disabled,
[data-tooltip] [aria-disabled="true"] {
  pointer-events: none;
}

.page-heading {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
}

.page-heading-label {
  line-height: 1;
}

.page-heading-meta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.45rem;
}

.page-heading-meta .pricing-badge {
  align-self: center;
  margin: 0;
}

.voiceprints-split {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 1.25rem;
  align-items: stretch;
  overflow: hidden;
}

.voiceprints-detail-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(var(--surface-base), 0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
}

.voiceprints-detail-pane > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.voiceprints-detail-pane:has(.recording-detail-placeholder) {
  height: auto;
  align-self: start;
}

.voiceprints-detail-pane:has(.recording-detail-placeholder) > turbo-frame,
.voiceprints-detail-pane:has(.recording-detail-placeholder) .voiceprint-recordings {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.voiceprint-recordings {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.voiceprint-recordings-header {
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.55rem 0.65rem 1.35rem;
  min-height: calc(2.4rem + 1.3rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface-solid);
}

.voiceprint-recordings-header-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.voiceprint-recordings-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.voiceprint-title-edit {
  min-width: 0;
}

.voiceprint-title-edit .voiceprint-recordings-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voiceprint-title-input {
  flex: 1 1 auto;
  min-width: 4rem;
  width: 100%;
  margin: 0;
  padding: 0 0 0.04rem;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.voiceprint-rename-btn {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.voiceprint-rename-btn:hover,
.voiceprint-rename-btn:focus-visible {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.voiceprint-rename-btn .icon-check {
  display: none;
}

.voiceprint-rename-btn.is-editing .icon-pencil {
  display: none;
}

.voiceprint-rename-btn.is-editing .icon-check {
  display: block;
}

.voiceprint-rename-btn.is-editing {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
}

.voiceprint-recordings-header .voiceprint-header-action {
  margin-left: auto;
}

.voiceprint-recordings-header .meta-line {
  margin: 0;
}

.voiceprint-recording-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 1rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: auto;
  overscroll-behavior: contain;
}

.voiceprint-recording-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  color: inherit;
  transition: background 160ms ease, border-color 160ms ease;
}

.voiceprint-recording-row:hover {
  background: var(--surface-solid);
  border-color: var(--navy);
}

.voiceprint-recording-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.voiceprint-recording-row-info {
  min-width: 0;
  flex: 1 1 auto;
}

.voiceprint-recording-row-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.voiceprint-recording-row .meta-line {
  margin: 0;
}

.voiceprint-recording-row-stats {
  flex-shrink: 0;
  font-size: 0.88rem;
  color: var(--muted);
  white-space: nowrap;
}

.voiceprint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.voiceprint-drag-handle {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 2rem;
  margin: 0 0 0 -0.25rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  opacity: 0.7;
  cursor: grab;
  touch-action: none;
}

.voiceprint-drag-handle:hover,
.voiceprint-drag-handle:focus-visible {
  opacity: 1;
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.voiceprint-drag-handle:active {
  cursor: grabbing;
}

.voiceprint-row:hover {
  background: var(--surface-solid);
}

.voiceprint-row:active {
  cursor: pointer;
}

.voiceprint-row.is-selected {
  background: var(--surface-solid);
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(25, 52, 95, 0.14);
}

.voiceprint-list.is-merging .voiceprint-row:not(.is-dragging),
.voiceprints-split.is-merging .voiceprint-row:not(.is-dragging) {
  border-style: dashed;
}

.voiceprint-row.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.voiceprint-row.is-drop-target {
  border-color: var(--navy);
  background: var(--surface-solid);
  box-shadow: 0 0 0 2px rgba(25, 52, 95, 0.18);
}

.voiceprint-row.is-merging-target,
.voiceprint-row.is-merging-source {
  pointer-events: none;
}

.voiceprint-row-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 auto;
}

.voiceprint-row-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.voiceprint-row-stats {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voiceprint-play {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--navy);
  cursor: pointer;
}

.voiceprint-play:hover {
  background: rgba(25, 52, 95, 0.06);
  border-color: var(--navy);
}

.voiceprint-icon-btn {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--navy);
  cursor: pointer;
}

.voiceprint-header-action,
.voiceprint-row-action {
  margin: 0;
}

.voiceprint-delete:hover {
  background: var(--accent-soft);
  border-color: var(--red);
  color: var(--red);
}

.voiceprint-row.is-playing .voiceprint-play,
.voiceprint-recording-row.is-playing .voiceprint-play {
  background: var(--navy-fill);
  border-color: var(--navy-fill);
  color: #fff;
}

.voiceprint-row .audio-player-icon-pause {
  display: none;
}

.voiceprint-row.is-playing .audio-player-icon-play {
  display: none;
}

.voiceprint-row.is-playing .audio-player-icon-pause {
  display: block;
}

.page-head-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.page-head-stack h1 {
  margin: 0;
}

.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
}

.page-head-row h1 {
  margin-right: auto;
  min-width: 0;
}

.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-width: 0;
}

.page-head-action-bar {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.5rem;
}

.page-head-action-bar > [data-controller] {
  display: inline-flex;
  flex-shrink: 0;
}

.page-head-action-bar > [data-controller]:first-of-type {
  margin-left: auto;
}

.page-head-action-bar .page-head-gear {
  order: 1;
}

.list-action-panel {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.list-action-panel > [data-controller]:first-of-type,
.list-action-panel .page-head-gear {
  margin-left: 0;
  order: 0;
}

.page-head-actions-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: inherit;
  min-width: 0;
}

.page-head-actions-primary {
  flex: 1 1 13rem;
  justify-content: flex-end;
}

.page-head-actions-primary > [data-controller] {
  min-width: 0;
}

.page-head-actions-primary .btn {
  min-width: 0;
}

/* Only direct button_to forms — not nested modal forms. */
.page-head-actions > form {
  display: inline-flex;
  margin: 0;
}

.upload-form-row .upload-field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.upload-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(34rem, calc(100vw - 1.5rem));
  width: 100%;
  margin: auto;
}

.upload-modal.is-wide {
  max-width: min(42rem, calc(100vw - 1.5rem));
}

.upload-modal.is-wide .upload-modal-card {
  max-height: min(90vh, 46rem);
  overflow: auto;
}

/* Queue table needs more room than a form-sized dialog. */
.upload-modal.admin-queue-modal {
  max-width: min(64rem, calc(100vw - 1.5rem));
}

.admin-queue-modal-card .admin-table-wrap {
  overflow-x: auto;
}

.admin-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.affiliate-join {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  margin-top: 1rem;
}

.upload-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.upload-modal-card {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.35rem 1.15rem;
  max-width: 100%;
  overflow-x: hidden;
}

.upload-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.upload-modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--navy);
}

.upload-modal-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: var(--btn-radius);
  cursor: pointer;
}

.upload-modal-close:hover {
  background: var(--paper-deep);
  color: var(--navy);
}

.upload-modal-panel,
.form-panel.upload-modal-panel {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.start-modal-panel,
.form-panel.start-modal-panel {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.start-modal-form.stack-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.start-modal-form-fields {
  display: contents;
}

.start-modal-form .start-modal-title {
  order: 1;
  margin-bottom: 0;
}

.start-modal-form .start-modal-options {
  order: 2;
  margin-bottom: 0;
}

.start-modal-form .start-modal-options-stack {
  display: grid;
  gap: 0.4rem;
}

.start-modal-form .start-modal-mic {
  order: 3;
  margin-bottom: 0;
}

.start-modal-form .start-modal-actions {
  order: 4;
  margin-top: 0.2rem;
}

.start-modal-form .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.start-modal-form .checkbox-label input {
  margin: 0;
  flex-shrink: 0;
}

.start-modal-mic .mic-error {
  margin-top: 0.35rem;
}

.upload-modal-form.stack-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 0.55rem;
}

.upload-modal-form .field {
  margin-bottom: 0;
  min-width: 0;
}

.upload-modal-form .dropzone,
.upload-modal-form .input {
  max-width: 100%;
}

.upload-modal-form .url-or-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.upload-modal-form .url-or-label {
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 700;
  text-transform: lowercase;
}

.upload-modal-form .url-or-row .input {
  flex: 1;
  min-width: 0;
}

.upload-modal-form .checkbox-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.upload-modal-form .checkbox-label .pricing-badge {
  font-size: 0.72rem;
  padding: 0.12rem 0.5rem;
}

.upload-modal-form .checkbox-label input {
  margin: 0;
  flex-shrink: 0;
}

.upload-modal-form .hero-consent {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: none;
  text-align: left;
}

/* The privacy-consent dialog's checkbox+text is the only .hero-consent
   living inside .upload-modal-form — center it (and its submit button)
   rather than the left-aligned default above, which is tuned for the
   longer, left-reading checkboxes elsewhere in upload-style modals. */
#privacy-consent-dialog .hero-consent {
  justify-content: center;
  text-align: center;
}

#privacy-consent-dialog .upload-modal-actions {
  justify-content: center;
}

.upload-modal-form .hero-consent span {
  min-width: 0;
  flex: 1 1 auto;
}

.upload-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.upload-modal-actions > form {
  display: contents;
}

body.is-modal-open {
  overflow: hidden;
}

.upload-reveal {
  margin-bottom: 1.75rem;
}

.upload-reveal-in-list {
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.upload-reveal-in-list .upload-inline-panel,
.upload-reveal-in-list .form-panel {
  padding: 0.85rem;
}

.upload-reveal-in-list .upload-form-row {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.upload-reveal-in-list .upload-form-row .upload-field-submit {
  justify-content: flex-end;
}

.upload-reveal-in-list .upload-form-row .upload-field-submit .btn {
  width: auto;
}

.recording-list-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: none;
}

.upload-inline-panel {
  max-width: none;
}

.upload-form-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.9fr) minmax(14rem, 1.2fr) minmax(14rem, 1.2fr) auto;
  gap: 0.85rem 1rem;
  align-items: end;
}

.upload-form-row .upload-form-errors {
  grid-column: 1 / -1;
}

.upload-form-row .field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.upload-form-row .field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.upload-form-row .dropzone-compact {
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--btn-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}

.upload-form-row .dropzone-compact .dropzone-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--muted);
  font-weight: 600;
}

.upload-form-row .dropzone-compact .dropzone-file {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-form-row .upload-field-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.upload-form-row .upload-field-submit .btn {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .upload-form-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .upload-form-row .upload-field-submit:not(.upload-field-actions) .btn {
    width: 100%;
  }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  align-items: stretch;
}

.pricing-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.tariff-picker {
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  margin: 0.35rem 0 0.15rem;
  padding: 1.15rem 1.2rem;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.tariff-picker-title {
  margin: 0;
  font-size: 1.15rem;
}

.tariff-picker-lead {
  margin: 0;
  color: var(--ink-soft);
}

.tariff-picker-set {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.5rem;
}

.tariff-picker-set legend {
  padding: 0;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
}

.tariff-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tariff-picker-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.tariff-picker-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: rgba(204, 31, 39, 0.35);
  color: var(--red-deep);
}

.tariff-picker-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tariff-picker-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tariff-picker-mark {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border: 2px solid rgba(25, 52, 95, 0.35);
  background: var(--surface-solid);
}

.tariff-picker-option input[type="checkbox"] + .tariff-picker-mark {
  border-radius: 0.28rem;
}

.tariff-picker-option input[type="radio"] + .tariff-picker-mark {
  border-radius: 999px;
}

.tariff-picker-option:has(input:checked) .tariff-picker-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.tariff-picker-mark::after {
  content: "";
  opacity: 0;
}

.tariff-picker-option:has(input[type="checkbox"]:checked) .tariff-picker-mark::after {
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.04rem, -0.05rem);
  opacity: 1;
}

.tariff-picker-option:has(input[type="radio"]:checked) .tariff-picker-mark::after {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--surface-solid);
  opacity: 1;
}

.tariff-picker-result {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.tariff-picker-match {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}

.tariff-picker-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.tariff-picker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.pricing-audience {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: var(--surface-solid);
}

.pricing-audience-link {
  padding: 0.4rem 1.05rem;
  border-radius: var(--btn-radius);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.pricing-audience-link:hover {
  background: var(--accent-blue);
  color: #fff;
}

.pricing-audience-link.is-active {
  background: var(--accent-blue);
  color: #fff;
}

span.pricing-audience-link {
  cursor: default;
}

.pricing-audience-link.is-active:hover {
  color: #fff;
}

.admin-tariff-audience {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.5rem 1.4rem;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  scroll-margin-top: 5.5rem;
}

@supports (grid-template-rows: subgrid) {
  .pricing-grid .pricing-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0.85rem;
  }

  .pricing-grid .pricing-card-intro {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0.85rem;
  }
}

.pricing-card.is-dimmed {
  opacity: 0.55;
}

.pricing-grid:not(.is-interacted) .pricing-card.is-featured,
.pricing-grid .pricing-card:hover,
.pricing-grid .pricing-card:focus-within,
.pricing-card.is-recommended {
  /* --accent-blue is var(--accent) (red) in light mode and blue in dark
     mode, so this reads identically to the old hardcoded red rgba() in
     light mode while picking up the requested blue highlight in dark. */
  border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent-blue) 16%, transparent);
  opacity: 1;
}

.pricing-grid:not(.is-interacted) .pricing-card.is-featured .btn-secondary,
.pricing-grid .pricing-card:hover .btn-secondary,
.pricing-card.is-recommended .btn-secondary {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

@media (hover: hover) {
  .pricing-grid .pricing-card {
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
}

.pricing-badge {
  margin: 0;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--red-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.pricing-badge.is-success {
  background: #dcfce7;
  color: #15803d;
}

.pricing-card-intro {
  display: grid;
  gap: 0.85rem;
}

.pricing-card-header {
  display: grid;
  gap: 0.85rem;
}

.pricing-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 0;
  padding-bottom: 0.35rem;
}

.pricing-card-header > .pricing-badge.is-recommended {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 1;
}

.pricing-card.is-recommended .pricing-card-header {
  padding-right: 6.75rem;
}

.pricing-card.is-featured .pricing-card-intro {
  margin: -1.5rem -1.4rem 0;
  padding: 1.5rem 1.4rem 1rem;
  background: var(--accent-soft);
  border-radius: 17px 17px 0 0;
}

/* Dark mode only — the popular-tariff header tint follows --accent-blue
   (blue) instead of the red-tinted --accent-soft used everywhere else,
   mixed with --surface-solid the same way .is-current's header already is,
   so title/description text drawn on top stays legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-card.is-featured .pricing-card-intro {
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--surface-solid));
  }
}

:root[data-theme="dark"] .pricing-card.is-featured .pricing-card-intro {
  background: color-mix(in srgb, var(--accent-blue) 18%, var(--surface-solid));
}

/* This is the user's current plan — deliberately always-on (not just on
   hover, unlike the other card states above), confirmed as the intended
   behavior. The blue box-shadow is a light-mode-only accent: against
   --paper-deep's near-black dark-mode background the same rgba(59, 130,
   246, ...) glow reads as a much brighter, unintended-looking "blue glow"
   rather than a subtle plan indicator, so dark mode keeps just the blue
   border and falls back to the theme's normal neutral --shadow. */
.pricing-card.is-current {
  border-color: #3b82f6;
  box-shadow: 0 18px 50px rgba(59, 130, 246, 0.16);
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-card.is-current {
    box-shadow: var(--shadow);
  }
}

:root[data-theme="dark"] .pricing-card.is-current {
  box-shadow: var(--shadow);
}

.pricing-card.is-current .pricing-card-intro {
  margin: -1.5rem -1.4rem 0;
  padding: 1.5rem 1.4rem 1rem;
  /* --surface-solid, not a hardcoded #fff — that stayed light in dark
     theme, where --navy/--ink (the title/description text drawn on top)
     flip to near-white, making both nearly invisible against it. Mixing
     with the theme-aware surface color instead keeps the same light-blue
     tint in light mode and gives a dark-blue tint in dark mode. */
  background: color-mix(in srgb, #3b82f6 10%, var(--surface-solid));
  border-radius: 17px 17px 0 0;
}

.pricing-current-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.5rem 0.95rem;
  color: #3b82f6;
  font-weight: 700;
  text-align: center;
}

.pricing-card h2,
.pricing-card-name {
  margin: 0;
  font-size: 1.35rem;
}

.pricing-card-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.pricing-popular-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 1px 2px rgba(204, 31, 39, 0.28));
}

.pricing-popular-icon svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
}

.pricing-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.pricing-period {
  color: var(--muted);
  font-size: 0.95rem;
}

.pricing-minute-price {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.pricing-cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.pricing-quota {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
}

.pricing-cta .pricing-minute-price {
  margin-top: 0;
}

.pricing-equivalent {
  margin: -0.45rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.purchase-term-title {
  margin: 0;
  font-size: 1rem;
}

.pricing-desc {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.45;
}

@supports not (grid-template-rows: subgrid) {
  .pricing-grid .pricing-desc {
    min-height: 4.35em;
  }
}

.pricing-cta .pricing-price {
  justify-content: center;
}

.pricing-cta .pricing-amount {
  font-size: 1.35rem;
}

.pricing-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.pricing-features + .pricing-features {
  margin-top: 1.25rem;
}

.pricing-card .pricing-features + .pricing-features {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.pricing-details-wrap {
  display: flex;
  justify-content: center;
}

.pricing-details-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.pricing-details-btn:hover,
.pricing-details-btn:focus-visible {
  color: var(--accent);
}

.pricing-details-modal {
  max-width: min(48rem, calc(100vw - 1.5rem));
}

.pricing-details-modal .upload-modal-card {
  padding: 1.35rem 1.6rem 1.5rem;
}

.pricing-details-lead {
  margin: 0 0 1.25rem;
  color: var(--ink);
  line-height: 1.5;
}

.pricing-details-modal .pricing-features {
  gap: 0.4rem;
}

.pricing-details-modal .pricing-features + .pricing-features {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.pricing-features li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}

.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 0.95rem;
  height: 0.95rem;
  background-color: #16a34a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 14.4 4.3 10.5l1.4-1.4 2.5 2.5 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 14.4 4.3 10.5l1.4-1.4 2.5 2.5 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.pricing-features li.is-unavailable {
  font-weight: 400;
  color: var(--muted);
}

/* Not included in this plan — a plain muted dot, not the green checkmark
   shape above (inheriting that here would misleadingly read as
   "included"). */
.pricing-features li.is-unavailable::before {
  top: 0.4rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: var(--muted);
  opacity: 0.55;
  -webkit-mask-image: none;
  mask-image: none;
}

.pricing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.35rem;
}

.pricing-card .btn {
  width: auto;
}

/* A single tariff (e.g. Corporate audience with only one plan) shouldn't
   stretch to the full container width just because it's the lone grid
   item — cap it to what one column of the normal 3-up grid would measure,
   using the same column gap as .pricing-grid so it lines up with a 3-card
   layout exactly. */
.pricing-grid-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc((100% - 2 * 1.25rem) / 3);
}
.pricing-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pricing-packages {
  margin-top: 2.5rem;
}

.pricing-packages-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.pricing-packages-lead {
  margin: 0 0 1.1rem;
  color: var(--muted);
}

.pricing-package-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.15rem 1.2rem;
}

.pricing-package-card .pricing-card-name {
  margin: 0;
}

.pricing-package-card .pricing-price {
  margin: 0;
}

.pricing-package-card .btn {
  margin-top: auto;
}

.settings-minute-packages {
  margin-top: 1.5rem;
}

.settings-package-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.settings-package-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
}

.admin-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin-top: 0.35rem;
}

@media (max-width: 1100px) {
  .pricing-grid,
  .pricing-grid-3,
  .pricing-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .pricing-grid,
  .pricing-grid-1,
  .pricing-grid-2,
  .pricing-grid-3,
  .pricing-grid-4 {
    grid-template-columns: 1fr;
  }

  .pricing-grid-1 {
    max-width: none;
  }

  .pricing-card .btn {
    width: 100%;
  }
}

.purchase-card {
  max-width: 28rem;
  margin: 0 auto;
}

.purchase-main {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.purchase-term-offer {
  display: grid;
  gap: 0.7rem;
}

.purchase-employee-count {
  display: grid;
  gap: 0.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.purchase-employee-count-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.purchase-employee-count-row input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--accent);
}

.purchase-employee-count-value {
  min-width: 2ch;
  text-align: right;
  font-weight: 700;
  color: var(--navy);
}

.purchase-term-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.purchase-term-check input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.purchase-term {
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--line);
  display: none;
  gap: 0.55rem;
}

.purchase-term.is-open,
.purchase-promo.is-open {
  display: grid;
}

.purchase-promo {
  margin: 0;
  display: none;
  gap: 0.55rem;
}

.purchase-promo .field {
  margin: 0;
}

.purchase-balance {
  margin: 0 0 0.85rem;
}

.payment-method-set .purchase-balance {
  margin: 0.15rem 0 0.85rem;
}

.purchase-actions {
  display: grid;
  gap: 0.85rem;
  margin-top: auto;
}

.purchase-actions .upload-modal-actions {
  margin-top: 0.5rem;
}

.payment-status.is-succeeded { color: #15803d; font-weight: 600; }
.payment-status.is-canceled { color: #be123c; font-weight: 600; }
.payment-status.is-pending,
.payment-status.is-waiting_for_capture { color: #a16207; font-weight: 600; }

.page-head-gear {
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0;
}

.page-head-gear svg {
  display: block;
}

.admin-form-panel {
  padding: 1.4rem 1.5rem;
}

.admin-form-panel .settings-plan-quota,
.admin-referral-stats {
  margin: 0;
}

.admin-tariff-form .admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.admin-tariff-form .admin-form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-tariff-features-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.admin-tariff-features-preview {
  margin: 0;
  padding: 0.75rem 0.9rem;
  list-style: none;
  min-height: 8.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.admin-tariff-features-preview li + li {
  margin-top: 0.35rem;
}

.admin-tariff-features-preview li.is-unavailable {
  color: var(--muted);
}

.admin-tariff-features-preview.is-details {
  min-height: 11rem;
}

.admin-feature-descriptions {
  display: grid;
  gap: 1rem;
}

.admin-feature-descriptions.is-sorting {
  user-select: none;
}

.admin-feature-description {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
}

.admin-feature-description.is-dragging {
  opacity: 0.45;
}

.admin-feature-description-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  row-gap: 0.35rem;
  flex: 0 0 13rem;
  align-self: stretch;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: var(--accent-soft);
}

.admin-feature-description-title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.admin-feature-description-custom-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-feature-description-delete {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}

.admin-feature-description-delete:hover,
.admin-feature-description-delete:focus-visible {
  text-decoration: underline;
}

.admin-feature-description-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.95rem;
}

.admin-feature-description-fields .admin-form-grid {
  display: grid;
  grid-template-columns: minmax(15rem, max-content) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.admin-tariff-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.admin-tariff-block {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-tint);
  min-width: 0;
}

.admin-tariff-form > .admin-tariff-block {
  margin-top: 1rem;
}

.admin-tariff-block-title {
  padding: 0 0.25rem;
  float: none;
  width: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}

.admin-tariff-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
}

.admin-tariff-checks .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.admin-tariff-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.admin-col-flags .admin-tariff-flags {
  flex-wrap: nowrap;
}

.admin-table th.admin-col-processes,
.admin-table td.admin-col-processes {
  min-width: 8rem;
}

.admin-tariff-form-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-tariff-inline {
  min-width: 0;
}

.admin-tariff-inline-value {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0.1rem 0.25rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: text;
}

.admin-tariff-inline-value[aria-disabled="true"] {
  cursor: default;
}

.admin-tariff-inline-value[aria-disabled="true"]:hover,
.admin-tariff-inline-value[aria-disabled="true"]:focus-visible {
  background: transparent;
}

.admin-tariff-inline-value:hover,
.admin-tariff-inline-value:focus-visible {
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.admin-tariff-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}

.admin-tariff-inline-form .input {
  width: 5.75rem;
  min-width: 0;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.admin-tariff-chip-form {
  display: inline-flex;
  margin: 0;
}

.admin-tariff-chip {
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: 0;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.admin-tariff-chip:hover,
.admin-tariff-chip:focus-visible {
  filter: brightness(0.96);
  outline: none;
}

.admin-tariff-chip[aria-disabled="true"],
.admin-tariff-chip[aria-busy="true"] {
  cursor: default;
}

.admin-tariff-chip[aria-disabled="true"]:hover,
.admin-tariff-chip[aria-disabled="true"]:focus-visible {
  filter: none;
}

.admin-tariff-chip.is-disabled {
  background: #eef2f7;
  color: var(--muted);
}

.admin-tariff-chip.is-blocked {
  background: #fef3c7;
  color: #b45309;
}

.admin-tariff-chip.is-hidden {
  background: #111;
  color: #fff;
}

.admin-tariff-visibility {
  display: grid;
  gap: 0.4rem;
}

.admin-tariff-visibility-name {
  font-weight: 600;
}

.admin-tariff-visibility-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
}

.admin-tariff-processes-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-solid);
}

.admin-tariff-processes-table th,
.admin-tariff-processes-table td {
  padding: 0.45rem 0.7rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  text-align: left;
}

.admin-tariff-processes-table thead th {
  background: var(--surface-tint);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-tariff-processes-table th[scope="row"] {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.admin-tariff-processes-table tr:last-child th,
.admin-tariff-processes-table tr:last-child td {
  border-bottom: 0;
}

.admin-tariff-processes-table .admin-tariff-process-state {
  width: 8.5rem;
  text-align: center;
}

.admin-tariff-process-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.admin-tariff-process-radio input {
  margin: 0;
}

@media (max-width: 900px) {
  .admin-tariff-block .admin-table-wrap {
    overflow-x: auto;
  }

  .admin-tariff-processes-table th[scope="row"] {
    white-space: normal;
  }

  .admin-tariff-processes-table .admin-tariff-process-state {
    width: 6.5rem;
  }
}

.checkbox-label.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-tariff-chip.is-free,
.admin-tariff-chip.is-popular {
  background: var(--accent-soft);
  color: var(--red-deep);
}

.btn-small {
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
}

.settings-plan-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  color: var(--navy);
}

.settings-plan-body .pricing-price {
  margin-bottom: 0.2rem;
}

.settings-plan-body .pricing-minute-price {
  margin-bottom: 0.45rem;
}

.settings-plan-body .pricing-amount {
  font-size: 1.45rem;
}

.settings-plan-quota {
  margin: 0.55rem 0 0;
}

.settings-plan-body .settings-plan-quota {
  margin-top: 1.25rem;
}

.settings-plan-body .settings-plan-quota + .meta-line {
  margin-top: 0.95rem;
}

.settings-plan-body + .settings-form-actions {
  margin-top: 1.45rem;
}

.settings-promo {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08));
}

.settings-promo h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--navy);
}

.settings-promo-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.65rem;
}

.settings-promo-form .input {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-promo-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-promo-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-promo-link-value {
  font-size: 0.82rem;
}

.settings-plan-body .pricing-features {
  margin-top: 0.85rem;
}

.settings-subhead {
  margin: 1.4rem 0 0.6rem;
  font-size: 1.05rem;
  color: var(--navy);
}

.referral-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.1rem;
  align-items: start;
}

.referral-requisites-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.75rem 1.1rem;
  align-items: start;
}

.referral-requisites-row .field,
.referral-accounts-row .field {
  min-width: 0;
}

.referral-accounts-row,
.settings-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.1rem;
  align-items: start;
}

.settings-fields-row .field {
  min-width: 0;
}

@media (max-width: 720px) {
  .referral-share-grid,
  .referral-requisites-row,
  .referral-accounts-row,
  .settings-fields-row {
    grid-template-columns: 1fr;
  }
}

.referral-copy-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.referral-copy-row .input {
  flex: 1;
}

.referral-copy-btn .referral-copy-icon.is-done {
  display: none;
}

.referral-copy-btn.is-copied .referral-copy-icon.is-copy {
  display: none;
}

.referral-copy-btn.is-copied .referral-copy-icon.is-done {
  display: block;
}

.referral-rules-link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pricing-amount.is-was {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 0.85em;
  margin-right: 0.35rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .admin-tariff-form .admin-form-grid,
  .admin-tariff-form .admin-form-grid-3,
  .admin-tariff-blocks,
  .admin-tariff-checks,
  .admin-feature-description-fields .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-feature-description {
    flex-direction: column;
  }

  .admin-feature-description-head {
    flex: 0 0 auto;
  }
}

.back-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-weight: 600;
}

.workspace-page.page-section {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 981px) {
  .workspace-page.page-section:has(.recordings-split),
  .workspace-page.page-section:has(.voiceprints-split) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 901px) {
  .workspace-page.page-section:has(.recordings-split),
  .workspace-page.page-section:has(.voiceprints-split) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

.workspace-page > .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workspace-page:has(.recordings-split) > .container,
.workspace-page:has(.voiceprints-split) > .container {
  gap: 0;
}

@media (min-width: 901px) {
  .workspace-page:has(.recordings-split) > .container,
  .workspace-page:has(.voiceprints-split) > .container {
    width: calc(100% - 2.5rem) !important;
  }
}

.workspace-page .page-head {
  flex-shrink: 0;
}

.workspace-page .upload-reveal {
  flex-shrink: 0;
}

.recordings-split {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 1.25rem;
  align-items: stretch;
  overflow: hidden;
}

.recordings-split.is-detail-open {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

.recordings-list-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.65rem 0.5rem;
  overscroll-behavior: none;
  background: rgba(var(--surface-base), 0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.recordings-list-pane > .page-head {
  flex-shrink: 0;
  width: 100%;
  margin-bottom: 0.45rem;
}

.recordings-list-pane .page-head-row {
  justify-content: space-between;
}

.recordings-list-pane .page-head h1,
.recordings-list-pane .page-heading,
.recording-detail-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.recordings-list-pane .page-head h1,
.recordings-list-pane .page-heading {
  flex: 0 0 auto;
  min-width: 0;
}

.recordings-list-pane .page-heading-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.recordings-list-pane .page-head-action-bar {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-left: 0;
}

.recordings-list-pane .page-head-action-bar > [data-controller]:first-of-type {
  margin-left: 0;
}

.recordings-list-pane .page-head-action-bar .btn {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

@media (min-width: 901px) {
  .recordings-list-pane {
    padding-top: 0;
  }

  .recordings-list-pane > .page-head {
    box-sizing: border-box;
    align-items: stretch;
    width: calc(100% + 1.3rem);
    margin: 0 -0.65rem 0.45rem;
    padding: 0;
    min-height: 0;
    border-bottom: 0;
    gap: 0;
  }

  .recordings-list-pane .page-head-row {
    box-sizing: border-box;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-height: calc(2.4rem + 1.3rem);
    padding: 0.65rem;
    border-bottom: 1px solid var(--line);
  }

  .recordings-list-pane .list-action-panel {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.65rem 0.55rem;
    justify-content: flex-start;
  }

  .recordings-list-pane .page-head h1,
  .recordings-list-pane .page-heading {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.recording-list {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
  min-width: 0;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  /* Gutter + a little padding so overflow-x:hidden doesn't shear the
     row's right radius, and the scrollbar doesn't sit on the card. */
  padding: 0 0.4rem 0.15rem 0;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}

.recordings-detail-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(var(--surface-base), 0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
}

/* Turbo sets [busy] on a <turbo-frame> for the duration of a navigation.
   The frame's own content is what gets replaced, so the indicator has to
   live on the (non-replaced) pane wrapper — otherwise there's no visual
   feedback at all while the old detail stays on screen mid-click. */
.recordings-detail-pane:has(> turbo-frame[busy])::after,
.voiceprints-detail-pane:has(> turbo-frame[busy])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--surface-base), 0.5);
  z-index: 3;
}

.recordings-detail-pane:has(> turbo-frame[busy])::before,
.voiceprints-detail-pane:has(> turbo-frame[busy])::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 4;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid rgba(25, 52, 95, 0.18);
  border-top-color: var(--navy);
  animation: spin 0.8s linear infinite;
}

/* recordings/show.html.erb's standalone equivalent of .recordings-detail-pane
   — same card look, but deliberately without height:100%/overflow:hidden:
   there's no split-view ancestor giving it a bounded height to scroll
   within here, so it should just grow to content and let the page scroll
   normally instead of clipping. */
.recording-detail-page-card {
  background: rgba(var(--surface-base), 0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* Mobile mirrors how the split index view already treats its own detail
   pane on a narrow screen (see .recordings-split.is-detail-open rules
   below) — full-bleed, no back link, reads as a focused app-like screen
   rather than a page with a container inset around it. */
@media (max-width: 900px) {
  .recording-show-page .recording-show-back {
    display: none;
  }

  .recording-show-page > .container {
    width: 100% !important;
    gap: 0;
  }

  .recording-show-page .recording-detail-page-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

.recordings-detail-pane > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.recordings-detail-pane:has(.recording-detail-placeholder) {
  height: auto;
  align-self: start;
}

.recordings-detail-pane:has(.recording-detail-meta-pane),
.recording-detail-page-card:has(.recording-detail-meta-pane) {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.recordings-detail-pane:has(.recording-detail-placeholder) > turbo-frame {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.recording-detail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  gap: 1.25rem;
  align-items: stretch;
  overflow: hidden;
}

.recording-show-page .recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) {
  align-items: start;
  overflow: visible;
}

.recording-detail-header {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 0;
  /* Bleeds to the full width of .recording-detail-body, canceling that
     parent's own 1.35rem side padding — this (and .recording-detail-top/
     -subheader/-spy below) used to live outside the padded scroll area
     entirely; now that pinning needs them inside it (see
     pin_panel_controller.js), they still need to look full-bleed. Plain
     width:100% resolves against the parent's content box (already
     inset by that padding), so a negative margin alone shifts the box
     left without widening it — calc() adds the reclaimed padding back
     so the right edge actually reaches the bleed too. */
  width: calc(100% + 2.7rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 -1.35rem;
  padding: 0.65rem 0.55rem 0.65rem 1.35rem;
  min-height: calc(2.4rem + 1.3rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface-solid);
}

/* Mic/draft details put the header directly on .recording-detail, which
   has no side padding. The bleed above would then overflow the card. */
.recording-detail > .recording-detail-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.recording-detail-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.recording-detail-title > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recording-detail-title-edit {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.recording-detail-title-input {
  appearance: none;
  flex: 1 1 0;
  min-width: 4rem;
  max-width: 100%;
  width: 100%;
  padding: 0 0 0.12rem;
  border: 0;
  border-bottom: 1px dotted rgba(25, 52, 95, 0.38);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}

.recording-detail-title-input:focus {
  outline: none;
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.recording-detail-title-input[hidden] {
  display: none;
}

.recording-title-edit-btn {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.recording-title-edit-btn:hover,
.recording-title-edit-btn:focus-visible {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.recording-title-edit-btn .icon-check {
  display: none;
}

.recording-title-edit-btn.is-editing .icon-pencil {
  display: none;
}

.recording-title-edit-btn.is-editing .icon-check {
  display: block;
}

.recording-title-edit-btn.is-editing {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
}

.recording-detail-menu {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
}

.recording-detail-header .recording-detail-menu {
  margin-left: auto;
}

.recording-detail-menu-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  line-height: 0;
}

.recording-detail-header .recording-detail-menu-btn {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  background: var(--surface-solid);
}

.recording-detail-menu-btn:hover,
.recording-detail-menu.is-open .recording-detail-menu-btn {
  background: rgba(25, 52, 95, 0.08);
}

.recording-detail-menu-dots {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
}

.recording-detail-menu-dots span {
  display: block;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: currentColor;
}

.recording-detail-menu-panel {
  min-width: 13.5rem;
}

.recording-detail-menu-panel form,
.recording-detail-menu-panel .button_to {
  display: block;
  width: 100%;
  margin: 0;
}

.recording-detail-menu-panel .topbar-menu-link {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.topbar-menu-link-danger {
  color: var(--red-deep);
}

.topbar-menu-link-danger:hover {
  background: rgba(204, 31, 39, 0.1);
  color: var(--red-deep);
}

.recording-detail-subheader {
  flex-shrink: 0;
  align-self: stretch;
  width: calc(100% + 2.7rem);
  box-sizing: border-box;
  margin: 0 -1.35rem;
  padding: 0.7rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-tint);
}

.recording-detail-top {
  flex-shrink: 0;
  align-self: stretch;
  width: calc(100% + 2.7rem);
  box-sizing: border-box;
  margin: 0 -1.35rem;
  padding: 0.55rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-tint);
}

.recording-detail-top .player-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.recording-detail-top .player-panel .audio-player-shell {
  flex: 1 1 auto;
  min-width: 0;
}

.recording-detail-top .player-panel .panel-label {
  margin-bottom: 0.35rem;
}

.recording-detail-top .processing-banner,
.recording-detail-top .info-banner {
  margin-top: 0.75rem;
}

.recording-info-meta .error-banner {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
}

.recording-detail-top .audio-player {
  margin-top: 0;
}

.audio-player-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: rgba(var(--surface-base), 0.94);
}

.audio-player-shell .audio-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  border: 0;
  /* Must not sit above the custom play button / timeline and eat clicks. */
  pointer-events: none;
}

.audio-player-toggle {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.audio-player-toggle:hover {
  background: var(--line);
}

.audio-player-icon {
  display: block;
  width: 0;
  height: 0;
}

.audio-player-icon-play {
  margin-left: 0.15rem;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.7rem solid currentColor;
}

.audio-player-icon-pause {
  display: none;
  width: 0.7rem;
  height: 0.85rem;
  border-left: 0.22rem solid currentColor;
  border-right: 0.22rem solid currentColor;
  box-sizing: border-box;
}

.audio-player-shell.is-playing .audio-player-icon-play {
  display: none;
}

.audio-player-shell.is-playing .audio-player-icon-pause {
  display: block;
}

.audio-player-time {
  flex-shrink: 0;
  min-width: 2.4rem;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.audio-player-duration {
  color: var(--muted);
  text-align: right;
}

.audio-player-shell .speech-timeline {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.audio-player-shell .speech-timeline-track {
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--line);
}

.recording-detail-spy {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: calc(100% + 2.7rem);
  box-sizing: border-box;
  padding: 0.28rem 1.35rem;
  background: var(--paper-deep);
  border-radius: 0;
}

.recording-detail-transcribe-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.recording-detail-transcribe-bar .transcription-progress {
  flex: 1 1 14rem;
  margin-top: 0;
  min-width: 0;
  max-width: 28rem;
}

.recording-detail-transcribe-bar .recording-detail-empty {
  margin: 0;
}

.recording-detail-spy-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  background: transparent;
}

.recording-detail-spy-link:hover {
  color: var(--navy);
}

.recording-detail-spy-link.is-active {
  color: var(--navy);
  background: var(--surface-solid);
  box-shadow: 0 2px 8px rgba(25, 52, 95, 0.1);
}

.recording-detail-spy-icon {
  display: block;
}

.recording-detail-spy-glyph {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

.recording-detail-spy-glyph::before {
  content: "\03A3";
}

.recording-detail-section-title {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 0.5rem;
  margin: 0 -1.35rem 0.5rem;
  padding: 0.65rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--surface-base), 0.9);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  line-height: 1.2;
}

@media (min-width: 901px) {
  .recording-detail-section-title {
    min-height: calc(2.4rem + 1.3rem);
    font-size: 1.35rem;
  }
}

/* Scrollspy click-to-navigate lands the target section right under the
   pinned stack — flash its title bar so the jump is visible even when the
   section was already partly on screen (see scrollspy_controller.js). */
@keyframes recording-detail-section-title-flash {
  0%, 100% { background-color: rgba(var(--surface-base), 0.9); }
  50% { background-color: #ffffff; }
}

.recording-detail-section-title.is-flash {
  animation: recording-detail-section-title-flash 450ms ease-in-out;
}

.recording-detail-meta-pane > .recording-detail-section:first-of-type > .recording-detail-section-title,
.recording-detail-body > .recording-detail-section:first-of-type > .recording-detail-section-title {
  margin-top: 0;
}

.recording-detail-section-status {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.recording-detail-section-hint {
  margin: 0;
  padding: 0.35rem 0 0.15rem;
}

.recording-detail-section {
  padding-bottom: 1.25rem;
}

.recording-detail-section + .recording-detail-section {
  margin-top: 0.65rem;
}

.recording-detail-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1.35rem 1rem;
  scrollbar-gutter: auto;
  overscroll-behavior: contain;
  background: rgba(var(--surface-base), 0.9);
}

@media (min-width: 901px) {
  .recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) > .recording-detail-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) > .recording-detail-body .recording-detail-section > .recording-detail-section-title {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) > .recording-detail-body > #detail-analysis {
    flex: 0 0 auto;
  }
}

.recording-detail-meta-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1.35rem 1rem;
  scrollbar-gutter: auto;
  overscroll-behavior: contain;
  background: rgba(var(--surface-base), 0.9);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.recording-detail:has(> .recording-detail-meta-pane) > .recording-detail-body {
  border: 1px solid var(--line);
  border-radius: 18px;
}

.recording-detail-info {
  padding-top: 0.35rem;
}

.recording-detail-body.is-speaker-saving,
.recording-detail-meta-pane.is-speaker-saving {
  cursor: wait;
  pointer-events: none;
}

.speaker-save-overlay {
  position: sticky;
  top: 38%;
  z-index: 80;
  display: none;
  justify-content: center;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.recording-detail-body.is-speaker-saving .speaker-save-overlay,
.recording-detail-meta-pane.is-speaker-saving .speaker-save-overlay {
  display: flex;
}

.speaker-save-overlay .spinner {
  width: 1.7rem;
  height: 1.7rem;
  background: rgba(var(--surface-base), 0.92);
  box-shadow: 0 0 0 10px rgba(var(--surface-base), 0.72);
}

.speaker-picker.is-saving .speaker-picker-toggle {
  position: relative;
  pointer-events: none;
}

.speaker-picker.is-saving .speaker-picker-toggle svg {
  opacity: 0;
}

.speaker-picker.is-saving .speaker-picker-toggle::after {
  content: "";
  position: absolute;
  inset: 0.12rem;
  border-radius: 50%;
  border: 2px solid rgba(146, 64, 14, 0.22);
  border-top-color: #92400e;
  animation: spin 0.8s linear infinite;
}

.recording-detail-body-open {
  overflow-x: hidden;
  overflow-y: auto;
}

.recording-detail-mic .mic-panel {
  margin: 0;
  max-width: none;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}

.recording-detail-meta {
  margin: 0;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 100%;
}

/* Filename ellipsis needs a blockified box — an <a> is inline by default.
   In Инфо it is a grid item (via display:contents on the wrappers below),
   and grid items are blockified, so overflow/text-overflow apply. The
   recording subheader already blockifies it as a flex item. */

.recording-detail-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

a.recording-detail-filename:hover {
  color: var(--navy);
  text-decoration: underline;
}

.recording-detail-meta .status-pill {
  flex-shrink: 0;
}

.recording-detail-placeholder,
.recording-detail-empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.empty-state.recording-detail-empty {
  padding: 0.35rem 0;
}

.recording-detail-transcript-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: nowrap;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.recording-detail-transcript-cta p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.recording-detail-transcript-cta .btn {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}

.transcription-overage {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.transcription-overage .processing-banner-copy {
  flex: 0 0 auto;
  width: 100%;
}

.transcription-overage form,
.transcription-overage .btn {
  flex: 0 0 auto;
  width: auto;
  align-self: flex-start;
}

.recording-detail-feature-locked {
  margin: 0;
  padding: 0.2rem 0 0.55rem;
}

.recording-detail-plan-locked {
  margin: 0;
}

.recording-detail-plan-locked-link {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #1d4ed8;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.recording-detail-plan-locked-link:hover {
  color: #1e40af;
}

.recording-detail-placeholder {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1.5rem 1.35rem;
  text-align: center;
}

.recording-detail-placeholder p {
  margin: 0;
  font-weight: 400;
}

.recording-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

a.recording-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.recording-row:hover {
  background: var(--surface-solid);
}

.recording-row.is-selected {
  border-color: var(--navy);
  background: var(--surface-solid);
}

.recording-row.is-selected:hover {
  background: var(--surface-solid);
}

.recording-row-check {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.recordings-split.is-selecting .recording-row-check {
  display: inline-flex;
}

.recording-row-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.recordings-split.is-selecting .recording-row.is-checked {
  border-color: var(--navy);
}

.recording-row.is-just-added {
  animation: recording-flash 2.8s ease-out forwards;
}

@keyframes recording-flash {
  0% {
    background-color: rgba(59, 130, 246, 0.55);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
  }
  35% {
    background-color: rgba(59, 130, 246, 0.28);
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  100% {
    background-color: var(--surface-solid);
    border-color: var(--navy);
    box-shadow: none;
  }
}

.recording-row-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.recording-row-main:hover,
a.recording-row-select:hover {
  color: inherit;
}

.recording-row-select {
  display: flex;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.recording-row-title {
  margin: 0;
  width: 100%;
  font-size: 1.05rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recording-row-title-track {
  display: inline-block;
  white-space: nowrap;
}

/* marquee_controller.js sets --marquee-distance/--marquee-duration and
   toggles this class once it's measured the track actually overflows the
   row — most titles fit and never animate. */
.recording-row-title.is-marquee {
  text-overflow: clip;
}

.recording-row-title.is-marquee .recording-row-title-track {
  animation: recording-row-title-marquee var(--marquee-duration, 8s) ease-in-out infinite;
}

@keyframes recording-row-title-marquee {
  0%, 15% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--marquee-distance, 0)); }
  85%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .recording-row-title.is-marquee .recording-row-title-track {
    animation: none;
  }
}

.status-share-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  line-height: 0;
}

.status-share-mark svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

/* Wide enough to fit the employee + 5 flag columns without a horizontal
   scrollbar on typical desktop/tablet widths; still clamps to the viewport
   on narrow screens where .share-table-wrap's own overflow-x takes over. */
.upload-modal.share-modal {
  max-width: min(46rem, calc(100vw - 1.5rem));
}

.share-table-wrap {
  margin: 0 0 1rem;
  max-height: 50vh;
  overflow: auto;
}

.share-table {
  width: 100%;
  table-layout: fixed;
}

.share-table th,
.share-table td {
  vertical-align: middle;
}

.share-table th:first-child,
.share-table td:first-child {
  width: 34%;
}

.share-table th {
  white-space: normal;
  line-height: 1.25;
}

.share-flag-cell {
  text-align: center;
}

.share-flag-cell .checkbox-label {
  justify-content: center;
  margin: 0;
}

@media (max-width: 640px) {
  .share-table {
    table-layout: auto;
  }

  .share-table th:first-child,
  .share-table td:first-child {
    width: auto;
  }
}

.recording-row h2 {
  margin: 0;
  font-size: 1.05rem;
}

.recording-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.recording-row-stats {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recording-row-markers {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 900px) {
  html {
    overflow-x: clip;
    scrollbar-gutter: auto;
  }

  html:has(.workspace-page) {
    height: auto;
    overflow-x: clip;
    overflow-y: scroll;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  .site-body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-body:has(.workspace-page) {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 100dvh;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }

  .site-body:has(.workspace-page) > .site-shell > main {
    overflow: visible;
    max-width: 100%;
    flex: 1 0 auto;
    min-height: auto;
  }

  .workspace-page.page-section {
    overflow: visible;
    height: auto;
    min-height: auto;
    max-width: 100%;
    flex: 1 0 auto;
  }

  .workspace-page > .container {
    min-width: 0;
    max-width: 100%;
    min-height: auto;
    flex: 1 0 auto;
    gap: 0.35rem;
  }

  .recordings-split,
  .recordings-split.is-detail-open,
  .voiceprints-split {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    height: auto;
    min-height: auto;
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .recordings-list-pane,
  .recordings-detail-pane,
  .voiceprints-list-pane,
  .voiceprints-detail-pane,
  .recordings-detail-pane > turbo-frame,
  .voiceprints-detail-pane > turbo-frame,
  .recording-detail,
  .voiceprint-recordings {
    height: auto;
    max-height: none;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .recordings-list-pane,
  .voiceprints-list-pane {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .recordings-list-pane .page-head h1,
  .recordings-list-pane .page-heading {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
  }

  .recording-detail:has(> .recording-detail-meta-pane):has(> .recording-detail-body) {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }

  .recording-detail-meta-pane,
  .recording-detail:has(> .recording-detail-meta-pane) > .recording-detail-body {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .recording-detail-body,
  .recording-detail-meta-pane,
  .voiceprint-recording-list,
  .recording-list,
  .voiceprint-list {
    overflow: visible;
    max-height: none;
    scrollbar-gutter: auto;
  }

  .recording-list,
  .voiceprint-list {
    padding-right: 0;
  }

  .list-toolbar {
    overflow-y: visible;
    scrollbar-gutter: auto;
  }

  .recordings-split.is-detail-open .recordings-list-pane,
  .voiceprints-split.is-detail-open .voiceprints-list-pane {
    display: none;
  }

  /* Keep detail panes in the layout tree (not display:none). Turbo resolves
     frames in capture phase before Stimulus can add is-detail-open; a
     display:none frame silently fails to navigate on mobile. */
  .recordings-split:not(.is-detail-open) .recordings-detail-pane,
  .voiceprints-split:not(.is-detail-open) .voiceprints-detail-pane {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  .recordings-split.is-detail-open .recordings-detail-pane,
  .voiceprints-split.is-detail-open .voiceprints-detail-pane {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    pointer-events: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .workspace-page:has(.recordings-split.is-detail-open),
  .workspace-page:has(.voiceprints-split.is-detail-open) {
    padding-top: 0;
    padding-bottom: 0;
  }

  .workspace-page:has(.recordings-split.is-detail-open) > .container,
  .workspace-page:has(.voiceprints-split.is-detail-open) > .container {
    width: 100% !important;
    gap: 0;
  }

  .workspace-page:has(.recordings-split.is-detail-open) .page-head,
  .workspace-page:has(.voiceprints-split.is-detail-open) .page-head {
    display: none;
  }

  /* Hidden rather than left to appear at the true end of the page — this
     is meant to read as a focused, app-like detail view rather than a
     normal scrolling page with a footer at the bottom. */
  .site-body:has(.recordings-split.is-detail-open) .site-footer,
  .site-body:has(.voiceprints-split.is-detail-open) .site-footer {
    display: none;
  }

  /* The topbar's own pin toggle (see pin_panel_controller.js) needs the
     page to genuinely scroll for "unpinned" to mean "scrolls away with the
     page" — undo the base :has() rule near the top of this file that fixes
     .site-body to the viewport for the split-pane's own bounded internal
     scrolling. Mobile only ever shows one pane at a time (never list next
     to detail side by side), so it doesn't need that bounded-viewport
     layout at all — just let this flow as a normal single-scroll page,
     exactly like any other mobile page. */
  html:has(.recordings-split.is-detail-open),
  html:has(.voiceprints-split.is-detail-open) {
    height: auto;
    overflow-y: scroll;
    overscroll-behavior: auto;
  }

  .site-body:has(.recordings-split.is-detail-open),
  .site-body:has(.voiceprints-split.is-detail-open) {
    position: relative;
    inset: auto;
    height: auto;
    min-height: var(--vh100, 100vh);
    overflow: visible;
  }

  .site-body:has(.recordings-split.is-detail-open) > .site-shell,
  .site-body:has(.voiceprints-split.is-detail-open) > .site-shell,
  .site-body:has(.recordings-split.is-detail-open) .site-shell > main,
  .site-body:has(.voiceprints-split.is-detail-open) .site-shell > main {
    flex: 1 0 auto;
    min-height: 0;
    overflow: visible;
  }

  /* .workspace-page.page-section (matching the base rule's compound
     selector, not just .workspace-page) — the base rule at the top of this
     file sets overflow:hidden with three class-level selectors, which beats
     a plain .workspace-page:has(...) override on specificity regardless of
     source order; this has to match it to actually win. */
  .workspace-page.page-section:has(.recordings-split.is-detail-open),
  .workspace-page.page-section:has(.voiceprints-split.is-detail-open) {
    flex: 1 0 auto;
    height: auto;
    overflow: visible;
  }

  .workspace-page:has(.recordings-split.is-detail-open) > .container,
  .workspace-page:has(.voiceprints-split.is-detail-open) > .container {
    flex: 1 0 auto;
    min-height: auto;
    overflow: visible;
  }

  /* Plain normal flow — no position:sticky, no fixed/vh-based height. This
     used to be position:sticky with an explicit height (100vh, then
     var(--vh100)) plus an artificial min-height buffer on .container to
     give that sticky element "catch room", mimicking the old fixed-shell
     .site-body design above. But that meant .recording-detail-body had to
     be its own independently-scrolling box (its own overflow-y: auto) to
     stay fully on screen inside that fixed-height sticky pane — and an
     inner scrollable silently captures every touch/swipe that starts
     inside it, before the gesture can ever bubble up to the outer page.
     Real device testing (adb + CDP against the actual WebView) confirmed
     this: window.scrollTo() calls "worked" (they bypass touch targeting
     entirely), but a real swipe anywhere in the detail pane only ever
     moved .recording-detail-body's own scrollTop — the outer page's
     scrollY, and the topbar with it, never moved at all. Letting this flow
     normally makes the whole page one single scrollable region again
     (topbar included), exactly like every other mobile page — which is
     also why "other pages" were never affected by this bug. */
  .recordings-split.is-detail-open,
  .voiceprints-split.is-detail-open {
    flex: none;
  }

  .recordings-split.is-detail-open .recordings-detail-pane,
  .recordings-split.is-detail-open .recordings-detail-pane > turbo-frame,
  .recordings-split.is-detail-open .recording-detail,
  .recordings-split.is-detail-open .voiceprint-recordings {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .recordings-split.is-detail-open .recording-detail-body,
  .recordings-split.is-detail-open .recording-detail-meta-pane {
    overflow: visible;
    max-height: none;
  }

  .page-head-stack {
    gap: 0.45rem;
  }

  .page-head-row {
    gap: 0.9rem 0.45rem;
  }

  .page-head-actions {
    order: 2;
    margin-left: auto;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .page-head-action-bar {
    display: contents;
  }

  .page-head-row > .page-heading {
    order: 1;
  }

  .page-head-action-bar > [data-controller] {
    order: 2;
  }

  .page-head-action-bar > [data-controller]:first-of-type {
    margin-left: 0;
  }

  .page-head-action-bar .page-head-gear {
    order: 2;
    margin-left: auto;
  }

  .recordings-list-pane .page-head-actions,
  .recordings-list-pane .list-action-panel {
    display: flex;
    order: 0;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .recordings-list-pane .list-action-panel > [data-controller],
  .recordings-list-pane .list-action-panel .page-head-gear {
    order: 0;
    margin-left: 0;
  }

  .page-head-action-bar .btn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

}

.transcription-progress {
  margin-top: 0.75rem;
  max-width: 28rem;
}

.transcription-progress-info {
  width: 100%;
  max-width: none;
  margin: 0.15rem 0 0.85rem;
}

.transcription-progress-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.transcription-progress-info .spinner {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-color: color-mix(in srgb, var(--navy) 22%, transparent);
  border-top-color: var(--navy);
}

.transcription-progress-info .transcription-progress-label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.transcription-progress-info .transcription-progress-track {
  flex: 1 1 auto;
  min-width: 4rem;
  height: 0.5rem;
}

.transcription-progress-info .transcription-progress-pct {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.transcription-progress-in-title {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 18rem;
  margin: 0 0 0 0.35rem;
}

.transcription-progress.transcription-progress-in-title {
  margin-top: 0;
}

.transcription-progress-in-title .transcription-progress-waiting,
.transcription-progress-in-title .transcription-progress-active {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.transcription-progress-in-title .transcription-progress-label-row {
  display: contents;
}

.transcription-progress-in-title .transcription-progress-track {
  flex: 1 1 auto;
  order: 1;
  min-width: 0;
  height: 0.45rem;
}

.transcription-progress-in-title .transcription-progress-pct,
.transcription-progress-in-title .transcription-countdown {
  order: 2;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.transcription-progress-in-title .transcription-progress-label {
  order: 0;
  flex: 0 1 auto;
  font-size: 0.78rem;
  font-weight: 700;
}

.transcription-progress-waiting,
.transcription-progress-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.transcription-progress-label,
.transcription-progress-pct,
.transcription-countdown {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}

.transcription-countdown {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.transcription-progress-track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--paper-deep);
  overflow: hidden;
}

.transcription-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  transition: width 400ms ease;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  min-height: 2rem;
}

input[type="submit"]:not(.btn),
input[type="button"]:not(.btn),
button:not([class]):not([aria-hidden]) {
  border-radius: var(--btn-radius);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.status-uploaded { background: #e8eef8; color: var(--navy-fill); }
.status-draft { background: #e8eef8; color: var(--navy-fill); }
.status-recording, .status-uploading,
.status-pending, .status-processing { background: #fff7e8; color: #92400e; }
.status-ready { background: #e8f7ef; color: #14532d; }
.status-failed { background: #fff1f0; color: #7f1d1d; }
.status-none { background: #eef1f6; color: var(--navy-fill); }

.status-ready-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  line-height: 0;
}

.status-ready-check svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.status-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}

.status-marker-source {
  background: #38bdf8;
  color: #fff;
  border: 1px solid #0ea5e9;
}

.status-marker-on {
  background: #16a34a;
  color: #fff;
  border: 1px solid #15803d;
}

.status-marker-off {
  background: var(--surface-solid);
  color: var(--navy);
  border: 1.5px solid color-mix(in srgb, var(--navy) 28%, var(--line));
}

.status-marker-error {
  background: #dc2626;
  color: #fff;
  border: 1px solid #b91c1c;
}

.status-marker-busy {
  background: #38bdf8;
  color: #fff;
  border: 1px solid #0ea5e9;
  animation: status-marker-pulse 1.2s ease-in-out infinite;
}

.status-marker-busy.status-marker-transcription {
  --marker-progress: 0%;
  color: var(--navy);
  background: var(--surface-solid);
  border-color: color-mix(in srgb, var(--navy) 28%, var(--line));
  animation: status-marker-transcribe 1.5s ease-in-out infinite;
}

/* Same white-to-green pulse as the transcription marker above — meeting
   analysis has no granular progress percentage to drive --marker-progress
   with, so this reuses the plain infinite keyframe rather than the
   progress-interpolated reduced-motion fallback transcription gets below. */
.status-marker-busy.status-marker-summary {
  color: var(--navy);
  background: var(--surface-solid);
  border-color: color-mix(in srgb, var(--navy) 28%, var(--line));
  animation: status-marker-transcribe 1.5s ease-in-out infinite;
}

@keyframes status-marker-transcribe {
  0%, 100% {
    background: var(--surface-solid);
    border-color: color-mix(in srgb, var(--navy) 28%, var(--line));
  }
  50% {
    background: color-mix(in srgb, #16a34a 42%, #fff);
    border-color: color-mix(in srgb, #15803d 55%, color-mix(in srgb, var(--navy) 28%, var(--line)));
  }
}

@keyframes status-marker-pulse {
  0%, 100% {
    background: #7dd3fc;
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
  }
  50% {
    background: #0ea5e9;
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0);
  }
}

.empty-state, .form-panel, .player-panel {
  padding: 1.5rem;
}

.stack-form { display: grid; gap: 1rem; }
.field label,
.field .field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.field-control {
  position: relative;
  display: block;
  width: 100%;
}

.field-error-info {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1.5px solid #cc1f27;
  background: var(--surface-solid);
  color: #cc1f27;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: auto;
}

.field-control.is-invalid textarea ~ .field-error-info {
  top: 0.85rem;
  transform: none;
}

.field-hint {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.org-member-status {
  margin: 0.45rem 0 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.org-member-status strong {
  color: var(--navy);
  font-size: 1.05rem;
}

.or-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: lowercase;
}

.or-divider::before,
.or-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.input, .devise-panel input[type="email"],
.devise-panel input[type="password"],
.devise-panel input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: var(--surface-solid);
  font: inherit;
}

/* Quiet ink border — `outline: none` kills the UA `auto` ring (gold on
   Kubuntu Focus). A hard sky band on the sign-in chips and fields
   was too loud against the white/grey spotlight. */
.input:focus,
.input:focus-visible,
.devise-panel input[type="email"]:focus,
.devise-panel input[type="email"]:focus-visible,
.devise-panel input[type="password"]:focus,
.devise-panel input[type="password"]:focus-visible,
.devise-panel input[type="text"]:focus,
.devise-panel input[type="text"]:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--navy) 38%, var(--line));
  box-shadow: none;
}

/* Must follow the base .input / .devise-panel input rules so invalid
   border, glow, and icon padding are not overwritten by the shorthand. */
.field-control.is-invalid > .input,
.field-control.is-invalid > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.field-control.is-invalid > textarea,
.field-control.is-invalid > select,
.devise-panel .field-control.is-invalid > .input,
.devise-panel .field-control.is-invalid > input[type="email"],
.devise-panel .field-control.is-invalid > input[type="password"],
.devise-panel .field-control.is-invalid > input[type="text"] {
  border: 1px solid #cc1f27;
  box-shadow: 0 0 0 3px rgba(204, 31, 39, 0.14);
  padding-right: 2.55rem;
}

.field-control.is-invalid > .input:focus,
.field-control.is-invalid > .input:focus-visible,
.field-control.is-invalid > input:focus,
.field-control.is-invalid > input:focus-visible,
.devise-panel .field-control.is-invalid > .input:focus,
.devise-panel .field-control.is-invalid > .input:focus-visible,
.devise-panel .field-control.is-invalid > input[type="email"]:focus,
.devise-panel .field-control.is-invalid > input[type="email"]:focus-visible,
.devise-panel .field-control.is-invalid > input[type="password"]:focus,
.devise-panel .field-control.is-invalid > input[type="password"]:focus-visible,
.devise-panel .field-control.is-invalid > input[type="text"]:focus,
.devise-panel .field-control.is-invalid > input[type="text"]:focus-visible {
  outline: none;
  border-color: #cc1f27;
  box-shadow: 0 0 0 3px rgba(204, 31, 39, 0.14);
}

/* Fallback if a process still emits Rails' default wrapper. */
.field_with_errors > .input,
.field_with_errors > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.field_with_errors > textarea,
.field_with_errors > select {
  border: 1px solid #cc1f27;
  box-shadow: 0 0 0 3px rgba(204, 31, 39, 0.14);
}

.form-errors, .error-banner, .processing-banner, .info-banner {
  border-radius: 14px;
  padding: 0.9rem 1rem;
}

.form-errors, .error-banner { background: #fff1f0; color: #7f1d1d; }
.form-success {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: #dcfce7;
  color: #166534;
}
.form-success p,
.form-errors p {
  margin: 0;
}
.form-success p + p,
.form-errors p + p {
  margin-top: 0.35rem;
}
.processing-banner {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  background: #fff7e8;
  color: #92400e;
  margin: 1rem 0;
}

.info-banner {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
  background: #e8f4ff;
  color: var(--navy);
  margin: 1rem 0;
}

.info-banner > p {
  margin: 0;
  flex: 1 1 12rem;
}

.processing-banner-copy {
  flex: 1;
  min-width: 0;
}

.processing-banner > p,
.processing-banner-copy > p {
  margin: 0;
}

.error-banner.transcription-overage {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
  margin: 1rem 0;
}

.transcription-progress-inline {
  margin-top: 0.55rem;
  max-width: none;
}

.spinner {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(146, 64, 14, 0.25);
  border-top-color: #92400e;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.audio-player { width: 100%; margin-top: 0.4rem; }
.panel-label { margin: 0; font-weight: 700; color: var(--muted); }

.speech-timeline {
  margin-top: 0.85rem;
}

.speech-timeline-track {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  /* hidden, not visible — the track is a fully-rounded (999px) pill, but
     .speech-region/.speech-mark are plain rectangles positioned by
     left/width %. Near either end that rectangle extends into the area the
     pill's own curve cuts away, so with overflow:visible it visibly pokes
     out past the track's rounded edge instead of following it. */
  overflow: hidden;
}

.speech-region {
  appearance: none;
  position: absolute;
  top: 6px;
  bottom: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--speech-region-fill);
  cursor: pointer;
  z-index: 1;
  transition: background 120ms ease, transform 120ms ease;
}

.speech-region:hover,
.speech-region:focus-visible {
  background: var(--speech-region-fill-hover);
  outline: none;
  transform: scaleY(1.15);
}

.speech-mark {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(-1.5px);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(var(--surface-base), 0.85);
  transition: transform 120ms ease, background 120ms ease;
}

.speech-mark:hover,
.speech-mark:focus-visible {
  background: var(--navy-fill);
  transform: translateX(-1.5px) scaleY(1.12);
  outline: none;
}

.speech-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 0;
  background: var(--ink);
  opacity: 0.55;
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 2;
}

.speech-timeline-hint {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.transcript-meta {
  margin: 0;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.transcript-meta + .transcript-meta {
  margin-top: 0.75rem;
}

.transcript-meta.recording-info-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.45rem;
  align-items: baseline;
  /* Overrides .transcript-meta's own muted color — Инфо reads as regular
     body copy (matching .meeting-summary in Результаты) rather than the
     dimmed caption tone that's still right for .transcript-speakers,
     .transcript-meta's other consumer. */
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.recording-info-file-line,
.recording-info-meta-row,
.recording-info-field,
.recording-info-status {
  display: contents;
}

.recording-info-label {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.recording-info-value,
.recording-info-meta .recording-detail-filename {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.recording-info-markers {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.25rem;
}

.transcript-speakers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0;
  padding: 0;
}

.transcript-speakers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  flex: 1 1 100%;
}

/* Count select, "+" add button, and the save-signatures checkbox always
   stay on one row — the count select is capped to two digits and the add
   button/checkbox labels were shortened specifically so this fits without
   wrapping on mobile. */
.transcript-speakers-controls {
  flex-wrap: nowrap;
}

/* Sticky pin panels (see pin_panel_controller.js). Pinning never moves a
   panel in the DOM — it becomes `position: sticky` right where it already
   is, so it only catches once scrolling brings it to the top (or under an
   earlier-pinned panel — `top` is computed in JS as the summed height of
   whichever pinned panels come before it on the page). */
.recording-detail-header.is-pinned,
.recording-detail-top.is-pinned,
.recording-detail-spy.is-pinned,
.recording-detail-section-panel.is-pinned {
  position: sticky;
  z-index: 20;
}

.recording-detail-section-panel.is-pinned {
  margin: 0 -1.35rem;
  padding: 0 1.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  /* Unlike the header/player/menu panels above, this one has no background
     of its own at rest — it just sits on .recording-detail-body's own
     rgba(surface-base, 0.9) tint. Sticky needs a fully opaque background of
     its own, or the transcript scrolling underneath it shows through and
     visually blends with this panel's own text. */
  background: var(--surface-solid);
}

/* var(--vh100), not 50vh directly — same Android app WebView vh-resolves-
   to-0 bug as everywhere else it's mentioned in this file (see
   android_webview_dvh_bug in project memory): a bare 50vh here collapsed
   this panel to a sliver the instant a .recording-detail-section-panel
   (the "Спикеры" section) actually got pinned for the first time — every
   earlier pin here just never triggered it because nothing using this
   class was wired up to a pin button yet. */
.recording-detail-section-panel.is-pinned {
  max-height: calc(var(--vh100, 100vh) * 0.5);
  overflow: auto;
}

/* Not margin-left/right: 0 — the title's own -1.35rem bleed (its base rule)
   is what makes it span edge-to-edge in the first place. Resetting that
   margin here used to leave the title sitting *inside* the now-also-bled
   -1.35rem/padding:1.35rem panel instead, narrower than the panel itself
   and narrower than the title's own unpinned width. */
.recording-detail-section-panel.is-pinned .recording-detail-section-title {
  border-top: 0;
}

.transcript-speakers .speaker-list {
  flex: 1 1 100%;
}

.speaker-pin-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 0.4rem 0 -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Unpinned reads as a loose pin (tilted, muted); pinned snaps upright in
   solid navy. No background fill in either state — just the icon's own
   color and rotation carry the distinction. */
.speaker-pin-btn svg {
  transition: transform 0.15s ease;
  transform: rotate(40deg);
}

.speaker-pin-btn:hover,
.speaker-pin-btn:focus-visible {
  color: var(--navy);
}

.speaker-pin-btn.is-pinned,
.speaker-pin-btn[aria-pressed="true"] {
  color: var(--navy);
}

.speaker-pin-btn.is-pinned svg,
.speaker-pin-btn[aria-pressed="true"] svg {
  transform: rotate(0deg);
}

.speaker-pin-btn.is-pinned:hover,
.speaker-pin-btn[aria-pressed="true"]:hover {
  color: var(--navy);
}

.speaker-pin-btn:disabled,
.speaker-pin-btn.is-forced {
  cursor: default;
  opacity: 1;
}

/* 3 columns is the desktop target, but a flat repeat(3, 1fr) forced badges
   as narrow as ~120px on a merely-900px-wide detail pane (not even a small
   screen — the split-pane's detail column is capped well under the full
   viewport width). .speaker-edit-input's name text then got hard-clipped
   with no ellipsis (text-overflow doesn't apply to <input> at all), which
   read as a broken/misaligned badge rather than a truncated name. minmax()
   puts a floor under each column so a 3rd column only appears once there's
   genuinely room for it; below that it drops to 2, same as mobile. */
/* auto-fill, not auto-fit: auto-fit collapses empty tracks and lets the
   1fr tracks that DO have a badge in them absorb the freed space, so a
   single speaker's badge stretched to the row's full width instead of
   staying capped at one column. auto-fill reserves the empty tracks
   instead — a lone badge (or any count under 3) stays exactly one column
   wide (at most 1/3 of the row), with genuine empty space to its right. */
.speaker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  align-items: center;
  justify-items: stretch;
  gap: 0.35rem 0.75rem;
  flex: 1 1 100%;
  margin: 0;
}

/* Exactly 2 per row on mobile (see 84ee423), regardless of the auto-fill
   floor above — mobile's own narrower badge chrome was already tuned for
   a fixed 2-column split. */
@media (max-width: 900px) {
  .speaker-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.speaker-list .speaker-picker {
  width: 100%;
  min-width: 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, currentColor 45%, var(--speaker-border-fade));
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.speaker-list .speaker-picker.is-locked {
  border-style: dashed;
}

.speaker-list-add,
.field-inline-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.7rem;
  width: auto;
  justify-self: start;
  padding: 0.15rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.speaker-list-add:hover:not(:disabled),
.speaker-list-add:focus-visible:not(:disabled),
.field-inline-add:hover,
.field-inline-add:focus-visible {
  background: rgba(25, 52, 95, 0.06);
  border-color: var(--navy);
}

/* Adding a speaker is off while transcription runs — same greyed-out
   treatment the row's other disabled controls get. */
.speaker-list-add:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.speaker-list .speaker-edit-input {
  flex: 1 1 4.5rem;
  min-width: 0;
  max-width: none;
  width: auto;
  field-sizing: fixed;
}

.speaker-edit {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.35;
}

.speaker-edit-input {
  width: auto;
  min-width: 6rem;
  max-width: 28vw;
  height: auto;
  min-height: 1.35em;
  border: 0;
  border-bottom: 1px dashed transparent;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.35;
  color: inherit;
  padding: 0;
  margin: 0;
  field-sizing: content;
  cursor: text;
}

.speaker-edit-input:hover,
.speaker-edit-input:focus {
  border-bottom-color: currentColor;
  outline: none;
}

/* Read-only (the default, pre-pencil-click) state reads as plain text —
   the dashed underline/text cursor only make sense once editing is
   actually possible. */
.speaker-edit-input:read-only {
  cursor: default;
}

.speaker-edit-input:read-only:hover,
.speaker-edit-input:read-only:focus {
  border-bottom-color: transparent;
}

.speaker-name-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* .speaker-tool-btn centers its icon in a fixed 1.45rem box (a deliberate
   touch-target size) — pull the button in by roughly that padding rather
   than shrinking the box itself, so the icon reads as close to the name
   as the edit-input's own text without losing tap-target size. */
.speaker-name-edit-btn,
.speaker-name-commit-btn {
  margin-left: -0.3rem;
}

/* Pencil starts editing, the checkmark commits it — only one is ever
   shown at a time, matching which state .speaker-edit-input is in.
   .speaker-tool-btn.speaker-name-commit-btn (both classes), not just
   .speaker-name-commit-btn — .speaker-tool-btn's own display:inline-flex
   is defined later in this file with equal (single-class) specificity, so
   a plain .speaker-name-commit-btn{display:none} here loses to it. */
.speaker-tool-btn.speaker-name-commit-btn {
  display: none;
}

.speaker-name-wrap.is-editing .speaker-name-edit-btn {
  display: none;
}

.speaker-name-wrap.is-editing .speaker-tool-btn.speaker-name-commit-btn {
  display: inline-flex;
}

.speaker-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  color: inherit;
}

/* .speaker-picker-row groups everything that belongs on the badge's first
   line (drag handle, save status, name, the "Действия" chevron) into one
   atomic flex item — display: contents by default, so it's a no-op for
   every .speaker-picker that doesn't have a second row at all (segment
   assign picker, etc.): its children just become direct flex items of
   .speaker-picker exactly as if this wrapper didn't exist. Only promoted
   to a real (non-wrapping) flex container for badges that actually have
   an actions row, so THAT row can wrap onto its own line below without
   each individual first-line element also being free to wrap on its own —
   which is what actually broke here: .speaker-picker itself picked up
   flex-wrap: wrap for the actions-menu case, and every child (handle,
   status, name, chevron) started wrapping independently the moment the
   badge got narrow, not just the intended second row. */
.speaker-picker-row {
  display: contents;
}

.speaker-picker-has-actions {
  flex-wrap: wrap;
}

.speaker-picker-has-actions .speaker-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.speaker-picker.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.segment-speaker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  color: inherit;
}

.segment-speaker.is-locked {
  opacity: 0.55;
}

.speaker-replace-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
}

.speaker-replace-btn:hover,
.speaker-replace-btn:focus-visible {
  opacity: 1;
  background: rgba(25, 52, 95, 0.08);
}

.speaker-picker.is-drop-target {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  background: rgba(25, 52, 95, 0.08);
  border-radius: 8px;
}

.speaker-picker.is-dragging {
  opacity: 0.45;
}

.speaker-save-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  opacity: 0.85;
}

.speaker-save-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #d97706;
  flex: 0 0 auto;
}

.speaker-save-status.is-saved .speaker-save-dot {
  background: #16a34a;
}

.speaker-save-status.is-saved {
  opacity: 0.78;
}

.speaker-save-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
}

.speaker-tool-btn,
.speaker-save-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.62;
  cursor: pointer;
}

.speaker-drag-handle {
  cursor: grab;
  opacity: 0.5;
}

.speaker-drag-handle:active {
  cursor: grabbing;
}

.recording-detail.is-loading-transcript .speaker-jump-btn {
  pointer-events: none;
  opacity: 0.4;
}

.speaker-tool-btn:hover,
.speaker-tool-btn:focus-visible,
.speaker-save-btn:hover,
.speaker-save-btn:focus-visible {
  opacity: 1;
  background: rgba(25, 52, 95, 0.08);
}

/* Armed state of the two-click delete confirm (see #deleteSpeaker in
   speaker_labels_controller.js) — turns red so the second click's intent
   is visually obvious without a native confirm() dialog. */
.speaker-tool-btn.speaker-delete-btn.is-confirming {
  opacity: 1;
  color: var(--danger);
  background: rgba(204, 31, 39, 0.12);
}

.speaker-picker-label {
  font-weight: 800;
  line-height: 1.35;
}

.speaker-picker-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
}

.speaker-picker-toggle:hover,
.speaker-picker.is-open .speaker-picker-toggle {
  opacity: 1;
  background: rgba(25, 52, 95, 0.08);
}

.speaker-picker-separator {
  height: 0;
  margin: 0.35rem 0.4rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.speaker-picker-add-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--navy);
  font-weight: 700;
}

.speaker-picker-add-icon {
  display: inline-flex;
  width: 1rem;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}

/* The "Действия" (edit/jump/save) dropdown — a horizontal row of icon-only
   buttons (each already .speaker-tool-btn for sizing/hover/opacity), not
   the vertical icon+text list .speaker-picker-menu normally lays out for
   the (unrelated, !merge-only) assign/merge picker sharing that class.
   .speaker-picker-menu.speaker-actions-menu (both classes), not just
   .speaker-actions-menu — the base .speaker-picker-menu rule below sets
   min-width: 12rem/etc. with equal (single-class) specificity and comes
   later in this file, so a plain .speaker-actions-menu selector loses to
   it regardless of what's declared here. */
.speaker-picker-menu.speaker-actions-menu {
  position: static;
  flex: 1 0 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0.2rem 0 0;
  padding: 0.3rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  gap: 0.1rem;
}

/* display:flex above would otherwise win over the hidden attribute's UA
   display:none (when the UA rule isn't !important) and keep the actions
   row painted on every badge, not just the expanded one. */
.speaker-picker-menu.speaker-actions-menu[hidden] {
  display: none;
}

/* Delete is destructive and sits apart from the other (non-destructive)
   actions — pin it to the far left via flex order, and let the auto
   margin push edit/jump/save to the far right as their own group. */
.speaker-actions-menu .speaker-delete-btn {
  order: -1;
  margin-right: auto;
}

.speaker-picker-add-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.25rem 0 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--surface-solid);
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.speaker-picker-add-input:focus {
  border-color: var(--navy);
}

.speaker-picker-add-input::placeholder {
  font-weight: 600;
  color: var(--muted);
  opacity: 0.8;
}

.speaker-picker-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 40;
  min-width: 12rem;
  max-width: min(18rem, 70vw);
  max-height: 16rem;
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-solid);
  box-shadow: 0 10px 28px rgba(25, 52, 95, 0.14);
}

/* The per-segment "replace speaker" picker (built in JS) wraps its options
   in .speaker-picker-options so the search + scope toggle above them can
   stay pinned while only the list scrolls. */
.speaker-picker-menu:has(> .speaker-picker-options) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.speaker-picker-controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.05rem 0.05rem 0.35rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}

.speaker-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--surface-solid);
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}

.speaker-picker-search:focus {
  border-color: var(--navy);
}

.speaker-picker-search::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.speaker-picker-all-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.1rem 0.05rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.speaker-picker-all-toggle input {
  margin: 0;
  flex-shrink: 0;
}

.speaker-picker-options {
  flex: 1 1 auto;
  overflow: auto;
}

.speaker-picker-option {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.speaker-picker-option:hover,
.speaker-picker-option:focus-visible {
  background: var(--paper);
  outline: none;
}

.speaker-picker-empty {
  padding: 0.45rem 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.recording-info-save-voiceprints {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.recording-info-save-voiceprints input {
  margin: 0;
  flex-shrink: 0;
}

.recording-info-save-voiceprints input:disabled {
  cursor: not-allowed;
}

.recording-detail-transcribe-bar .recording-info-save-voiceprints {
  color: var(--navy);
}

/* Without this, the label(s) and +/- buttons inside are inline-flex boxes
   sitting in this span's own normal inline flow — vertically positioned by
   baseline alignment (each element's own baseline, which the select and
   the buttons don't share) rather than a common center. */
.transcription-language-picker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.expected-speakers-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 600;
  color: var(--muted);
}

.expected-speakers-field select {
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
  background: var(--surface, #fff);
}

.expected-speakers-field select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Icon-only variant (the Спикеры section's compact language/speaker-count
   rows) — replaces the text label with an inline icon so an icon, both
   language selects, and the "+" add button all fit on one row without
   wrapping on mobile. */
.expected-speakers-field-icon {
  flex: 0 0 auto;
  color: var(--muted);
}

.expected-speakers-field-select-compact {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recording-detail-transcribe-bar .expected-speakers-field {
  color: var(--navy);
}

.transcript-panel {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.transcript-panel.is-enhanced .list-infinite-fallback {
  display: none;
}

.transcript-loading-indicator {
  display: none;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(2px);
  color: var(--muted);
  font-size: 0.85rem;
}

.transcript-panel.is-loading .transcript-loading-indicator {
  display: flex;
}

.transcript-loading-spinner {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(25, 52, 95, 0.18);
  border-top-color: var(--navy);
  animation: spin 0.8s linear infinite;
}

.transcript-panel.is-live {
  min-height: 4.5rem;
}

.transcript-live-placeholder {
  margin: 0;
  padding: 0.85rem 0.2rem 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.transcript-segment.is-live {
  cursor: default;
}

.transcript-segment.is-live:hover {
  background: var(--surface-solid);
  border-color: var(--line);
  box-shadow: none;
}

.transcript-segment {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.3rem 0.55rem;
  border-radius: 16px;
  padding: 0.7rem 0.85rem;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.transcript-segment:hover {
  background: var(--paper);
  border-color: rgba(204, 31, 39, 0.35);
}

.transcript-segment.is-active {
  background: rgba(204, 31, 39, 0.14);
  border-color: rgba(204, 31, 39, 0.42);
  box-shadow: inset 0 0 0 1px rgba(204, 31, 39, 0.08);
}

.transcript-segment.is-speaker-jump {
  outline: 2px solid rgba(25, 52, 95, 0.28);
  outline-offset: 2px;
  border-radius: 10px;
  background: rgba(255, 247, 230, 0.9);
}

.transcript-segment.is-drop-target {
  border-color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
  box-shadow: inset 0 0 0 1px rgba(25, 52, 95, 0.12);
}

.transcript-segment:has(.speaker-picker.is-open) {
  z-index: 8;
}

.transcript-segment-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.05rem;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.transcript-segment-meta time {
  align-self: flex-start;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.transcript-segment-meta .speaker-picker,
.transcript-segment-meta .segment-speaker {
  align-self: flex-end;
  max-width: 100%;
}

.transcript-segment-meta .speaker-picker-label {
  white-space: nowrap;
}

.transcript-segment-meta .speaker-picker-toggle,
.transcript-segment-meta .speaker-replace-btn {
  width: 1.05rem;
  height: 1.05rem;
}

.transcript-segment-meta .speaker-picker-menu {
  left: 0;
  right: auto;
}

.speaker-label { font-weight: 800; }

.speaker-label-input {
  min-width: 6rem;
  max-width: 14rem;
  width: auto;
  field-sizing: content;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 800;
  color: inherit;
  cursor: text;
}

.speaker-label-input:hover,
.speaker-label-input:focus {
  border-bottom-color: currentColor;
  outline: none;
}
.transcript-segment p,
.transcript-text {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  line-height: 1.55;
}

/* Extra room on the right so the absolutely-positioned edit button (below)
   never overlaps the first line of text or the time/speaker column. */
.transcript-segment.has-edit-btn {
  padding-right: 2.15rem;
}

.segment-edit-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  z-index: 1;
}

.segment-edit-btn:hover,
.segment-edit-btn:focus-visible {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.segment-edit-btn .icon-check {
  display: none;
}

.segment-edit-btn.is-editing .icon-pencil {
  display: none;
}

.segment-edit-btn.is-editing .icon-check {
  display: block;
}

.segment-edit-btn.is-editing {
  color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
}

.segment-edit-textarea {
  flex: 1 1 14rem;
  /* A <textarea> doesn't expand to fill flex space the way a plain <p>
     does — without an explicit width it sizes from its own intrinsic
     character-width default, rendering far narrower than the row actually
     gives it and wrapping almost every word onto its own line. */
  width: 100%;
  min-width: 0;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}

.segment-edit-textarea:focus {
  outline: none;
  border-color: var(--navy);
}

.transcript-word {
  display: inline;
  border-radius: 4px;
  padding: 0.05em 0.12em;
  margin: 0 -0.04em;
  transition: background 40ms linear, color 40ms linear;
}

.transcript-word.is-active {
  background: rgba(251, 197, 48, 0.35);
  color: var(--navy);
  box-shadow: 0 0 0 1px rgba(251, 197, 48, 0.45);
}
.transcript-plain {
  white-space: pre-wrap;
  font-family: var(--font-body);
  margin: 0;
}

.speaker-0 .speaker-label,
.speaker-0 .speaker-label-input,
.speaker-0.speaker-edit,
.speaker-0.speaker-picker,
.speaker-0.segment-speaker,
.speaker-0.speaker-picker-option { color: var(--navy); }
.speaker-1 .speaker-label,
.speaker-1 .speaker-label-input,
.speaker-1.speaker-edit,
.speaker-1.speaker-picker,
.speaker-1.segment-speaker,
.speaker-1.speaker-picker-option { color: #b45309; }
.speaker-2 .speaker-label,
.speaker-2 .speaker-label-input,
.speaker-2.speaker-edit,
.speaker-2.speaker-picker,
.speaker-2.segment-speaker,
.speaker-2.speaker-picker-option { color: #2b4f8a; }
.speaker-3 .speaker-label,
.speaker-3 .speaker-label-input,
.speaker-3.speaker-edit,
.speaker-3.speaker-picker,
.speaker-3.segment-speaker,
.speaker-3.speaker-picker-option { color: var(--red); }
.speaker-4 .speaker-label,
.speaker-4 .speaker-label-input,
.speaker-4.speaker-edit,
.speaker-4.speaker-picker,
.speaker-4.segment-speaker,
.speaker-4.speaker-picker-option { color: #8a6a12; }
.speaker-5 .speaker-label,
.speaker-5 .speaker-label-input,
.speaker-5.speaker-edit,
.speaker-5.speaker-picker,
.speaker-5.segment-speaker,
.speaker-5.speaker-picker-option { color: var(--navy-deep); }

.topbar-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topbar-admin-link,
.topbar-admin-link.is-active,
.topbar-item.is-open > .topbar-admin-link {
  color: var(--red);
  background: var(--accent-soft);
}

.topbar-admin-link:hover,
.topbar-item.is-open > .topbar-admin-link,
.topbar-admin-link.is-active {
  color: var(--red-deep);
  background: #f8d0d2;
}

.topbar-nav-dropdown .topbar-menu {
  left: 0;
  right: auto;
  min-width: 11.5rem;
}

.topbar-admin-menu {
  background: var(--accent-soft);
}

.topbar-admin-menu .topbar-menu-link {
  color: var(--red-deep);
}

.topbar-admin-menu .topbar-menu-link:hover,
.topbar-admin-menu .topbar-menu-link.is-active {
  background: var(--paper-deep);
  color: var(--red-deep);
}

.topbar-mobile-admin {
  display: grid;
  gap: 0.05rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0.15rem 0.3rem;
  background: var(--accent-soft);
  border-radius: calc(var(--btn-radius) + 4px);
}

.topbar-mobile-admin-label {
  display: block;
  margin: 0.15rem 0 0.05rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--red);
}

.topbar-mobile-admin-label:hover,
.topbar-mobile-admin-label:focus-visible {
  background: rgba(204, 31, 39, 0.12);
}

.topbar-mobile-admin-head {
  position: relative;
}

.topbar-mobile-admin-head .topbar-mobile-admin-label {
  width: 100%;
  box-sizing: border-box;
}

.topbar-mobile-admin-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0.15rem;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--red);
  cursor: pointer;
}

.topbar-mobile-admin-toggle:hover,
.topbar-mobile-admin-toggle:focus-visible {
  background: rgba(204, 31, 39, 0.12);
}

.topbar-mobile-admin-toggle[aria-expanded="true"] .topbar-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.topbar-mobile-admin-list {
  display: grid;
  gap: 0.05rem;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.admin-summary-card {
  background: var(--surface-solid);
  border: 1px solid rgba(25, 52, 95, 0.1);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 10px 28px rgba(25, 52, 95, 0.06);
}

.admin-summary-value {
  margin: 0.35rem 0 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.admin-node-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-table tr.is-free .admin-status-dot { background: #22c55e; }
.admin-table tr.is-busy .admin-status-dot { background: #b45309; }
.admin-table tr.is-down .admin-status-dot { background: #be123c; }

.admin-user-status.is-active { color: #15803d; font-weight: 600; }
.admin-user-status.is-blocked { color: #be123c; font-weight: 600; }

.admin-node-modal-hint {
  margin: 0 1.25rem 0.75rem;
}

.settings-page .page-head {
  margin-bottom: 1rem;
}

.settings-split {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  min-height: 22rem;
}

.settings-menu {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(25, 52, 95, 0.05);
  position: sticky;
  top: 1rem;
}

.settings-menu-link {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}

.settings-menu-link:hover,
.settings-menu-link.is-active {
  background: rgba(25, 52, 95, 0.08);
  font-weight: 700;
}

.settings-content {
  min-width: 0;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(25, 52, 95, 0.05);
  padding: 1.1rem 1.15rem 1.2rem;
}

.profile-sections,
.settings-sections {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.profile-block,
.settings-block {
  min-width: 0;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(25, 52, 95, 0.05);
  padding: 0.85rem 1rem 1rem;
  scroll-margin-top: 5.5rem;
}

.admin-page .settings-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.admin-content > .section {
  padding: 0;
}

.admin-content > .section > .container {
  width: 100% !important;
  margin: 0;
}

.admin-content > .section > .container > .page-head:first-child {
  margin-top: 0;
}

.settings-content-head {
  margin-bottom: 1.1rem;
}

.settings-content-head h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--navy);
}

.profile-balance-figure {
  margin-top: 1.55rem;
  margin-bottom: 1.75rem;
}

.settings-subhead + .profile-balance-figure {
  margin-top: 0.45rem;
}

.profile-balance-figure .pricing-price {
  margin-bottom: 0.85rem;
}

.profile-balance-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
}

.settings-operations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}

.settings-operations-head .settings-subhead {
  margin: 0;
}

.profile-log-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.profile-log-link:hover,
.profile-log-link:focus-visible {
  text-decoration: underline;
}

.referral-account-actions {
  margin-top: 0.95rem;
}

.referral-use-options {
  display: grid;
  gap: 1.35rem;
}

.referral-use-preview {
  margin: 0 0 1.15rem;
}

.referral-use-preview dd.is-overdrawn {
  color: var(--danger);
}

.payment-method-set {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.payment-method-set legend {
  padding: 0;
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.payment-method-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
  gap: 0.7rem;
}

.payment-method-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6.25rem;
  padding: 0.85rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.payment-method-btn:hover {
  border-color: var(--sky, #38bdf8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky, #38bdf8) 18%, transparent);
}

.payment-method-copy {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.payment-method-amount {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}

.payment-method-icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 2.5rem;
}

.payment-confirm-body {
  margin: 0 0 0.35rem;
  line-height: 1.5;
}

.payment-confirm-operation {
  font-weight: 700;
  color: var(--navy);
}

.payment-confirm-amount {
  font-weight: 700;
  color: var(--red-deep, var(--navy));
}

.payment-method-icon.is-yoomoney {
  height: 2.15rem;
}

.payment-method-icon.is-invoice {
  height: 2.5rem;
}

.invoice-sheet {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.35rem 1.45rem 1.5rem;
}

.invoice-sheet-head {
  margin-bottom: 1.15rem;
}

.invoice-kicker {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-sheet-head h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
}

.invoice-parties {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

@media (min-width: 640px) {
  .invoice-parties {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.invoice-parties h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}

.invoice-items {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.invoice-items th,
.invoice-items td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.invoice-items th {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.invoice-qty,
.invoice-sum {
  text-align: right;
  white-space: nowrap;
}

.invoice-item-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.invoice-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-size: 1.05rem;
}

.invoice-vat {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.invoice-actions {
  margin-top: 1.1rem;
}

.invoice-actions .upload-modal-actions {
  flex-wrap: wrap;
}

.admin-col-status form {
  margin-top: 0.45rem;
}

@media print {
  .topbar,
  .site-footer,
  .toast,
  .invoice-toolbar {
    display: none !important;
  }

  .invoice-page {
    padding: 0;
  }

  .invoice-sheet {
    border: none;
    border-radius: 0;
    padding: 0;
  }
}

.admin-table td.admin-col-amount.is-credit {
  color: #15803d;
  font-weight: 600;
}

.admin-table td.admin-col-amount.is-debit,
.admin-table td.admin-col-minutes.is-debit {
  color: var(--navy);
  font-weight: 600;
}

.profile-content-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
}

.profile-delete-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.profile-delete-link:hover {
  color: var(--navy);
}

.profile-content-panel .settings-content-head {
  margin-bottom: 0;
}

.profile-content-panel .field-hint {
  margin: 0;
  max-width: 38rem;
  line-height: 1.55;
}

.settings-integrations {
  display: grid;
  gap: 0.85rem;
}

.settings-integration-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
}

.settings-integration-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.settings-integration-body {
  min-width: 0;
}

.settings-integration-form {
  display: grid;
  gap: 0.7rem;
}

.settings-integration-form .field {
  margin: 0;
}

.settings-integration-token-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.settings-integration-token-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-integration-token-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.settings-integration-test-result {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.settings-integration-test-result.is-success {
  color: #166534;
}

.settings-integration-test-result.is-error {
  color: #7f1d1d;
}

.settings-integration-form .btn,
.settings-integration-card > .btn,
.settings-integration-card > .button_to,
.settings-integration-card > [data-controller="modal"],
.settings-integration-card > [data-tooltip] {
  justify-self: start;
  align-self: flex-start;
  width: auto;
}

.settings-integration-body h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  color: var(--navy);
}

.settings-integration-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.settings-integration-card .btn[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

.settings-form {
  display: grid;
  gap: 0.75rem;
}

.settings-pref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.settings-pref-row > label {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}

.settings-pref-row-checkbox {
  align-items: flex-start;
}

.settings-pref-row .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.settings-pref-row .checkbox-label input {
  margin: 0;
  flex-shrink: 0;
}

.settings-pref-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.settings-days-input {
  width: 5.5rem;
  padding: 0.65rem 0.75rem;
  text-align: center;
}

.settings-pref-unit {
  color: var(--navy);
  font-weight: 600;
}

.settings-pref-error {
  color: #cc1f27;
}

.settings-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.settings-profile-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.settings-privacy-consent {
  margin-top: 0.85rem;
}

#profile-delete-form {
  display: none;
}

.org-name {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}

.org-invite {
  margin-top: 1rem;
}

@media (max-width: 800px) {
  .settings-split {
    grid-template-columns: 1fr;
  }

  .settings-menu {
    display: none;
  }

  .profile-block,
  .settings-block {
    scroll-margin-top: 6.75rem;
    padding: 0.7rem 0.75rem 0.85rem;
  }

  .settings-integration-card {
    flex-direction: column;
    align-items: stretch;
  }
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: end;
  padding: 1.15rem 1.25rem;
}

.admin-filter-field {
  margin: 0;
  min-width: 11rem;
  flex: 1 1 11rem;
}

.admin-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 0.1rem;
}

.admin-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-sort-link:hover {
  color: var(--navy);
}

.admin-sort-link.is-active {
  color: var(--navy);
  font-weight: 800;
}

.admin-sort-link.is-asc::after,
.admin-sort-link.is-desc::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.admin-sort-link.is-asc::after {
  border-bottom: 5px solid currentColor;
}

.admin-sort-link.is-desc::after {
  border-top: 5px solid currentColor;
}

.admin-status-markers {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-table th.admin-col-status,
.admin-table td.admin-col-status {
  text-align: right;
}

/* Built for the numeric-heavy users/payments tables — the queue and nodes
   tables' status columns read better left-aligned like the rest of their
   columns. */
.admin-queue-table th.admin-col-status,
.admin-queue-table td.admin-col-status,
.admin-nodes-table th.admin-col-status,
.admin-nodes-table td.admin-col-status {
  text-align: left;
}

.admin-table th.admin-col-time,
.admin-table td.admin-col-time {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-stats-table th.admin-col-duration,
.admin-stats-table td.admin-col-duration,
.admin-stats-table th.admin-col-total,
.admin-stats-table td.admin-col-total {
  font-weight: 700;
}

.admin-table th.admin-col-time .admin-sort-link,
.admin-table th.admin-col-status .admin-sort-link {
  justify-content: flex-end;
  width: 100%;
}

.admin-device {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.admin-device-label {
  font-weight: 600;
  line-height: 1.3;
}

.admin-device-meta {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.admin-auth {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.admin-auth-via {
  font-weight: 600;
  line-height: 1.3;
}

.admin-auth-methods,
.admin-auth-last {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.admin-table td.admin-col-device {
  max-width: 18rem;
  overflow-wrap: anywhere;
}

.admin-col-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

.admin-table th.admin-col-drag,
.admin-table td.admin-col-drag {
  width: 1%;
  padding-right: 0.15rem;
  padding-left: 0.55rem;
  vertical-align: middle;
}

.admin-drag-handle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  opacity: 0.7;
  cursor: grab;
  touch-action: none;
}

.admin-drag-handle:hover,
.admin-drag-handle:focus-visible {
  opacity: 1;
  background: rgba(25, 52, 95, 0.08);
  outline: none;
}

.admin-drag-handle:active,
.admin-table tbody.is-sorting .admin-drag-handle,
.admin-feature-descriptions.is-sorting .admin-drag-handle {
  cursor: grabbing;
}

.admin-table tbody.is-sorting {
  user-select: none;
}

.admin-table tbody tr.is-dragging {
  opacity: 0.45;
}

.admin-table th.admin-col-actions,
.admin-table td.admin-col-actions {
  text-align: right;
}

.admin-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}

.admin-row-actions .recording-detail-menu-panel {
  min-width: 12rem;
  z-index: 60;
  text-align: center;
}

/* Last rows open upward so the menu is not clipped by the panel/pagination. */
.admin-table tbody tr:last-child .admin-row-actions .recording-detail-menu-panel,
.admin-table tbody tr:nth-last-child(2) .admin-row-actions .recording-detail-menu-panel {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.admin-table tbody tr:has(.admin-row-actions.is-open) {
  position: relative;
  z-index: 6;
}

.admin-row-actions .topbar-menu-link,
.admin-row-actions .topbar-menu-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.admin-row-actions .topbar-menu-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.admin-row-actions form,
.admin-row-actions .button_to {
  display: block;
  width: 100%;
  margin: 0;
}

.admin-table td.admin-col-status .admin-status-markers {
  justify-content: flex-end;
  width: 100%;
}

.admin-stats-table th,
.admin-stats-table td {
  text-align: center;
  vertical-align: middle;
}

.admin-stats-table th .admin-sort-link {
  justify-content: center;
  width: 100%;
}

.admin-stats-table th.admin-col-user,
.admin-stats-table td.admin-col-user,
.admin-stats-table th.admin-col-date,
.admin-stats-table td.admin-col-date {
  text-align: left;
}

.admin-stats-table th.admin-col-user .admin-sort-link,
.admin-stats-table th.admin-col-date .admin-sort-link {
  justify-content: flex-start;
}

.admin-stats-table th.admin-col-status,
.admin-stats-table td.admin-col-status {
  text-align: right;
}

.admin-stats-table th.admin-col-status .admin-sort-link,
.admin-stats-table td.admin-col-status .admin-status-markers {
  justify-content: flex-end;
}

.admin-stats-table .admin-row-actions {
  justify-content: center;
}

.admin-status-markers .status-marker,
.admin-status-markers .status-ready-check {
  width: 1.35rem;
  height: 1.35rem;
}

.admin-status-markers .status-ready-check svg {
  width: 1.35rem;
  height: 1.35rem;
}

.list-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.15rem 0 0.65rem;
}

.list-toolbar-bar {
  --list-toolbar-control-h: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.list-toolbar-q {
  flex: 1 1 6rem;
  min-width: 0;
  height: var(--list-toolbar-control-h);
  min-height: var(--list-toolbar-control-h);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  appearance: none;
}

.list-toolbar-select-btn.is-active,
.list-toolbar-select-btn[aria-pressed="true"] {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(25, 52, 95, 0.08);
}

.recording-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  padding: 0 0 0.55rem;
}

.recording-bulk-bar[hidden] {
  display: none;
}

.recording-bulk-bar-count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.2;
}

.recording-bulk-bar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.recording-bulk-form {
  display: none;
}

.list-toolbar-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}

.list-toolbar-date {
  position: relative;
  min-width: 0;
}

.list-toolbar-date-hint {
  position: absolute;
  inset: 0 1.7rem 0 0;
  display: flex;
  align-items: center;
  padding: 0 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-toolbar-date.is-filled .list-toolbar-date-hint,
.list-toolbar-date:focus-within .list-toolbar-date-hint {
  display: none;
}

.list-toolbar-date:not(.is-filled):not(:focus-within) input[type="date"] {
  color: transparent;
}

.list-toolbar-date:not(.is-filled):not(:focus-within) input[type="date"]::-webkit-datetime-edit {
  color: transparent;
}

.list-toolbar-row {
  min-width: 0;
}

.list-toolbar-row-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.4rem;
}

.list-toolbar .input[type="date"] {
  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
  min-width: 0;
}

.list-toolbar-more-btn {
  position: relative;
  overflow: visible;
}

.list-toolbar-more-badge {
  position: absolute;
  top: -0.28rem;
  left: -0.28rem;
  z-index: 1;
  display: none;
  width: 0.9rem;
  height: 0.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px #fff;
}

.list-toolbar-more-btn.is-active .list-toolbar-more-badge {
  display: flex;
}

.list-toolbar-more-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.list-toolbar-more-body[hidden] {
  display: none;
}

.list-toolbar-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.3rem;
  align-items: center;
}

.btn-icon {
  width: var(--list-toolbar-control-h, 2.4rem);
  height: var(--list-toolbar-control-h, 2.4rem);
  min-height: var(--list-toolbar-control-h, 2.4rem);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-toolbar .input {
  width: 100%;
  min-width: 0;
}

.list-infinite-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1px;
  padding: 0.15rem 0;
}

.list-infinite-spinner {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(25, 52, 95, 0.18);
  border-top-color: var(--navy);
  animation: spin 0.8s linear infinite;
}

.list-infinite-sentinel.is-loading .list-infinite-spinner {
  display: block;
}

.list-infinite-sentinel.is-complete {
  min-height: 0;
  padding: 0;
}

.recording-list.is-enhanced .list-infinite-fallback {
  display: none;
}

.list-pagination {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.65rem 0.15rem 0.2rem;
}

.list-pagination-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

.list-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.list-pagination-nav,
.admin-pagination-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
}

.admin-pagination-nav {
  margin-left: auto;
}

.pagination-per {
  margin: 0;
}

.pagination-per-select {
  width: auto;
  min-width: 4.35rem;
  height: 2rem;
  padding: 0 1.7rem 0 0.55rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

.list-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.4rem;
  border-radius: 8px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.list-page-link:hover,
.list-page-link.is-active {
  background: rgba(25, 52, 95, 0.1);
}

.list-page-link.is-active {
  font-weight: 800;
}

.voiceprint-recordings > .list-pagination {
  padding: 0.65rem 1rem 0.85rem;
  border-top: 1px solid var(--line);
}

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--line);
}

.admin-pagination-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border-radius: 8px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}

.admin-page-link:hover,
.admin-page-link.is-active {
  background: rgba(25, 52, 95, 0.1);
}

.admin-page-link.is-active {
  font-weight: 800;
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .devise-name-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.admin-status-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.admin-status-header,
.admin-panel-header {
  padding: 0.85rem 1.25rem;
  background: var(--surface-tint);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}

.admin-status-header h2,
.admin-panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--navy);
}

.admin-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1rem 1.25rem;
}

.admin-status-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.admin-status-item-status {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.admin-status-item-status .admin-status-value {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-status-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #94a3b8;
  flex-shrink: 0;
}

.admin-status-card.is-free .admin-status-dot { background: #22c55e; }
.admin-status-card.is-busy .admin-status-dot { background: #b45309; }
.admin-status-card.is-down .admin-status-dot { background: #be123c; }

.admin-status-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-status-value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  word-break: break-word;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table-wrap h2 {
  margin: 0 0 0.85rem;
  font-size: 1.25rem;
}

.admin-panel {
  --admin-panel-radius: 18px;
  --admin-panel-inner-radius: calc(var(--admin-panel-radius) - 1px);
  border-radius: var(--admin-panel-radius);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  margin-bottom: 1.75rem;
  /* visible: row action menus must escape the panel/table edge */
  overflow: visible;
}

.admin-panel > :first-child {
  border-top-left-radius: var(--admin-panel-inner-radius);
  border-top-right-radius: var(--admin-panel-inner-radius);
}

.admin-panel > :last-child {
  border-bottom-left-radius: var(--admin-panel-inner-radius);
  border-bottom-right-radius: var(--admin-panel-inner-radius);
}

.admin-panel-body {
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.admin-panel-hint {
  margin: 0;
  padding: 0.85rem 1.25rem 0;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.admin-table th,
.admin-table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.admin-users-table tr.is-deleted td {
  color: var(--muted);
}

.admin-users-table th.admin-col-recordings,
.admin-users-table td.admin-col-recordings,
.admin-users-table th.admin-col-confirmed,
.admin-users-table td.admin-col-confirmed,
.admin-users-table th.admin-col-status,
.admin-users-table td.admin-col-status,
.admin-users-table th.admin-col-actions,
.admin-users-table td.admin-col-actions,
.admin-table th.admin-col-amount,
.admin-table td.admin-col-amount,
.admin-table th.admin-col-minutes,
.admin-table td.admin-col-minutes,
.admin-payments-table th.admin-col-amount,
.admin-payments-table td.admin-col-amount,
.admin-payments-table th.admin-col-status,
.admin-payments-table td.admin-col-status {
  text-align: right;
  white-space: nowrap;
}

.admin-table th {
  background: var(--surface-tint);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-table tbody tr {
  transition: background 120ms ease;
}

@media (hover: hover) {
  .admin-table tbody tr:hover {
    background: var(--surface-tint);
  }
}

.admin-table tr:last-child td { border-bottom: 0; }

.admin-panel > :first-child .admin-table thead th:first-child {
  border-top-left-radius: var(--admin-panel-inner-radius);
}

.admin-panel > :first-child .admin-table thead th:last-child {
  border-top-right-radius: var(--admin-panel-inner-radius);
}

.admin-panel > :last-child .admin-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--admin-panel-inner-radius);
}

.admin-panel > :last-child .admin-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--admin-panel-inner-radius);
}

@media (max-width: 900px) {
  .admin-table-wrap {
    overflow: visible;
    padding: 0;
    background: transparent;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }

  .admin-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem 0.75rem;
    align-items: start;
    padding: 0.75rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-solid);
  }

  .admin-table td {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    width: auto;
    overflow-wrap: anywhere;
  }

  .admin-table td[data-label]::before {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .admin-table td.admin-col-primary {
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.05rem;
  }

  .admin-table td.admin-col-primary::before {
    display: none;
  }

  .admin-table td.admin-col-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    text-align: right;
  }

  .admin-table td.admin-col-drag {
    display: none;
  }

  .admin-table td.admin-col-status {
    text-align: left;
  }

  .admin-table tbody tr:not(:has(.admin-col-actions)) td.admin-col-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    text-align: right;
  }

  .admin-table tbody tr:not(:has(.admin-col-actions)) td.admin-col-status::before {
    display: none;
  }

  .admin-table td.admin-col-time {
    grid-column: auto;
    text-align: left;
    white-space: normal;
  }

  .operations-table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .operations-table td.admin-col-primary {
    grid-column: 1 / -1;
  }

  .operations-table td.admin-col-minutes,
  .operations-table td.admin-col-amount {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
    white-space: normal;
  }

  .operations-table td.admin-col-comment {
    grid-column: 1 / -1;
  }

  .operations-table.has-actor td.admin-col-actor {
    grid-column: 1 / -1;
  }

  .admin-table td.admin-col-total {
    grid-column: 1 / -1;
  }

  .admin-table td.admin-col-status .admin-status-markers {
    justify-content: flex-start;
  }

  .admin-table tbody tr:has(> td[colspan]) {
    display: block;
  }

  .admin-table tbody tr:last-child td,
  .admin-panel > :first-child .admin-table thead th:first-child,
  .admin-panel > :first-child .admin-table thead th:last-child,
  .admin-panel > :last-child .admin-table tbody tr:last-child td:first-child,
  .admin-panel > :last-child .admin-table tbody tr:last-child td:last-child {
    border-radius: 0;
  }

  .admin-table tbody tr:last-child .admin-row-actions .recording-detail-menu-panel,
  .admin-table tbody tr:nth-last-child(2) .admin-row-actions .recording-detail-menu-panel {
    top: calc(100% + 0.35rem);
    bottom: auto;
  }

  .admin-stats-table tbody tr:not(:has(> td[colspan])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "status user user actions"
      "id date date duration"
      "t d p total";
  }

  .admin-stats-table td.admin-col-primary,
  .admin-stats-table td.admin-col-actions,
  .admin-stats-table td.admin-col-status {
    align-self: center;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    line-height: 1;
  }

  .admin-stats-table td.admin-col-primary { grid-area: user; }
  .admin-stats-table td.admin-col-actions {
    grid-area: actions;
    justify-self: end;
    justify-content: flex-end;
  }
  .admin-stats-table td.admin-col-id { grid-area: id; }
  .admin-stats-table td.admin-col-date { grid-area: date; }
  .admin-stats-table td.admin-col-duration { grid-area: duration; }
  .admin-stats-table td.admin-col-transcription { grid-area: t; }
  .admin-stats-table td.admin-col-diarization { grid-area: d; }
  .admin-stats-table td.admin-col-analysis { grid-area: p; }
  .admin-stats-table td.admin-col-total { grid-area: total; }
  .admin-stats-table td.admin-col-status {
    grid-area: status;
    justify-content: flex-start;
  }

  .admin-stats-table td.admin-col-status::before {
    display: none;
  }

  .admin-stats-table td.admin-col-status .admin-status-markers,
  .admin-stats-table .admin-row-actions {
    width: auto;
    justify-content: inherit;
    align-items: center;
  }

  .admin-nodes-table tbody tr:not(:has(> td[colspan])) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-nodes-table td.admin-col-primary {
    grid-column: 1 / 3;
  }

  .admin-nodes-table td.admin-col-actions {
    grid-column: 3;
  }

  .admin-nodes-table td.admin-col-cuda,
  .admin-nodes-table td.admin-col-model,
  .admin-nodes-table td.admin-col-version {
    grid-column: auto;
    min-width: 0;
  }

  .admin-tariffs-table tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-tariffs-table td.admin-col-primary {
    grid-column: 1 / 3;
  }

  .admin-tariffs-table td.admin-col-actions {
    grid-column: 3;
  }

  .admin-tariffs-table td.admin-col-price,
  .admin-tariffs-table td.admin-col-discount,
  .admin-tariffs-table td.admin-col-period,
  .admin-tariffs-table td.admin-col-minutes,
  .admin-tariffs-table td.admin-col-users {
    grid-column: auto;
    min-width: 0;
  }

  .admin-tariffs-table td.admin-col-flags,
  .admin-tariffs-table td.admin-col-processes {
    grid-column: 1 / -1;
  }

  .admin-users-table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name name actions actions"
      "role role auth auth"
      "tariff tariff minutes minutes"
      "balance balance balance balance"
      "last-rec last-rec last-rec last-rec"
      "last-seen last-seen last-seen last-seen"
      "device device device device"
      "count count confirmed confirmed"
      "status status status status";
  }

  .admin-users-table td.admin-col-primary { grid-area: name; }
  .admin-users-table td.admin-col-role { grid-area: role; }
  .admin-users-table td.admin-col-auth { grid-area: auth; }
  .admin-users-table td.admin-col-tariff { grid-area: tariff; }
  .admin-users-table td.admin-col-minutes {
    grid-area: minutes;
    justify-self: end;
    text-align: right;
  }
  .admin-users-table td.admin-col-balance { grid-area: balance; }
  .admin-users-table td.admin-col-last-recording { grid-area: last-rec; }
  .admin-users-table td.admin-col-last-seen { grid-area: last-seen; }
  .admin-users-table td.admin-col-device { grid-area: device; }
  .admin-users-table td.admin-col-recordings {
    grid-area: count;
    justify-self: end;
    text-align: right;
  }
  .admin-users-table td.admin-col-confirmed {
    grid-area: confirmed;
    justify-self: end;
    align-self: start;
    text-align: right;
  }
  .admin-users-table td.admin-col-status {
    grid-area: status;
    justify-self: end;
    align-self: start;
    text-align: right;
  }
  .admin-users-table td.admin-col-actions {
    grid-area: actions;
    justify-self: end;
    align-self: start;
  }

  .admin-users-table td.admin-col-status::before {
    display: block;
  }

  .admin-filters {
    padding: 0.85rem 0.75rem 0.8rem;
  }

  .admin-panel {
    background: transparent;
    border: 0;
  }

  .admin-panel-body {
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: 18px;
    margin-bottom: 0.75rem;
  }

  .admin-filter-field {
    min-width: 0;
    flex: 1 1 100%;
  }

  .admin-filter-actions {
    width: 100%;
  }

  .admin-filter-actions .btn {
    flex: 1;
  }
}

.site-shell > main:has(.devise-wrap) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.devise-wrap {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 2rem 0;
}

.devise-panel {
  width: min(440px, 100%);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

@media (min-width: 981px) {
  html:has(aside.sidebar) .container {
    margin-left: 1.25rem;
    margin-right: auto;
  }

  html:has(aside.sidebar) .site-body:has(.hero) .container {
    margin-left: auto;
    margin-right: auto;
  }

  .site-body:has(.hero) .section-head {
    margin-inline: auto;
    text-align: center;
  }

  .site-body:has(.hero) .android-app-cta {
    justify-content: center;
  }

  .site-body:has(.hero) .android-app-hint {
    margin-inline: auto;
    text-align: center;
  }

  .devise-wrap > .container {
    margin-left: auto;
    margin-right: auto;
  }
}

.devise-panel.promo-landing {
  text-align: center;
}

.promo-landing .page-head-stack {
  align-items: center;
}

.promo-landing .cta-row {
  justify-content: center;
}

.promo-landing .page-lead.promo-invalid {
  color: #cc1f27;
}

.devise-auth-tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 1.15rem;
  padding: 0.28rem;
  background: var(--paper-deep);
  border-radius: 10px;
}

.devise-auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
}

.devise-auth-tab.is-active {
  background: var(--surface-solid);
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(25, 52, 95, 0.1);
  pointer-events: none;
}

.devise-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.8rem;
}

.devise-form-alert {
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(204, 31, 39, 0.28);
  background: #fff5f5;
  color: #9f1239;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.devise-form-alert p,
p.devise-form-alert {
  margin: 0;
}
ul.devise-form-alert {
  padding-left: 1.2rem;
}
.devise-form-alert li + li {
  margin-top: 0.25rem;
}
.devise-form-alert a {
  color: inherit;
  font-weight: 800;
}

.devise-sent-copy {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.45;
}

.devise-panel .field { margin-bottom: 0.9rem; }
.devise-panel .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.devise-panel .checkbox-label input {
  margin: 0;
  flex-shrink: 0;
}
.devise-panel .actions { margin-top: 1rem; }
.devise-panel .devise-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.devise-panel .devise-inline-link {
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.devise-panel .devise-inline-link:hover {
  text-decoration: underline;
}

/* Sign-in/sign-up submit — --accent-blue only, not .btn-primary itself, so
   every other primary button on the site keeps its normal red accent. */
.devise-panel .btn-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.devise-panel .btn-primary:hover {
  filter: brightness(1.12);
}

/* Privacy-consent dialog's submit ("Продолжить") — same --accent-blue
   treatment as sign-in/sign-up, scoped to this one dialog rather than
   .btn-primary itself. */
#privacy-consent-dialog .btn-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

#privacy-consent-dialog .btn-primary:hover {
  filter: brightness(1.12);
}

.devise-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.devise-name-row .field {
  min-width: 0;
}

.devise-auth {
  margin: 0;
}

.devise-auth-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.devise-oauth-form,
.devise-yandex-form,
.devise-vk-form {
  margin: 0;
  min-width: 0;
}

.devise-auth-method {
  appearance: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.7rem 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.devise-auth-method:hover {
  background: var(--surface-solid);
  border-color: color-mix(in srgb, var(--navy) 28%, var(--line));
  color: var(--navy);
}

.devise-auth-method.is-selected,
.devise-auth-method[aria-expanded="true"] {
  border-color: var(--line);
  box-shadow: none;
  background: var(--surface-solid);
}

/* Spotlight: hovered or selected method stays white; siblings recede.
   Yandex/VK wrap the button in a form, password is a direct child. */
.devise-auth-methods:has(.devise-auth-method.is-selected) > :not(:has(.is-selected)) .devise-auth-method,
.devise-auth-methods:has(.devise-auth-method.is-selected) > .devise-auth-method:not(.is-selected),
.devise-auth-methods:has(.devise-auth-method:focus-visible) > :not(:focus-within) .devise-auth-method,
.devise-auth-methods:has(.devise-auth-method:focus-visible) > .devise-auth-method:not(:focus-visible) {
  background: var(--paper-deep);
  border-color: color-mix(in srgb, var(--line) 55%, transparent);
  box-shadow: none;
  filter: saturate(0.7);
}

.devise-auth-methods:has(.devise-auth-method:focus-visible) > :focus-within .devise-auth-method,
.devise-auth-methods:has(.devise-auth-method:focus-visible) > .devise-auth-method:focus-visible {
  background: var(--surface-solid);
  filter: none;
}

.devise-auth-methods:has(.devise-auth-method:hover) > :not(:hover) .devise-auth-method,
.devise-auth-methods:has(.devise-auth-method:hover) > .devise-auth-method:not(:hover) {
  background: var(--paper-deep);
  border-color: color-mix(in srgb, var(--line) 55%, transparent);
  box-shadow: none;
  filter: saturate(0.7);
}

.devise-auth-methods:has(.devise-auth-method:hover) > :hover .devise-auth-method,
.devise-auth-methods:has(.devise-auth-method:hover) > .devise-auth-method:hover {
  background: var(--surface-solid);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .devise-auth-method {
    transition: none;
  }
}

.devise-auth-method:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--navy) 38%, var(--line));
  box-shadow: none;
}

.devise-auth-method.is-selected:focus-visible,
.devise-auth-method[aria-expanded="true"]:focus-visible {
  outline: none;
}

.devise-auth-method-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devise-oauth-mark,
.devise-yandex-mark,
.devise-vk-mark,
.devise-password-mark {
  flex-shrink: 0;
}

.devise-password-panel {
  margin: 1.05rem 0 0;
}

.devise-password-panel[hidden] {
  display: none;
}
.devise-links { margin-top: 1rem; color: var(--muted); display: grid; gap: 0.35rem; }

.mode-options {
  display: grid;
  gap: 0.65rem;
}

.mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  cursor: pointer;
}

.mode-option strong {
  display: block;
  font-size: 0.98rem;
}

.mode-option small {
  display: block;
  color: var(--muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.mode-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(204, 31, 39, 0.06);
}

.status-conference {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.status-transcription {
  background: #e8eef8;
  color: var(--navy-fill);
}

.meeting-panel {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.meeting-panel-head .meeting-timing {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.meeting-panel-head .panel-label {
  margin: 0 0 0.45rem;
}

.meeting-banner { margin: 0.75rem 0; }

.meeting-waiting {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.meeting-waiting .muted {
  margin: 0;
}

.meeting-block {
  margin-top: 1.1rem;
}

.meeting-block h3 {
  margin: 0 0 0.55rem;
  font-size: 1.15rem;
}

.meeting-block-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meeting-block-head h3 {
  margin-bottom: 0;
}

.meeting-copy-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.meeting-copy-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.55rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--surface-solid);
  color: var(--muted);
  cursor: pointer;
}

.meeting-copy-btn:hover {
  color: var(--navy);
  border-color: var(--navy);
}

.meeting-copy-btn .meeting-copy-icon.is-done {
  display: none;
}

.meeting-copy-btn.is-copied .meeting-copy-icon.is-copy {
  display: none;
}

.meeting-copy-btn.is-copied .meeting-copy-icon.is-done {
  display: block;
}

.meeting-summary {
  margin: 0;
  white-space: pre-wrap;
}

.meeting-decisions {
  margin: 0;
  padding-left: 1.35rem;
  list-style: decimal;
}

.meeting-decisions li { margin: 0.25rem 0; }

.muted { color: var(--muted); }

.action-list {
  display: grid;
  gap: 0.9rem;
}

.action-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-tint);
}

.action-card.review-approved { border-color: rgba(22, 101, 52, 0.35); }
.action-card.review-rejected { opacity: 0.72; }
.action-card.review-synced { border-color: rgba(22, 101, 52, 0.55); background: rgba(220, 252, 231, 0.45); }
.action-card.review-failed { border-color: rgba(180, 35, 24, 0.45); }

.action-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.action-type {
  font-weight: 700;
  font-size: 0.9rem;
}

.action-confidence {
  color: var(--muted);
  font-size: 0.85rem;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.action-form .input.is-empty:not(:disabled) {
  border-color: #dc2626;
  background: #fef2f2;
}

.action-form .input.is-empty:not(:disabled):focus {
  outline-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.action-evidence {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: rgba(204, 31, 39, 0.05);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.action-external {
  margin: 0.55rem 0 0;
  color: var(--accent-deep);
  font-size: 0.9rem;
}

.action-sync-error {
  margin: 0.45rem 0 0;
  color: var(--danger);
  font-size: 0.9rem;
}

.action-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.action-buttons .btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.action-buttons .btn-icon-only {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-review-pending { background: #f1f5f9; color: #334155; }
.status-review-approved { background: #e8f7ef; color: #14532d; }
.status-review-rejected { background: #fee4e2; color: #912018; }
.status-review-synced { background: #dcfce7; color: #166534; }
.status-review-failed { background: #fee4e2; color: #912018; }

.mic-panel { display: grid; gap: 1rem; }

.mic-panel.is-locked {
  opacity: 0.78;
}

.mic-panel.is-locked select:disabled,
.mic-panel.is-locked .btn[disabled] {
  cursor: not-allowed;
}

.mic-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}

.mic-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.mic-device-row {
  display: grid;
  gap: 0.45rem;
}

.mic-device-row > label {
  margin-bottom: 0;
}

.mic-device-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
}

.mic-enable-btn {
  flex-shrink: 0;
}

.mic-device-controls .input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.mic-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  margin-left: 0.25rem;
}

.mic-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.35rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.mic-live-toggle input {
  margin: 0;
}

.mic-meter {
  flex: 0 0 7rem;
  height: 10px;
  border-radius: 999px;
  background: rgba(20, 33, 43, 0.08);
  overflow: hidden;
}

.mic-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width 80ms linear;
}

.mic-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 1.7rem;
}

.mic-status-text {
  flex: 1 1 auto;
  min-width: 0;
}

.mic-status-spinner {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-color: rgba(25, 52, 95, 0.2);
  border-top-color: var(--navy);
}

.mic-status-pct {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}

.mic-status-retry {
  flex-shrink: 0;
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.82rem;
}

.mic-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.95rem;
}

.field-inline .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.field-inline .checkbox-label input {
  margin-top: 0.2rem;
}

.mic-live-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20, 33, 43, 0.12);
  border-radius: 10px;
  background: rgba(var(--surface-base), 0.65);
}

.mic-live-panel-pending {
  margin-top: 0.25rem;
}

.mic-live-title {
  margin: 0;
  font-size: 1rem;
}

.mic-live-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.mic-live-text {
  min-height: 4.5rem;
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 0.98rem;
}

.mic-preview {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.topbar-menu-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-menu-toggle-bars,
.topbar-menu-toggle-bars::before,
.topbar-menu-toggle-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
}

.topbar-menu-toggle-bars::before,
.topbar-menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.topbar-menu-toggle-bars::before { top: -6px; }
.topbar-menu-toggle-bars::after { top: 6px; }

.topbar.is-nav-open .topbar-menu-toggle-bars {
  background: transparent;
}

.topbar.is-nav-open .topbar-menu-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.topbar.is-nav-open .topbar-menu-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.topbar-mobile-panel {
  display: none;
}

html.nav-drawer-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .topbar-nav { display: none; }
  .topbar-pill-outline { display: none; }
  .topbar-chrome-desktop { display: none; }
  .topbar-locales-desktop { display: none; }
  .topbar-theme-desktop { display: none; }
  .topbar-account-desktop { display: none; }
  .topbar-auth-desktop { display: none; }
  .topbar-menu-toggle { display: inline-flex; }
  .topbar-section-group,
  .topbar-section-mobile { display: flex; }
  .topbar-bar { gap: 0.6rem; }

  .topbar-bar > .speaker-pin-btn {
    display: inline-flex;
    flex-shrink: 0;
    /* The shared pin-button styling's -0.5rem/0.4rem asymmetric margin is
       tuned for bleeding to the recording-detail header's own padding —
       .container here has no equivalent edge to bleed into, so it just
       pushed the button toward (or past) the container's left edge. Let
       .topbar-bar's own gap handle right-side spacing consistently with
       its next sibling (the logo) instead — but still pull the icon in on
       the left by exactly enough to land it at the same 0.5rem from the
       screen edge every other pin button sits at: .container's own
       centering margin already contributes 0.625rem (half of the 1.25rem
       it's narrowed by, just above), so only the remaining 0.125rem needs
       pulling in here. */
    margin: 0 0.4rem 0 calc(0.5rem - 0.625rem);
  }

  .topbar-mobile-panel:not([hidden]) {
    display: block;
  }

  .topbar.is-nav-open {
    z-index: 50;
  }

  .topbar.is-nav-open .topbar-bar {
    position: relative;
    z-index: 47;
  }

  .topbar-mobile-backdrop {
    position: fixed;
    /* Longhand, not the `inset` shorthand — the Android app's WebView can be
       stuck years behind on Huawei/other devices with no Play Services to
       update it (see MainActivity.kt), old enough to not parse `inset` at
       all. An unsupported shorthand drops with no offsets left set, so the
       backdrop/sheet render inline at their in-flow position sized to
       content instead of covering the viewport — only the first bit of the
       mobile menu, unstretched, ends up visible. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--surface-solid);
    z-index: 45;
  }

  .topbar-mobile-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 46;
    width: 100%;
    /* No explicit height: top/right/bottom/left: 0 above already stretches
       a `position: fixed` box to fill the viewport. An explicit `100vh`/
       `100dvh` used to be here, but the Android app's WebView (see
       MainActivity.kt) has been observed computing `100dvh` as a small
       fraction of the real viewport height — collapsing this sheet to a
       sliver that clips everything but the first menu row. Leave sizing to
       the inset offsets instead of a unit that can be miscomputed. */
    background: var(--surface-solid);
    padding: 4.5rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    overflow: auto;
  }

  .topbar-mobile-nav {
    display: grid;
    gap: 0.1rem;
    width: 100%;
    max-width: 20rem;
  }

  .topbar-mobile-nav .topbar-menu-link {
    display: block;
    padding: 0.52rem 0.6rem;
    border-radius: var(--btn-radius);
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    text-decoration: none;
    text-align: center;
  }

  .topbar-mobile-nav .topbar-menu-separator {
    width: 100%;
    margin: 0.45rem 0;
  }

  .topbar-mobile-nav .topbar-account-summary {
    width: 100%;
    padding: 0.1rem 0 0.15rem;
  }

  .topbar-mobile-nav .topbar-account-summary-row {
    padding: 0.4rem 0.6rem;
  }

  .topbar-mobile-nav .topbar-account-summary-label,
  .topbar-mobile-nav .topbar-account-summary-value {
    font-size: 0.9rem;
  }

  .topbar-mobile-nav .topbar-menu-meta {
    padding: 0.35rem 0.6rem;
    text-align: center;
  }

  .topbar-mobile-nav .chrome-switches,
  .topbar-mobile-nav .topbar-locales {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0.2rem 0 0.1rem;
  }

  .topbar-mobile-sheet .chrome-switches .topbar-theme-switch {
    width: auto;
    margin: 0;
  }

  .topbar-mobile-nav .topbar-menu-link.is-active,
  .topbar-mobile-nav .topbar-menu-link:hover {
    background: var(--paper-deep);
  }

  .topbar-mobile-nav .topbar-mobile-admin .topbar-menu-link.is-active,
  .topbar-mobile-nav .topbar-mobile-admin .topbar-menu-link:hover {
    background: var(--paper-deep);
    color: var(--red-deep);
  }

  .topbar-mobile-locales {
    gap: 0;
  }

  .topbar-mobile-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 20rem;
    text-align: center;
  }

  .topbar-mobile-auth .topbar-menu-separator {
    width: 100%;
    margin: 0.45rem 0;
  }

  .topbar-mobile-auth .button_to {
    display: flex;
    justify-content: center;
    width: auto;
  }

  .topbar-mobile-signout {
    width: auto;
  }
}

.topbar-mobile-auth .btn-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.topbar-mobile-auth .btn-primary:hover {
  filter: brightness(1.12);
}

@media (max-width: 900px) {
  .hero-grid, .split, .feature-grid, .steps, .footer-inner {
    grid-template-columns: 1fr;
    display: grid;
  }

  .footer-inner {
    justify-items: center;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .requisites-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .container {
    width: min(1120px, calc(100% - 1.25rem)) !important;
  }

  .container.container-full,
  .admin-page > .container {
    width: calc(100% - 1.25rem) !important;
  }

  .section {
    padding: 2.5rem 0;
  }

  .page-section {
    padding-top: 1.5rem;
  }

  .hero {
    padding-top: 2rem;
  }

  .hero-copy .cta-row,
  .home-cta-row {
    align-items: center;
  }

  .hero-consent {
    justify-content: center;
    text-align: center;
    max-width: 18rem;
    margin-inline: auto;
  }

  .hero-consent input {
    margin-top: 0.15rem;
  }

  .site-body:has(.devise-wrap) .site-bg {
    display: none;
  }

  .site-shell > main:has(.devise-wrap) {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .devise-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    place-items: unset;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }

  .devise-wrap > .container {
    width: 100% !important;
    display: block;
    flex: none;
  }

  .devise-panel {
    width: 100%;
    max-width: none;
    flex: none;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    padding: 1.25rem 1.1rem 1.75rem;
  }

  .hero .stat-row {
    display: none;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-row .btn {
    width: 100%;
  }

  /* The Android app download button is short-label and standalone (not
     paired with a second action to visually balance against, like other
     .cta-row buttons are) — full width on mobile just made it look like an
     oversized bar. Opt back out of both the width and the row's own
     align-items: stretch. */
  .android-app-cta.cta-row .btn {
    width: auto;
    align-self: flex-start;
  }

  .recording-detail-header {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.65rem 0.45rem 0.65rem 1rem;
    gap: 0.35rem;
  }

  .recording-detail > .recording-detail-header {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .recording-detail-subheader {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.5rem 1rem;
  }

  .recording-detail-top {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.4rem 1rem;
  }

  .recording-detail-body,
  .recording-detail-meta-pane {
    padding: 0 1rem 0.85rem;
  }

  .recording-detail-section-title {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 0.4rem;
    padding: 0.35rem 1rem;
  }

  .recording-detail-meta-pane > .recording-detail-section:first-of-type > .recording-detail-section-title,
  .recording-detail-body > .recording-detail-section:first-of-type > .recording-detail-section-title {
    margin-top: 0;
  }

  .recording-detail-section + .recording-detail-section {
    margin-top: 0.45rem;
  }

  /* Pinned panels stick to the window on mobile (.recording-detail-body has
     no bounded height there, so it isn't the scrolling ancestor — the page
     itself is) — clear the topbar with a base offset. var(--topbar-offset),
     not a flat 64px: the topbar itself scrolls away when unpinned (see
     pin_panel_controller.js's syncTopbarOffset, kept in sync on
     document.documentElement), so a fixed 64px left a permanent 64px gap
     of empty space above these panels once the topbar was gone — they need
     to dock flush to the top (0) exactly when the topbar isn't there to
     clear, and clear its real height when it is. The desktop split-view
     constrains .recording-detail-body to a real scroll box instead, so it
     doesn't need this. */
  .recording-detail {
    --pin-base-offset: var(--topbar-offset, 64px);
  }

  .recording-detail-section-panel.is-pinned {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .recording-detail-spy {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.28rem 1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 0.3rem;
  }

  .recording-detail-spy-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .recording-detail-transcribe-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .recording-detail-transcribe-bar .btn {
    width: 100%;
  }

  .recording-detail-transcribe-bar .transcription-progress {
    flex-basis: auto;
    max-width: none;
  }

  .mic-device-controls {
    flex-wrap: wrap;
  }

  .mic-meter {
    flex: 1 1 100%;
  }

  .mic-toolbar {
    gap: 1.1rem;
  }

  .mic-toolbar-actions {
    width: 100%;
    gap: 0.5rem;
  }

  .mic-toolbar-actions .btn {
    flex: 0 0 auto;
    width: auto;
  }

  .mic-live-toggle {
    width: 100%;
    margin-left: 0;
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    white-space: normal;
  }

  .topbar-avatar {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px) {
  .page-head h1 {
    font-size: 1.55rem;
  }

  .recording-detail-title {
    font-size: 1.25rem;
  }

  .recording-row {
    padding: 0.75rem 0.85rem;
  }

  .recording-row-main {
    gap: 0.25rem;
  }

  .recordings-list-pane,
  .voiceprints-list-pane {
    scrollbar-gutter: auto;
    padding: 0;
  }

  .container {
    width: min(1120px, calc(100% - 1.25rem)) !important;
  }

  .container.container-full,
  .admin-page > .container {
    width: calc(100% - 1.25rem) !important;
  }
}

.process-log-modal {
  box-sizing: border-box;
  width: min(56rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}

.activity-log-modal {
  width: min(110rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}

.activity-log-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.activity-log-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: var(--navy);
}

.activity-log-section-title + .process-log-table-wrap,
.activity-log-section-title + .process-log-empty {
  margin-bottom: 1.15rem;
}

.activity-log-summary dt {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity-log-summary dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.activity-log-col-ua {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-log-session-active {
  display: block;
  color: #15803d;
  font-weight: 700;
}

.process-log-modal-card {
  max-width: 100%;
  width: 100%;
  max-height: calc(100dvh - 1.5rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.process-log-modal-card .upload-modal-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#process_log_modal_body,
#activity_log_modal_body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.process-log-table-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: min(60vh, 28rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.process-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.process-log-table th,
.process-log-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.process-log-table th {
  position: sticky;
  top: 0;
  background: var(--surface-tint);
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

.process-log-table .process-log-col-duration,
.activity-log-table .admin-col-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.process-log-table tr.process-log-failed td {
  background: #fef2f2;
}

.process-log-table tr.process-log-started td {
  background: #f0f9ff;
}

.process-log-table tbody tr td {
  transition: background 120ms ease;
}

@media (hover: hover) {
  .process-log-table tbody tr:hover td {
    background: var(--surface-tint);
  }

  .process-log-table tbody tr.process-log-failed:hover td {
    background: #fee2e2;
  }

  .process-log-table tbody tr.process-log-started:hover td {
    background: #e0f2fe;
  }
}

.process-log-error-cell {
  max-width: 18rem;
}

.process-log-error {
  color: #b91c1c;
  font-size: 0.86rem;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.process-log-empty {
  margin: 0;
  color: #64748b;
}

@media (max-width: 900px) {
  .process-log-modal,
  .activity-log-modal {
    width: calc(100vw - 0.4rem);
    max-width: calc(100vw - 0.4rem);
    max-height: calc(100dvh - 0.4rem);
    margin: 0.2rem auto;
  }

  .process-log-modal-card {
    padding: 0.7rem 0.4rem 0.75rem;
    max-height: calc(100dvh - 0.4rem);
  }

  .activity-log-modal .process-log-modal-card {
    padding: 0.65rem 0.35rem 0.7rem;
  }

  .process-log-table-wrap {
    overflow: visible;
    max-height: none;
  }

  #process_log_modal_body,
  #activity_log_modal_body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .activity-log-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .activity-log-col-ua {
    max-width: none;
    white-space: normal;
  }

  .process-log-table thead {
    display: none;
  }

  .process-log-table,
  .process-log-table tbody {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }

  .process-log-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    align-items: start;
    padding: 0.7rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-solid);
  }

  .activity-log-table tbody tr {
    padding: 0.6rem 0.4rem;
  }

  .process-log-table tr.process-log-failed td,
  .process-log-table tr.process-log-started td {
    background: transparent;
  }

  .process-log-table tr.process-log-failed {
    background: #fef2f2;
  }

  .process-log-table tr.process-log-started {
    background: #f0f9ff;
  }

  .process-log-table th,
  .process-log-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    width: auto;
    overflow-wrap: anywhere;
  }

  .process-log-table td[data-label]::before {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .process-log-col-kind {
    grid-column: 1;
    font-weight: 700;
    color: var(--navy);
  }

  .process-log-table td.process-log-col-kind::before {
    display: none;
  }

  .process-log-table .process-log-col-duration,
  .activity-log-table .admin-col-amount {
    grid-column: 2;
    justify-self: end;
    align-self: start;
    text-align: right;
    white-space: nowrap;
  }

  .process-log-col-user,
  .process-log-col-started,
  .process-log-col-finished,
  .process-log-error-cell {
    grid-column: 1 / -1;
    max-width: none;
  }
}