:root {
  color-scheme: light;
  --bg: #f4f5f1;
  --surface: #ffffff;
  --surface-2: #eef4f0;
  --ink: #18201f;
  --muted: #66716d;
  --line: #d8ded8;
  --teal: #087c76;
  --teal-dark: #045f5a;
  --blue: #315d9b;
  --amber: #a26414;
  --red: #ad3434;
  --shadow: 0 8px 28px rgba(24, 32, 31, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: #fbfcf9;
  border-bottom: 1px solid var(--line);
}

.product {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
}

.subline {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.segmented {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.segment {
  height: 38px;
  min-width: 90px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segment:last-child {
  border-right: 0;
}

.segment.active {
  background: var(--teal);
  color: #ffffff;
}

.top-actions,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.button,
.icon-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button.primary,
.button:hover,
.icon-button:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
}

.button.ghost {
  background: transparent;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, 0.8fr) minmax(380px, 1fr) minmax(280px, 0.75fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcf9;
}

h1,
h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.transcript-feed,
.queue-list,
.caption-grid {
  min-height: 0;
  overflow: auto;
}

.transcript-feed {
  flex: 1;
  padding: 10px 14px;
}

.transcript-line {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0ed;
}

.transcript-line time {
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}

.transcript-line p {
  margin: 0;
  line-height: 1.45;
}

.manual-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fbfcf9;
}

input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--ink);
  background: #ffffff;
}

.queue-list {
  padding: 10px;
}

.queue-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #ffffff;
}

.queue-item.selected {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.queue-top,
.queue-item footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.queue-top span {
  color: var(--teal-dark);
  font-weight: 700;
}

.queue-item p {
  margin: 10px 0;
  color: #2d3432;
  line-height: 1.35;
  font-size: 14px;
}

.queue-item footer {
  color: var(--muted);
  font-size: 12px;
}

.output-panel {
  background: #f9fbf8;
}

.slide-preview,
.live-output {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 16px;
}

.live-head {
  border-top: 1px solid var(--line);
}

.slide-card {
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 34px 42px;
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(8, 124, 118, 0.96), rgba(49, 93, 155, 0.96)),
    #145f70;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(8, 33, 42, 0.22);
}

.slide-reference {
  font-size: 23px;
  font-weight: 800;
}

.slide-text {
  font-size: 30px;
  line-height: 1.24;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.slide-version {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.blackout {
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: #050606;
  font-weight: 800;
}

.side-panel {
  background: #fbfcf9;
}

.caption-grid {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.caption-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.caption-card strong {
  color: var(--blue);
}

.caption-card p {
  margin: 8px 0 0;
  line-height: 1.35;
}

.settings {
  border-top: 1px solid var(--line);
  padding-bottom: 12px;
}

.settings label {
  display: grid;
  gap: 6px;
  margin: 12px;
  color: var(--muted);
  font-size: 12px;
}

.settings label input {
  color: var(--ink);
  font-size: 14px;
}

.settings .check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ink);
  font-size: 14px;
}

.settings .check-row input,
.check-row input {
  width: 18px;
  min-height: 18px;
}

.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: #18201f;
  font-size: 14px;
  font-weight: 700;
}

.settings > .button {
  margin: 0 12px;
  width: calc(100% - 24px);
}

.empty {
  color: var(--muted);
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
}

.attendee-body {
  background: #101616;
  color: #f7fbf8;
}

.attendee-shell {
  width: min(920px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  padding: 18px;
}

.attendee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-logo {
  display: block;
  width: auto;
  height: clamp(78px, 16vw, 112px);
  max-width: 64vw;
  object-fit: contain;
}

.attendee-header .product-logo,
.split-header .phone-brand-logo {
  filter: brightness(0) invert(1);
}

.attendee-live {
  min-height: 220px;
  padding: 24px;
  border-radius: 8px;
  background: #f7fbf8;
  color: #16201f;
}

.attendee-reference {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.attendee-live p {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.attendee-captions {
  display: grid;
  gap: 12px;
}

.attendee-captions article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.attendee-captions p {
  margin: 8px 0 0;
  line-height: 1.35;
}

@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .topbar,
  .workspace {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: stretch;
  }

  .top-actions .button {
    flex: 1;
  }

  .slide-preview,
  .live-output {
    min-height: 210px;
  }

  .slide-card {
    padding: 22px;
  }

  .slide-text {
    font-size: 21px;
  }
}

.phone-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, #0b3b3c 0, #145a58 220px, #f6f4ee 220px, #f6f4ee 100%);
  color: #18201f;
}

.phone-app {
  width: min(480px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  color: #ffffff;
}

.phone-brand {
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
}

.phone-brand-logo {
  display: block;
  width: auto;
  height: clamp(50px, 7vw, 66px);
  max-width: min(230px, 48vw);
  object-fit: contain;
}

.phone-status {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.phone-screen {
  display: none;
  padding-top: 16px;
}

.phone-screen.active {
  display: block;
}

.hero-block {
  padding: 28px 0 22px;
  color: #ffffff;
}

.hero-block h1 {
  margin: 0;
  max-width: 410px;
  font-size: 38px;
  line-height: 1.04;
  font-weight: 850;
}

.hero-block p {
  margin: 14px 0 0;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.4;
}

.mode-stack {
  display: grid;
  gap: 12px;
}

.mode-button,
.join-card,
.session-code,
.listener-now,
.phone-feed,
.verse-strip,
.billing-banner,
.language-roster {
  width: 100%;
  border: 1px solid rgba(24, 32, 31, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(18, 32, 30, 0.1);
}

.mode-button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}

.mode-button span {
  font-size: 19px;
  font-weight: 800;
}

.mode-button small {
  color: #66716d;
  font-size: 14px;
  line-height: 1.3;
}

.screen-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  margin-bottom: 18px;
}

.screen-head h2 {
  font-size: 22px;
}

.phone-small,
.phone-primary,
.phone-secondary,
.phone-ghost {
  min-height: 44px;
  border: 1px solid rgba(24, 32, 31, 0.12);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
}

a.phone-small,
a.phone-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.phone-primary,
a.phone-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.phone-small {
  min-height: 36px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.phone-primary {
  background: #0b6f69;
  border-color: #0b6f69;
  color: #ffffff;
  font-weight: 750;
}

.phone-secondary {
  background: #ffffff;
  color: #18201f;
  font-weight: 700;
}

.phone-ghost {
  background: transparent;
  border-color: rgba(17, 24, 39, 0.16);
  color: #374151;
  font-weight: 600;
}

.phone-ghost[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.phone-ghost .ghost-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.split-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.phone-field {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  color: #4f5b57;
  font-size: 13px;
  font-weight: 700;
}

.phone-field input,
.phone-field select,
.phone-form input,
.join-card input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8ded8;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #18201f;
}

.phone-field select {
  appearance: none;
}

.join-card,
.session-code {
  padding: 14px;
  margin: 12px 0;
}

.session-code {
  display: grid;
  gap: 8px;
  text-align: center;
}

.billing-banner {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  margin: 12px 0;
  background: #edf7f4;
  border-color: rgba(8, 124, 118, 0.18);
  box-shadow: none;
}

.billing-banner strong {
  color: #075f5a;
  font-size: 14px;
}

.billing-banner span {
  color: #4f5b57;
  font-size: 13px;
  line-height: 1.32;
}

.billing-banner.listener-pay {
  background: #fff7e8;
  border-color: rgba(162, 100, 20, 0.22);
}

.billing-banner.listener-pay strong {
  color: #8a530f;
}

.billing-banner.personal {
  background: #eef4fb;
  border-color: rgba(49, 93, 155, 0.2);
}

.billing-banner.personal strong {
  color: #315d9b;
}

.language-roster {
  display: grid;
  gap: 4px;
  padding: 12px;
  margin: 12px 0;
  background: #ffffff;
  box-shadow: none;
}

.language-roster:empty {
  display: none;
}

.language-roster strong {
  color: #18201f;
  font-size: 14px;
}

.language-roster span {
  color: #66716d;
  font-size: 13px;
  line-height: 1.35;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.setup-grid .phone-field {
  margin: 0;
}

.cost-card span {
  display: block;
}

.verse-preview {
  gap: 8px;
}

.verse-preview .phone-field {
  margin: 0;
}

.verse-preview p {
  margin: 0;
  color: #33403c;
  line-height: 1.35;
}

.verse-preview button {
  width: 100%;
}

.language-requests {
  gap: 8px;
}

.request-list {
  display: grid;
  gap: 8px;
}

.language-request-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
}

.language-request-card div {
  display: grid;
  gap: 3px;
}

.language-request-card b {
  color: #18201f;
}

.language-request-card .phone-primary,
.language-request-card .phone-secondary {
  min-height: 38px;
}

.session-code span {
  color: #66716d;
  font-size: 13px;
}

.session-code strong {
  font-size: 44px;
  letter-spacing: 4px;
}

.invite-qr {
  width: 180px;
  height: 180px;
  justify-self: center;
  border: 1px solid #d8ded8;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.session-code small {
  color: #66716d;
  overflow-wrap: anywhere;
}

.overlay-controls {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #edf0ed;
}

.overlay-controls .phone-field {
  margin: 0;
  text-align: left;
}

.overlay-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
  text-align: left;
}

.overlay-panel strong {
  color: #18201f;
  font-size: 14px;
  letter-spacing: 0;
}

.overlay-panel small {
  color: #66716d;
  line-height: 1.35;
}

.language-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 8px;
  align-items: end;
}

.language-picker .phone-field {
  margin: 0;
}

.language-picker .phone-secondary {
  min-height: 46px;
  padding-inline: 14px;
  white-space: nowrap;
}

.language-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.language-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  padding: 6px 7px 6px 12px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.05);
  cursor: pointer;
}

.language-chip span {
  font-weight: 800;
}

.language-chip b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.language-chip:hover b {
  background: #111827;
  color: #ffffff;
}

.capture-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.realtime-toggle-row {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(58, 83, 128, 0.06);
  border-radius: 8px;
  font-size: 13px;
}

.realtime-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
}

.realtime-status[data-state="connected"] {
  background: rgba(34, 197, 94, 0.12);
  color: #14532d;
}

.realtime-status[data-state="error"],
.realtime-status[data-state="disconnected"],
.realtime-status.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: #7f1d1d;
}

/* AI overlay theme panel (lives in the booth Setup tab) */
#hostOverlayThemePrompt {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  box-sizing: border-box;
}

.bx-theme-preview,
.overlay-theme-preview {
  width: 100%;
  height: 180px;
  margin-top: 10px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  border-radius: 12px;
  background: #0f172a;
  display: block;
}

/* Overlay theme template library */
.bx-template-save {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.bx-template-save input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
}

.bx-template-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bx-template-empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.bx-template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(58, 83, 128, 0.06);
}

.bx-template-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-template-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Auth tabs on the booth login screen */
.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(58, 83, 128, 0.08);
  border-radius: 10px;
  margin: 0 0 14px;
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  border-radius: 7px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.auth-tab.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.auth-only,
.demo-only {
  display: none;
}
[data-auth-current="signin"] [data-auth-pane~="signin"],
[data-auth-current="signup"] [data-auth-pane~="signup"],
[data-auth-current="demo"] [data-auth-pane~="demo"] {
  display: flex;
}
.auth-error {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #7f1d1d;
  border-radius: 8px;
  font-size: 13px;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.account-row .account-label {
  flex: 1;
  font-size: 13px;
  color: #475569;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.danger-button {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.danger-button:hover { background: #fecaca; }

.phone-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 12px 0;
}

.phone-feed,
.verse-strip {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  margin-top: 12px;
}

.phone-line {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
}

.phone-line time {
  color: #66716d;
  font-size: 12px;
}

.phone-line p {
  margin: 0;
  line-height: 1.35;
}

/* The in-progress (not-yet-finalized) utterance line — subtle green tint so it
   reads as "live, still being spoken" vs the settled lines below it. */
.phone-line--live {
  background: rgba(34, 161, 110, 0.07);
  border-color: rgba(34, 161, 110, 0.32);
}

.phone-line--live time {
  color: #1f9d63;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.verse-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #d8ded8;
  background: #fffdfa;
}

.verse-chip strong {
  color: #0b6f69;
}

.verse-chip span {
  color: #a26414;
  font-weight: 800;
}

.verse-chip p {
  grid-column: 1 / -1;
  margin: 0;
  color: #33403c;
  line-height: 1.35;
}

.verse-approve {
  grid-column: 1 / -1;
  width: 100%;
}

.listener-now {
  min-height: 170px;
  padding: 20px;
  margin: 14px 0;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(11, 111, 105, 0.96), rgba(49, 93, 155, 0.96)),
    #155e70;
}

.listener-now span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
}

.listener-now p {
  margin: 0;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.phone-empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  color: #66716d;
  text-align: center;
}

@media (max-width: 380px) {
  .phone-app {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-block h1 {
    font-size: 33px;
  }

  .listener-now p {
    font-size: 22px;
  }

  .session-code strong {
    font-size: 36px;
  }
}

.split-body {
  min-height: 100vh;
  background: #0b3b3c;
}

.split-shell {
  min-height: 100vh;
  padding: 18px;
}

.split-header {
  width: min(1120px, 100%);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #ffffff;
}

.split-layout {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.split-device {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #f6f4ee;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
}

.split-device-bar {
  padding: 12px 14px;
  color: #ffffff;
  background: #18201f;
  font-weight: 800;
}

.split-device-body {
  padding: 14px;
}

@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }

  .language-request-card {
    grid-template-columns: 1fr;
  }
}

.overlay-body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}

.overlay-body.preview {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    #24302f;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  background-size: 32px 32px;
}

/* Connection/translation state belongs to the operator preview only. The node
   remains `hidden` forever on copied stage/browser-source URLs. */
.overlay-health {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(10, 19, 19, 0.78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font: 700 13px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  backdrop-filter: blur(8px);
}

.overlay-health[hidden] { display: none; }
.overlay-health-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.overlay-health[data-status="reconnecting"] .overlay-health-dot { background: #f59e0b; }
.overlay-health[data-status="waiting"] .overlay-health-dot { background: #fbbf24; }

.caption-overlay {
  position: fixed;
  left: 50%;
  bottom: max(46px, env(safe-area-inset-bottom));
  width: min(1540px, calc(100vw - 120px));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  padding: 24px 32px 28px;
  color: #ffffff;
  background: rgba(10, 19, 19, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

.caption-overlay-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 2.4vh;
  font-weight: 800;
}

.caption-overlay-text {
  font-size: 9.3vh;
  line-height: 1.12;
  font-weight: 850;
  overflow-wrap: anywhere;
  /* Hard stop so a long sentence can never run off the top of the frame. The
     text itself is tail-trimmed to ~2 lines in live-overlay.js; this is the
     belt-and-braces for an AI theme that overrides the font size. */
  max-height: 46vh;
  overflow: hidden;
  /* Absorbs sub-pixel line-box rounding, which otherwise shaves the descenders
     off the last visible line when overflow is hidden. */
  padding-bottom: 0.08em;
}

.caption-overlay.multi-overlay .caption-overlay-text {
  font-size: 8.2vh;
  line-height: 1.14;
  max-height: 62vh;
}

/* Language label sits ABOVE its line, not in a left column.
   The old `minmax(110px, 0.22fr)` column spent ~18% of the reading width on a
   label rendered too small to read past the front rows — and buying that width
   back removes roughly one wrapped line per sentence. */
.overlay-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

.overlay-row + .overlay-row {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.overlay-row span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 2.2vh;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.overlay-row p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.caption-overlay.verse-overlay {
  width: min(1680px, calc(100vw - 120px));
}

.caption-overlay.verse-overlay .caption-overlay-text {
  font-size: 7.4vh;
  line-height: 1.16;
  /* Scripture is never tail-trimmed the way a rolling caption is, so it gets a
     taller ceiling — a long verse should be shown whole. */
  max-height: 68vh;
}

.caption-overlay.verse-overlay .overlay-row {
  gap: 8px;
}

.caption-overlay.is-waiting {
  opacity: 0.7;
}

/* ── Browser-source presets ────────────────────────────────────────────────
   Tune this overlay URL for dropping into third-party presentation software
   (ProPresenter "Web Fill", OBS/vMix "Browser source", EasyWorship/FreeShow
   web items). All opt-in via URL params — the booth defaults above are intact.
   Selectors are .overlay-body-scoped so they out-specify the AI theme CSS,
   which only targets the bare .caption-overlay/#overlayText selectors. */

/* clean=1 → caption-only: drop the small source label. */
.overlay-body.source-clean .caption-overlay-meta { display: none; }

/* chroma=<colour> → JS sets the real key colour inline on <body>; this is just
   the safety default so a chroma URL is never accidentally transparent. */
.overlay-body.chroma { background: #00ff00; }

/* box=0 → bare text, no panel bar. A heavy outline keeps captions legible
   composited over ANY video background (no dark glass to rely on). */
.overlay-body.bare .caption-overlay {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 32px;
}
/* A HARD outline, not a blur.
   Blurred shadows only darken the pixels immediately around a glyph, so over a
   bright background the interior of a thick letter stroke sat at roughly 1:1
   contrast — the text disappeared exactly where it was thickest. An 8-direction
   solid outline at 0.055em plus a soft scrim keeps the worst case above the
   WCAG 1.4.3 3:1 floor for large text on any backdrop. */
.overlay-body.bare .caption-overlay-text,
.overlay-body.bare .caption-overlay-meta {
  text-shadow:
    0 0 0.35em rgba(0, 0, 0, 0.55),
    0.055em 0 0 rgba(0, 0, 0, 0.92),
    -0.055em 0 0 rgba(0, 0, 0, 0.92),
    0 0.055em 0 rgba(0, 0, 0, 0.92),
    0 -0.055em 0 rgba(0, 0, 0, 0.92),
    0.04em 0.04em 0 rgba(0, 0, 0, 0.92),
    -0.04em 0.04em 0 rgba(0, 0, 0, 0.92),
    0.04em -0.04em 0 rgba(0, 0, 0, 0.92),
    -0.04em -0.04em 0 rgba(0, 0, 0, 0.92);
}

/* pos=top|center|bottom → vertical anchor (default stays bottom lower-third). */
.overlay-body.pos-top .caption-overlay {
  top: max(46px, env(safe-area-inset-top));
  bottom: auto;
}
.overlay-body.pos-center .caption-overlay {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* Bible is an independent presentation layer. Caption position changes must not
   drag Scripture with them; its saved Screen setting supplies its own anchor. */
.overlay-verse-layer {
  position: fixed;
  z-index: 20;
  left: 5vw;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  pointer-events: none;
  text-shadow:
    0 0 .5vh rgba(0, 0, 0, .55),
    .055em 0 0 rgba(0, 0, 0, .92),
    -.055em 0 0 rgba(0, 0, 0, .92),
    0 .055em 0 rgba(0, 0, 0, .92),
    0 -.055em 0 rgba(0, 0, 0, .92);
}

.overlay-verse-layer .overlay-verses {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
}

/* The independent Bible layer inherits its own selected look, not caption size. */
.overlay-verse-layer .verse-row p {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  margin: 0;
}
.caption-overlay.has-verse #overlayText { max-height: none; overflow: visible; }
.caption-overlay.captions-off { background: transparent; border: 0; box-shadow: none; }

/* Light app shell: white operational panels, soft shadows, minimal color. */
.phone-body {
  background: #f4f5f7;
  color: #111827;
}

.phone-app {
  width: min(540px, 100%);
}

.phone-top,
.hero-block,
.screen-head,
.mode-button,
.join-card,
.session-code,
.listener-now,
.phone-feed,
.verse-strip,
.billing-banner,
.language-roster,
.overlay-panel,
.split-device {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.phone-top {
  min-height: 64px;
  padding: 12px 14px;
  color: #111827;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-brand {
  color: #111827;
}

.phone-status {
  color: #6b7280;
}

.hero-block {
  padding: 24px;
  color: #111827;
}

.hero-block h1 {
  font-size: 34px;
}

.hero-block p {
  color: #4b5563;
}

.listener-site .phone-app {
  width: min(620px, 100%);
}

.listener-site .phone-screen {
  padding-top: 14px;
}

.join-hero,
.church-entry {
  display: grid;
  gap: 10px;
  padding: 28px 24px;
  margin-bottom: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.join-hero h1,
.church-entry h1 {
  margin: 0;
  color: #111827;
  font-size: 40px;
  line-height: 1.02;
  font-weight: 850;
  letter-spacing: 0;
}

.join-hero p,
.church-entry p {
  margin: 0;
  color: #4b5563;
  font-size: 18px;
  line-height: 1.42;
}

.join-code-card {
  display: grid;
  gap: 12px;
}

.join-code-card .phone-field {
  margin: 0;
}

.join-code-card #joinCode {
  min-height: 64px;
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.church-site {
  background: #f6f7f9;
}

.church-site .phone-app {
  width: min(1280px, calc(100% - 40px));
  padding: 18px 0 36px;
}

.church-site .phone-top {
  min-height: 58px;
  padding: 0 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.church-site .phone-brand {
  font-size: 25px;
}

.church-site .phone-status {
  font-size: 13px;
}

.church-site .top-actions .phone-small {
  min-height: 38px;
  box-shadow: none;
}

.church-site .booth-screen.active {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "status status"
    "tabs page";
  align-items: start;
  align-content: start;
  gap: 16px 18px;
  min-height: 0;
  padding: 20px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}

.church-site .screen-head {
  grid-area: head;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.church-site .screen-head h2 {
  font-size: 22px;
}

.church-site .screen-head .phone-small {
  min-height: 36px;
  padding-inline: 12px;
  box-shadow: none;
}

.service-status-strip {
  grid-area: status;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #f9fafb;
}

/* Booth "now live" pinned cards — sit above the tab content so the technician
   never has to leave Live to approve a verse or see what's on the projector. */
.booth-pinned {
  display: grid;
  gap: 10px;
  margin: 12px 0 6px;
}

.booth-pinned:empty,
.booth-pinned[hidden] {
  display: none;
}

.pinned-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.pinned-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.pinned-card header strong {
  font-size: 18px;
  color: #111827;
}

.pinned-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}

.pinned-tag--live {
  background: #dcfce7;
  color: #166534;
}

.pinned-tag--warn {
  background: #fef3c7;
  color: #92400e;
}

.pinned-tag--idle {
  background: #e5e7eb;
  color: #4b5563;
}

.pinned-meta {
  color: #6b7280;
  font-size: 13px;
}

.pinned-verse-text,
.pinned-caption-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: #111827;
}

.pinned-verse--pending {
  border-color: #f59e0b;
  background: #fffbeb;
}

.pinned-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-status-strip article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid rgba(17, 24, 39, 0.08);
  background: transparent;
  box-shadow: none;
}

.service-status-strip article:last-child {
  border-right: 0;
}

.live-summary-grid article,
.overlay-preview-card {
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.service-status-strip span,
.live-summary-grid span,
.overlay-preview-card small,
.bible-version-row small {
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.service-status-strip strong,
.live-summary-grid strong {
  min-width: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.service-status-strip article[data-state="live"] strong {
  color: #166534;
}

.service-status-strip article[data-state="warn"] strong {
  color: #92400e;
}

.service-status-strip article[data-state="idle"] strong {
  color: #6b7280;
}

.service-status-strip article[data-state="warn"] {
  background: #fffbeb;
}

.service-status-strip article[data-state="live"] {
  background: #f0fdf4;
}

.live-summary-grid,
.overlay-preview-grid {
  display: grid;
  gap: 10px;
}

.live-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-summary-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 100px;
  padding: 12px;
}

.overlay-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overlay-preview-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.overlay-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.overlay-preview-head strong {
  color: #111827;
  font-size: 14px;
}

.overlay-preview-head span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.mini-overlay {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 12px;
  border-radius: 12px;
  color: #ffffff;
  background: #111827;
}

.mini-overlay div + div {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mini-overlay span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 850;
}

.mini-overlay p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.bible-mini p {
  font-size: 14px;
  line-height: 1.28;
}

.bible-version-controls {
  display: grid;
  gap: 8px;
}

.bible-version-row {
  gap: 6px;
  margin: 0;
}

.bible-version-row > span {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.mode-button {
  min-height: 88px;
  border-color: rgba(17, 24, 39, 0.08);
}

.mode-button small,
.session-code span,
.session-code small,
.language-roster span,
.billing-banner span,
.overlay-panel small,
.phone-line time {
  color: #6b7280;
}

.screen-head {
  grid-template-columns: auto 1fr;
  padding: 12px;
  color: #111827;
}

.screen-head h2 {
  color: #111827;
}

.phone-small,
.phone-secondary {
  border-color: rgba(17, 24, 39, 0.1);
  background: #ffffff;
  color: #111827;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}

.phone-primary {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.18);
}

.phone-ghost {
  border-color: rgba(17, 24, 39, 0.14);
  background: transparent;
  color: #4b5563;
  box-shadow: none;
}

.phone-ghost[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.phone-primary:disabled,
.phone-secondary:disabled,
.phone-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.church-site .bx-primary:disabled,
.church-site .bx-secondary:disabled,
.church-site .bx-quiet:disabled,
.church-site .bx-ghost:disabled,
.church-site .bx-danger:disabled,
.church-site .bx-panic:disabled {
  opacity: 0.55;
  cursor: wait;
}

.phone-field {
  color: #374151;
}

.phone-field input,
.phone-field select,
.phone-form input,
.join-card input {
  border-color: rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  background: #ffffff;
}

.phone-field select {
  appearance: auto;
  cursor: pointer;
}

.listener-screen .listener-now {
  min-height: 250px;
  display: grid;
  align-content: center;
  margin-top: 0;
  color: #111827;
  background: #ffffff;
}

.listener-now span {
  color: #6b7280;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.listener-now p {
  color: #111827;
  font-size: 30px;
  line-height: 1.18;
}

.listener-controls {
  grid-template-columns: 1.15fr 0.85fr 0.9fr;
}

.advanced-action {
  color: #4b5563;
}

.listener-language-field,
.compact-form,
.listener-billing {
  margin-top: 12px;
}

.billing-banner {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.08);
}

.church-site .billing-banner,
.church-site .language-roster,
.church-site .overlay-panel,
.church-site .phone-feed,
.church-site .verse-strip,
.church-site .session-code {
  box-shadow: none;
}

.church-site .overlay-panel,
.church-site .language-roster,
.church-site .phone-feed,
.church-site .verse-strip,
.church-site .session-code {
  border-radius: 12px;
}

.church-site .overlay-panel {
  background: #ffffff;
}

.church-site .phone-primary,
.church-site .phone-secondary {
  box-shadow: none;
}

.church-site .split-buttons {
  margin: 0;
}

.billing-banner strong,
.billing-banner.personal strong,
.billing-banner.listener-pay strong {
  color: #111827;
}

.language-roster,
.phone-feed,
.verse-strip {
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
}

.phone-line,
.language-request-card,
.verse-chip {
  border-color: rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

.verse-chip strong {
  color: #111827;
}

.verse-chip span {
  color: #9a6700;
}

.split-body {
  background: #f4f5f7;
}

.split-header {
  width: min(1220px, calc(100% - 32px));
  padding: 12px 14px;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.split-layout {
  width: min(1220px, calc(100% - 32px));
  grid-template-columns: minmax(520px, 1.1fr) minmax(360px, 0.9fr);
}

.split-device {
  border-radius: 16px;
  background: #ffffff;
}

.split-device-bar {
  color: #111827;
  background: #ffffff;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.split-device-body {
  background: #f9fafb;
}

.booth-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: start;
  margin-bottom: 0;
  padding: 5px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #f7f8fa;
}

.booth-tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.booth-tab.active {
  color: #ffffff;
  background: #111827;
  border-color: #111827;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
}

.booth-tab:focus-visible,
.phone-primary:focus-visible,
.phone-secondary:focus-visible,
.phone-small:focus-visible,
.language-chip:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.18);
  outline-offset: 2px;
}

.booth-page {
  display: none;
  gap: 12px;
  padding-top: 2px;
}

.booth-page.active {
  display: grid;
  grid-area: page;
}

.booth-screen .booth-tabs {
  margin: 0;
}

.booth-screen .booth-page {
  margin-top: 0;
}

.church-site .booth-page[data-host-panel="service"].active {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 14px;
}

.church-site .booth-page[data-host-panel="service"] > .split-buttons {
  grid-column: 1;
  grid-template-columns: minmax(220px, 280px) minmax(180px, 220px);
  justify-content: start;
  margin: 0;
}

.church-site .booth-page[data-host-panel="service"] > .split-buttons .phone-primary,
.church-site .booth-page[data-host-panel="service"] > .split-buttons .phone-secondary {
  min-height: 44px;
  box-shadow: none;
}

.church-site .booth-page[data-host-panel="service"] .billing-banner {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: none;
}

.church-site .compact-session-code {
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, 1fr) 80px minmax(160px, 190px);
  grid-template-rows: auto auto auto;
  align-items: center;
  text-align: left;
  gap: 12px;
  margin: 0;
  padding: 12px;
  box-shadow: none;
}

.church-site .booth-page[data-host-panel="setup"].active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.church-site .booth-page[data-host-panel="setup"] .setup-grid,
.church-site .booth-page[data-host-panel="setup"] .language-approval-row,
.church-site .booth-page[data-host-panel="setup"] #hostSaveSetupButton {
  grid-column: 1 / -1;
}

.church-site .compact-session-code span {
  grid-column: 1;
  grid-row: 1;
}

.church-site .compact-session-code strong {
  grid-column: 1;
  grid-row: 2;
  font-size: 34px;
  line-height: 1;
}

.church-site .compact-session-code small {
  grid-column: 1;
  grid-row: 3;
}

.church-site .compact-session-code .invite-qr {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 72px;
  height: 72px;
}

.church-site .compact-session-code #copyInviteButton {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
}

.church-site .compact-session-code #downloadOverlayLink {
  grid-column: 3;
  grid-row: 2 / span 2;
  min-height: 40px;
  width: 100%;
}

.church-site .booth-page[data-host-panel="outputs"].active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.church-site .booth-page[data-host-panel="outputs"] .language-requests,
.church-site .booth-page[data-host-panel="outputs"] .overlay-preview-grid {
  grid-column: 1 / -1;
}

.compact-session-code {
  min-height: 0;
}

.split-device .session-code,
.split-device .overlay-panel,
.split-device .billing-banner,
.split-device .language-roster,
.split-device .phone-feed,
.split-device .verse-strip,
.split-device .listener-now {
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}

@media (max-width: 900px) {
  .split-header,
  .split-layout {
    width: min(100%, calc(100% - 20px));
  }

  .church-site .phone-app {
    width: min(100%, calc(100% - 20px));
  }

  .church-site .booth-screen.active {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "status"
      "tabs"
      "page";
    min-height: 0;
    padding: 14px;
  }

  .booth-tabs {
    flex-direction: row;
    overflow-x: auto;
  }

  .booth-tab {
    min-width: 110px;
    text-align: center;
  }

  .service-status-strip,
  .live-summary-grid,
  .overlay-preview-grid,
  .church-site .booth-page[data-host-panel="service"].active,
  .church-site .booth-page[data-host-panel="setup"].active,
  .church-site .booth-page[data-host-panel="outputs"].active {
    grid-template-columns: 1fr;
  }

  .church-site .booth-page[data-host-panel="service"] .billing-banner {
    grid-column: auto;
    grid-row: auto;
  }

  .service-status-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  }

  .service-status-strip article:last-child {
    border-bottom: 0;
  }

  .church-site .booth-page[data-host-panel="service"] > .split-buttons,
  .church-site .compact-session-code {
    grid-template-columns: 1fr;
  }

  .church-site .compact-session-code .invite-qr,
  .church-site .compact-session-code small {
    grid-column: auto;
    grid-row: auto;
  }

  .listener-controls {
    grid-template-columns: 1fr;
  }

  .language-picker {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .split-shell {
    height: 100vh;
    overflow: hidden;
  }

  .split-layout {
    height: calc(100vh - 104px);
  }

  .split-device {
    max-height: 100%;
  }

  .split-device-body {
    height: calc(100% - 50px);
    overflow: hidden;
  }

  .split-device .booth-page.active {
    height: calc(100% - 52px);
    min-height: 0;
  }

  .booth-page[data-split-panel="live"].active,
  .booth-page[data-split-panel="bible"].active {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .booth-page .phone-feed,
  .booth-page .verse-strip {
    max-height: none;
    min-height: 0;
  }

  .booth-page[data-split-panel="bible"] .verse-strip {
    overflow: hidden;
  }
}

/* Listener state hooks: hide post-join controls until a session is active,
   and hide pre-join chrome once joined. */
body[data-listener-state="idle"] .post-join-only {
  display: none !important;
}

body[data-listener-state="joined"] .pre-join-only {
  display: none !important;
}

/* Once joined, the live screen wants to own the viewport — trim the generous
   pre-join padding so the translation box can fill it without a second scrollbar. */
body[data-listener-state="joined"] main.lv-app {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 16px;
}

.other-language,
.advanced-disclosure {
  margin: 8px 0;
  font-size: 13px;
  color: #4b5563;
}

.other-language > summary,
.advanced-disclosure > summary {
  cursor: pointer;
  padding: 6px 2px;
  font-weight: 600;
  color: #4b5563;
  list-style: none;
}

.other-language > summary::-webkit-details-marker,
.advanced-disclosure > summary::-webkit-details-marker {
  display: none;
}

.other-language[open] > summary,
.advanced-disclosure[open] > summary {
  color: #111827;
}

.advanced-disclosure {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.advanced-hint {
  margin: 6px 2px 10px;
  color: #6b7280;
  line-height: 1.4;
}

/* Audio toggle as a ghost icon button — keep label predictable. */
.listener-screen .listener-controls {
  grid-template-columns: 1.4fr 0.85fr;
}

.listener-controls .phone-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Live Bible verse card — sits between the live caption and the scrubber.
   Visible only when the booth has approved a verse to put on the projector. */
.verse-card {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #fffaf0;
  display: grid;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}

.verse-card[hidden] {
  display: none;
}

.verse-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verse-card-icon {
  font-size: 18px;
  line-height: 1;
}

.verse-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verse-card-meta strong {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.verse-card-meta span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
}

.verse-card-text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.45;
  color: #111827;
}

/* Scrubber row — sits under the live caption card, lets the listener
   drag back through caption history. */
.scrubber-row {
  margin: 14px 4px 4px;
  touch-action: none;
}

.scrubber {
  position: relative;
  height: 28px;
  cursor: grab;
  user-select: none;
}

.scrubber:active {
  cursor: grabbing;
}

.scrubber-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(17, 24, 39, 0.1);
}

.scrubber-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111827;
  border-radius: 2px;
}

.scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
}

.return-to-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 4px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}

.return-to-live[hidden] {
  display: none;
}

.return-to-live .rtl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111827;
}

.return-to-live .rtl-behind {
  color: #6b7280;
  font-weight: 500;
}

/* Footer actions on the listener — share + ask */
.listener-footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.listener-footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* Ask-panel: chat-with-sermon */
.ask-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #ffffff;
  display: grid;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.ask-panel[hidden] {
  display: none;
}

.ask-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ask-panel-head strong {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.ask-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-panel-export {
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.ask-panel-export[hidden] {
  display: none;
}

.ask-panel-close {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
}

.ask-panel-thread {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 4px 2px;
}

.ask-panel-thread:empty::before {
  content: "Ask anything about what was said. The answer comes from this sermon's transcript.";
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
}

.ask-msg {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ask-msg--user {
  background: #f3f4f6;
  color: #111827;
  align-self: end;
  max-width: 88%;
}

.ask-msg--assistant {
  background: #fffaf0;
  color: #111827;
  border: 1px solid rgba(146, 64, 14, 0.12);
}

.ask-msg p {
  margin: 0 0 6px;
}

.ask-citations {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

.ask-citations li + li {
  margin-top: 3px;
}

.ask-panel-form {
  display: flex;
  gap: 8px;
}

.ask-panel-form input {
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #fafbff;
  color: #111827;
}

.ask-panel-hint {
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.4;
}

/* --- Setup grouping (fieldsets) ---------------------------------------- */
.setup-group {
  margin: 0;
  padding: 14px 14px 6px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

.setup-group + .setup-group {
  margin-top: 10px;
}

.setup-group > legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

.setup-group .phone-field {
  margin: 8px 0;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* --- Service tab section heading --------------------------------------- */
.booth-section-heading {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

/* --- Outputs panel: header + action row -------------------------------- */
.overlay-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.overlay-panel-hint {
  color: #6b7280;
  font-size: 12px;
}

.overlay-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.overlay-actions .phone-primary {
  min-width: 96px;
}

.overlay-link-action {
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.overlay-link-action:hover {
  color: #111827;
}

.overlay-link-action--danger {
  color: #b91c1c;
}

.overlay-link-action--danger:hover {
  color: #7f1d1d;
}

/* Applied to #overlayText, NOT the caption box.
   It used to sit on the box, whose keyframes carried `translateX(-50%)` because
   that is how the default lower-third centres itself. The stage and layout
   surfaces centre with left/right offsets and `transform: none`, so the keyframe
   shoved the caption half its own width to the left for the whole 180ms — a
   visible sideways jump on the projected screen every time it fired. Animating
   the text keeps the box still and works identically on all three surfaces. */
.caption-pop {
  animation: caption-pop 180ms ease-out;
}

@keyframes caption-pop {
  from {
    transform: translateY(8px);
    opacity: 0.72;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caption-pop {
    animation: none;
  }
}

@media (max-width: 760px) {
  .caption-overlay {
    width: calc(100vw - 32px);
    bottom: 22px;
    padding: 18px 20px 20px;
  }

  .caption-overlay-text {
    font-size: 32px;
  }

  .overlay-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================================
   Listener app — visual parity with the native LiveScreen (Mock-4 blue minimal)
   All classes are `lv-*` so they don't collide with the older listener CSS.
   ============================================================================ */

:root {
  --lv-bg: #ffffff;
  /* Focus ring. Lapis #274e8d is 8.20:1 on white — the night surface swaps it
     for the pale blue below, which is 9.09:1 there and 2.11:1 here. */
  --lv-focus: #274e8d;
  --lv-ink: #0f172a;
  --lv-ink-soft: #475569;
  --lv-ink-muted: #94a3b8;
  --lv-rule: rgba(15, 23, 42, 0.08);
  --lv-blue: #5b7cb5;
  --lv-blue-soft: #dde6f3;
  --lv-blue-wash: #f3f6fb;
  --lv-blue-ink: #3a5380;
  --lv-warm-wash: #fdf6ec;
  --lv-warm-ink: #92400e;
}

/* The listener body becomes a full-width white canvas, mobile-first.
   Override the older .phone-body chrome so the new design owns the screen. */
.listener-site,
.listener-site .phone-body {
  background: var(--lv-bg) !important;
  color: var(--lv-ink);
  overflow-x: hidden;
}

.listener-site *,
.listener-site *::before,
.listener-site *::after {
  box-sizing: border-box;
}

.listener-site .phone-app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  background: var(--lv-bg);
  box-shadow: none;
  min-height: 100vh;
}

.listener-site main.lv-app {
  width: 100%;
  max-width: 480px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 20px 28px;
  background: var(--lv-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.legacy-listener-pieces { display: none !important; }

.listener-site[data-listener-state="joined"] {
  --lv-bg: #090f18;
  --lv-focus: #65b9ff;
  --lv-ink: #f7f3ec;
  --lv-ink-soft: rgba(247, 243, 236, 0.68);
  --lv-ink-muted: rgba(247, 243, 236, 0.68);
  --lv-rule: rgba(255, 255, 255, 0.10);
  --lv-blue: #2298ff;
  --lv-blue-soft: rgba(39, 151, 255, 0.28);
  --lv-blue-wash: rgba(255, 255, 255, 0.11);
  --lv-blue-ink: #40a7ff;
  --lv-warm-wash: rgba(58, 43, 29, 0.86);
  --lv-warm-ink: #fb923c;
  background:
    radial-gradient(circle at 72% 64%, rgba(33, 118, 166, 0.10), transparent 36%),
    linear-gradient(180deg, #10151d 0%, #090f18 42%, #071016 100%) !important;
}

.listener-site[data-listener-state="joined"] main.lv-app {
  background: transparent;
  max-width: 520px;
  height: 100dvh;
  min-height: 100dvh;
  /* Mirrored into vars so the transcript's negative margins can reach the
     exact viewport edges behind the floating chrome. */
  --lv-live-safe-top: max(10px, env(safe-area-inset-top));
  --lv-live-safe-bottom: max(12px, env(safe-area-inset-bottom));
  padding-top: var(--lv-live-safe-top);
  padding-bottom: var(--lv-live-safe-bottom);
  overflow: hidden;
  overflow-x: clip;
}

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

/* ----- Shared primitives ------------------------------------------------- */

.lv-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--lv-ink-soft);
  text-transform: uppercase;
}

.lv-serif-h1 {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--lv-ink);
  margin: 6px 0 0;
}

.lv-sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lv-ink-soft);
}

/* ----- Pre-join screen --------------------------------------------------- */

.lv-join {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  min-height: calc(100dvh - 52px);
  padding-top: clamp(54px, 10dvh, 94px);
}

.lv-scan-entry {
  display: none;
}

html[data-listener-entry="scan"] .listener-site[data-listener-state="idle"] .lv-join {
  justify-content: center;
  padding-top: 0;
}

/* Organization profiles and room doors are scan destinations too. Keep the
   resolved room and its join action visible alongside the scan card. */
html[data-listener-entry="scan"]:not([data-scan-state="manual"]) .listener-site[data-listener-state="idle"] .lv-join > :not(.lv-scan-entry):not(#churchProfilePanel):not(.koine-room-door) {
  display: none !important;
}

#churchProfilePanel {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Cover photo above the brand header on /c/:slug. */
#churchProfilePanel .lv-org-cover {
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

#churchProfilePanel .lv-org-cover img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* Org brand header on /c/:slug: logo beside the about/website blurb. */
#churchProfilePanel .lv-org-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lv-org-logo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.15);
}

.lv-org-unit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

/* Location line under the org logo — the fastest way to tell two similarly
   named organizations apart. */
.lv-org-city {
  font-weight: 600;
  opacity: 0.75;
}

/* Inline marker on a channel that requires the org's acceptance. */
.lv-org-members-only {
  font-style: normal;
  font-size: 0.78em;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.18);
  opacity: 0.85;
}

.lv-org-unit-thumb {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.15);
}

#churchProfilePanel .lv-simple-card button {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 8px;
}

#churchProfilePanel .lv-live-choice {
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(39, 78, 141, 0.14);
  border-radius: 13px;
  background: rgba(39, 78, 141, 0.06);
  box-shadow: none;
}
#churchProfilePanel .lv-live-choice img,
#churchProfilePanel .lv-live-choice-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  object-fit: cover;
  background: rgba(39, 78, 141, 0.12);
  color: #274e8d;
  font-family: Georgia, serif;
  font-size: 22px;
}
.lv-live-choice-copy { min-width: 0; display: grid; gap: 3px; }
.lv-live-choice-copy strong,
.lv-live-choice-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-live-choice-copy small { opacity: 0.7; font-size: 0.82rem; }

html[data-listener-entry="scan"]:not([data-scan-state="manual"]) .listener-site[data-listener-state="idle"] .lv-scan-entry {
  display: flex;
}

html[data-listener-entry="scan"][data-scan-state="manual"] .listener-site[data-listener-state="idle"] .lv-scan-entry {
  display: none;
}

html[data-listener-entry="scan"][data-scan-state="manual"] .listener-site[data-listener-state="idle"] .lv-join-hero {
  display: flex !important;
}

html[data-listener-entry="scan"][data-scan-state="manual"] .listener-site[data-listener-state="idle"][data-listener-return="left"] .lv-join > :not(.lv-rejoin-panel) {
  display: none !important;
}

.listener-site[data-listener-return="left"] .lv-rejoin-panel {
  display: flex;
}

.lv-scan-entry {
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  width: min(100%, 390px);
  margin: 0 auto;
}

.lv-scan-mark {
  width: 78px;
  height: 78px;
  margin-bottom: 8px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 20px 50px rgba(22, 55, 94, 0.14);
}

.lv-scan-mark img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.lv-scan-entry .lv-serif-h1 {
  margin-top: 0;
}

.lv-scan-entry .lv-sub {
  max-width: 32ch;
  margin-top: 0;
}

.lv-rejoin-panel {
  width: min(100%, 390px);
  margin: 0 auto;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 12px;
}

.lv-rejoin-panel[hidden] {
  display: none;
}

.lv-rejoin-panel .lv-primary {
  width: 100%;
  margin-top: 8px;
}

.lv-rejoin-panel .lv-sub {
  max-width: 32ch;
  margin-top: 0;
}

.lv-rejoin-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--lv-blue-ink);
  background: var(--lv-blue-wash);
}

.lv-rejoin-icon svg {
  width: 31px;
  height: 31px;
}

.lv-scan-progress {
  display: inline-flex;
  gap: 7px;
  height: 18px;
  align-items: center;
  margin-top: 8px;
}

.lv-scan-progress span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv-blue);
  animation: lv-scan-pulse 1.15s ease-in-out infinite;
}

.lv-scan-progress span:nth-child(2) { animation-delay: 0.14s; }
.lv-scan-progress span:nth-child(3) { animation-delay: 0.28s; }

@keyframes lv-scan-pulse {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
  35% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-scan-progress span { animation: none; opacity: 0.7; }
}

.lv-scan-retry {
  width: 100%;
  margin-top: 8px;
}

.lv-quiet-button {
  appearance: none;
  border: 0;
  padding: 8px 12px;
  background: transparent;
  color: var(--lv-ink-soft);
  font: 700 14px/1.2 var(--lv-sans, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lv-join-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 12px 18px;
  text-align: center;
}

.lv-join-hero .lv-kicker { color: var(--lv-blue-ink); }
.lv-join-hero .lv-serif-h1 { margin: 0; font-family: var(--lv-sans, system-ui, sans-serif); font-weight: 800; }
.lv-join-hero .lv-sub { max-width: 31ch; margin: 0; }

.lv-brand-wordmark {
  display: block;
  width: min(216px, 62vw);
  height: auto;
}

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

.lv-join-wave {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--lv-blue-wash);
  color: var(--lv-blue-ink);
  box-shadow: 0 18px 48px rgba(20, 80, 145, 0.10);
}

.lv-join-wave span {
  width: 4px;
  border-radius: 999px;
  background: currentColor;
}

.lv-join-wave span:nth-child(1),
.lv-join-wave span:nth-child(5) { height: 16px; opacity: 0.56; }
.lv-join-wave span:nth-child(2),
.lv-join-wave span:nth-child(4) { height: 30px; opacity: 0.76; }
.lv-join-wave span:nth-child(3) { height: 42px; }

.lv-brand-logo {
  display: block;
  width: auto;
  height: clamp(96px, 18vw, 138px);
  max-width: 78vw;
  object-fit: contain;
  margin-bottom: 10px;
}

.lv-mode-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #f4f7fb;
}

/* The scan web listener mirrors the App Clip: one focused join job. Personal,
   Host, History, and Intelligence belong to the installed app. */
.listener-site .lv-mode-pills,
.listener-site .lv-quiet-link {
  display: none;
}

.listener-site[data-listener-mode="listener"] .lv-join-hero .lv-sub,
.listener-site[data-listener-mode="listener"] .listener-only-block > .lv-field-label {
  display: none;
}

.lv-mode-pill {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 13px;
  font-size: 15px;
  font-weight: 750;
  color: var(--lv-ink-soft);
  cursor: pointer;
  text-align: center;
}

.lv-mode-pill.is-active {
  background: #ffffff;
  color: var(--lv-ink);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

.lv-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.listener-site[data-listener-mode="listener"] .lv-join > .lv-field-group:not(.listener-only-block) {
  display: none;
}

.listener-site[data-listener-mode="personal"] .lv-join > .lv-field-group:not(.listener-only-block) {
  display: flex;
}

.listener-site[data-listener-mode="listener"] .personal-only-block {
  display: none !important;
}

.lv-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--lv-ink-soft);
  text-transform: uppercase;
}

.lv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-chip {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-chip.is-active {
  background: var(--lv-blue-wash);
  border-color: var(--lv-blue-soft);
  color: var(--lv-blue-ink);
}

.lv-other-lang {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lv-other-lang input {
  flex: 1;
  height: 44px;
  border: 1px solid var(--lv-rule);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  background: #fafbff;
  color: var(--lv-ink);
}

.lv-other-lang-btn {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 12px;
  padding: 0 16px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-code-card {
  margin: 0;
}

.lv-code-card input {
  width: 100%;
  height: 86px;
  border: 1px solid var(--lv-rule);
  border-radius: 26px;
  padding: 0 18px;
  font-size: clamp(40px, 12vw, 56px);
  letter-spacing: 6px;
  font-weight: 600;
  color: var(--lv-ink);
  text-align: center;
  background: #ffffff;
  text-transform: uppercase;
  box-sizing: border-box;
  box-shadow: 0 18px 48px rgba(20, 32, 54, 0.08);
}

.lv-error {
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
}

.lv-primary {
  appearance: none;
  border: 0;
  height: 56px;
  border-radius: 999px;
  background: var(--lv-ink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.lv-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.listener-site[data-listener-mode="listener"] #joinPrimaryButton {
  display: none;
}

.lv-secondary {
  appearance: none;
  border: 1px solid var(--lv-rule);
  min-height: 48px;
  border-radius: 14px;
  background: #ffffff;
  color: var(--lv-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.lv-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lv-demo-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--lv-rule);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(20, 32, 54, 0.08);
}

.lv-demo-card h2 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--lv-ink);
}

.lv-demo-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--lv-rule);
  border-radius: 13px;
  padding: 0 13px;
  box-sizing: border-box;
  background: #fafbff;
  color: var(--lv-ink);
  font-size: 14px;
  font-weight: 600;
}

.lv-demo-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(140px, 1.2fr);
  gap: 10px;
}

.lv-demo-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lv-demo-preview,
.lv-demo-video {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--lv-rule);
  background: #0b1020;
  aspect-ratio: 16 / 9;
}

.lv-demo-preview[hidden],
.lv-demo-video[hidden] { display: none; }

.lv-demo-preview iframe,
.lv-demo-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lv-demo-video {
  margin: 0 0 10px;
  flex-shrink: 0;
}

.lv-personal-demo {
  margin: 0 0 10px;
  flex-shrink: 0;
}

.lv-error[data-tone="info"] { color: var(--lv-ink-muted); }

.lv-quiet-link {
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  color: var(--lv-ink-muted);
  text-decoration: none;
  padding: 8px 0 4px;
}

/* ----- Live screen ------------------------------------------------------- */

.lv-live {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: calc(100dvh - 52px);
  min-height: 0;
  overflow: hidden;
}

.listener-site[data-listener-state="joined"] .lv-live {
  height: auto;
}

.lv-live-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}

/* App header row: back | centered title | dot + gear. Symmetric side columns so
   the title is truly centered, like the app's 82pt title padding. */
.lv-title-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  min-height: 44px;
}

.lv-title-row .lv-leave { justify-self: start; }
.lv-title-row .lv-live-actions { justify-self: end; }

/* The progressive scroll-edge chrome behind the header — the app's
   ScrollEdgeChrome: a masked backdrop blur plus a background-tinted scrim that
   fades out, so transcript text glides under the header and dims/blurs out.
   Spans past the page paddings to the viewport edges. */
.listener-site[data-listener-state="joined"] .lv-live-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  right: -20px;
  top: calc(-1 * var(--lv-live-safe-top, 10px));
  /* Cover the FULL chrome column (header + captions + gate = --lv-live-clear,
     measured by phone.js) plus the fade tail, not just this header element. */
  height: calc(var(--lv-live-safe-top, 10px) + var(--lv-live-clear, 128px) + 42px);
  bottom: auto;
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 92%);
  background: linear-gradient(
    to bottom,
    rgba(9, 15, 24, 0.62) 0%,
    rgba(9, 15, 24, 0.30) 30%,
    rgba(9, 15, 24, 0.10) 55%,
    transparent 74%
  );
}

.lv-leave {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lv-ink);
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.lv-leave:active {
  transform: scale(0.96);
}

.lv-tools-menu {
  position: relative;
  margin-left: 0;
}

.lv-tools-menu summary {
  list-style: none;
}

.lv-tools-menu summary::-webkit-details-marker {
  display: none;
}

/* Plain gearshape glyph — the app's settings button has no circle chrome. */
.lv-menu-button {
  appearance: none;
  width: 38px;
  height: 42px;
  border-radius: 12px;
  color: var(--lv-ink);
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lv-menu-button[aria-expanded="true"] { color: var(--lv-blue-ink); }

.lv-tools-menu[open] .lv-menu-button {
  background: rgba(255, 255, 255, 0.16);
}

.lv-live-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* Compact live tools: reading size, verse visibility, save, and recordings. */
.lv-top-controls {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 5px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  background: rgba(20, 27, 37, 0.92);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.lv-tools-menu:not([open]) .lv-top-controls {
  display: none;
}

.lv-menu-session {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 11px 0 7px;
  margin-right: 2px;
  border-right: 1px solid var(--lv-rule);
  color: var(--lv-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.lv-menu-session[hidden] {
  display: none;
}

/* Reading-size stepper (A− / A+) — small A on the left, big A on the right. */
.lv-textsize {
  display: inline-flex;
  gap: 2px;
  padding-right: 3px;
  margin-right: 3px;
  border-right: 1px solid var(--lv-rule);
}
.lv-text-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-width: 34px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--lv-ink-soft);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lv-text-btn:active { transform: scale(0.96); }
.lv-text-btn:hover { background: rgba(255, 255, 255, 0.11); }
.lv-text-smaller { font-size: 12px; }
.lv-text-larger { font-size: 17px; }
.lv-tool-btn[hidden] { display: none; }

.lv-menu-action {
  appearance: none;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--lv-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 750 12px/1 var(--lv-sans, system-ui, sans-serif);
  white-space: nowrap;
  cursor: pointer;
}

.lv-menu-action:hover,
.lv-menu-action:active {
  background: rgba(255, 255, 255, 0.15);
}

.lv-account-status {
  color: var(--lv-ink-muted);
  font-size: 11px;
  font-weight: 800;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-account-status[hidden] {
  display: none;
}

.lv-account-button {
  width: auto;
  min-width: 70px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

/* Bible-verse on/off — book icon. Tinted blue when on, muted/strike when off. */
.lv-verse-toggle,
.lv-transcript-toggle { color: var(--lv-blue-ink); padding: 0; position: relative; overflow: hidden; }
.lv-verse-toggle.is-off,
.lv-transcript-toggle.is-off { color: var(--lv-ink-muted); background: var(--lv-blue-wash); }
.lv-verse-toggle.is-off::after,
.lv-transcript-toggle.is-off::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 1.6px;
  background: var(--lv-ink-muted);
  transform: rotate(-22deg);
}

/* Compact identity strip: live status + centered title + language pill. */
.lv-header {
  display: none;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  padding: 0 0 16px;
  flex-shrink: 0;
}

.lv-head-id {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.lv-logo-circle {
  display: none;
}

.lv-logo-mark {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.lv-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lv-name-row .lv-kicker {
  display: none;
}

/* App health dot: 9px, white ring, soft glow, generous 30×38 hit target. The
   dot itself is a ::before so the button stays an invisible tap area. */
.lv-live-dot {
  appearance: none;
  flex: 0 0 auto;
  width: 30px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lv-blue);
  transition: transform 0.16s ease;
}

.lv-live-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 10px color-mix(in srgb, currentColor 34%, transparent);
}

.lv-live-dot:focus-visible { outline: none; }
.lv-live-dot:focus-visible::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 3px var(--lv-focus, #274e8d);
}

.lv-live-dot:active { transform: scale(0.84); }

body[data-scrub="back"] .lv-live-dot {
  color: var(--lv-ink-muted);
}

/* ----- Connection banner (loud, human failure states) ------------------- */
.lv-conn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.lv-conn-banner[hidden] { display: none; }
.lv-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.9; }
.lv-conn-banner[data-tone="info"] { background: var(--lv-blue-wash); color: var(--lv-blue-ink); }
.lv-conn-banner[data-tone="warn"] { background: var(--lv-warm-wash); color: var(--lv-warm-ink); }
.lv-conn-banner[data-tone="bad"]  { background: #fdecea; color: #b91c1c; }
.lv-conn-banner[data-tone="warn"] .lv-conn-dot,
.lv-conn-banner[data-tone="bad"] .lv-conn-dot { animation: lv-conn-blink 1.1s ease-in-out infinite; }
@keyframes lv-conn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .lv-conn-banner .lv-conn-dot { animation: none; } }
.lv-conn-retry {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 700;
}
.lv-conn-retry:hover { background: rgba(185, 28, 28, 0.2); }

/* The live dot mirrors connection health: data-tone is healthSummary()'s
   verdict (listenerLogic.ts), the same one the health sheet shows. Green only
   while the event is live and nothing the listener depends on is failing. */
.lv-live-dot[data-tone="good"] { color: #34c759; }
.lv-live-dot[data-tone="warn"] { color: #f59e0b; }
.lv-live-dot[data-tone="bad"] { color: #ef4444; }
.lv-live-dot[data-tone="off"] { color: var(--lv-ink-muted); }

/* ----- Connection health sheet ----------------------------------------- */

.lv-health-backdrop {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px max(16px, calc((100vw - 480px) / 2 + 16px)) max(18px, env(safe-area-inset-bottom));
  background: rgba(5, 9, 14, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.lv-health-backdrop[hidden] { display: none; }

.lv-health-sheet {
  --lv-ink: #111827;
  --lv-ink-soft: #475569;
  --lv-ink-muted: #64748b;
  --lv-rule: rgba(15, 23, 42, 0.10);
  width: min(448px, 100%);
  padding: 8px 18px 20px;
  border: 1px solid var(--lv-rule);
  border-radius: 30px;
  background: rgba(248, 250, 252, 0.98);
  color: var(--lv-ink);
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.lv-health-handle {
  width: 38px;
  height: 5px;
  margin: 2px auto 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.42);
}

.lv-health-head {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: start;
}

.lv-health-dot,
.lv-health-row-dot {
  display: block;
  border-radius: 50%;
  background: #34c759;
}

.lv-health-dot {
  width: 12px;
  height: 12px;
  margin-top: 8px;
  box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.12);
}

.lv-health-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.16;
}

.lv-health-head p {
  margin: 6px 0 0;
  color: #526174;
  font-size: 14px;
  line-height: 1.42;
}

.lv-health-close {
  appearance: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--lv-ink-muted);
  font-size: 22px;
  cursor: pointer;
}

.lv-health-rows {
  margin-top: 20px;
  padding: 0 14px;
  border: 1px solid var(--lv-rule);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.lv-health-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--lv-rule);
  font-size: 13.5px;
}

.lv-health-row:last-child { border-bottom: 0; }
.lv-health-row-dot { width: 8px; height: 8px; }
.lv-health-row > span:last-child { color: var(--lv-ink-muted); text-align: right; }

.lv-health-note {
  margin: 16px 2px 0;
  color: var(--lv-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.lv-health-sheet[data-tone="warn"] .lv-health-dot,
.lv-health-sheet[data-tone="warn"] .lv-health-row-dot[data-health-row="audio"] {
  background: #f59e0b;
  box-shadow: none;
}

.lv-health-sheet[data-tone="bad"] .lv-health-dot,
.lv-health-sheet[data-tone="bad"] .lv-health-row-dot {
  background: #ef4444;
  box-shadow: none;
}

/* ----- Event QR page ---------------------------------------------------- */

.lv-qr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: flex;
  justify-content: center;
  background: var(--lv-bg);
}

.lv-qr-backdrop[hidden] { display: none; }

.lv-qr-sheet {
  --lv-ink-muted: var(--lv-ink);
  width: min(480px, 100%);
  min-height: 100dvh;
  color: var(--lv-ink);
  background:
    radial-gradient(circle at 82% 8%, rgba(64, 167, 255, 0.16), transparent 30%),
    linear-gradient(180deg, var(--lv-bg), color-mix(in srgb, var(--lv-bg) 86%, #163558));
}

.lv-qr-nav {
  height: calc(54px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--lv-rule);
  font-size: 15px;
  font-weight: 800;
}

.lv-qr-nav button {
  appearance: none;
  position: absolute;
  right: max(18px, calc((100vw - 480px) / 2 + 18px));
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.13);
  color: var(--lv-ink-muted);
  font-size: 24px;
  cursor: pointer;
}

.lv-qr-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  padding: 28px 24px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

.lv-qr-content h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.lv-qr-content p { margin: 7px 0 0; color: var(--lv-ink-muted); font-size: 14px; }

.lv-qr-image-wrap {
  width: min(310px, 82vw);
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.lv-qr-image-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.lv-qr-code { display: grid; gap: 6px; }
.lv-qr-code span { color: var(--lv-ink-muted); font-size: 11px; font-weight: 850; letter-spacing: 1.5px; }
.lv-qr-code strong { font: 800 36px/1.1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: 2px; }

.lv-qr-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lv-qr-actions button {
  appearance: none;
  min-height: 48px;
  border: 1px solid var(--lv-rule);
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.09);
  color: var(--lv-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.lv-qr-actions button:last-child { border-color: transparent; background: #1769c2; color: #fff; }

.lv-sermon-title {
  text-align: center;
  margin: 0 auto;
  /* The app title is title3 semibold — 20pt, scaling down before truncating. */
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--lv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lv-record-notice {
  display: none !important;
}

/* Quiet caption under the header (the app has no banner here at all — keep the
   web disclosure, but at the weight of the app's "Speaking …" caption). */
.lv-policy-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--lv-ink-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.lv-policy-notice[hidden] { display: none; }

.lv-policy-notice svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--lv-ink-muted);
}

/* EU AI Act Article 50 disclosure. Shares the policy strip's shape so it reads
   as room metadata rather than a warning — it is a fact about the service, not
   an error. Deliberately has no dismiss control: 50(5) wants it present at
   first exposure, and a line the listener can permanently hide is one we cannot
   claim was shown. */
.lv-ai-notice {
  margin-bottom: 4px;
  opacity: 0.92;
}

/* The public-sector caveat, under the AI strip. Deliberately full-width and
   left-aligned rather than centred like the strip above it: it is a paragraph
   people have to read, not a one-line label. */
.lv-ai-notice-public-sector {
  margin: 0 0 6px;
  padding: 0 14px;
  color: var(--lv-ink-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

.lv-ai-notice-public-sector[hidden] { display: none; }

/* Shown in the language sheet, where the listener is deciding to hear a
   synthetic voice — the actual moment of "first exposure". */
.lv-sheet-ai-disclosure {
  margin: 2px 0 10px;
  padding: 0 2px;
  color: var(--lv-ink-muted);
  font-size: 12px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Listener "record what I hear" — red dot while capturing, gently pulsing. */
.lv-record-btn.is-recording {
  color: #c0362c;
}
.lv-record-btn.is-recording svg {
  animation: lv-record-pulse 1.4s ease-in-out infinite;
}
@keyframes lv-record-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.lv-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  /* ultraThinMaterial: translucent glass with a lighter top — the subtle
     gradient separation the app's capsules have — plus a backdrop blur. */
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(180deg, rgba(64, 72, 84, 0.52), rgba(44, 50, 60, 0.46));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  font-size: 14px;
  font-weight: 700;
  color: var(--lv-blue-ink);
  cursor: pointer;
  min-width: 0;
  max-width: min(100%, 260px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 12px rgba(0, 0, 0, 0.10);
}

.lv-lang-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Translation hero card -------------------------------------------- */

.lv-card {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 260px;
  background:
    linear-gradient(180deg, rgba(247, 251, 255, 0.94) 0%, rgba(239, 250, 250, 0.92) 100%);
  border: 1px solid rgba(102, 126, 164, 0.08);
  border-radius: 28px;
  padding: 22px;
  margin: 4px 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.lv-card .lv-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lv-blue-ink);
}

.lv-card .lv-card-text {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(19px * var(--lv-tscale, 1));
  line-height: 1.55;
  color: var(--lv-ink);
  margin: 0;
}

/* ----- "Choose your language" prompt (shown before a lane is picked) ------- */
.lv-lang-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 6px;
}

.lv-lang-prompt-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lv-blue-ink);
}

.lv-lang-prompt-title {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 24px;
  line-height: 1.25;
  color: var(--lv-ink);
}

.lv-lang-prompt-sub {
  margin: 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lv-ink-muted);
}

.lv-lang-prompt-btn {
  appearance: none;
  border: 0;
  margin-top: 6px;
  height: 48px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--lv-ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.lv-lang-prompt-btn:active {
  transform: translateY(1px);
}

/* ----- Live transcript (scrollable, paragraph-grouped, inline verses) ------ */
.lv-card.lv-transcript {
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  /* Grow to nearly fill the screen, but stay viewport-bounded so the box scrolls
     internally instead of pushing the audio bar + footer off the page. When a
     verse card is also on screen, yield some height so both fit without scroll. */
  min-height: 0;
  max-height: none;
  gap: 0;
  padding: 22px 22px 24px;
  scroll-behavior: smooth;
  -webkit-user-select: text;
  user-select: text;
}

/* Short services should feel like the native app: the newest translated line
   rests near the bottom of the listening canvas. Once there is enough history
   to overflow, this auto margin collapses and the transcript scrolls normally. */
.lv-card.lv-transcript > :first-child {
  margin-top: auto;
}

/* When a verse card shares the screen, cap the box lower so both fit. */
body[data-verse-live="1"] .lv-card.lv-transcript {
  max-height: none;
}

.listener-site[data-listener-state="joined"] .lv-card {
  min-height: 0;
  margin: 0;
  padding: 0 4px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Full-bleed reading canvas: the transcript slides up under the floating header
   (and down under the bottom chrome) via negative margins; its own padding puts
   the resting content back below the header. --lv-live-clear is measured by
   phone.js from the chrome actually above the box (header + notices + gate). */
.listener-site[data-listener-state="joined"] .lv-card.lv-transcript {
  padding: calc(var(--lv-live-clear, 128px) + var(--lv-live-safe-top, 10px) + 12px) 4px calc(env(safe-area-inset-bottom) + 44px);
  margin-top: calc(-1 * (var(--lv-live-clear, 128px) + var(--lv-live-safe-top, 10px)));
  margin-bottom: calc(-1 * var(--lv-live-safe-bottom, 12px));
}

.listener-site[data-listener-state="joined"] .lv-card.lv-transcript > :first-child {
  margin-top: 0;
}

/* App rhythm: LazyVStack(spacing: 18) — ONE constant gap between every entry.
   The old per-line margins (18) plus the paragraph-break top margin (24) stacked
   to 42px in this flex column, which read as holes in the text. */
.listener-site[data-listener-state="joined"] .lv-card.lv-transcript { gap: 18px; }
.listener-site[data-listener-state="joined"] .lv-tline { margin-bottom: 0; }
.listener-site[data-listener-state="joined"] .lv-tline.is-para-break { margin-top: 0; }

/* Bottom scroll-edge scrim (scrim only, no blur — matches the app's footer
   choice): text fades out toward the bottom edge under the floating controls. */
.listener-site[data-listener-state="joined"] .lv-live::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(env(safe-area-inset-bottom) + 74px);
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(9, 15, 24, 0.52) 0%,
    rgba(9, 15, 24, 0.26) 30%,
    rgba(9, 15, 24, 0.08) 55%,
    transparent 74%
  );
}

/* The in-flow bottom chrome floats above the scrim. */
.listener-site[data-listener-state="joined"] .lv-scrubber,
.listener-site[data-listener-state="joined"] .lv-return-pill,
.listener-site[data-listener-state="joined"] .lv-miniplayer {
  position: relative;
  z-index: 26;
}

/* Chrome that sits under the header (captions, banners, audio gate) must render
   crisp ABOVE the header's blur band, not be sampled by it. */
.listener-site[data-listener-state="joined"] .lv-policy-notice,
.listener-site[data-listener-state="joined"] .lv-record-notice,
.listener-site[data-listener-state="joined"] .lv-conn-banner,
.listener-site[data-listener-state="joined"] .lv-audio-gate {
  position: relative;
  z-index: 31;
}

/* The caption sits at the faint tail of the header fade, where scrolled text is
   barely dimmed — give it its own sliver of glass so text blurs under IT. */
.listener-site[data-listener-state="joined"] .lv-policy-notice {
  align-self: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(9, 15, 24, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-policy-notice {
    background: rgba(251, 253, 255, 0.55);
  }
}

.listener-site[data-listener-state="joined"] .lv-kicker {
  color: rgba(247, 243, 236, 0.56);
}

.lv-tline {
  max-width: 100%;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: clamp(22px, calc(23px * var(--lv-tscale, 1)), 34px);
  line-height: 1.45;
  color: var(--lv-ink);
  margin: 0 0 12px;
  padding: 4px 2px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-user-select: text;
  user-select: text;
  overflow-wrap: break-word;
}

.lv-tline.is-para-break {
  margin-top: 24px;
}

/* Speaker-change marker: small caps name above the first line of a new
   speaker's segment (set by syncSpeakerMarkers via data-speaker). */
.lv-tline.has-speaker-marker {
  margin-top: 22px;
}
.lv-tline.has-speaker-marker::before {
  content: attr(data-speaker);
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lv-ink) 55%, transparent);
  margin-bottom: 6px;
}

.lv-tline:last-child { margin-bottom: 0; }

/* The in-progress sentence still being spoken/translated. */
.lv-tline.is-live {
  color: var(--lv-blue-ink);
  cursor: default;
}

.lv-tline.is-citation-jump,
.lv-verse-inline.is-citation-jump {
  outline: 2px solid var(--lv-blue);
  outline-offset: 6px;
  background: rgba(91, 124, 181, 0.12);
  transition: outline-color 160ms ease, background-color 160ms ease;
}

/* App-parity highlight: color sits directly behind the quote and the action bar
   stays compact, rather than turning the line into a separate card. */
.lv-tline.is-marked {
  position: relative;
  margin: 5px -7px 10px;
  padding: 7px 7px 0;
  background: rgba(251, 191, 36, 0.20);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--lv-ink);
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
}
.lv-tline.is-marked.is-live { background: transparent; box-shadow: none; }

.lv-tline-text {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

.lv-highlight-tools {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 8px -7px 0;
  padding: 5px 4px;
  border-top: 1px solid rgba(30, 41, 59, 0.10);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 0 0 8px 8px;
  font-family: var(--lv-sans, system-ui, sans-serif);
}

.lv-highlight-tools button {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(30, 41, 59, 0.10);
  border-radius: 0;
  background: transparent;
  color: #1769c2;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lv-highlight-tools button:active {
  transform: scale(0.97);
}

.lv-highlight-colors {
  position: absolute;
  z-index: 2;
  right: 44px;
  top: calc(100% - 42px);
  width: 176px;
  display: grid;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.20);
  font-family: var(--lv-sans, system-ui, sans-serif);
}

.lv-highlight-color-option {
  appearance: none;
  min-height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.lv-highlight-color-option.is-active { background: #eef6ff; color: #1769c2; }

.lv-highlight-swatch {
  appearance: none;
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  padding: 0;
  box-shadow: 0 0 0 1px rgba(30, 20, 12, 0.12);
  cursor: pointer;
}

.lv-highlight-swatch.is-yellow { background: #fb923c; }
.lv-highlight-swatch.is-blue { background: #38bdf8; }
.lv-highlight-swatch.is-green { background: #34d399; }
.lv-highlight-swatch.is-pink { background: #f472b6; }

.lv-highlight-swatch.is-active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(251, 146, 60, 0.34);
}

.lv-highlight-color-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}
.lv-highlight-color-dot.is-yellow { background: #f7c94b; }
.lv-highlight-color-dot.is-blue { background: #8ec5ee; }
.lv-highlight-color-dot.is-green { background: #8bd4a2; }
.lv-highlight-tools .lv-highlight-close { margin-left: auto; border-right: 0; font-size: 18px; color: #64748b; }

.lv-highlight-note {
  margin: 10px 0 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(66, 44, 24, 0.74);
  font-family: var(--lv-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.4;
}

.lv-highlight-note-editor {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  font-family: var(--lv-sans, system-ui, sans-serif);
}

.lv-highlight-note-editor textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid rgba(251, 146, 60, 0.24);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.70);
  color: #2c1f16;
  font: 500 14px/1.4 var(--lv-sans, system-ui, sans-serif);
  outline: none;
}

.lv-highlight-note-editor textarea:focus {
  border-color: rgba(251, 146, 60, 0.52);
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.14);
}

.lv-highlight-note-editor div {
  display: flex;
  justify-content: flex-end;
}

.lv-highlight-note-editor button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 14px;
  background: #fb923c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.lv-verse-inline {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin: 20px 0 0;
  padding: 0;
  background:
    radial-gradient(circle at 18% 2%, rgba(255, 255, 255, 0.94), transparent 40%),
    linear-gradient(145deg, rgba(255, 251, 239, 0.96), rgba(255, 244, 218, 0.9));
  border: 1px solid rgba(251, 191, 112, 0.42);
  border-radius: 28px;
  color: var(--lv-ink);
  box-shadow:
    0 28px 72px rgba(245, 158, 11, 0.18),
    0 12px 28px rgba(146, 64, 14, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  -webkit-user-select: text;
  user-select: text;
  position: relative;
  overflow: hidden;
}

.lv-verse-inline.is-para-break {
  margin-top: 24px;
}

.lv-verse-inline-head {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  padding: clamp(16px, 4.2vw, 21px);
  position: relative;
  z-index: 1;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lv-verse-inline-title {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.lv-verse-inline-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lv-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fb923c;
}

.lv-verse-inline-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fb923c;
}

.lv-verse-inline-ref {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: clamp(19px, calc(21px * var(--lv-tscale, 1)), 28px);
  line-height: 1.12;
  font-weight: 700;
  display: block;
}

.lv-verse-inline-preview {
  margin-top: 3px;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(16px * var(--lv-tscale, 1));
  line-height: 1.34;
  color: rgba(15, 23, 42, 0.76);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.lv-verse-inline.is-expanded .lv-verse-inline-preview {
  display: none;
}

.lv-verse-inline-version {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
  color: #9a3f0a;
  display: block;
}

.lv-verse-inline-expanded {
  display: none;
  padding: 0 clamp(16px, 4.2vw, 21px) clamp(17px, 4.4vw, 22px);
  position: relative;
  z-index: 1;
}

/* Jump a cited verse into the listener's own Bible app. Reads as a quiet row of
   secondary actions under the verse text, never competing with it. */
.lv-verse-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.lv-verse-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid rgba(154, 63, 10, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: #9a3f0a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lv-verse-link:hover,
.lv-verse-link:focus-visible {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(154, 63, 10, .45);
}

.lv-verse-link span {
  font-size: 10px;
  opacity: .7;
}

.lv-verse-inline.is-expanded .lv-verse-inline-expanded {
  display: block;
}

.lv-verse-inline p {
  max-width: 100%;
  margin: 8px 0 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(17px * var(--lv-tscale, 1));
  line-height: 1.38;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.lv-verse-inline.is-expanded p {
  display: block;
  overflow: visible;
}

.lv-verse-inline-open {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.lv-verse-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  flex-shrink: 0;
}

.lv-verse-expand {
  border: 1px solid rgba(251, 146, 60, 0.22);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: #a2410a;
  background: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.lv-verse-inline-head:active .lv-verse-expand {
  transform: scale(0.96);
}

.lv-verse-save {
  appearance: none;
  border: 1px solid rgba(251, 146, 60, 0.22);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: #a2410a;
  background: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  -webkit-tap-highlight-color: transparent;
}

.lv-verse-save.is-saved {
  background: rgba(251, 146, 60, 0.16);
  color: #8a3a0b;
}

.lv-verse-save:active {
  transform: scale(0.96);
}

.lv-verse-action {
  min-width: 0;
  height: 38px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: #152033;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(251, 146, 60, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  -webkit-tap-highlight-color: transparent;
}

.lv-verse-action span {
  font-family: var(--lv-sans, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.lv-verse-action-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #0f8ef6;
  background: rgba(15, 142, 246, 0.10);
}

.lv-verse-action:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.82);
}

.lv-verse-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: var(--lv-blue-ink, #1b3a5b);
  background: rgba(49, 122, 188, 0.12);
  border: 1px solid rgba(49, 122, 188, 0.24);
  -webkit-tap-highlight-color: transparent;
}

.lv-verse-open:active {
  background: rgba(43, 108, 176, 0.22);
}

.lv-verse-open--alt {
  color: var(--lv-blue-ink, #1b3a5b);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.listener-site[data-listener-state="joined"] .lv-tline {
  /* The app reads at 20pt × S/M/L/XL (0.9–1.34) with 7pt line spacing and 18pt
     row spacing — no clamp floor, so S genuinely shrinks. The 18px row rhythm
     comes from the transcript column's flex gap, not per-line margins. */
  font-size: calc(20px * var(--lv-tscale, 1));
  line-height: 1.35;
  color: var(--lv-ink);
  padding: 0;
  margin-bottom: 0;
}

.listener-site[data-listener-state="joined"] .lv-tline.is-live {
  color: #ffffff;
}

.listener-site[data-listener-state="joined"] .lv-tline.is-marked {
  margin: 5px -7px 10px;
  padding: 7px 7px 0;
  background: rgba(247, 201, 75, 0.24);
  box-shadow: none;
}

.listener-site[data-listener-state="joined"] .lv-tline.is-marked.is-blue {
  background: rgba(142, 197, 238, 0.26);
}

.listener-site[data-listener-state="joined"] .lv-tline.is-marked.is-green {
  background: rgba(139, 212, 162, 0.24);
}

.listener-site[data-listener-state="joined"] .lv-tline.is-marked.is-pink {
  background: rgba(244, 114, 182, 0.12);
  border-color: rgba(244, 114, 182, 0.28);
  border-left-color: #f472b6;
}

.listener-site[data-listener-state="joined"] .lv-highlight-tools button {
  color: #1769c2;
  background: transparent;
  border-color: rgba(30, 41, 59, 0.10);
}

.listener-site[data-listener-state="joined"] .lv-highlight-note {
  color: rgba(247, 243, 236, 0.68);
  background: rgba(255, 255, 255, 0.07);
}

.listener-site[data-listener-state="joined"] .lv-highlight-note-editor textarea {
  color: rgba(247, 243, 236, 0.90);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(251, 146, 60, 0.24);
}

/* Scripture paper — the app's verse surface: dark slate with a slight blue
   tint (#1A1F24) and system-blue accents, replacing the old amber card. */
.listener-site[data-listener-state="joined"] .lv-verse-inline {
  /* The container gap spaces it like any other line; the badge overhangs into
     that gap (app: scriptureBorderLabel offset −11 over LazyVStack spacing 18). */
  margin: 0;
  padding: 0;
  background: linear-gradient(150deg, rgba(28, 34, 40, 0.96), rgba(24, 29, 35, 0.96));
  border-color: rgba(106, 178, 255, 0.26);
  color: var(--lv-ink);
  border-radius: 16px;
  /* Overflow must stay visible for the overhanging BIBLE capsule below. */
  overflow: visible;
  /* Flat like the app's scripturePaper card — the drop shadow made it float
     OVER the text instead of sitting IN it. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.listener-site[data-listener-state="joined"] .lv-verse-inline.is-para-break {
  margin-top: 0;
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-head {
  gap: 12px;
  /* App verseBlock padding: 12 collapsed. */
  padding: 13px 14px;
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-expanded {
  padding: 0 14px 14px;
}

/* App puts the version chip on the SAME line as the reference, not stacked. */
.listener-site[data-listener-state="joined"] .lv-verse-inline-title { display: block; }
.listener-site[data-listener-state="joined"] .lv-verse-inline-ref { display: inline; }
.listener-site[data-listener-state="joined"] .lv-verse-inline-version {
  display: inline;
  margin-left: 7px;
}
.listener-site[data-listener-state="joined"] .lv-verse-inline-preview {
  margin-top: 6px;
  /* Full verse text, exactly like the app — no "…" clamp. */
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.listener-site[data-listener-state="joined"] .lv-verse-inline.is-expanded .lv-verse-inline-preview {
  display: none;
}

/* The app hangs a "● BIBLE" capsule over the top-left edge of EVERY verse card
   (scriptureBorderLabel, offset −11pt) — not just the pinned one. */
.listener-site[data-listener-state="joined"] .lv-verse-inline-kicker {
  position: absolute;
  top: -11px;
  left: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(106, 178, 255, 0.24);
  background: #1a1f24;
  color: #6ab2ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-kicker span {
  background: #6ab2ff;
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-ref {
  /* App verse card title: 15pt semibold collapsed (18pt expanded). */
  font-size: calc(15px * var(--lv-tscale, 1));
  font-weight: 650;
  line-height: 1.2;
}

.listener-site[data-listener-state="joined"] .lv-verse-inline.is-expanded .lv-verse-inline-ref {
  font-size: calc(18px * var(--lv-tscale, 1));
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-preview {
  color: rgba(228, 237, 247, 0.72);
}

.listener-site[data-listener-state="joined"] .lv-verse-inline-version {
  color: rgba(106, 178, 255, 0.86);
}

.listener-site[data-listener-state="joined"] .lv-verse-inline p {
  color: rgba(228, 237, 247, 0.70);
}

.listener-site[data-listener-state="joined"] .lv-verse-expand,
.listener-site[data-listener-state="joined"] .lv-verse-save {
  color: #6ab2ff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(106, 178, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.listener-site[data-listener-state="joined"] .lv-verse-save.is-saved {
  background: rgba(106, 178, 255, 0.20);
}

.listener-site[data-listener-state="joined"] .lv-verse-action {
  color: rgba(228, 237, 247, 0.90);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(106, 178, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lv-slide-inline {
  margin: 26px 0 6px;
}

.lv-slide-card {
  appearance: none;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(101, 185, 255, 0.24);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--lv-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.lv-slide-card > img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: #05070a;
}

.lv-slide-meta {
  min-height: 58px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lv-slide-meta > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lv-slide-meta small {
  color: var(--lv-blue-ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.lv-slide-meta strong {
  overflow: hidden;
  color: var(--lv-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-slide-expand {
  color: #65b9ff;
  font-size: 18px;
}

.lv-slide-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: #f8fafc;
}

.lv-slide-backdrop[hidden] { display: none; }

.lv-slide-viewer {
  width: min(100%, 920px);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  color: #111827;
}

.lv-slide-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lv-slide-viewer-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.lv-slide-close {
  appearance: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  color: #111827;
  background: rgba(15, 23, 42, 0.07);
  font-size: 26px;
  cursor: pointer;
}

.lv-slide-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
}

.lv-slide-stage img {
  display: block;
  max-width: 100%;
  max-height: min(72dvh, 760px);
  object-fit: contain;
  transform-origin: center center;
  -webkit-user-select: none;
  user-select: none;
}

/* Pinch, trackpad-zoom and double-tap are handled in script, so the browser
   must not claim the same gestures first — a pinch that never reaches the
   handler cannot start the zoom. Scoped to the picture inside the full-screen
   reader; the rest of the listener keeps normal browser zoom and scrolling. */
.lv-slide-stage--zoomable {
  touch-action: none;
}

.lv-slide-stage--zoomable[data-slide-zoomed="true"] {
  cursor: grab;
}

.lv-slide-stage--zoomable[data-slide-zoomed="true"]:active {
  cursor: grabbing;
}

.lv-slide-golive {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.lv-slide-controls {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 12px;
}

.lv-slide-controls button {
  appearance: none;
  height: 44px;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  background: rgba(15, 23, 42, 0.07);
  font-size: 20px;
  cursor: pointer;
}

.lv-slide-controls button:disabled { opacity: 0.25; }
.lv-slide-controls span {
  text-align: center;
  color: #64748b;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lv-transcript-empty {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(17px * var(--lv-tscale, 1));
  color: var(--lv-blue-ink);
  opacity: 0.72;
  margin: auto 0;
}

.lv-scrubber[hidden] { display: none; }

/* Original (no-translation) mode: it's read-only text, so hide the AI-voice bar. */
body[data-transcript-mode="source"] .lv-audio-bar { display: none; }

/* "Original" entry in the language picker gets a subtle emphasis. */
.lv-chip-original { font-weight: 700; }
.lv-sheet-row-original span:first-child { font-weight: 700; }

/* ----- Verse card (warm cream, only when a verse is live) ---------------- */

.lv-verse-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--lv-warm-wash);
  border: 1px solid #f3e1c1;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lv-verse-card[hidden] { display: none; }

/* ----- Screen card (what the room's screen says, translated) -------------- */
/*
 * Bilingual on purpose. A visitor who sees only their own language stops
 * singing with the room; the point is to understand what everyone around them
 * is singing, not to sing something different. Translation leads (it is what
 * they cannot get themselves) with the original underneath, quieter.
 */

/*
 * Styled entirely on the --lv-* tokens rather than fixed colours. The joined
 * listener view is ALWAYS dark (.listener-site[data-listener-state="joined"]
 * reassigns these), independent of the OS preference — so a hardcoded light
 * card here would be nearly invisible exactly when it is being used.
 */

.lv-screen-card {
  margin: 0 0 18px;
  padding: 14px 18px 16px;
  background: var(--lv-blue-wash);
  border: 1px solid var(--lv-blue-soft);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lv-screen-card[hidden] { display: none; }

.lv-screen-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lv-blue-ink);
}

.lv-screen-head svg { flex: none; }

.lv-screen-translation {
  margin: 0;
  font-size: 20px;
  line-height: 1.34;
  font-weight: 600;
  color: var(--lv-ink);
  white-space: pre-line; /* the model is told to keep one line per input line */
}

.lv-screen-original {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-line;
  color: var(--lv-ink-muted);
}

.lv-verse-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lv-verse-ref {
  font-size: 15px;
  font-weight: 700;
  color: var(--lv-ink);
}

.lv-verse-version {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lv-warm-ink);
}

.lv-verse-text {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lv-ink);
}

/* ----- Audio bar (volume + Ask) ----------------------------------------- */

.lv-audio-gate {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 0 10px;
  padding: 11px;
  border: 1px solid rgba(64, 167, 255, 0.30);
  border-radius: 18px;
  background: rgba(34, 152, 255, 0.12);
  color: var(--lv-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lv-audio-gate[hidden] { display: none; }

.lv-audio-gate-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(64, 167, 255, 0.16);
  color: var(--lv-blue-ink);
}

.lv-audio-gate-icon svg {
  width: 21px;
  height: 21px;
}

.lv-audio-gate div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lv-audio-gate strong {
  font-size: 14px;
  line-height: 1.2;
}

.lv-audio-gate span {
  color: var(--lv-ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.lv-audio-gate button {
  appearance: none;
  border: 0;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--lv-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.lv-audio-gate button:disabled {
  opacity: 0.62;
  cursor: progress;
}

.lv-audio-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px max(0px, env(safe-area-inset-bottom));
  margin-top: auto;
  flex-shrink: 0;
}

.lv-sound-toggle {
  appearance: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  color: #081b2d;
  background: #65b9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(64, 167, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.lv-sound-toggle.is-off {
  color: rgba(247, 243, 236, 0.72);
  background: transparent;
}

.lv-sound-toggle svg {
  width: 21px;
  height: 21px;
}

.lv-sound-toggle svg[hidden] { display: none; }

/* Volume slider — iOS-style: thin rounded track, large white thumb. Adjusts the
   AI-voice output gain (the system volume itself isn't web-settable on iOS). */
.lv-volume {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--lv-blue-soft);
  outline: none;
  cursor: pointer;
}
.lv-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: grab;
}
.lv-volume::-webkit-slider-thumb:active { cursor: grabbing; }
.lv-volume::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--lv-blue-soft);
}
.lv-volume::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: grab;
}

.lv-scrubber {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.lv-scrubber:active { cursor: grabbing; }

.lv-scrubber-track {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: var(--lv-blue-soft);
}

/* Fill and thumb are positioned with `transform` only, so a scrub never
   triggers layout. JS writes scaleX() on the fill and translate3d() on the
   thumb; both start at the live edge (right). */
.lv-scrubber-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left center;
  background: var(--lv-blue);
  border-radius: 2px;
}

.lv-scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--lv-blue);
  border: 3px solid #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transform: translate3d(0, -50%, 0);
}

/* Off the finger, the thumb settles onto its caption rather than teleporting.
   Critically damped — no overshoot, since nothing here carries momentum. */
.lv-scrubber-fill,
.lv-scrubber-thumb {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* During the drag the thumb IS the finger: any easing here is lag. */
.lv-scrubber[data-dragging="true"] .lv-scrubber-fill,
.lv-scrubber[data-dragging="true"] .lv-scrubber-thumb {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .lv-scrubber-fill,
  .lv-scrubber-thumb {
    transition: none;
  }
}

.lv-ask-bottom {
  appearance: none;
  border: 0;
  min-width: 72px;
  height: 44px;
  border-radius: 999px;
  padding: 0 14px 0 16px;
  background: rgba(255, 255, 255, 0.76);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--lv-blue);
  font: 800 15px/1 var(--lv-sans, system-ui, sans-serif);
  box-shadow:
    0 13px 30px rgba(92, 171, 240, 0.20),
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 0 0 1px rgba(92, 171, 240, 0.14) inset;
  backdrop-filter: blur(16px);
  -webkit-tap-highlight-color: transparent;
}

.lv-ask-bottom[hidden] { display: none; }
.lv-ask-bottom:active { transform: scale(0.97); }
.lv-ask-bottom svg { width: 15px; height: 15px; }

.listener-site[data-listener-state="joined"] .lv-ask-bottom {
  background: rgba(255, 255, 255, 0.10);
  color: var(--lv-blue-ink);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

@media (max-width: 390px) {
  .lv-audio-gate {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .lv-audio-gate-icon {
    width: 34px;
    height: 34px;
  }

  .lv-audio-gate button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ----- Return-to-live pill ---------------------------------------------- */

/* The app's "Live ↓" jump pill: label-colored text on ultraThin glass. */
.lv-return-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, rgba(64, 72, 84, 0.55), rgba(44, 50, 60, 0.48));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  font-size: 14px;
  font-weight: 750;
  color: var(--lv-ink);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 18px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-return-pill {
    border-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.70),
      0 10px 18px rgba(22, 24, 28, 0.12);
  }
}

.lv-return-pill[hidden] { display: none; }

.lv-return-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv-blue);
}

.lv-return-behind {
  color: var(--lv-ink-soft);
  font-weight: 500;
}

/* ----- Footer actions --------------------------------------------------- */

.lv-footer-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.lv-footer-btn {
  appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--lv-rule);
  border-radius: 12px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-footer-btn[hidden] { display: none; }

/* ----- Ask (chat) panel ------------------------------------------------- */

.lv-ask-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  max-height: none;
  padding: max(14px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.lv-ask-panel[hidden] { display: none; }

.listener-site[data-listener-state="joined"] .lv-ask-panel {
  background: rgba(18, 23, 32, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--lv-ink);
}

.lv-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
}

.lv-ask-title-row { flex: 1; }
.lv-ask-title-row > div { display: grid; gap: 2px; }
.lv-ask-title-row small { color: var(--lv-ink-muted); font-size: 11px; }

.lv-ask-head strong {
  font-size: 19px;
  font-weight: 780;
}

.lv-ask-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lv-ask-quota {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(64, 167, 255, 0.14);
  color: #65b9ff;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.lv-ask-quota[hidden] { display: none; }
.lv-ask-quota[data-low="true"] {
  background: rgba(251, 146, 60, 0.16);
  color: #fb923c;
}

.lv-ask-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lv-ask-save {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-ask-save[hidden] { display: none; }

.lv-ask-close {
  appearance: none;
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--lv-ink-muted);
  cursor: pointer;
  padding: 0;
}
.lv-ask-close svg { width: 24px; height: 24px; }

.lv-ask-hint {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lv-ink-muted);
}

.lv-ask-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 16px;
  text-align: center;
}

.lv-ask-empty[hidden] { display: none; }

.lv-ask-empty-copy {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.lv-ask-empty-copy h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--lv-ink);
  font-size: clamp(19px, 5.4vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.lv-ask-suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: visible;
  padding: 0;
  scrollbar-width: none;
}

.lv-ask-suggestions::-webkit-scrollbar { display: none; }
.lv-ask-suggestions[hidden] { display: none; }

.lv-ask-suggestions button {
  appearance: none;
  width: fit-content;
  min-height: 36px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--lv-ink);
  background: rgba(148, 163, 184, 0.10);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.lv-ask-suggestions button:active { transform: scale(0.97); }

.lv-ask-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}

.lv-ask-thread:empty { display: none; }

.lv-ask-message {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.lv-ask-message.user {
  background: var(--lv-blue-wash);
  color: var(--lv-blue-ink);
  align-self: flex-end;
  max-width: 90%;
}

.lv-ask-message.assistant {
  background: rgba(148, 163, 184, 0.12);
  color: var(--lv-ink);
}

.lv-ask-citations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--lv-ink-soft);
}

.lv-ask-citation {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lv-blue-ink);
  font: inherit;
  text-align: left;
  padding: 2px 0;
  cursor: pointer;
}

.lv-ask-citation:hover {
  text-decoration: underline;
}

.lv-ask-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 6px;
}

.lv-ask-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.lv-ask-form input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  padding: 0 64px 0 15px;
  font-size: 14px;
  color: var(--lv-ink);
  background: rgba(255, 255, 255, 0.76);
}

.lv-ask-form input:focus {
  border-color: rgba(0, 122, 255, 0.44);
  outline: 3px solid rgba(0, 122, 255, 0.10);
}

.lv-ask-counter {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lv-ink-muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.lv-ask-counter[data-has-text="true"] { opacity: 1; }

.lv-ask-submit {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: var(--lv-blue);
  border-radius: 999px;
  width: 46px;
  padding: 0;
  height: 46px;
  display: grid;
  place-items: center;
  color: #ffffff;
  cursor: pointer;
}

.lv-ask-submit svg { width: 22px; height: 22px; }

.lv-ask-submit:disabled {
  border-color: transparent;
  background: rgba(148, 163, 184, 0.22);
  color: rgba(100, 116, 139, 0.42);
  cursor: default;
}

.lv-ask-submit[data-loading="true"] svg { animation: lv-ask-pulse 0.9s ease-in-out infinite; }

@keyframes lv-ask-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(1px); }
  50% { opacity: 1; transform: translateY(-1px); }
}

/* ----- Talk to your notes (voice agent) --------------------------------- */

.lv-ask-mic {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lv-blue-ink);
  cursor: pointer;
}
.lv-ask-mic[hidden] { display: none; }
.lv-ask-mic svg { width: 22px; height: 22px; }
.lv-ask-mic.is-active {
  background: var(--lv-blue);
  color: #fff;
  border-color: transparent;
  animation: lv-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes lv-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.34); }
  50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
}

.lv-ask-voicebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  font-size: 12.5px;
  color: var(--lv-ink);
}
.lv-ask-voicebar[hidden] { display: none; }
.lv-ask-voicedot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e23b34;
  flex: 0 0 auto;
  animation: lv-mic-pulse 1.4s ease-in-out infinite;
}
.lv-ask-voicestate { font-weight: 700; }
.lv-ask-voicecredit {
  margin-left: auto;
  color: var(--lv-ink-soft);
  font-variant-numeric: tabular-nums;
}
.lv-ask-voicestop {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: transparent;
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--lv-ink);
  cursor: pointer;
}

.lv-ask-citation-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 7px;
}

/* ----- Native app CTA ---------------------------------------------------- */

.lv-native-panel {
  position: fixed;
  left: max(16px, calc((100vw - 480px) / 2 + 16px));
  right: max(16px, calc((100vw - 480px) / 2 + 16px));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 75;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 28px;
  background: rgba(248, 250, 252, 0.98);
  color: #111827;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.lv-native-panel[hidden] { display: none; }

.lv-native-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-items: flex-start;
}

.lv-native-app-icon {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  padding: 7px;
  background: rgba(15, 23, 42, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 32px rgba(15, 23, 42, 0.13);
}

.lv-native-app-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
}

.lv-native-copy {
  min-width: 0;
}

.lv-native-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.lv-native-head span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #40a7ff;
}

.lv-native-close {
  appearance: none;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lv-native-close svg {
  width: 18px;
  height: 18px;
}

.lv-native-panel h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: 0;
}

.lv-native-panel p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.lv-native-feature-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.lv-native-feature-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.05);
}

.lv-native-feature-list > div > span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(64, 167, 255, 0.14);
  color: #65b9ff;
  font-size: 13px;
}

.lv-native-feature-list strong {
  font-size: 13px;
  line-height: 1.35;
}

.lv-native-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px;
}

.lv-native-export {
  grid-column: 1 / -1;
  appearance: none;
  min-height: 48px;
  border: 1px solid rgba(64, 167, 255, 0.28);
  border-radius: 13px;
  padding: 0 14px;
  color: #10375a;
  background: rgba(64, 167, 255, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 800 14px/1 var(--lv-sans, system-ui, sans-serif);
  cursor: pointer;
}

.lv-native-export[hidden] { display: none; }
.lv-native-export svg { width: 19px; height: 19px; }

.lv-native-install {
  grid-column: 1 / -1;
  appearance: none;
  min-height: 50px;
  border: 0;
  border-radius: 13px;
  padding: 0 14px;
  color: #08233c;
  background: #65b9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 850 14px/1 var(--lv-sans, system-ui, sans-serif);
  cursor: pointer;
}

.lv-native-install[hidden] { display: none; }
.lv-native-install svg { width: 19px; height: 19px; }

.lv-store-badge {
  min-width: 0;
  min-height: 54px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 12px;
  background: #05070a;
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.lv-store-badge[hidden] { display: none; }

.lv-store-badge svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.lv-store-badge span {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1;
}

.lv-store-badge small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.lv-store-badge strong {
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  color: #ffffff;
  white-space: nowrap;
}

.lv-native-open {
  grid-column: 1 / -1;
  min-height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  color: #40a7ff;
  background: rgba(15, 23, 42, 0.05);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lv-native-open svg {
  width: 16px;
  height: 16px;
}

.lv-settings-output { cursor: default; }

/* ----- Language sheet --------------------------------------------------- */

.lv-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 50;
}

.lv-sheet-backdrop[hidden] { display: none; }

.lv-sheet-tap {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lv-sheet {
  max-height: 70vh;
  color: #0f172a;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lv-sheet-panel {
  min-height: 0;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.lv-sheet-initial-intro,
.lv-sheet-initial-head {
  display: none;
}

.lv-sheet-title {
  padding: 0 22px;
  color: #475569;
}

.lv-sheet-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.lv-sheet-row {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 22px;
  font-size: 16px;
  color: #0f172a;
  border-top: 1px solid var(--lv-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.lv-sheet-row.is-active {
  color: #1769c2;
  font-weight: 600;
}

.lv-sheet-row .lv-sheet-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lv-blue);
}

/* Flags + layout for the session-driven language picker. */
.lv-chip-flag { margin-right: 6px; font-size: 15px; }
.lv-sheet-row-flag { font-size: 18px; line-height: 1; margin-right: 10px; }
.listener-site .lv-sheet-row-flag { display: none; }
.lv-sheet-row-copy {
  min-width: 0;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lv-sheet-row-label { line-height: 1.2; }
.lv-sheet-row-detail {
  color: var(--lv-ink-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.lv-sheet-row-speed { flex: none; margin-left: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.lv-sheet-row-speed.is-fast { color: #15803d; }
.lv-sheet-row-speed.is-slow { color: #b45309; }
.lv-sheet-row-speed + .lv-sheet-row-ask, .lv-sheet-row-speed + .lv-sheet-row-suggested, .lv-sheet-row-speed + .lv-sheet-row-dot { margin-left: 8px; }
.lv-sheet-row-suggested {
  color: #1769c2;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "Available now" / "Ask the booth to add" section headers in the sheet. */
.lv-sheet-group {
  padding: 16px 22px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.lv-sheet-group:first-child { padding-top: 6px; }

/* Request-only languages: muted, with an "Ask →" / "Requested ⏳" pill instead of a dot. */
.lv-sheet-row--request { color: #475569; }
.lv-sheet-row-ask {
  font-size: 13px;
  font-weight: 600;
  color: #1769c2;
  background: #eef6ff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.lv-sheet-request-open {
  appearance: none;
  width: calc(100% - 28px);
  min-height: 64px;
  margin: 14px;
  padding: 10px 14px;
  border: 1px solid #d9e5f2;
  border-radius: 16px;
  color: #1769c2;
  background: #f7fbff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.lv-sheet-request-open strong,
.lv-sheet-request-open small {
  display: block;
}

.lv-sheet-request-open strong {
  font-size: 15px;
}

.lv-sheet-request-open small {
  margin-top: 3px;
  color: #475569;
  font-size: 12px;
  font-weight: 550;
}

.lv-sheet-request-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #1787ee;
  font-size: 23px;
  font-weight: 500;
}

.lv-sheet-request-chevron {
  color: #8aa0b8;
  font-size: 27px;
  line-height: 1;
}

.lv-sheet-request-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 14px 10px;
  display: flex;
  gap: 8px;
  background: #ffffff;
}

.lv-sheet-request-back {
  appearance: none;
  flex: 0 0 42px;
  min-height: 44px;
  border: 1px solid #d8e0ea;
  border-radius: 14px;
  color: #334155;
  background: #f8fafc;
  font-size: 26px;
  cursor: pointer;
}

.lv-sheet-search {
  min-width: 0;
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d8e0ea;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  background: #f8fafc;
}

.lv-sheet-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.lv-sheet-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #0f172a;
  background: transparent;
  font: 600 15px/1.2 var(--lv-sans, system-ui, sans-serif);
}

.lv-sheet-empty {
  margin: 18px 22px 28px;
  color: #475569;
  font-size: 14px;
  text-align: center;
}

/* First QR join: mirror the App Clip's calm, full-page language chooser.
   Later language changes still use the compact bottom sheet above. */
.lv-sheet-backdrop.is-initial-choice {
  color-scheme: light;
  justify-content: flex-start;
  padding:
    max(52px, calc(env(safe-area-inset-top) + 28px))
    16px
    max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 0%, rgba(193, 229, 251, 0.64), transparent 36%),
    linear-gradient(160deg, #eef9ff 0%, #f8fbfd 54%, #ffffff 100%);
  overflow-y: auto;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-tap {
  display: none;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet {
  width: min(100%, 520px);
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  gap: 24px;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-initial-intro {
  display: block;
  text-align: center;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-initial-intro h2 {
  margin: 0;
  color: #05070a;
  font: 750 clamp(35px, 10vw, 46px)/1.05 var(--lv-sans, system-ui, sans-serif);
  letter-spacing: -0.04em;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-initial-intro .lv-brand-wordmark {
  width: min(216px, 62vw);
  margin: 18px auto 22px;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-initial-intro p {
  margin: 8px 0 0;
  color: #8a9098;
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.25;
}

.lv-sheet-event-card {
  position: relative;
  width: calc(100% - 32px);
  min-height: 140px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  background: linear-gradient(135deg, #d5eaff 0%, #eee1fb 100%);
  box-shadow:
    0 16px 34px rgba(40, 70, 100, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.lv-sheet-event-artwork {
  width: 100%;
  height: 168px;
  display: block;
  object-fit: cover;
}

.lv-sheet-event-artwork[hidden] { display: none; }

.lv-sheet-event-fallback {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 20px;
  color: #4b5563;
}

.lv-sheet-event-fallback[hidden] { display: none; }

.lv-sheet-event-fallback span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #285599;
  color: #f5c34f;
  font: italic 800 31px/1 Georgia, serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lv-sheet-event-fallback strong {
  color: #4b5563;
  font-size: 16px;
  font-weight: 620;
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-panel {
  flex: none;
  max-height: none;
  padding: 18px 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 24px 60px rgba(40, 70, 100, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.lv-sheet-backdrop.is-initial-choice .lv-sheet-initial-head {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 2px 6px;
}

.lv-sheet-initial-back,
.lv-sheet-initial-request {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.lv-sheet-initial-back {
  width: 44px;
  height: 44px;
  padding: 9px;
  justify-self: start;
  color: #101418;
  background: transparent;
}

.lv-sheet-initial-back svg {
  width: 100%;
  height: 100%;
}

.lv-sheet-backdrop.is-initial-choice #listenerLangEventCode {
  color: #05070a;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.lv-sheet-initial-request {
  min-height: 44px;
  padding: 0 14px;
  justify-self: end;
  border-radius: 999px;
  color: #087ef4;
  background: #e2f1ff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 750;
}

.lv-sheet-initial-request svg {
  width: 21px;
  height: 21px;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-title,
.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-group,
.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-request-open {
  display: none;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 2px;
  overflow: visible;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row {
  min-width: 0;
  min-height: 66px;
  padding: 9px 14px;
  border: 1px solid #d8dde2;
  border-radius: 999px;
  background: #eef1f3;
  justify-content: center;
  text-align: center;
  font-size: clamp(15px, 4.5vw, 18px);
  font-weight: 680;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row.is-suggested {
  border-color: #77bfff;
  background: #d9eeff;
  box-shadow: inset 0 0 0 1px rgba(8, 126, 244, 0.12);
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row-flag,
.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row-dot {
  display: none;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row-copy {
  margin: 0;
  align-items: center;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row-suggested {
  width: 20px;
  flex: 0 0 20px;
  margin-left: 5px;
  font-size: 0;
}

.lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row-suggested::after {
  content: "✓";
  color: #05070a;
  font-size: 22px;
  font-weight: 800;
}

.lv-sheet-backdrop.is-initial-choice.is-request-mode .lv-sheet-initial-request {
  visibility: hidden;
}

.lv-sheet-backdrop.is-initial-choice.is-request-mode .lv-sheet-initial-back {
  visibility: hidden;
}

.lv-sheet-backdrop.is-initial-choice.is-request-mode .lv-sheet-title {
  padding-top: 2px;
  color: #475569 !important;
}

.lv-sheet-backdrop.is-initial-choice.is-request-mode .lv-sheet-list {
  max-height: min(58vh, 520px);
}

@media (max-width: 360px) {
  .lv-sheet-backdrop.is-initial-choice {
    padding-left: 10px;
    padding-right: 10px;
  }

  .lv-sheet-backdrop.is-initial-choice .lv-sheet-panel {
    padding-left: 10px;
    padding-right: 10px;
  }

  .lv-sheet-backdrop.is-initial-choice:not(.is-request-mode) .lv-sheet-row {
    min-height: 60px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}

/* ----- In-session language picker = the app's dropdown, not a bottom sheet --
   The app drops a glass card from the pill row: plain rows, the selected one on
   a blue rounded fill with a check, "Request language" at the bottom. The
   pre-join full-screen chooser (.is-initial-choice) keeps its own styling. */
.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) {
  background: transparent;
  justify-content: flex-start;
  padding: calc(var(--lv-live-safe-top, 10px) + 94px) 12px 24px;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-tap {
  position: fixed;
  inset: 0;
  flex: none;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet {
  position: relative;
  z-index: 1;
  max-height: min(64vh, 580px);
  border-radius: 28px;
  color: var(--lv-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40), 0 4px 16px rgba(0, 0, 0, 0.22);
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-panel {
  border-radius: 28px;
  background: rgba(24, 30, 38, 0.90);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  padding: 12px 10px 12px;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row {
  border-top: 0;
  border-radius: 14px;
  padding: 13px 14px;
  min-height: 50px;
  color: var(--lv-ink);
  font-weight: 600;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-speed.is-fast { color: var(--lv-ink-soft); }
.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-speed.is-slow { color: var(--lv-ink-soft); }
.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-detail {
  color: var(--lv-ink-muted);
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row.is-active {
  background: rgba(106, 178, 255, 0.16);
  font-weight: 700;
}

/* The dot becomes the app's blue check on the selected row, and disappears elsewhere. */
.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-dot {
  width: auto;
  height: auto;
  background: transparent;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row.is-active .lv-sheet-row-dot::after {
  content: "✓";
  color: #6ab2ff;
  font-size: 16px;
  font-weight: 800;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-title,
.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-group {
  color: var(--lv-ink-muted);
  padding-left: 14px;
  padding-right: 14px;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row--request {
  color: var(--lv-ink-soft);
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-ask {
  color: #6ab2ff;
  background: rgba(106, 178, 255, 0.14);
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-request-open {
  margin: 10px 4px 2px;
  border-color: rgba(106, 178, 255, 0.22);
  background: rgba(106, 178, 255, 0.10);
  color: #6ab2ff;
}

.listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-request-open small {
  color: var(--lv-ink-muted);
}

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet {
    color: #0f172a;
    box-shadow: 0 30px 80px rgba(28, 40, 60, 0.24), 0 4px 16px rgba(28, 40, 60, 0.10);
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-panel {
    background: rgba(246, 249, 253, 0.88);
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row {
    color: #0f172a;
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-detail {
    color: var(--lv-ink-soft);
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row.is-active {
    background: rgba(0, 122, 255, 0.12);
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row.is-active .lv-sheet-row-dot::after {
    color: #007aff;
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-row-ask {
    color: #1769c2;
    background: #eef6ff;
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-request-open {
    border-color: #d9e5f2;
    background: #f7fbff;
    color: #1769c2;
  }

  .listener-site[data-listener-state="joined"] .lv-sheet-backdrop:not(.is-initial-choice) .lv-sheet-request-open small {
    color: #64748b;
  }
}

/* Request confirmation — shown before asking the booth to add a language. */
.lv-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
  background: rgba(15, 23, 42, 0.35);
}

.lv-confirm-backdrop[hidden] { display: none; }

.lv-confirm {
  width: min(480px, 100%);
  background: #ffffff;
  color: #0f172a;
  border-radius: 28px 28px 0 0;
  padding: 24px 22px max(22px, env(safe-area-inset-bottom));
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv-confirm h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
}

.lv-confirm p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.45;
}

.lv-confirm--ai {
  width: min(480px, 100%);
  min-height: min(72dvh, 620px);
  border-radius: 28px 28px 0 0;
  gap: 11px;
}

.lv-confirm--ai ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
  color: #475569;
  font-size: 13px;
  line-height: 1.4;
}

.lv-confirm--ai li::marker {
  color: #1787ee;
}

.lv-confirm--ai > a {
  color: #1787ee;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.lv-confirm--ai .lv-confirm-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.lv-confirm--ai .lv-confirm-primary {
  grid-row: 1;
  min-height: 48px;
  border-radius: 999px;
  background: #1787ee;
}

.lv-confirm--ai .lv-confirm-secondary {
  min-height: 32px;
  border: 0;
  color: #1787ee;
}

.lv-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.lv-confirm-primary,
.lv-confirm-secondary {
  appearance: none;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.lv-confirm-primary { background: var(--lv-ink); color: #ffffff; }
.lv-confirm-secondary { background: #ffffff; color: var(--lv-ink-soft); border-color: var(--lv-rule); }
.lv-confirm-primary:disabled,
.lv-confirm-secondary:disabled {
  opacity: 0.55;
  cursor: wait;
}

.listener-site :is(button, a, input, summary, [role="slider"]):focus-visible {
  outline: 3px solid var(--lv-focus, #274e8d);
  outline-offset: 3px;
}

@media (max-width: 430px) {
  .lv-top-controls {
    width: min(330px, calc(100vw - 32px));
    flex-wrap: wrap;
    justify-content: flex-end;
    border-radius: 20px;
  }

  .lv-menu-action {
    flex: 1 1 132px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-scan-progress span,
  .lv-ask-mic.is-active,
  .lv-ask-voicedot {
    animation: none !important;
  }

  .listener-site *,
  .listener-site *::before,
  .listener-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Save transcript sheet — compact, explicit export choices for phones. */
.lv-save-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.12);
}

.lv-save-backdrop[hidden] { display: none; }

.lv-save-tap {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lv-save {
  --lv-ink: #182638;
  --lv-ink-soft: #475569;
  --lv-rule: #dbe3ee;
  --lv-blue-wash: #edf4ff;
  color: #182638;
  color-scheme: light;
  width: min(100%, 480px);
  align-self: center;
  max-height: 82vh;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-save-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lv-save > * { flex-shrink: 0; }
.lv-save > label { display: flex; align-items: center; gap: 10px; }
#listenerExportAI { width: 20px; min-height: 20px; height: 20px; margin: 0; }
#listenerExportFileActions:not([hidden]) { display: flex; gap: 10px; }
#listenerExportFileActions button { min-height: 44px; flex: 1; border: 1px solid #ccd9ed; border-radius: 12px; background: #edf4ff; color: #182638; }

.lv-save h3 {
  margin: 4px 0 0;
  color: var(--lv-ink);
  font-size: 22px;
  line-height: 1.2;
}

.lv-save-close {
  appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink-soft);
  cursor: pointer;
  font-weight: 700;
}

.lv-save-meta {
  margin: 0;
  color: var(--lv-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.lv-save-scope {
  margin: 0;
  padding: 0;
  border: 1px solid var(--lv-rule);
  border-radius: 14px;
  overflow: hidden;
}

.lv-save-scope legend {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lv-save-scope label {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-top: 1px solid var(--lv-rule);
  font-size: 15px;
  font-weight: 600;
  color: var(--lv-ink);
}

.lv-save-scope label:first-of-type { border-top: 0; }
.lv-save-scope label[hidden] { display: none; }

.lv-save-scope input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--lv-blue);
}

.lv-save-actions {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 10px;
}

.lv-save-primary,
.lv-save-secondary {
  appearance: none;
  min-height: 48px;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

.lv-save-primary {
  border: 0;
  background: var(--lv-ink);
  color: #ffffff;
}

.lv-save-secondary {
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  color: var(--lv-ink-soft);
}

.lv-save-primary:disabled,
.lv-save-secondary:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Service recording archive sheet — simple native audio controls + verse jumps. */
.lv-archive-backdrop {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.35);
}

.lv-archive-backdrop[hidden] { display: none; }

.lv-archive-tap {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lv-archive {
  width: min(100%, 520px);
  align-self: center;
  max-height: 86vh;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  overflow: auto;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-archive-head,
.lv-archive-service-head,
.lv-archive-track-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lv-archive h3 {
  margin: 4px 0 0;
  color: var(--lv-ink);
  font-size: 22px;
  line-height: 1.2;
}

.lv-archive-close {
  appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink-soft);
  cursor: pointer;
  font-weight: 700;
}

.lv-archive-meta,
.lv-archive-empty,
.lv-archive-sidecar {
  margin: 0;
  color: var(--lv-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.lv-archive-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-archive-service {
  border: 1px solid var(--lv-rule);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv-archive-service-head strong,
.lv-archive-track-head strong {
  color: var(--lv-ink);
  font-size: 15px;
}

.lv-archive-service-head span,
.lv-archive-track-head span {
  color: var(--lv-ink-soft);
  font-size: 13px;
}

.lv-archive-track {
  padding-top: 12px;
  border-top: 1px solid var(--lv-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lv-archive-track:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.lv-archive-audio {
  width: 100%;
  min-height: 38px;
}

.lv-archive-download {
  align-self: flex-start;
  color: var(--lv-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.lv-archive-missing {
  color: var(--lv-ink-soft);
  font-size: 13px;
}

.lv-archive-verses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-archive-verse {
  appearance: none;
  border: 1px solid #d6e0ee;
  border-radius: 999px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink);
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.lv-archive-verse small {
  color: var(--lv-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

/* ========================================================================
   BOOTH v2 — technician control surface (scoped under .church-site)
   A calm, light, desktop-first console that matches the listener app.
   Two live tabs (Translation / Bible verses) + setup behind a gear.
   Every rule is scoped to .church-site so other pages are untouched.
   ===================================================================== */

.church-site {
  --bx-canvas: #f5f6f8;
  --bx-card: #ffffff;
  --bx-rule: rgba(15, 23, 42, 0.09);
  --bx-rule-soft: rgba(15, 23, 42, 0.06);
  --bx-ink: #0f172a;
  --bx-soft: #475569;
  --bx-muted: #94a3b8;
  --bx-wash: #f6f8fb;
  --bx-blue: #3a5380;
  --bx-blue-soft: #dde6f3;
  --bx-blue-wash: #eef3fa;
  --bx-live: #0f766e;
  --bx-live-wash: #e7f4f1;
  --bx-warn: #b45309;
  --bx-warn-wash: #fdf3e6;
  --bx-danger: #b42318;
  --bx-radius: 16px;
  --bx-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* Flat light canvas — drop the old teal gradient + narrow phone column. */
body.church-site {
  background: var(--bx-canvas);
  color: var(--bx-ink);
}

.church-site .phone-app {
  width: min(1240px, calc(100% - 40px));
  max-width: none;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 56px;
  background: transparent;
  box-shadow: none;
}

.church-site .phone-top {
  min-height: 0;
  align-items: flex-start;
  padding: 4px 4px 18px;
  border: 0;
  background: transparent;
  color: var(--bx-ink);
}

.church-site .phone-brand {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bx-ink);
}

.church-site .phone-status {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--bx-muted);
}

.church-site .top-actions { display: flex; gap: 8px; align-items: center; }

.church-site .top-actions .phone-small {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

/* ---- Booth shell ------------------------------------------------------- */

.church-site #hostScreen { padding-top: 0; }
.church-site #hostScreen.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Buttons ----------------------------------------------------------- */

.church-site .bx-primary,
.church-site .bx-secondary,
.church-site .bx-ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.church-site .bx-primary:active,
.church-site .bx-secondary:active,
.church-site .bx-ghost:active { transform: translateY(0.5px); }

.church-site .bx-primary {
  background: var(--bx-ink);
  color: #ffffff;
}
.church-site .bx-primary:hover { background: #1e293b; }

.church-site .bx-secondary {
  background: var(--bx-card);
  border-color: var(--bx-rule);
  color: var(--bx-ink);
}
.church-site .bx-secondary:hover { background: var(--bx-wash); }

.church-site .bx-ghost {
  background: transparent;
  border-color: var(--bx-rule);
  color: var(--bx-soft);
}
.church-site .bx-ghost:hover { background: var(--bx-wash); }

.church-site .bx-quiet {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
}
.church-site .bx-quiet:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-quiet--danger { color: var(--bx-danger); }
.church-site .bx-quiet--danger:hover { background: #fdeceb; color: var(--bx-danger); }

.church-site .bx-danger {
  appearance: none;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #f3c7c2;
  background: #fdeceb;
  color: var(--bx-danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-danger:hover { background: #fbdcd8; }

/* ---- Plan & billing ---------------------------------------------------- */

.church-site .bx-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
}
.church-site .bx-plan-badge[data-plan="free"] { background: var(--bx-wash); color: var(--bx-muted); }

.church-site .bx-billing-note {
  margin: 0;
  font-size: 13px;
  color: var(--bx-muted);
  line-height: 1.45;
}

.church-site .bx-cadence-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
}
.church-site .bx-cadence-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.church-site .bx-cadence-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-cadence-save {
  font-size: 10px;
  font-weight: 700;
  color: var(--bx-live);
  background: var(--bx-live-wash);
  padding: 1px 6px;
  border-radius: 999px;
}

.church-site .bx-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .church-site .bx-plan-grid { grid-template-columns: 1fr; }
}

.church-site .bx-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--bx-rule);
  border-radius: var(--bx-radius);
  background: var(--bx-card);
}
.church-site .bx-plan-section {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bx-rule);
}
.church-site .bx-plan-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.church-site .bx-plan-section span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bx-ink);
}
.church-site .bx-plan-section p {
  max-width: 620px;
  margin: 0;
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
  color: var(--bx-muted);
}
.church-site .bx-plan-section--admin span { color: #92400e; }
.church-site .bx-plan--admin {
  border-color: #f3ddb8;
  background: #fffaf0;
}
.church-site .bx-plan.is-current {
  border-color: var(--bx-blue);
  background: var(--bx-blue-soft);
}
.church-site .bx-plan-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-plan-price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: var(--bx-ink);
  line-height: 1.1;
}
.church-site .bx-plan-price span { font-size: 13px; color: var(--bx-muted); }
.church-site .bx-plan-langs { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-plan-blurb { font-size: 12px; color: var(--bx-muted); line-height: 1.4; flex: 1; }
.church-site .bx-plan .bx-primary { margin-top: 6px; width: 100%; justify-content: center; }
.church-site .bx-plan--admin .bx-primary {
  background: #a16207;
  border-color: #a16207;
}
.church-site .bx-plan-current {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bx-blue);
}
.church-site .bx-manage-billing { align-self: flex-start; }

@media (max-width: 700px) {
  .church-site .bx-plan-section {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .church-site .bx-plan-section p {
    text-align: left;
    max-width: none;
  }
}

/* Usage meter (monthly language-hours) */
.church-site .bx-usage { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--bx-ink);
  font-weight: 600;
}
.church-site .bx-usage-overage {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 7px;
  border-radius: 999px;
}
.church-site .bx-usage-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  overflow: hidden;
}
.church-site .bx-usage-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--bx-blue);
  transition: width 0.3s ease;
}
.church-site .bx-usage-fill[data-level="warn"] { background: #d97706; }
.church-site .bx-usage-fill[data-level="over"] { background: var(--bx-danger); }

/* Overage-vs-stop choice */
.church-site .bx-overage { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-overage-q { font-size: 12px; color: var(--bx-muted); }
.church-site .bx-overage-opts {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
}
.church-site .bx-overage-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
}
.church-site .bx-overage-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}

/* ---- Recording & archive ----------------------------------------------- */

.church-site .bx-record-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #c0362c;
  animation: bx-rec-pulse 1.6s ease-in-out infinite;
}
@keyframes bx-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.church-site .bx-record-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
  margin-top: 4px;
}
.church-site .bx-record-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
}
.church-site .bx-record-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-record-opt[data-record="on"].is-active { color: #c0362c; }
.church-site .bx-record-opt:disabled { opacity: 0.5; cursor: default; }
.church-site .bx-record-consent {
  font-size: 12px;
  line-height: 1.45;
  color: var(--bx-muted);
  margin: 8px 0 0;
}

.church-site .bx-archive { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.church-site .bx-archive-empty { font-size: 12px; color: var(--bx-muted); margin: 0; }
.church-site .bx-archive-item {
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  padding: 12px;
  background: var(--bx-wash);
}
.church-site .bx-archive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.church-site .bx-archive-title { font-weight: 650; font-size: 13px; color: var(--bx-ink); }
.church-site .bx-archive-when { font-size: 11px; color: var(--bx-muted); white-space: nowrap; }
.church-site .bx-archive-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--bx-rule);
}
.church-site .bx-archive-tracklabel { font-size: 12px; color: var(--bx-muted); min-width: 120px; }
.church-site .bx-archive-track audio { height: 32px; max-width: 220px; flex: 1; }
.church-site .bx-archive-dl { font-size: 12px; font-weight: 600; color: var(--bx-accent, #3a5380); text-decoration: none; }
.church-site .bx-archive-missing { font-size: 12px; color: var(--bx-muted); font-style: italic; }

/* Recording chip in the live service-status grid. */
.church-site .bx-host-service-status article[data-state="rec"],
.church-site article[data-state="rec"].bx-status-rec {
  --status-accent: #c0362c;
}
.church-site article[data-state="rec"].bx-status-rec strong { color: #c0362c; }

/* ---- Session header ---------------------------------------------------- */

.church-site .bx-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bx-blue);
}

.church-site .bx-qr {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  border: 1px solid var(--bx-rule);
  background: #fff;
  flex-shrink: 0;
}

/* ---- Status chips ------------------------------------------------------ */

.church-site .bx-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.church-site .bx-status article {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .bx-status span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-status strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bx-ink);
  line-height: 1.25;
}
.church-site .bx-status article[data-state="live"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-status article[data-state="live"] strong { color: var(--bx-live); }
.church-site .bx-status article[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f3ddb8; }
.church-site .bx-status article[data-state="warn"] strong { color: var(--bx-warn); }

/* ---- Pinned "do this now" alerts -------------------------------------- */

.church-site .bx-pinned { display: flex; flex-wrap: wrap; gap: 12px; }
.church-site .bx-pinned:empty { display: none; }
.church-site .pinned-card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--bx-rule);
  border-radius: 14px;
  background: var(--bx-card);
  box-shadow: var(--bx-shadow);
}
.church-site .pinned-verse--pending { border-color: #f3ddb8; background: var(--bx-warn-wash); }
.church-site .pinned-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.church-site .pinned-card header strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--bx-ink);
}
.church-site .pinned-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bx-wash);
  color: var(--bx-soft);
}
.church-site .pinned-tag--live { background: var(--bx-live-wash); color: var(--bx-live); }
.church-site .pinned-tag--warn { background: #fbe7c8; color: var(--bx-warn); }
.church-site .pinned-tag--idle { background: var(--bx-wash); color: var(--bx-muted); }
.church-site .pinned-meta { font-size: 12px; color: var(--bx-muted); }
.church-site .pinned-verse-text,
.church-site .pinned-caption-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bx-soft);
}
.church-site .pinned-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.church-site .pinned-actions .phone-primary,
.church-site .pinned-actions .phone-ghost {
  appearance: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site .pinned-actions .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site .pinned-actions .phone-ghost { background: transparent; border-color: var(--bx-rule); color: var(--bx-soft); }

/* ---- Tabs -------------------------------------------------------------- */

.church-site .bx-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.church-site .bx-tabs-main {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #eceef2;
  border-radius: 12px;
}
.church-site .bx-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-tab:hover { color: var(--bx-ink); }
.church-site .bx-tab.active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.church-site .bx-gear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-gear:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-gear.active {
  background: var(--bx-blue-wash);
  border-color: var(--bx-blue-soft);
  color: var(--bx-blue);
}

/* ---- Panels + grid ----------------------------------------------------- */

.church-site .bx-panel { display: none; }
.church-site .bx-panel.active { display: block; }

.church-site .bx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.church-site .bx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.church-site .bx-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.church-site .bx-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bx-ink);
}
.church-site .bx-card-hint { font-size: 12px; color: var(--bx-muted); text-align: right; }
/* Panic control: one-tap revert to the known-good OpenAI engine. Light amber tint
   (never a dark/opaque fill) so it reads as a safety action without alarming. */
.church-site .bx-panic {
  margin-top: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(193, 120, 23, 0.5);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  color: #9a6207;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-panic:hover { background: rgba(245, 158, 11, 0.2); }

/* ---- Form fields ------------------------------------------------------- */

.church-site .phone-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--bx-soft);
}
.church-site .phone-field input,
.church-site .phone-field select,
.church-site .phone-field textarea {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .phone-field input[type="range"] { padding: 0 2px; accent-color: var(--bx-blue); }
.church-site .phone-field textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
.church-site .phone-field small {
  color: var(--bx-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.church-site .phone-field input:focus,
.church-site .phone-field select:focus,
.church-site .phone-field textarea:focus {
  outline: none;
  border-color: var(--bx-blue);
  box-shadow: 0 0 0 3px var(--bx-blue-wash);
}
.church-site .bx-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.church-site .bx-overlay-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.church-site .bx-overlay-presets button {
  appearance: none;
  min-height: 40px;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  background: var(--bx-wash);
  color: var(--bx-soft);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-overlay-presets button:hover { border-color: var(--bx-blue-soft); color: var(--bx-ink); }
.church-site .bx-overlay-presets button.is-active {
  border-color: var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
}
.church-site .bx-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-check input { width: 17px; height: 17px; accent-color: var(--bx-blue); }
.church-site .bx-setup-actions { display: flex; justify-content: flex-end; }
.church-site .bx-hint { margin: 0; font-size: 12.5px; color: var(--bx-muted); line-height: 1.45; }

/* ---- AI voice toggle --------------------------------------------------- */

.church-site .bx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.church-site .bx-toggle input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.church-site .bx-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.church-site .bx-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.church-site .bx-toggle input:checked + .bx-toggle-track { background: var(--bx-live); }
.church-site .bx-toggle input:checked + .bx-toggle-track::after { transform: translateX(16px); }
.church-site .bx-toggle-text { font-size: 12.5px; font-weight: 600; color: var(--bx-soft); }

/* ---- Capture + manual -------------------------------------------------- */

.church-site .bx-capture { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.church-site .bx-manual { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.church-site .bx-live-manual {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--bx-rule-soft);
}
.church-site .bx-manual input {
  min-height: 44px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .bx-live-manual input {
  min-height: 40px;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .bx-live-manual .bx-secondary { min-height: 40px; border-radius: 10px; padding: 0 14px; }
.church-site .bx-manual input:focus,
.church-site .bx-live-manual input:focus { outline: none; border-color: var(--bx-blue); box-shadow: 0 0 0 3px var(--bx-blue-wash); }
.church-site .realtime-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  padding: 2px 0;
}
.church-site .realtime-status[data-state="connected"] { color: var(--bx-live); }
.church-site .realtime-status[data-state="error"],
.church-site .realtime-status[data-state="disconnected"] { color: var(--bx-danger); }

/* ---- Transcript feed --------------------------------------------------- */

.church-site .bx-card--grow { min-height: 0; }
.church-site .bx-feed {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.church-site .phone-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .phone-line:last-child { border-bottom: 0; }
.church-site .phone-line time { font-size: 12px; color: var(--bx-muted); padding-top: 2px; }
.church-site .phone-line p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--bx-ink); }
.church-site .phone-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--bx-muted);
  background: var(--bx-wash);
  border-radius: 12px;
}

/* ---- Live summary ------------------------------------------------------ */

.church-site .bx-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.church-site .bx-summary:empty { display: none; }
.church-site .bx-summary article {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
  min-width: 0;
}
.church-site .bx-summary span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-summary strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--bx-ink);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- Languages + roster + requests ------------------------------------ */

.church-site .bx-roster { display: flex; flex-direction: column; gap: 2px; }
.church-site .bx-roster:empty { display: none; }
.church-site .bx-roster strong { font-size: 14px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-roster span { font-size: 13px; color: var(--bx-soft); }
.church-site .bx-requests { display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-requests > strong { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-requests > span { font-size: 13px; color: var(--bx-muted); line-height: 1.45; }
.church-site .request-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.church-site .language-request-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f3ddb8;
  border-radius: 12px;
  background: var(--bx-warn-wash);
}
.church-site .language-request-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.church-site .language-request-card b { font-size: 14px; color: var(--bx-ink); }
.church-site .language-request-card span { font-size: 12px; color: var(--bx-soft); }
.church-site .language-request-card .phone-primary,
.church-site .language-request-card .phone-secondary {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site .language-request-card .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site .language-request-card .phone-secondary { background: #fff; border-color: var(--bx-rule); color: var(--bx-soft); }

.church-site .bx-request-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(21, 30, 45, 0.22);
  backdrop-filter: blur(10px);
}

.church-site .bx-request-panel[hidden] { display: none; }

.church-site .bx-request-panel-card {
  width: min(560px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--bx-rule);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(21, 30, 45, 0.2);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.church-site .bx-request-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* ---- Output pickers + chips + actions --------------------------------- */

.church-site .bx-picker { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.church-site .bx-demo-source-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: stretch;
}
.church-site .bx-demo-listener-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 12px;
  background: var(--bx-blue-wash);
}
.church-site .bx-demo-listener-card[hidden] { display: none; }
.church-site .bx-demo-listener-card .bx-qr {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fff;
}
.church-site .bx-demo-listener-card div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.church-site .bx-demo-listener-card strong {
  font-size: 12.5px;
  color: var(--bx-ink);
}
.church-site .bx-demo-listener-card small {
  font-size: 11px;
  color: var(--bx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.church-site .bx-youtube-preview {
  overflow: hidden;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0b1020;
  aspect-ratio: 16 / 9;
}
.church-site .bx-youtube-preview[hidden] { display: none; }
.church-site .bx-youtube-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.church-site .bx-fmt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; margin-top: 8px; }
.church-site .bx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.church-site .bx-chips:empty { display: none; }
.church-site .language-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .language-chip b { font-weight: 700; opacity: 0.55; font-style: normal; }
.church-site .language-chip:hover b { opacity: 1; color: var(--bx-danger); }
.church-site .bx-out-actions { display: flex; align-items: center; gap: 8px; }
.church-site .bx-out-actions .bx-primary { min-height: 40px; padding: 0 20px; }
.church-site .bx-versions { display: flex; flex-direction: column; gap: 10px; }
.church-site .bible-version-row { gap: 6px; }
.church-site .bible-version-row > span { font-size: 12px; font-weight: 600; color: var(--bx-soft); }
.church-site .bible-version-row small { font-size: 11.5px; color: var(--bx-muted); font-weight: 500; }

/* ---- Overlay previews -------------------------------------------------- */

.church-site .bx-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-wash);
}
.church-site .overlay-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.church-site .overlay-preview-head strong { font-size: 12px; font-weight: 700; color: var(--bx-ink); }
.church-site .overlay-preview-head span { font-size: 11px; color: var(--bx-muted); }
.church-site .mini-overlay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: #0f1b2d;
}
.church-site .mini-overlay div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 8px; }
.church-site .mini-overlay span { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.church-site .mini-overlay p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #fff; font-weight: 600; }
.church-site .bx-preview > small { font-size: 11.5px; color: var(--bx-muted); }
.church-site .bx-theme-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0f1b2d;
}

/* ---- Bible verse hero + history --------------------------------------- */

.church-site .bx-card--hero { background: var(--bx-blue-wash); border-color: var(--bx-blue-soft); }
.church-site .bx-verse-hero { display: flex; flex-direction: column; gap: 10px; }
.church-site .bx-verse-hero > strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--bx-blue);
}
.church-site .bx-verse-hero > span { font-size: 12.5px; color: var(--bx-soft); margin-top: -4px; }
.church-site .bx-verse-hero .phone-field { background: var(--bx-card); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bx-blue-soft); }
.church-site .bx-verse-hero .phone-field input { border-color: var(--bx-rule); font-family: Georgia, serif; font-size: 18px; }
.church-site .bx-verse-hero > p {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bx-ink);
}
.church-site .bx-verse-hero .phone-primary {
  appearance: none;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--bx-live);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-verse-hero .phone-primary:hover { background: #0b5f59; }

.church-site .bx-approved {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
}
.church-site .bx-approved small { font-size: 13px; color: var(--bx-soft); }

.church-site .bx-verses { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.church-site .verse-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  padding: 13px 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .verse-chip strong { font-family: Georgia, serif; font-size: 16px; font-weight: 600; color: var(--bx-ink); }
.church-site .verse-chip > span { font-size: 12px; font-weight: 600; color: var(--bx-muted); justify-self: end; }
.church-site .verse-chip p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--bx-soft); }
.church-site .verse-chip .verse-approve {
  grid-column: 1 / -1;
  appearance: none;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--bx-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.church-site .verse-chip .verse-approve:hover { background: #1e293b; }

/* ---- Billing + cost ---------------------------------------------------- */

.church-site .bx-billing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bx-blue-wash);
  border: 1px solid var(--bx-blue-soft);
}
.church-site .bx-billing.listener-pay { background: var(--bx-warn-wash); border-color: #f3ddb8; }
.church-site .bx-billing strong { font-size: 13px; color: var(--bx-ink); }
.church-site .bx-billing span { font-size: 12.5px; color: var(--bx-soft); line-height: 1.4; }
.church-site .bx-cost { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bx-wash); }
.church-site .bx-cost strong { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--bx-soft); }
.church-site .bx-cost span { font-size: 12.5px; color: var(--bx-soft); }

/* ---- Account ----------------------------------------------------------- */

.church-site .bx-account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.church-site .bx-account-label { font-size: 13px; color: var(--bx-soft); }
.church-site .bx-referral-share {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-wash);
}
.church-site .bx-referral-code {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--bx-ink);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .church-site .bx-referral-share {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- Login screen polish ---------------------------------------------- */

.church-site #churchLoginScreen.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: 8px auto 0;
}
.church-site .church-entry h1 { font-family: Georgia, "Source Serif Pro", serif; font-size: 28px; font-weight: 600; color: var(--bx-ink); }
.church-site .church-entry p { font-size: 15px; color: var(--bx-soft); line-height: 1.5; }
.church-site .auth-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #eceef2; border-radius: 12px; align-self: flex-start; }
.church-site .auth-tab { appearance: none; border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--bx-soft); cursor: pointer; }
.church-site .auth-tab.is-active { background: #fff; color: var(--bx-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.church-site .auth-tab[hidden],
.church-site [data-auth-pane][hidden] {
  display: none !important;
}
.church-site .auth-guidance {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bx-soft);
}
.church-site .auth-only,
.church-site .demo-only {
  display: none;
}
.church-site [data-auth-current="signin"] [data-auth-pane~="signin"],
.church-site [data-auth-current="signup"] [data-auth-pane~="signup"],
.church-site [data-auth-current="demo"] [data-auth-pane~="demo"] {
  display: flex;
}
.church-site .join-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--bx-card); border: 1px solid var(--bx-rule); border-radius: var(--bx-radius); box-shadow: var(--bx-shadow); }
.church-site .auth-error { margin: 0; font-size: 13px; color: var(--bx-danger); }
.church-site .split-buttons { display: flex; gap: 8px; }
.church-site #churchLoginForm .phone-primary,
.church-site #churchLoginForm .phone-secondary {
  appearance: none;
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site #churchLoginForm .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site #churchLoginForm .phone-secondary { background: #fff; border-color: var(--bx-rule); color: var(--bx-soft); }
.church-site #churchLoginScreen .billing-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bx-blue-wash);
  border: 1px solid var(--bx-blue-soft);
}
.church-site #churchLoginScreen .billing-banner strong { font-size: 13px; color: var(--bx-ink); }
.church-site #churchLoginScreen .billing-banner span { font-size: 12.5px; color: var(--bx-soft); }

/* ---- Responsive: collapse to a single column on narrow screens -------- */

@media (max-width: 880px) {
  .church-site .bx-grid { grid-template-columns: 1fr; }
  .church-site .bx-status { grid-template-columns: repeat(2, 1fr); }
  .church-site .bx-summary { grid-template-columns: 1fr; }
  .church-site .bx-field-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   BOOTH v2.1 — header removed, two pages only; hero mic; compact code.
   ===================================================================== */

/* Slim the chrome so the tabs are the first real thing on screen. */
.church-site .phone-top { padding: 2px 4px 12px; }
.church-site #hostScreen.active { gap: 14px; }

/* Tabs are now the top-level nav — give the bar a touch more presence. */
.church-site .bx-tab { position: relative; padding: 10px 22px; font-size: 14.5px; }
.church-site .bx-tab[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ---- Mic — a compact red control that sits in the tab bar -------------- */

.church-site .bx-tabs-side { display: inline-flex; align-items: center; gap: 8px; }
/* All four booth controls share one line in the top bar. */
.church-site .bx-live-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.church-site .bx-live-controls[hidden] { display: none !important; }
.church-site:not([data-church-auth="signed-in"]) .top-actions { display: none !important; }

/* Square icon buttons — the Setup gear and the Listener-site phone. */
.church-site .bx-iconbtn,
.church-site .top-actions .phone-small.bx-iconbtn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.church-site .bx-iconbtn svg { width: 18px; height: 18px; }
/* "Projecting" state on the booth Project button — reuses the live teal wash. */
.church-site .bx-iconbtn.is-active {
  background: var(--bx-live-wash);
  border-color: #bfe3dc;
  color: var(--bx-live);
}

.church-site .bx-mic {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  background: #dc2626;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.20);
  transition: background 0.15s ease;
}
.church-site .bx-mic::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.church-site .bx-mic:hover { background: #c01c1c; }
.church-site .bx-mic.is-recording { animation: bx-mic-pulse 1.5s ease-out infinite; }
.church-site .bx-mic.is-recording::before { animation: bx-dot-blink 1s steps(1, end) infinite; }

@keyframes bx-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45), 0 4px 12px rgba(220, 38, 38, 0.20); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0), 0 4px 12px rgba(220, 38, 38, 0.20); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 4px 12px rgba(220, 38, 38, 0.20); }
}
@keyframes bx-dot-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .church-site .bx-mic.is-recording { animation: none; }
  .church-site .bx-mic.is-recording::before { animation: none; }
}

/* ---- Session code — chip in the top bar, QR drops in a popover --------- */

.church-site .bx-session { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.church-site .bx-session-plan {
  min-height: 40px;
  padding-inline: 12px;
  white-space: nowrap;
}
.church-site .bx-session-create { min-height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 11px; }

.church-site .bx-code-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px 0 15px;
  border-radius: 11px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  cursor: pointer;
}
.church-site .bx-code-chip:hover { filter: brightness(0.98); }
.church-site .bx-code-chip-kicker {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
}
.church-site .bx-code-chip strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.church-site .bx-code-chip-caret { transition: transform 0.15s ease; opacity: 0.6; }
.church-site .bx-code-chip[aria-expanded="true"] .bx-code-chip-caret { transform: rotate(180deg); }

.church-site .bx-session-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 300px;
  max-width: min(86vw, 340px);
  padding: 16px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}
.church-site .bx-session-pop .bx-codebox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.church-site .bx-session-pop .bx-qr {
  width: 168px;
  height: 168px;
  align-self: center;
  border-radius: 10px;
}
.church-site .bx-session-pop .bx-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-muted);
}
.church-site .bx-session-pop .bx-codebox-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.church-site .bx-session-pop .bx-codebox-main small { font-size: 11.5px; color: var(--bx-soft); word-break: break-all; }
/* Three actions now (Show on screen / Download PNG / Copy invite) — stack them. */
.church-site .bx-session-pop .bx-codebox-actions { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-session-pop .bx-codebox-actions > * { width: 100%; text-align: center; }
.church-site .bx-quiet--accent { color: var(--bx-blue); font-weight: 700; }
.church-site .bx-quiet.is-active { background: var(--bx-live-wash); border-color: #bfe3dc; color: var(--bx-live); }

@media (max-width: 720px) {
  .church-site .bx-code-chip-kicker { display: none; }
  .church-site .bx-session-pop { right: auto; left: 0; }
}

/* ---- Output menu — the Project button drops a destination picker ---------
   Two destinations: External display (we push a stage) and Overlay (a URL other
   software pulls). Each group has an Edit entry point for its designer. */
.church-site .bx-project-wrap { position: relative; display: inline-flex; align-items: center; }

.church-site .bx-project-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 300px;
  max-width: min(86vw, 340px);
  padding: 8px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.church-site .bx-proj-group { padding: 4px; }
.church-site .bx-proj-grouphead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 9px;
}
.church-site .bx-proj-grouptitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bx-muted);
}
.church-site .bx-proj-grouptitle small {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bx-soft);
}
.church-site .bx-proj-edit {
  appearance: none;
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid var(--bx-rule);
  border-radius: 9px;
  background: transparent;
  color: var(--bx-blue);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.church-site .bx-proj-edit:hover { background: var(--bx-blue-wash); border-color: var(--bx-blue-soft); }

.church-site .bx-proj-list { display: flex; flex-direction: column; gap: 4px; }
.church-site .bx-proj-row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}
.church-site .bx-proj-row:hover { background: var(--bx-wash); }
.church-site .bx-proj-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.church-site .bx-proj-row-name { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-proj-row-sub { font-size: 11px; color: var(--bx-soft); }
.church-site .bx-proj-row-state { font-size: 11px; font-weight: 700; color: var(--bx-muted); flex-shrink: 0; }
.church-site .bx-proj-row.is-live { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-proj-row.is-live .bx-proj-row-name,
.church-site .bx-proj-row.is-live .bx-proj-row-state { color: var(--bx-live); }
.church-site .bx-proj-empty {
  margin: 4px 0 0;
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bx-soft);
}

.church-site .bx-proj-divider { height: 1px; background: var(--bx-rule); margin: 8px 4px; }

/* Captions vs Verses — segmented control governing both the copy-link and the
   stage caption layer. */
.church-site .bx-proj-modes {
  display: inline-flex;
  gap: 4px;
  margin: 0 8px 9px;
  padding: 3px;
  background: var(--bx-wash);
  border-radius: 10px;
}
.church-site .bx-proj-mode {
  appearance: none;
  border: 0;
  padding: 5px 14px;
  border-radius: 7px;
  background: transparent;
  color: var(--bx-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-proj-mode.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.church-site .bx-proj-copy {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px 4px;
  padding: 9px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 10px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.church-site .bx-proj-copy:hover { filter: brightness(0.97); }
.church-site .bx-proj-copy.is-live {
  border-color: #bfe3dc;
  background: var(--bx-live-wash);
  color: var(--bx-live);
}
.church-site .bx-proj-copy.is-live svg { color: var(--bx-live); }

@media (max-width: 720px) {
  .church-site .bx-project-pop { right: auto; left: 0; }
}

/* ========================================================================
   BOOTH v2.2 — live translation panel beside the transcript.
   Each active language as a badge + what it is being translated to now.
   ===================================================================== */

.church-site .bx-hide { display: none; }

.church-site .bx-langlive { display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-langcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .bx-langbadge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  border: 1px solid var(--bx-blue-soft);
}
.church-site .bx-langtext {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bx-ink);
}
.church-site .bx-langcard--waiting { background: var(--bx-wash); }
.church-site .bx-langcard--waiting .bx-langbadge {
  background: var(--bx-card);
  color: var(--bx-muted);
  border-color: var(--bx-rule);
}
.church-site .bx-langcard--waiting .bx-langtext { color: var(--bx-muted); font-style: italic; }

/* Requests card carries its own rendered heading — no card-head needed. */
.church-site .bx-requests-card:has(.bx-requests:empty) { display: none; }

/* ========================================================================
   BOOTH v2.3 — the transcript header IS the language switcher.
   Pills = active languages; blinking pill = a listener request; "+" adds one.
   Clicking a pill swaps the feed to that language's running translation.
   ===================================================================== */

.church-site .bx-transcript { gap: 0; }
.church-site .bx-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-pills-list { display: contents; }

.church-site .bx-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.church-site .bx-pill:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-pill.active {
  background: var(--bx-ink);
  border-color: var(--bx-ink);
  color: #ffffff;
}

.church-site .bx-pill--request {
  border-color: #f0c8a8;
  background: var(--bx-warn-wash);
  color: var(--bx-warn);
  animation: bx-pill-blink 1.2s ease-in-out infinite;
}
.church-site .bx-pill--request:hover { background: #fbe7c8; color: var(--bx-warn); }
.church-site .bx-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes bx-pill-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .church-site .bx-pill--request { animation: none; } }

.church-site .bx-request-bell {
  position: relative;
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: #ffffff;
  color: var(--bx-soft);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.church-site .bx-request-bell.has-requests {
  border-color: #f0b3b3;
  background: #fff1f1;
  color: #b91c1c;
  animation: bx-request-ring 1.1s ease-in-out infinite;
}

.church-site .bx-request-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.church-site .bx-request-badge[hidden] { display: none; }

@keyframes bx-request-ring {
  0%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.22); }
  30% { transform: rotate(-8deg); box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.08); }
  60% { transform: rotate(8deg); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .church-site .bx-request-bell.has-requests { animation: none; }
}

.church-site .bx-pill--add {
  position: relative;
  overflow: hidden;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 700;
  border-style: dashed;
  color: var(--bx-muted);
}
.church-site .bx-pill--add:hover {
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  border-color: var(--bx-blue-soft);
}
.church-site .bx-pill--add select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

/* Flag emoji prefix on a language badge — makes the language recognisable at a glance. */
.church-site .bx-pill-flag { font-size: 14px; line-height: 1; margin-right: 1px; }

/* Per-language listener count, sitting on the right edge of a language badge. */
.church-site .bx-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--bx-wash);
  color: var(--bx-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.church-site .bx-pill-count.is-active { background: rgba(34, 161, 110, 0.14); color: #1f9d63; }
/* Legible on the dark active pill. */
.church-site .bx-pill.active .bx-pill-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Tap-to-switch engine badge inside a language pill. "G" = Gemini, "AI" = OpenAI. */
.church-site .bx-pill-engine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.church-site .bx-pill-engine:hover { filter: brightness(1.06); transform: translateY(-0.5px); }
.church-site .bx-engine-openai { background: rgba(16, 163, 127, 0.16); color: #0e8c6d; }      /* OpenAI green */
.church-site .bx-engine-gemini { background: rgba(66, 109, 244, 0.16); color: #3b62d6; }       /* Gemini blue */
/* Keep legible on the dark active pill. */
.church-site .bx-pill.active .bx-engine-openai { background: rgba(255, 255, 255, 0.22); color: #d7fff0; }
.church-site .bx-pill.active .bx-engine-gemini { background: rgba(255, 255, 255, 0.22); color: #dce6ff; }

/* The × that removes a language from the service — subtle until hovered. */
.church-site .bx-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  margin-right: -4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--bx-muted);
  opacity: 0.5;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.church-site .bx-pill-remove:hover { opacity: 1; background: rgba(192, 57, 43, 0.12); color: #c0392b; }
.church-site .bx-pill.active .bx-pill-remove { color: rgba(255, 255, 255, 0.7); }
.church-site .bx-pill.active .bx-pill-remove:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Far-right headline: total people listening across every language. */
.church-site .bx-listener-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.church-site .bx-listener-total.is-active {
  border-color: rgba(34, 161, 110, 0.32);
  background: rgba(34, 161, 110, 0.08);
  color: #1f9d63;
}
.church-site .bx-listener-total-icon { font-size: 13px; line-height: 1; }

.church-site .bx-feed--tall { max-height: min(58vh, 560px); }

/* ========================================================================
   BOOTH v2.4 — live-audio probe (green dot) + booth monitor (speaker).
   A pulsing green dot on a pill = that language is actively casting voice.
   The speaker button monitors the selected language's translated audio.
   ===================================================================== */

.church-site .bx-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-transcript-head .bx-pills {
  flex: 1;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Green "casting live audio" dot on an active-language pill. */
.church-site .bx-pill-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: bx-live-pulse 1.6s ease-out infinite;
}
.church-site .bx-pill.active .bx-pill-live { background: #4ade80; }
@keyframes bx-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .church-site .bx-pill-live { animation: none; } }

/* Speaker / monitor button — listen to the selected language on the booth. */
.church-site .bx-monitor {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.church-site .bx-monitor:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-monitor.is-listening {
  background: var(--bx-live-wash);
  border-color: #bfe3dc;
  color: var(--bx-live);
}
.church-site .bx-monitor.is-listening svg { animation: bx-monitor-pulse 1.2s ease-in-out infinite; }
@keyframes bx-monitor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .church-site .bx-monitor.is-listening svg { animation: none; } }

/* ========================================================================
   BOOTH v2.6 — confidence (always-on health strip) + audio preflight.
   The cockpit is never silent: audio in · AI voice/relay · languages ·
   listeners · last-caption age · budget. Per-chip state colours reuse the
   live/warn/danger tokens; "good" = teal, "warn" = amber, "bad" = red.
   ===================================================================== */

/* "Check audio" button — quiet companion to the red mic button. */
.church-site .bx-checkaudio {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 11px;
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.church-site .bx-checkaudio:hover { background: var(--bx-blue-wash); color: var(--bx-blue); border-color: var(--bx-blue-soft); }
.church-site .bx-checkaudio svg { flex-shrink: 0; }
@media (max-width: 560px) { .church-site .bx-checkaudio span { display: none; } .church-site .bx-checkaudio { padding: 0 11px; } }

.church-site .bx-pause-input {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #f0c8a8;
  border-radius: 11px;
  background: var(--bx-warn-wash);
  color: var(--bx-warn);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.church-site .bx-pause-input:hover { background: rgba(245, 158, 11, 0.18); }
.church-site .bx-pause-input.is-paused {
  border-color: #bfe3dc;
  background: var(--bx-live-wash);
  color: var(--bx-live);
}
.church-site .bx-pause-input svg { flex-shrink: 0; }
.church-site .bx-pause-input[hidden] { display: none; }

.church-site .bx-live-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  min-width: 158px;
  padding: 0 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 11px;
  background: var(--bx-card);
  color: var(--bx-soft);
  flex-shrink: 0;
}
.church-site .bx-live-meter[hidden] { display: none; }
.church-site .bx-live-meter-label {
  min-width: 72px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-live-meter.is-paused .bx-live-meter-label { color: var(--bx-warn); }
.church-site .bx-live-meter-track {
  width: 62px;
  height: 9px;
  border-radius: 999px;
  background: var(--bx-wash);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-live-meter-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--bx-live);
  transition: width 0.09s linear;
}
.church-site .bx-live-meter-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-live-meter-fill[data-state="bad"] { background: var(--bx-danger); }
.church-site .bx-live-meter-fill[data-state="paused"] { background: var(--bx-warn); }
@media (max-width: 760px) {
  .church-site .bx-live-meter { min-width: 104px; padding: 0 10px; }
  .church-site .bx-live-meter-label { display: none; }
}
@media (max-width: 560px) {
  .church-site .bx-pause-input span { display: none; }
  .church-site .bx-pause-input { padding: 0 11px; }
}

/* Always-on confidence strip. */
.church-site .bx-confidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding: 2px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-confidence[hidden] { display: none; }

.church-site .bx-conf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  min-height: 32px;
}
.church-site .bx-conf-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.church-site .bx-conf-text b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bx-muted); }
.church-site .bx-conf-text i { font-size: 13px; font-weight: 600; font-style: normal; color: var(--bx-ink); }

.church-site .bx-conf-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bx-muted); flex-shrink: 0;
}

/* VU meter inside the audio chip. */
.church-site .bx-conf-vu {
  width: 40px; height: 8px; border-radius: 4px; background: var(--bx-wash);
  overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-conf-vu-fill {
  display: block; height: 100%; width: 0%; border-radius: 4px; background: var(--bx-live);
  transition: width 0.09s linear;
}
.church-site .bx-conf-vu-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-conf-vu-fill[data-state="bad"] { background: var(--bx-danger); }

/* Per-state chip tints — light washes, never opaque blocks. */
.church-site .bx-conf-chip[data-state="good"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-conf-chip[data-state="good"] .bx-conf-dot { background: var(--bx-live); }
.church-site .bx-conf-chip[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f0c8a8; }
.church-site .bx-conf-chip[data-state="warn"] .bx-conf-dot { background: var(--bx-warn); }
.church-site .bx-conf-chip[data-state="warn"] .bx-conf-text i { color: var(--bx-warn); }
.church-site .bx-conf-chip[data-state="bad"] { background: #fdecea; border-color: #f3b9b2; }
.church-site .bx-conf-chip[data-state="bad"] .bx-conf-dot { background: var(--bx-danger); animation: bx-pill-blink 1.1s ease-in-out infinite; }
.church-site .bx-conf-chip[data-state="bad"] .bx-conf-text i { color: var(--bx-danger); }
@media (prefers-reduced-motion: reduce) { .church-site .bx-conf-chip[data-state="bad"] .bx-conf-dot { animation: none; } }

/* Alert banner — prominent warn/critical/stopped/relay-down notice above the
   live page. Shared by the budget banner and the relay/fallback alert. */
.church-site .bx-alert-banner {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 13px;
  border: 1px solid #f0c8a8;
  background: var(--bx-warn-wash);
}
.church-site .bx-alert-banner[hidden] { display: none; }
.church-site .bx-alert-banner strong { font-size: 14px; font-weight: 700; color: var(--bx-warn); }
.church-site .bx-alert-banner span { font-size: 13px; line-height: 1.45; color: var(--bx-soft); }
.church-site .bx-alert-banner[data-state="bad"],
.church-site .bx-alert-banner[data-state="critical"],
.church-site .bx-alert-banner[data-state="stopped"] {
  border-color: #f3b9b2;
  background: #fdecea;
}
.church-site .bx-alert-banner[data-state="bad"] strong,
.church-site .bx-alert-banner[data-state="critical"] strong,
.church-site .bx-alert-banner[data-state="stopped"] strong { color: var(--bx-danger); }

/* Audio preflight modal — light frosted glass, never a dark scrim. */
.church-site .bx-preflight {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(244, 245, 241, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.church-site .bx-preflight[hidden] { display: none; }
.church-site .bx-preflight-card {
  width: min(440px, 100%);
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 18px;
  box-shadow: var(--bx-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.church-site .bx-preflight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.church-site .bx-preflight-head .bx-card-title { display: block; font-size: 17px; }
.church-site .bx-preflight-head .bx-card-hint { display: block; margin-top: 3px; text-align: left; }
.church-site .bx-preflight-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--bx-muted); padding: 4px;
}
.church-site .bx-preflight-x:hover { color: var(--bx-ink); }

.church-site .bx-preflight-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 13px;
  font-size: 15.5px;
  font-weight: 700;
  background: var(--bx-wash);
  color: var(--bx-soft);
}
.church-site .bx-preflight-verdict::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.85;
}
.church-site .bx-preflight-verdict[data-state="good"] { background: var(--bx-live-wash); color: var(--bx-live); }
.church-site .bx-preflight-verdict[data-state="warn"] { background: var(--bx-warn-wash); color: var(--bx-warn); }
.church-site .bx-preflight-verdict[data-state="bad"] { background: #fdecea; color: var(--bx-danger); }

.church-site .bx-preflight-meter { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-preflight-meter-label,
.church-site .bx-preflight-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bx-muted); }
.church-site .bx-preflight-track {
  height: 14px; border-radius: 7px; background: var(--bx-wash);
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-preflight-fill {
  height: 100%; width: 0%; border-radius: 7px; background: var(--bx-live);
  transition: width 0.08s linear;
}
.church-site .bx-preflight-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-preflight-fill[data-state="bad"] { background: var(--bx-danger); }

.church-site .bx-preflight-preview { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-preflight-transcript {
  margin: 0;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bx-wash);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bx-ink);
}
.church-site .bx-preflight-transcript.is-empty { color: var(--bx-muted); font-style: italic; }
.church-site .bx-preflight-transcript.is-empty::before { content: "Say a few words — they'll appear here…"; }
.church-site .bx-preflight-transcript.is-empty:not(:empty)::before { content: none; }
.church-site .bx-preflight-actions { display: flex; justify-content: flex-end; }
.church-site .bx-preflight-actions .bx-primary { min-height: 42px; padding: 0 22px; }

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

/* ========================================================================
   BOOTH v2.5 — Bible page: transcript | four-verse picker + live screen.
   ===================================================================== */

.church-site .bx-bible-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.church-site .bx-bible-pick { display: flex; flex-direction: column; gap: 14px; }

.church-site .bx-verse-manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: var(--bx-wash);
}
.church-site .bx-ref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}
.church-site .bx-ref-row .bx-secondary,
.church-site .bx-ref-row .bx-primary {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 14px;
  white-space: nowrap;
}
.church-site .bx-verse-manual-preview {
  padding: 10px 12px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 11px;
  background: #ffffff;
}
.church-site .bx-verse-manual-preview[data-state="error"] {
  border-color: #f3b9b2;
  background: #fdecea;
}
.church-site .bx-verse-manual-preview[data-state="warn"] {
  border-color: #f0c8a8;
  background: var(--bx-warn-wash);
}
.church-site .bx-manual-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.church-site .bx-manual-preview-head strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  color: var(--bx-ink);
}
.church-site .bx-manual-preview-head span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bx-muted);
  text-align: right;
}
.church-site .bx-verse-manual-preview p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bx-soft);
}

/* Four verse boxes — a 2×2 grid you click to put a verse on screen. */
.church-site .bx-vboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.church-site .bx-vbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: var(--bx-card);
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.church-site .bx-vbox:hover {
  border-color: var(--bx-blue-soft);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.church-site .bx-vbox:focus-visible { outline: 2px solid var(--bx-blue); outline-offset: 2px; }
.church-site .bx-vbox.is-live {
  border-color: var(--bx-live);
  background: var(--bx-live-wash);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.16);
}
.church-site .bx-vbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.church-site .bx-vbox-head strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--bx-ink);
}
.church-site .bx-vbox-conf { font-size: 11px; font-weight: 700; color: var(--bx-muted); }
.church-site .bx-vbox-livetag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--bx-live);
  padding: 2px 7px;
  border-radius: 999px;
}
.church-site .bx-vbox p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bx-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.church-site .bx-vbox-muted { font-style: italic; color: var(--bx-muted); }
.church-site .bx-vbox-nav { display: flex; gap: 6px; margin-top: auto; }
.church-site .bx-vbox-arrow {
  appearance: none;
  flex: 1;
  min-height: 30px;
  border: 1px solid var(--bx-live);
  border-radius: 8px;
  background: var(--bx-card);
  color: var(--bx-live);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-vbox-arrow:hover { background: var(--bx-live); color: #fff; }
.church-site .bx-vbox-action {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--bx-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.church-site .bx-vbox-action.is-live {
  background: var(--bx-live);
  color: #fff;
}

/* Live screen — the real projected overlay, embedded so you watch it update. */
.church-site .bx-bible-live {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.church-site .bx-bible-liveframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0b1120;
}

@media (max-width: 900px) {
  .church-site .bx-bible-split { grid-template-columns: 1fr; }
  .church-site .bx-vboxes { grid-template-columns: 1fr; }
  .church-site .bx-ref-row,
  .church-site .bx-live-manual { grid-template-columns: 1fr; }
  .church-site .bx-ref-row .bx-secondary,
  .church-site .bx-ref-row .bx-primary,
  .church-site .bx-live-manual .bx-secondary { width: 100%; }
}

/* ========================================================================
   PROJECTOR OVERLAY — bottom-right join QR (toggled from the booth).
   Not scoped to .church-site: this renders on live-overlay.html.
   ===================================================================== */

.overlay-join {
  position: fixed;
  right: 4vmin;
  bottom: 4vmin;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.overlay-join[hidden] { display: none; }
.overlay-join-qr { width: 132px; height: 132px; display: block; border-radius: 8px; }
.overlay-join-meta { display: flex; flex-direction: column; gap: 6px; }
.overlay-join-meta span { font-size: 18px; font-weight: 600; color: #475569; }
.overlay-join-meta strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #0f172a;
  line-height: 1;
}
/* In the booth's small preview iframe, scale the join card down a touch. */
.preview .overlay-join { right: 2vmin; bottom: 2vmin; gap: 12px; padding: 12px 14px; }
.preview .overlay-join-qr { width: 84px; height: 84px; }
.preview .overlay-join-meta span { font-size: 12px; }
.preview .overlay-join-meta strong { font-size: 24px; }

/* ========================================================================
   BOOTH v2.6 — full-height app shell. The live page fills the viewport and
   never scrolls the page; only the transcript feed scrolls inside its card.
   ===================================================================== */

.church-site .phone-app {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 0 14px;
}
.church-site .phone-top { flex-shrink: 0; padding: 2px 4px 10px; }

/* The active screen fills the shell. Login scrolls if a short window clips it. */
.church-site .phone-screen.active { flex: 1; min-height: 0; }
.church-site #churchLoginScreen.active { overflow-y: auto; }

.church-site #hostScreen.active {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 10px;
}

/* Live page fills + never scrolls. Setup scrolls inside. */
.church-site .bx-panel[data-host-panel="service"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.church-site .bx-panel[data-host-panel="setup"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Settings: a fixed category sidebar + a scrolling content column. */
.church-site .bx-setup { flex: 1; min-height: 0; display: flex; gap: 16px; }
.church-site .bx-setup-nav {
  flex-shrink: 0;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  border-right: 1px solid var(--bx-rule);
  padding-right: 10px;
}
.church-site .bx-setup-tab {
  appearance: none;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-setup-tab:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-setup-tab.active { background: var(--bx-blue-wash); color: var(--bx-blue); }
.church-site .bx-setup-content {
  flex: 1;
  width: min(100%, 1120px);
  max-width: 1120px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}
.church-site .bx-setup-pane { display: none; flex-direction: column; gap: 14px; }
.church-site .bx-setup-pane.active { display: flex; }
.church-site .bx-setup-content .bx-setup-actions { margin-top: 2px; }
.church-site .bx-setup-summary {
  width: 100%;
  gap: 16px;
  padding: 20px 22px;
}
.church-site .bx-setup-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.church-site .bx-setup-summary-head > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.church-site .bx-setup-summary-head strong {
  font-size: 21px;
  line-height: 1.18;
  font-weight: 750;
  color: var(--bx-ink);
}
.church-site .bx-setup-summary-head small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bx-soft);
}
.church-site .bx-setup-summary-code {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.church-site .bx-setup-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--bx-rule-soft);
}
.church-site .bx-setup-summary-grid article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.church-site .bx-setup-summary-grid article span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-setup-summary-grid article strong {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--bx-soft);
  overflow-wrap: anywhere;
}
.church-site .bx-setup-summary-grid article[data-state="live"] strong { color: var(--bx-live); }
.church-site .bx-setup-summary-grid article[data-state="warn"] strong { color: var(--bx-warn); }
.church-site .bx-preflight-card { gap: 14px; }
.church-site .bx-preflight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.church-site .bx-preflight-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.church-site .bx-preflight-head strong {
  min-width: 0;
  font-size: 17px;
  font-weight: 750;
  color: var(--bx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.church-site .bx-preflight-code {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.church-site .bx-preflight-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.church-site .bx-preflight-grid article {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-wash);
}
.church-site .bx-preflight-grid article[data-state="live"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-preflight-grid article[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f4d7ae; }
.church-site .bx-preflight-grid article span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-preflight-grid article strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--bx-ink);
}
.church-site .bx-upcoming {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.church-site .bx-upcoming-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--bx-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.church-site .bx-upcoming-list {
  display: grid;
  gap: 8px;
}
.church-site .bx-upcoming-row {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 8px;
  background: var(--bx-card);
  color: var(--bx-ink);
  text-align: left;
  cursor: pointer;
}
.church-site .bx-upcoming-row:hover,
.church-site .bx-upcoming-row.is-active {
  border-color: var(--bx-blue-soft);
  background: var(--bx-blue-wash);
}
.church-site .bx-upcoming-row strong {
  grid-row: span 2;
  align-self: center;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.church-site .bx-upcoming-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.church-site .bx-upcoming-row small {
  min-width: 0;
  color: var(--bx-muted);
}

/* The two live panels stretch to the full height of the page. */
.church-site .bx-bible-split {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.church-site .bx-bible-split > .bx-card { min-height: 0; max-height: 100%; }

/* Left: transcript card — header fixed, feed flexes + scrolls. */
.church-site .bx-transcript { overflow: hidden; }
.church-site .bx-transcript-head { flex-shrink: 0; }
.church-site .bx-transcript .bx-feed--tall { flex: 1; min-height: 0; max-height: none; }

/* Right: the live screen stays a fixed 16:9 pinned at the bottom; the verse
   boxes take the space above and scroll if there are ever too many. */
.church-site .bx-bible-pick { overflow: hidden; }
.church-site .bx-bible-pick .bx-card-head { flex-shrink: 0; }
.church-site .bx-bible-pick .bx-vboxes {
  flex: 0 0 auto;
  min-height: 118px;
  max-height: 230px;
  overflow-y: auto;
  align-content: start;
}
.church-site .bx-bible-live { flex-shrink: 0; }
.church-site .bx-bible-liveframe { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; }

/* ---- Stage designer ----------------------------------------------------- */
.church-site .bx-panel[data-host-panel="stage"].active {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.church-site .bx-stage-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.church-site .bx-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.church-site .bx-stage-head .bx-card-title { display: block; font-size: 17px; }
.church-site .bx-stage-head .bx-card-hint { display: block; text-align: left; margin-top: 3px; max-width: 64ch; }
.church-site .bx-stage-body {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr); gap: 18px;
}

/* Left: the live 16:9 preview of the real stage. */
.church-site .bx-stage-preview-wrap { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-stage-canvas {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #05070d; box-shadow: inset 0 0 0 1px var(--bx-rule), 0 12px 40px rgba(15, 23, 42, 0.18);
}
.church-site .bx-stage-canvas iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* Right: a scrolling rail of control cards. */
.church-site .bx-stage-controls { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.church-site .bx-stage-controls .bx-card { gap: 10px; }
.church-site .bx-stage-controls input[type="color"] {
  width: 100%; height: 38px; padding: 2px; border: 1px solid var(--bx-rule);
  border-radius: 10px; background: var(--bx-card); cursor: pointer;
}
.church-site .bx-field-label { font-size: 12px; font-weight: 600; color: var(--bx-soft); }

.church-site .bx-stage-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.church-site .bx-stage-template {
  appearance: none; text-align: left; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--bx-rule); background: var(--bx-card); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.church-site .bx-stage-template strong { font-size: 13px; color: var(--bx-ink); }
.church-site .bx-stage-template small { font-size: 11px; color: var(--bx-soft); }
.church-site .bx-stage-template:hover { background: var(--bx-wash); }
.church-site .bx-stage-template.is-active { border-color: var(--bx-blue); background: var(--bx-blue-wash); }

.church-site .bx-stage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.church-site .bx-stage-chip {
  appearance: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bx-rule);
  background: var(--bx-card); color: var(--bx-soft); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.church-site .bx-stage-chip:hover { background: var(--bx-wash); }
.church-site .bx-stage-chip.is-on { border-color: var(--bx-blue); background: var(--bx-blue-wash); color: var(--bx-blue); }

.church-site .bx-anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 132px; }
.church-site .bx-anchor-dot {
  appearance: none; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--bx-rule);
  background: var(--bx-wash); cursor: pointer; position: relative;
}
.church-site .bx-anchor-dot::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--bx-muted); }
.church-site .bx-anchor-dot:hover { background: var(--bx-blue-wash); }
.church-site .bx-anchor-dot.is-on { border-color: var(--bx-blue); background: var(--bx-blue-wash); }
.church-site .bx-anchor-dot.is-on::after { background: var(--bx-blue); }

/* On-screen: two co-equal choices (translation / Bible verse). */
.church-site .bx-check--lead { font-weight: 700; color: var(--bx-ink); font-size: 14.5px; }
.church-site .bx-stage-suboptions { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 28px; }
.church-site .bx-soft-rule { border: 0; border-top: 1px solid var(--bx-rule); margin: 12px 0 4px; }
/* Reveal-style segmented control (reuses .bx-proj-mode) with a small sub-label. */
.church-site .bx-reveal-modes { margin: 0; align-self: flex-start; }
.church-site .bx-reveal-modes .bx-proj-mode { display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 6px 14px; }
.church-site .bx-reveal-modes .bx-proj-mode small { font-size: 9.5px; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }

/* Phones: relax the shell so two stacked panels aren't crushed into one screen. */
@media (max-width: 900px) {
  .church-site .phone-app { height: auto; min-height: 100dvh; overflow: visible; }
  .church-site #hostScreen.active { overflow: visible; }
  .church-site .bx-panel[data-host-panel="stage"].active { overflow-y: auto; }
  .church-site .bx-stage-body { grid-template-columns: 1fr; }
  .church-site .bx-panel[data-host-panel="service"].active { overflow: visible; }
  .church-site .bx-transcript .bx-feed--tall { max-height: min(58vh, 560px); flex: none; }
  .church-site .bx-bible-liveframe { aspect-ratio: 16 / 9; height: auto; flex: none; }
  .church-site .bx-panel[data-host-panel="setup"].active { overflow-y: auto; }
  .church-site .bx-setup { flex-direction: column; }
  .church-site .bx-setup-nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--bx-rule); padding-right: 0; padding-bottom: 10px; }
  .church-site .bx-preflight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .church-site .bx-overlay-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================================================
   BOOTH v3 — beta-church trust pass.
   A simpler operator flow: login is one calm card, live mode is a checklist
   plus translation-first console, and Bible tools read as secondary.
   ===================================================================== */

.church-site {
  --bx-canvas: #f4f6f8;
  --bx-card: #ffffff;
  --bx-rule: rgba(26, 38, 57, 0.11);
  --bx-rule-soft: rgba(26, 38, 57, 0.07);
  --bx-ink: #111827;
  --bx-soft: #526075;
  --bx-muted: #8a97aa;
  --bx-wash: #f7f9fc;
  --bx-blue: #2f5f9f;
  --bx-blue-soft: #d6e4f5;
  --bx-blue-wash: #edf4fc;
  --bx-live: #0d7a5f;
  --bx-live-wash: #e8f6f1;
  --bx-warn: #a76506;
  --bx-warn-wash: #fff5e6;
  --bx-danger: #b42318;
  --bx-radius: 14px;
  --bx-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 14px 36px rgba(17, 24, 39, 0.06);
}

body.church-site {
  background: var(--bx-canvas);
}

.church-site .phone-app {
  width: min(1480px, calc(100% - 48px));
  padding: 16px 0 20px;
}

.church-site .phone-top {
  align-items: center;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
  margin-bottom: 14px;
}

.church-site .phone-brand {
  font-size: 25px;
  line-height: 1.05;
}

.church-site .phone-status {
  font-size: 13px;
  color: var(--bx-muted);
}

/* Login */
.church-site #churchLoginScreen.active {
  max-width: 380px;
  gap: 14px;
  padding: clamp(18px, 4vh, 52px) 0 28px;
  justify-content: center;
}

.church-site #churchLoginScreen .church-entry {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.church-site .auth-eyebrow {
  display: none;
}

.church-site .church-entry h1 {
  margin: 0;
  font-family: inherit;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

.church-site .church-entry p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bx-soft);
  text-align: center;
}

.church-site .auth-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.church-site .auth-tab {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  background: transparent;
}

.church-site .auth-tab.is-active {
  background: var(--bx-ink);
  color: #ffffff;
  box-shadow: none;
}

.church-site .auth-tab[data-auth-mode="demo"] {
  color: var(--bx-muted);
}

.church-site .auth-guidance {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--bx-soft);
  text-align: center;
}

.church-site .join-card {
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
}

.church-site #churchLoginForm .phone-field {
  gap: 7px;
  font-size: 12px;
}

.church-site #churchLoginForm .phone-field input {
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
}

.church-site #churchLoginForm .phone-primary,
.church-site #churchLoginForm .phone-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 12px;
}

.church-site #churchLoginForm .phone-primary {
  flex: 0 0 auto;
  align-self: center;
  min-width: 132px;
  padding: 0 22px;
  background: var(--bx-ink);
}

.church-site #churchLoginForm .google-login {
  gap: 10px;
  color: var(--bx-ink);
  font-weight: 700;
}

.church-site #churchLoginForm .auth-only,
.church-site #churchLoginForm .demo-only {
  display: none;
}

.church-site #churchLoginScreen[data-auth-current="signin"] #churchLoginForm [data-auth-pane~="signin"],
.church-site #churchLoginScreen[data-auth-current="signup"] #churchLoginForm [data-auth-pane~="signup"],
.church-site #churchLoginScreen[data-auth-current="demo"] #churchLoginForm [data-auth-pane~="demo"] {
  display: flex;
}

.church-site #churchLoginScreen[data-auth-current="signin"] #churchLoginForm .auth-divider,
.church-site #churchLoginScreen[data-auth-current="signup"] #churchLoginForm .auth-divider {
  display: flex;
}

.church-site .google-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.church-site .auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bx-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.church-site .auth-divider::before,
.church-site .auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--bx-rule-soft);
}

.church-site #churchLoginScreen .billing-banner {
  display: none;
}

/* Header controls */
.church-site .bx-live-controls {
  gap: 10px;
}

.church-site .bx-live-controls[hidden],
.church-site:not([data-church-auth="signed-in"]) .bx-live-controls,
.church-site:not([data-church-auth="signed-in"]) .top-actions {
  display: none !important;
}

.church-site .top-actions a.phone-small.bx-iconbtn,
.church-site .bx-live-controls > a.phone-small.bx-iconbtn {
  display: none;
}

.church-site .bx-session-create,
.church-site .bx-code-chip,
.church-site .bx-checkaudio,
.church-site .bx-pause-input,
.church-site .bx-iconbtn,
.church-site .top-actions .phone-small.bx-iconbtn {
  min-height: 42px;
  border-radius: 12px;
}

.church-site .bx-session-create {
  background: var(--bx-blue);
}

.church-site .bx-session-create:hover {
  background: #244d82;
}

.church-site .bx-checkaudio {
  background: #ffffff;
}

.church-site .bx-checkaudio--setup {
  align-self: flex-start;
  width: auto;
}

.church-site .bx-mic-picker {
  min-width: 168px;
  max-width: 240px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.church-site .bx-mic-picker span {
  color: var(--bx-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.church-site .bx-mic-picker select {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--bx-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

.church-site .bx-mic {
  min-height: 42px;
  border-radius: 12px;
  background: var(--bx-live);
  box-shadow: 0 8px 18px rgba(13, 122, 95, 0.16);
}

.church-site .bx-mic:hover {
  background: #09694f;
}

.church-site .bx-mic.is-recording {
  background: var(--bx-danger);
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}

.church-site .bx-mic.is-recording:hover {
  background: #991f16;
}

/* Live checklist */
.church-site .bx-host-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--bx-rule);
  border-left: 5px solid var(--bx-blue);
  border-radius: 16px;
  background: var(--bx-card);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}

.church-site .bx-host-guide[data-state="ready"] {
  border-left-color: var(--bx-blue);
  background: #f9fbff;
}

.church-site .bx-host-guide[data-state="warn"] {
  border-left-color: var(--bx-warn);
  background: var(--bx-warn-wash);
}

.church-site .bx-host-guide[data-state="live"] {
  border-left-color: var(--bx-live);
  background: var(--bx-live-wash);
}

.church-site .bx-host-guide-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.church-site .bx-host-guide-kicker {
  color: var(--bx-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.church-site .bx-host-guide h2 {
  margin: 0;
  color: var(--bx-ink);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}

.church-site .bx-host-guide p {
  margin: 0;
  max-width: 62ch;
  color: var(--bx-soft);
  font-size: 14.5px;
  line-height: 1.42;
}

.church-site .bx-host-guide small {
  color: var(--bx-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.church-site .bx-host-guide-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.church-site .bx-host-guide-buttons .bx-primary,
.church-site .bx-host-guide-buttons .bx-secondary {
  min-width: 118px;
}

.church-site .bx-host-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.church-site .bx-host-quick-card {
  appearance: none;
  min-width: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 14px;
  background: var(--bx-card);
  color: var(--bx-ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.church-site .bx-host-quick-card:hover {
  border-color: var(--bx-blue-soft);
  background: var(--bx-wash);
}

.church-site .bx-host-quick-card:disabled {
  cursor: wait;
  opacity: 0.62;
}

.church-site .bx-host-quick-card span {
  max-width: 100%;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.church-site .bx-host-quick-card small {
  max-width: 100%;
  color: var(--bx-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.church-site .bx-host-quick-card[data-state="good"] {
  border-color: #bfe3dc;
  background: var(--bx-live-wash);
}

.church-site .bx-host-quick-card[data-state="good"] span {
  color: var(--bx-live);
}

.church-site .bx-host-quick-card[data-state="warn"] {
  border-color: #f3ddb8;
  background: var(--bx-warn-wash);
}

.church-site .bx-host-quick-card[data-state="warn"] span {
  color: var(--bx-warn);
}

.church-site .bx-host-quick-card[data-state="ready"] {
  border-color: var(--bx-blue-soft);
  background: var(--bx-blue-wash);
}

.church-site .bx-host-quick-card[data-state="ready"] span {
  color: var(--bx-blue);
}

.church-site .bx-host-quick-card[data-state="danger"] {
  border-color: rgba(180, 35, 24, 0.28);
  background: #fff1f1;
}

.church-site .bx-host-quick-card[data-state="danger"] span {
  color: var(--bx-danger);
}

.church-site .bx-runway {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.church-site .bx-runway-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.church-site .bx-runway-step b {
  grid-row: span 2;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12px;
}

.church-site .bx-runway-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bx-ink);
}

.church-site .bx-runway-step small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-muted);
  font-size: 11px;
  font-weight: 650;
}

/* Service state is a compact rail, not a stack of dashboard cards. */
.church-site .bx-status {
  display: none;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.church-site .bx-status article {
  min-width: 0;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 13px;
  box-shadow: none;
}

.church-site .bx-status span {
  font-size: 10px;
  letter-spacing: 0.09em;
}

.church-site .bx-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.church-site .bx-pinned {
  margin-bottom: 8px;
}

.church-site .bx-pinned:empty {
  display: none;
}

.church-site .pinned-langs {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.church-site .pinned-langs header {
  flex: 1;
  min-width: 0;
}

.church-site .pinned-langs .pinned-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.church-site .pinned-langs .pinned-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.church-site .bx-confidence {
  display: none;
}

.church-site .bx-conf-chip {
  min-height: 34px;
  padding: 6px 11px;
  box-shadow: none;
}

/* Translation first, Bible second. */
.church-site .bx-bible-split {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.78fr);
  gap: 18px;
}

.church-site .bx-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.church-site .bx-transcript {
  padding: 18px 18px 14px;
}

.church-site .bx-transcript-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.church-site .bx-pill {
  min-height: 38px;
  padding: 7px 14px;
}

.church-site .bx-pill.active {
  background: var(--bx-ink);
}

.church-site .bx-feed {
  background: #fbfcfe;
  border: 1px solid var(--bx-rule-soft);
  border-radius: 14px;
  padding: 8px 14px;
}

.church-site .bx-feed:has(.phone-empty) {
  overflow: hidden;
}

.church-site .bx-transcript .phone-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--bx-muted);
  font-size: 15px;
}

.church-site .bx-live-manual {
  padding-top: 10px;
  margin-top: 10px;
}

.church-site .bx-bible-pick {
  background: #fbfcfe;
  gap: 12px;
}

.church-site .bx-bible-pick .bx-card-head {
  padding-bottom: 2px;
}

.church-site .bx-bible-pick .bx-quiet--danger {
  color: #9f2f24;
}

.church-site .bx-verse-manual {
  background: #ffffff;
}

.church-site .bx-bible-pick .phone-empty {
  background: #ffffff;
  border: 1px dashed var(--bx-rule);
}

.church-site .overlay-preview-head {
  align-items: center;
}

.church-site .overlay-preview-head strong {
  font-size: 12.5px;
}

.church-site .overlay-preview-head span {
  font-size: 11.5px;
}

.church-site .bx-bible-liveframe {
  border-radius: 14px;
  border-color: rgba(17, 24, 39, 0.16);
  background: #101820;
}

/* The booth preview should look finished, not like a transparency debug grid. */
.overlay-body.preview {
  background: #101820;
}

.overlay-body.preview .caption-overlay.is-waiting {
  opacity: 1;
}

.overlay-body.preview .caption-overlay.is-waiting .caption-overlay-meta {
  opacity: 0.58;
}

.overlay-body.preview .caption-overlay.is-waiting .caption-overlay-text {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1100px) {
  .church-site .phone-app {
    width: min(100% - 28px, 900px);
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .church-site .phone-top {
    align-items: stretch;
    gap: 12px;
    flex-direction: column;
  }

  .church-site .top-actions {
    width: 100%;
  }

  .church-site .bx-live-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    width: 100%;
    justify-content: stretch;
    align-items: stretch;
  }

  .church-site .bx-session {
    grid-column: 1 / -1;
    width: 100%;
  }

  .church-site .bx-session > .bx-code-chip,
  .church-site .bx-session > .bx-session-create,
  .church-site .bx-session > .bx-session-plan,
  .church-site .bx-checkaudio,
  .church-site .bx-mic {
    width: 100%;
  }

  .church-site .bx-iconbtn,
  .church-site .top-actions .phone-small.bx-iconbtn {
    width: 46px;
    min-width: 46px;
  }

  .church-site .bx-runway,
  .church-site .bx-status,
  .church-site .bx-bible-split {
    grid-template-columns: 1fr;
  }

  .church-site .bx-runway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .church-site .bx-host-guide {
    grid-template-columns: 1fr;
  }

  .church-site .bx-host-guide-buttons {
    justify-content: stretch;
  }

  .church-site .bx-host-guide-buttons .bx-primary,
  .church-site .bx-host-guide-buttons .bx-secondary {
    flex: 1 1 150px;
  }
}

@media (max-width: 620px) {
  .church-site .phone-app {
    width: min(100% - 20px, 460px);
    padding-top: 10px;
  }

  .church-site .phone-top {
    border-bottom: 0;
    margin-bottom: 6px;
  }

  .church-site .phone-brand {
    font-size: 22px;
  }

  .church-site .auth-tabs {
    grid-template-columns: 1fr;
  }

  .church-site .bx-runway {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .church-site .bx-host-guide {
    padding: 14px;
    border-radius: 14px;
  }

  .church-site .bx-host-guide h2 {
    font-size: 19px;
  }

  .church-site .bx-host-guide p {
    font-size: 13.5px;
  }

  .church-site .bx-host-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .church-site .bx-host-quick-card {
    min-height: 62px;
    padding: 10px;
  }

  .church-site .bx-runway-step {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 8px 4px;
  }

  .church-site .bx-runway-step b {
    grid-row: auto;
    width: 22px;
    height: 22px;
  }

  .church-site .bx-runway-step span {
    white-space: normal;
    text-align: center;
    font-size: 11px;
    line-height: 1.15;
  }

  .church-site .bx-runway-step small {
    display: none;
  }

  .church-site .join-card {
    padding: 16px;
  }
}

@media (max-width: 760px) {
  .church-site .bx-demo-source-grid,
  .lv-demo-row {
    grid-template-columns: 1fr;
  }
}

/* Anti-compression guardrails -------------------------------------------------
   Booth UI is used under pressure. Critical labels must wrap or stack rather
   than collapse into clipped status boxes. */
.church-site .bx-card,
.church-site .bx-host-guide,
.church-site .bx-host-quick-card,
.church-site .bx-status article,
.church-site .bx-summary article,
.church-site .bx-runway-step,
.church-site .bx-conf-chip,
.church-site .bx-upcoming-row,
.church-site .language-request-card,
.church-site .bx-demo-listener-card,
.church-site .bx-setup-summary-grid article {
  min-width: 0;
}

.church-site .bx-card-head {
  flex-wrap: wrap;
  align-items: flex-start;
}

.church-site .bx-card-head .bx-card-hint {
  text-align: left;
  overflow-wrap: anywhere;
}

.church-site .bx-status,
.church-site .bx-summary,
.church-site .bx-preflight-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.church-site .bx-runway {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.church-site .bx-status strong,
.church-site .bx-summary strong,
.church-site .bx-host-guide h2,
.church-site .bx-host-guide p,
.church-site .bx-host-guide small,
.church-site .bx-host-quick-card span,
.church-site .bx-host-quick-card small,
.church-site .bx-runway-step span,
.church-site .bx-runway-step small,
.church-site .pinned-langs .pinned-meta,
.church-site .bx-preflight-grid article strong,
.church-site .bx-upcoming-row span,
.church-site .bx-upcoming-row small,
.church-site .bx-demo-listener-card small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  overflow-wrap: anywhere;
}

.church-site .bx-upcoming-row {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 4px 12px;
  min-height: 66px;
}

.church-site .bx-live-controls {
  align-items: stretch;
}

.church-site .bx-session,
.church-site .bx-code-chip,
.church-site .bx-session-create,
.church-site .bx-mic {
  flex-shrink: 0;
}

.church-site .bx-code-chip,
.church-site .bx-session-create {
  min-width: 150px;
}

.church-site .bx-mic {
  min-width: 148px;
}

@media (max-width: 820px) {
  .church-site .bx-setup-summary-head,
  .church-site .bx-account-row,
  .church-site .bx-archive-head,
  .church-site .pinned-langs {
    flex-direction: column;
    align-items: stretch;
  }

  .church-site .bx-setup-summary-code {
    align-self: flex-start;
  }

  .church-site .bx-picker,
  .church-site .bx-manual,
  .church-site .bx-live-manual,
  .church-site .bx-ref-row,
  .church-site .language-request-card {
    grid-template-columns: 1fr;
  }
}

/* ----- Live rewind mini player (listener DVR — parity with the native app) -- */

.lv-miniplayer {
  margin: 0 0 10px;
  padding: 12px 14px 10px;
  border-radius: 20px;
  border: 1px solid var(--lv-rule);
  background: var(--lv-blue-wash);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.lv-miniplayer[hidden] { display: none; }

.lv-mini-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lv-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.lv-mini-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--lv-ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-mini-behind {
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--lv-ink-muted);
  letter-spacing: 0.4px;
}

.lv-mini-behind.is-behind { color: #f59e0b; }

.lv-mini-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}

.lv-mini-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--lv-rule);
}

.lv-mini-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 999px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.28);
}

.lv-mini-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--lv-rule);
}

.lv-mini-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.28);
}

.lv-mini-transport {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lv-mini-avail {
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--lv-ink-muted);
  min-width: 44px;
}

.lv-mini-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

.lv-mini-btn {
  appearance: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lv-mini-btn:disabled { opacity: 0.4; cursor: default; }

.lv-mini-btn svg { width: 22px; height: 22px; }

.lv-mini-play {
  background: var(--lv-blue-soft);
  color: var(--lv-blue-ink);
}

.lv-mini-golive {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: #081b2d;
  background: #65b9ff;
  box-shadow:
    0 10px 22px rgba(64, 167, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.lv-mini-golive-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #081b2d;
  opacity: 0.75;
}

/* Rewind entry — quiet round affordance next to the sound toggle. */
.lv-rewind-entry {
  appearance: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  color: var(--lv-ink-soft);
  background: var(--lv-blue-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lv-rewind-entry[hidden] { display: none; }

.lv-rewind-entry svg { width: 21px; height: 21px; }

/* While rewinding, the live sound toggle is out of the loop — fade it. */
body[data-listener-dvr="active"] .lv-sound-toggle { opacity: 0.35; pointer-events: none; }

/* ----- Joined view, light scheme (App Clip parity) ------------------------ */
/* The native app follows the system appearance: warm light reading surface in
   light mode, the night theme in dark. The web listener shipped night-only;
   this block restores the light variant. The dark block above still wins under
   prefers-color-scheme: dark. */

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] {
    /* The app's SimpleListenerBackground: white → azure → faint green,
       top toward bottom-trailing. Cool slate ink, not the old warm stone. */
    --lv-bg: #fbfdff;
    --lv-focus: #274e8d;
    --lv-ink: #16181c;
    --lv-ink-soft: rgba(22, 24, 28, 0.64);
    --lv-ink-muted: rgba(22, 24, 28, 0.64);
    --lv-rule: rgba(22, 24, 28, 0.10);
    --lv-blue: #007aff;
    --lv-blue-soft: #d9e9fb;
    --lv-blue-wash: rgba(0, 122, 255, 0.08);
    --lv-blue-ink: #0a62c2;
    --lv-warm-wash: #fdf6ec;
    --lv-warm-ink: #b45309;
    background:
      linear-gradient(160deg, #ffffff 0%, #f0f9ff 55%, #f6fbf6 100%) !important;
  }

  .listener-site[data-listener-state="joined"] .lv-kicker {
    color: rgba(28, 25, 23, 0.48);
  }

  .listener-site[data-listener-state="joined"] .lv-tline.is-live {
    color: #0f0d0b;
  }

  .listener-site[data-listener-state="joined"] .lv-tline.is-marked {
    box-shadow: 0 14px 34px rgba(180, 83, 9, 0.10);
  }

  .listener-site[data-listener-state="joined"] .lv-highlight-tools button {
    color: rgba(28, 25, 23, 0.82);
    background: rgba(28, 25, 23, 0.05);
    border-color: rgba(251, 146, 60, 0.34);
  }

  .listener-site[data-listener-state="joined"] .lv-highlight-note {
    color: rgba(28, 25, 23, 0.62);
    background: rgba(28, 25, 23, 0.04);
  }

  .listener-site[data-listener-state="joined"] .lv-highlight-note-editor textarea {
    color: rgba(28, 25, 23, 0.88);
    background: #ffffff;
    border-color: rgba(251, 146, 60, 0.34);
  }

  /* Verse card — the app's light scripture paper (#F2F7FF) with system blue. */
  .listener-site[data-listener-state="joined"] .lv-verse-inline {
    background: #f2f7ff;
    border-color: rgba(15, 40, 80, 0.07);
    /* Flat scripture paper — sits in the text column, doesn't float over it. */
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05);
  }

  .listener-site[data-listener-state="joined"] .lv-verse-inline-version {
    color: #0a62c2;
  }

  .listener-site[data-listener-state="joined"] .lv-verse-inline-kicker {
    color: #0a62c2;
    background: #f2f7ff;
    border-color: rgba(0, 122, 255, 0.16);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .listener-site[data-listener-state="joined"] .lv-verse-inline-kicker span {
    background: rgba(0, 122, 255, 0.86);
  }

  .listener-site[data-listener-state="joined"] .lv-verse-inline-preview,
  .listener-site[data-listener-state="joined"] .lv-verse-inline p {
    /* Keep small scripture text readable over the tinted glass and gradients. */
    color: #475569;
  }

  .listener-site[data-listener-state="joined"] .lv-verse-expand,
  .listener-site[data-listener-state="joined"] .lv-verse-save,
  .listener-site[data-listener-state="joined"] .lv-verse-action {
    color: rgba(0, 122, 255, 0.92);
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 122, 255, 0.16);
    box-shadow: none;
  }

  .listener-site[data-listener-state="joined"] .lv-verse-save.is-saved {
    background: rgba(0, 122, 255, 0.16);
  }

  .listener-site[data-listener-state="joined"] .lv-sound-toggle.is-off {
    color: var(--lv-ink-soft);
    background: transparent;
  }

  /* Slide card — hairline + soft shadow instead of the night theme's glow. */
  .listener-site[data-listener-state="joined"] .lv-slide-card {
    background: #ffffff;
    border-color: rgba(28, 25, 23, 0.12);
    box-shadow: 0 16px 40px rgba(28, 25, 23, 0.12);
  }

  .listener-site[data-listener-state="joined"] .lv-ask-bottom {
    background: #ffffff;
    color: var(--lv-blue-ink);
    box-shadow:
      0 12px 28px rgba(28, 25, 23, 0.10),
      0 0 0 1px rgba(28, 25, 23, 0.06) inset;
  }

  .listener-site[data-listener-state="joined"] .lv-ask-panel {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(28, 25, 23, 0.10);
  }

  .listener-site[data-listener-state="joined"] .lv-mini-slider::-webkit-slider-thumb {
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(28, 25, 23, 0.30);
  }
}

/* ----- Settings panel (gear) — web port of the app's ListenerSettingsPanel -- */

/* The app's settings is a floating dropdown card anchored under the gear — the
   page stays visible behind it (no dim), tap outside closes. */
.lv-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: calc(var(--lv-live-safe-top, 10px) + 46px) 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lv-settings-backdrop[hidden] { display: none; }

.lv-settings-panel {
  width: min(352px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 28px;
  border: 1px solid var(--lv-rule);
  background: rgba(24, 30, 38, 0.90);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40), 0 4px 16px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
}

.lv-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lv-settings-actions .lv-menu-session {
  margin-right: auto;
  border-right: 0;
}

.lv-settings-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Collapsible glass groups (Audio / Style / Bible). */
.lv-settings-group {
  border: 1px solid var(--lv-rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.lv-settings-group-head {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--lv-ink);
  cursor: pointer;
  font: inherit;
}

.lv-settings-group-head > svg:first-child {
  width: 18px;
  height: 18px;
  color: var(--lv-blue-ink);
  flex: 0 0 auto;
}

.lv-settings-group-head strong {
  font-size: 14px;
  font-weight: 750;
  margin-right: auto;
}

.lv-settings-chevron {
  width: 14px;
  height: 14px;
  color: var(--lv-ink-muted);
  transition: transform 0.18s ease;
}

/* App: chevron.down when collapsed, chevron.up when expanded. */
.lv-settings-group:not(.is-collapsed) .lv-settings-chevron { transform: rotate(180deg); }

.lv-settings-group-body {
  padding: 4px 8px 10px;
  border-top: 1px solid var(--lv-rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lv-settings-group.is-collapsed .lv-settings-group-body { display: none; }

/* The sound + volume rows keep the legacy .lv-audio-bar hook so the existing
   "hide audio controls on non-translation events" logic works untouched. */
.lv-settings-group-body .lv-audio-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.lv-settings-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--lv-ink);
  font-size: 14px;
  font-weight: 620;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.lv-settings-row[hidden] { display: none; }

.lv-settings-row > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--lv-ink-soft);
}

.lv-settings-row > span:not(.lv-switch):not(.lv-settings-value) { flex: 1; min-width: 0; }

.lv-settings-row small {
  flex: 0 1 auto;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--lv-ink-muted);
  text-align: right;
}

/* Reset the old circular sound-toggle look inside the panel row. */
.lv-settings-row.lv-sound-toggle {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: transparent;
  color: var(--lv-ink);
  box-shadow: none;
  justify-content: flex-start;
}

.lv-settings-row.lv-sound-toggle svg { width: 20px; height: 20px; color: var(--lv-ink-soft); }

/* iOS-style switch, driven by aria-pressed on the row. */
.lv-switch {
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(120, 128, 140, 0.42);
  position: relative;
  transition: background 0.16s ease;
}

.lv-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
  transition: transform 0.16s ease;
}

.lv-settings-toggle[aria-pressed="true"] .lv-switch { background: #34c759; }
.lv-settings-toggle[aria-pressed="true"] .lv-switch::after { transform: translateX(18px); }

/* App slider row: label + % share the first line, the slider gets a full-width
   line of its own (see the Audio-mix reference screenshot). */
.lv-settings-volume {
  cursor: default;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 2px;
  padding: 8px 8px 10px;
}

.lv-settings-volume > span:first-child { grid-row: 1; grid-column: 1; }
.lv-settings-volume .lv-settings-value { grid-row: 1; grid-column: 2; }

.lv-settings-volume .lv-volume {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* Thin iOS track + big round thumb, blue fill up to the value (--fill set by JS). */
.lv-settings-volume .lv-volume {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lv-settings-volume .lv-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #0a84ff 0,
    #0a84ff var(--fill, 100%),
    rgba(126, 138, 156, 0.34) var(--fill, 100%),
    rgba(126, 138, 156, 0.34) 100%
  );
}

.lv-settings-volume .lv-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 0 1px rgba(0, 0, 0, 0.16);
  cursor: grab;
}

.lv-settings-volume .lv-volume::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(126, 138, 156, 0.34);
}

.lv-settings-volume .lv-volume::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #0a84ff;
}

.lv-settings-volume .lv-volume::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

.lv-settings-value {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lv-ink-soft);
}

.lv-settings-seg--wide button { min-width: 86px; padding-inline: 9px; font-size: 11px; }

/* Demo "Audio mix" — the app's two-lane volume section (translation + original). */
.lv-settings-mix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.lv-settings-mix[hidden] { display: none; }

.lv-settings-mix-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--lv-ink-muted);
}

.lv-settings-mix-kicker svg {
  width: 14px;
  height: 14px;
}

.lv-settings-mix .lv-settings-volume > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.lv-settings-mix-note {
  margin: 2px 2px 4px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--lv-ink-muted);
}

/* Text-size segmented control (S / M / L / XL). */
.lv-settings-seg-row { cursor: default; }

.lv-settings-seg {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(120, 128, 140, 0.18);
}

.lv-settings-seg button {
  appearance: none;
  border: 0;
  min-width: 40px;
  height: 30px;
  border-radius: 999px;
  background: transparent;
  color: var(--lv-ink-soft);
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.lv-settings-seg button.is-active {
  background: #ffffff;
  color: #10151d;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}

/* Neutralize the legacy floating-pill styling on the App-language host. */
.lv-settings-panel .lv-top-controls {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lv-settings-panel .lv-top-controls:empty { display: none; }

.listener-site .lv-settings-panel .lv-top-controls > .i18n-switch {
  border-radius: 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 8px 8px 12px;
}

/* Full-width install callout at the foot, like the App Clip panel. */
.lv-settings-getapp {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: #65b9ff;
  color: #081b2d;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 14px 30px rgba(64, 167, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.lv-settings-getapp > svg { width: 22px; height: 22px; flex: 0 0 auto; }

.lv-settings-getapp span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lv-settings-getapp strong { font-size: 14px; font-weight: 800; }
.lv-settings-getapp small { font-size: 11.5px; font-weight: 600; opacity: 0.78; }

/* Header pill row — the app puts [language pill] [Ask] side by side under the
   title. Ask reads blue-on-glass like LiveAskPillButton, not a colored blob. */
.lv-pill-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.lv-pill-row .lv-lang-pill { min-width: 0; }

/* Gray source → blue bold target inside the pill, like the app. */
.lv-lang-pill .lv-lang-from { color: var(--lv-ink-soft); font-weight: 600; }
.lv-lang-pill .lv-lang-arrow { margin: 0 4px; color: var(--lv-ink-muted); }
.lv-lang-pill .lv-lang-to { color: #6ab2ff; font-weight: 800; }

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-lang-pill .lv-lang-to { color: #007aff; }
}

.lv-ask-pill {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(64, 72, 84, 0.52), rgba(44, 50, 60, 0.46));
  color: #6ab2ff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 18px rgba(34, 152, 255, 0.20),
    0 8px 12px rgba(0, 0, 0, 0.16);
}

.lv-ask-pill[hidden] { display: none; }

.lv-ask-pill svg:last-child { opacity: 0.7; }

/* Pinned verse — the app's bottom overlay card: floats above the feed while
   the booth has the verse on the wall; the BIBLE capsule overhangs the top. */
.lv-pinned-verse {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 44;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}

.lv-pinned-verse[hidden] { display: none; }

body[data-listener-dvr="active"] .lv-pinned-verse {
  bottom: calc(150px + env(safe-area-inset-bottom));
}

.lv-pinned-card {
  pointer-events: auto;
  position: relative;
  width: min(560px, 100%);
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(26, 31, 36, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--lv-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: lv-pinned-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes lv-pinned-in {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.lv-scripture-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(106, 178, 255, 0.22);
  background: #232a31;
  color: #6ab2ff;
  font-family: var(--lv-sans, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.lv-scripture-badge span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6ab2ff;
}

.lv-pinned-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lv-pinned-ref {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(23px * var(--lv-tscale, 1));
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-pinned-btn {
  appearance: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(106, 178, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #6ab2ff;
  cursor: pointer;
}

.lv-pinned-text {
  margin: 10px 0 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(17px * var(--lv-tscale, 1));
  line-height: 1.42;
  color: rgba(228, 237, 247, 0.74);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.lv-pinned-card.is-expanded .lv-pinned-text {
  display: block;
  -webkit-line-clamp: unset;
  max-height: min(44vh, 380px);
  overflow-y: auto;
}

.lv-pinned-more { display: none; margin-top: 12px; }

.lv-pinned-card.is-expanded .lv-pinned-more { display: block; }

.lv-pinned-more .lv-verse-inline-version {
  color: rgba(106, 178, 255, 0.86);
}

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-ask-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
    border-color: rgba(0, 0, 0, 0.10);
    color: #0a62c2;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.70),
      0 10px 18px rgba(0, 122, 255, 0.14),
      0 8px 12px rgba(22, 24, 28, 0.08);
  }

  .listener-site[data-listener-state="joined"] .lv-lang-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.70),
      0 8px 12px rgba(22, 24, 28, 0.07);
  }

  .listener-site[data-listener-state="joined"] .lv-pinned-card {
    background: rgba(242, 247, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  }

  .listener-site[data-listener-state="joined"] .lv-scripture-badge {
    background: #f2f7ff;
    border-color: rgba(0, 122, 255, 0.16);
    color: rgba(0, 122, 255, 0.86);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .listener-site[data-listener-state="joined"] .lv-scripture-badge span {
    background: rgba(0, 122, 255, 0.86);
  }

  .listener-site[data-listener-state="joined"] .lv-pinned-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 122, 255, 0.16);
    color: rgba(0, 122, 255, 0.92);
  }

  .listener-site[data-listener-state="joined"] .lv-pinned-text {
    color: rgba(22, 24, 28, 0.72);
  }

  .listener-site[data-listener-state="joined"] .lv-pinned-more .lv-verse-inline-version {
    color: rgba(0, 122, 255, 0.86);
  }
}

@media (prefers-color-scheme: light) {
  .listener-site[data-listener-state="joined"] .lv-menu-button {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* Scroll-edge scrims tint toward the light background, like the app's
     ScrollEdgeChrome tinting to systemBackground. */
  .listener-site[data-listener-state="joined"] .lv-live-top::before {
    background: linear-gradient(
      to bottom,
      rgba(251, 253, 255, 0.72) 0%,
      rgba(251, 253, 255, 0.36) 30%,
      rgba(251, 253, 255, 0.12) 55%,
      transparent 74%
    );
  }

  .listener-site[data-listener-state="joined"] .lv-live::after {
    background: linear-gradient(
      to top,
      rgba(251, 253, 255, 0.66) 0%,
      rgba(251, 253, 255, 0.32) 30%,
      rgba(251, 253, 255, 0.10) 55%,
      transparent 74%
    );
  }

  .lv-settings-panel {
    background: rgba(246, 249, 253, 0.85);
    border-color: rgba(15, 40, 80, 0.08);
    box-shadow: 0 30px 80px rgba(28, 40, 60, 0.22), 0 4px 16px rgba(28, 40, 60, 0.10);
  }

  .lv-settings-group {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(15, 40, 80, 0.06);
  }

  .lv-settings-seg { background: rgba(28, 25, 23, 0.08); }

  .lv-settings-seg button.is-active { background: #ffffff; color: #10151d; }

  .lv-switch { background: rgba(28, 25, 23, 0.18); }

  .listener-site .lv-settings-panel .lv-top-controls > .i18n-switch {
    background: rgba(28, 25, 23, 0.04);
  }
}

/* ---- Auth screen: marketing brand carries through the threshold ----------
   Both "Start free" and "Log in" on getkoine.com land here, so this is the
   first screen after the marketing site has done its work. Landing on a cool
   grey shell with near-black buttons reads as a different product and costs
   trust at the moment of commitment.

   Scoped to :has(#churchLoginScreen.active) on purpose. The console behind
   this screen is a dense operational tool run in a dark booth during a live
   service, and it has earned its own high-contrast rules — this block must not
   leak into it. Browsers without :has() simply keep the previous grey shell.

   Type stays Georgia rather than Literata: the marketing serif is loaded by an
   @import in home.css, and pulling a webfont into the console stylesheet would
   delay first paint for an app people start under time pressure. */
.church-site:has(#churchLoginScreen.active) {
  background: #F6F1E7;
}

.church-site #churchLoginScreen .church-entry h1 {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-weight: 600;
  color: #182131;
}

.church-site #churchLoginScreen .auth-tab.is-active {
  background: #274E8D;
}

.church-site #churchLoginForm .phone-primary {
  border-color: #274E8D;
  background: #274E8D;
  box-shadow: 0 10px 26px rgba(39, 78, 141, 0.22);
}

.church-site #churchLoginForm .phone-primary:hover:not(:disabled) {
  border-color: #1D3C6E;
  background: #1D3C6E;
}

/* ===========================================================================
   Accessibility preferences — motion, transparency, contrast

   The existing prefers-reduced-motion rules in this sheet each switch off one
   decorative loop (a pulsing dot, the scan shimmer, the recording ring). None
   of them touch the ~26 `transition` declarations, so with Reduce Motion on the
   UI that actually travels still travelled.

   Reduce Motion is not "no feedback" — it is a gentler, non-vestibular version
   of the same signal. So keep colour and opacity cross-fades and take away the
   movement, rather than freezing the interface.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Decorative loops run once and stop. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Keep the cross-fade, drop the travel: transform/left/width/height snap
       while colour and opacity still ease. */
    transition-property: opacity, color, background-color, border-color, fill, stroke, box-shadow !important;
    transition-duration: 140ms !important;
    scroll-behavior: auto !important;
  }
}

/* Translucent chrome stops being translucent — raise the background to solid
   and drop the blur, rather than leaving low-contrast text over live video. */
@media (prefers-reduced-transparency: reduce) {
  .lv-header,
  .lv-miniplayer,
  .lv-settings-panel,
  .lv-return-pill,
  .lv-ask-bar,
  .lv-screen-card,
  .lv-conn-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--lv-bg) !important;
  }
}

/* Near-solid surfaces with a defined border, so edges are found by outline
   rather than by a subtle tint difference. */
@media (prefers-contrast: more) {
  .lv-header,
  .lv-miniplayer,
  .lv-settings-panel,
  .lv-return-pill,
  .lv-screen-card,
  .lv-conn-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--lv-bg) !important;
    border: 1px solid currentColor !important;
  }

  .lv-scrubber-track {
    background: rgba(15, 23, 42, 0.35);
  }
}