/*
 * Studio visual system v2
 * A semantic, brand-driven layer shared by public, director, guest and program output.
 * Brand color belongs to --brand-*; red is reserved for recording/live state.
 */

body[data-brand-theme] {
  --ui-bg: var(--brand-background);
  --ui-panel: var(--brand-surface);
  --ui-panel-2: var(--brand-surface-alt);
  --ui-text: var(--brand-text);
  --ui-muted: var(--brand-text-muted);
  --ui-line: var(--brand-border);
  --ui-primary: var(--brand-primary);
  --ui-accent: var(--brand-accent);
  --ui-button-text: var(--brand-button-text);
  --ui-gradient: var(--brand-gradient);
  --ui-soft-primary: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --ui-soft-accent: color-mix(in srgb, var(--brand-accent) 9%, transparent);
  --ui-shadow: 0 24px 80px color-mix(in srgb, var(--brand-background) 76%, #000);
  --ui-radius-sm: 10px;
  --ui-radius: 16px;
  --ui-radius-lg: 24px;
}

/* ---------------- Public / auth ---------------- */

body.studio-public-shell[data-brand-theme] {
  background:
    var(--studio-surface-gradient, linear-gradient(transparent, transparent)),
    radial-gradient(900px 560px at 8% -12%, color-mix(in srgb, var(--ui-primary) 20%, transparent), transparent 68%),
    radial-gradient(700px 480px at 100% 12%, color-mix(in srgb, var(--ui-accent) 11%, transparent), transparent 70%),
    var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--brand-body-font);
}

.studio-public-shell .studio-public-page {
  margin: 0 auto;
  max-width: 1280px;
  padding: 28px clamp(20px, 4vw, 52px) 88px;
  width: 100%;
}

.studio-public-shell .public-nav {
  border-bottom: 1px solid var(--ui-line);
  min-height: 78px;
  padding-bottom: 20px;
}

.studio-public-shell .public-brand img {
  height: var(--studio-logo-max-height, 48px);
  max-width: var(--studio-logo-max-width, 210px);
  object-fit: contain;
  object-position: var(--studio-logo-object-position, left center);
  width: auto;
}

.studio-public-shell .public-nav nav {
  align-items: center;
  display: flex;
  gap: clamp(16px, 2.6vw, 32px);
}

.studio-public-shell .public-nav nav a {
  color: var(--ui-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
}

.studio-public-shell .public-nav nav a:hover {
  color: var(--ui-text);
}

.studio-public-shell .studio-hero {
  align-items: center;
  display: grid;
  gap: clamp(44px, 7vw, 96px);
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  min-height: 650px;
  padding: 76px 0 64px;
}

.studio-public-shell .hero-copy {
  max-width: 720px;
}

.studio-public-shell .public-kicker,
.studio-public-shell .product-sections p {
  color: var(--ui-primary);
  font-family: var(--brand-heading-font);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.studio-public-shell .hero-copy h1 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: clamp(3.35rem, 6.4vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .96;
  margin: 0;
  max-width: 760px;
  text-wrap: balance;
}

.studio-public-shell .hero-support {
  color: var(--ui-muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.7;
  margin: 28px 0 18px;
  max-width: 640px;
}

.studio-public-shell .hero-copy > strong {
  color: var(--ui-accent);
  display: block;
  font-family: var(--brand-heading-font);
  font-size: .9rem;
  font-weight: 700;
}

.hero-proof {
  border-top: 1px solid var(--ui-line);
  display: flex;
  gap: clamp(18px, 4vw, 44px);
  margin-top: 36px;
  padding-top: 22px;
}

.hero-proof span {
  color: var(--ui-muted);
  display: grid;
  font-size: .75rem;
  font-weight: 700;
  gap: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-proof b {
  color: var(--ui-primary);
  font-family: var(--brand-heading-font);
  font-size: .64rem;
}

.studio-public-shell .auth-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-primary) 7%, transparent), transparent 40%),
    var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  padding: 28px;
  position: relative;
}

.auth-intro {
  align-items: center;
  color: var(--ui-muted);
  display: flex;
  font-size: .7rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .08em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.auth-status-dot {
  background: var(--studio-green, var(--ui-primary));
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--studio-green, var(--ui-primary)) 13%, transparent);
  height: 7px;
  width: 7px;
}

.studio-public-shell .auth-tabs {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  gap: 4px;
  padding: 4px;
}

.studio-public-shell .auth-tab {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ui-muted);
  min-height: 40px;
}

.studio-public-shell .auth-tab.is-active {
  background: var(--ui-panel);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ui-bg) 55%, transparent);
  color: var(--ui-text);
}

.studio-public-shell .auth-form {
  gap: 15px;
}

.studio-public-shell .auth-form h2 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: 1.45rem;
  letter-spacing: -.025em;
  margin: 6px 0 4px;
}

.studio-public-shell .auth-form label {
  color: var(--ui-muted);
  font-size: .75rem;
  gap: 7px;
}

.studio-public-shell .auth-form input {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  color: var(--ui-text);
  min-height: 48px;
  outline: 0;
  padding: 0 14px;
}

.studio-public-shell .auth-form input:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-soft-primary);
}

.studio-public-shell .auth-message[data-state="error"] {
  color: #ff8585;
}

.studio-public-shell .public-button {
  background: var(--ui-gradient);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-primary) 22%, transparent);
  color: var(--ui-button-text);
  margin-top: 4px;
  min-height: 50px;
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.section-heading h2 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0;
  max-width: 700px;
}

.section-heading > p {
  color: var(--ui-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 420px;
}

.studio-public-shell .studio-showcase {
  border-top: 1px solid var(--ui-line);
  padding: 72px 0 86px;
}

.studio-public-shell .showcase-frame {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.studio-public-shell .showcase-topbar {
  background: color-mix(in srgb, var(--ui-panel-2) 85%, transparent);
  border-color: var(--ui-line);
  height: 42px;
  padding: 0 18px;
}

.studio-public-shell .showcase-topbar span {
  background: var(--ui-primary);
  height: 7px;
  opacity: .65;
  width: 7px;
}

.studio-public-shell .showcase-grid {
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 430px;
}

.studio-public-shell .showcase-grid aside {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
  gap: 11px;
  padding: 28px 20px;
}

.studio-public-shell .showcase-grid aside img {
  height: 48px;
  margin-bottom: 12px;
  object-fit: contain;
  object-position: left center;
  width: 150px;
}

.studio-public-shell .showcase-grid aside b,
.studio-public-shell .showcase-grid aside small {
  background: color-mix(in srgb, var(--ui-panel) 72%, transparent);
  border-color: var(--ui-line);
  border-radius: 9px;
  color: var(--ui-muted);
  padding: 11px 12px;
}

.studio-public-shell .showcase-grid aside b {
  color: var(--ui-primary);
}

.studio-public-shell .showcase-main {
  background:
    radial-gradient(600px 280px at 50% 40%, var(--ui-soft-primary), transparent 70%),
    var(--ui-panel);
  gap: 16px;
  padding: 26px;
}

.studio-public-shell .mode-pills span,
.studio-public-shell .drop-preview,
.studio-public-shell .stage-preview span {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
  border-radius: 11px;
}

.studio-public-shell .mode-pills span:first-child {
  border-color: var(--ui-primary);
  box-shadow: inset 3px 0 0 var(--ui-primary);
}

.studio-public-shell .drop-preview {
  color: var(--ui-accent);
  font-family: var(--brand-heading-font);
  min-height: 230px;
}

.studio-public-shell .product-sections {
  border-top: 1px solid var(--ui-line);
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-top: 72px;
}

.product-heading {
  grid-column: 1 / -1;
}

.studio-public-shell .product-sections article {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  min-height: 240px;
  padding: 24px;
  position: relative;
}

.studio-public-shell .product-sections article:nth-of-type(-n + 3) {
  grid-column: span 2;
}

.studio-public-shell .product-sections article:nth-of-type(n + 4) {
  grid-column: span 3;
}

.feature-number {
  color: var(--ui-line);
  font-family: var(--brand-heading-font);
  font-size: 2.5rem;
  font-weight: 800;
  position: absolute;
  right: 20px;
  top: 15px;
}

.studio-public-shell .product-sections h2 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: 1.35rem;
  letter-spacing: -.025em;
  line-height: 1.15;
  max-width: 85%;
}

.studio-public-shell .product-sections span:not(.feature-number) {
  color: var(--ui-muted);
  display: block;
  font-size: .9rem;
  margin-top: 18px;
}

.studio-public-shell .studio-app-shell {
  background: var(--ui-bg);
}

.studio-public-shell .studio-logout {
  background: color-mix(in srgb, var(--ui-panel) 88%, transparent);
  border-color: var(--ui-line);
  border-radius: 999px;
  color: var(--ui-text);
}

/* ---------------- Shared authenticated Studio ---------------- */

.studio-shell[data-brand-theme] {
  background:
    var(--studio-surface-gradient, linear-gradient(transparent, transparent)),
    radial-gradient(800px 460px at 0 -5%, var(--ui-soft-primary), transparent 70%),
    radial-gradient(680px 420px at 100% 0, var(--ui-soft-accent), transparent 72%),
    var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--brand-body-font);
}

.studio-shell[data-brand-theme] .atmosphere-grain {
  mix-blend-mode: var(--studio-grain-blend, overlay);
  opacity: var(--studio-grain-opacity, .018);
}

.studio-shell[data-brand-theme] .atmosphere-mark {
  filter: var(--studio-watermark-filter, grayscale(1));
  opacity: var(--studio-watermark-opacity, .025);
}

.studio-shell[data-brand-theme] .btn-primary {
  background: var(--ui-gradient);
  border-color: transparent;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-primary) 20%, transparent);
  color: var(--ui-button-text);
}

.studio-shell[data-brand-theme] .btn-ghost,
.studio-shell[data-brand-theme] .link-action {
  color: var(--ui-text);
}

.studio-shell[data-brand-theme] .btn-ghost {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
}

.studio-shell[data-brand-theme] input,
.studio-shell[data-brand-theme] select,
.studio-shell[data-brand-theme] textarea {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
  color: var(--ui-text);
}

.studio-shell[data-brand-theme] .studio-global-nav {
  margin: 0 auto;
  max-width: 1560px;
  padding: 20px clamp(18px, 2.4vw, 36px) 0;
  position: relative;
}

.studio-shell[data-brand-theme] .studio-global-nav::after {
  background: var(--studio-identity-stripe, transparent);
  bottom: 0;
  content: "";
  height: var(--studio-identity-stripe-width, 0px);
  left: clamp(18px, 2.4vw, 36px);
  pointer-events: none;
  position: absolute;
  right: clamp(18px, 2.4vw, 36px);
}

.studio-shell[data-brand-theme] .studio-mode-switcher {
  background: color-mix(in srgb, var(--ui-panel) 86%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  padding: 6px;
}

.studio-shell[data-brand-theme] .mode-card {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 62px;
  padding: 10px 14px;
}

.studio-shell[data-brand-theme] .mode-card:hover {
  background: var(--ui-soft-primary);
  border-color: var(--ui-line);
}

.studio-shell[data-brand-theme] .mode-card[aria-pressed="true"] {
  background:
    var(--studio-identity-stripe, transparent) 0 8px / var(--studio-identity-stripe-width, 0px) calc(100% - 16px) no-repeat,
    var(--ui-panel-2);
  border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-line));
  box-shadow: none;
}

.studio-shell[data-brand-theme] .mode-card strong {
  color: var(--ui-text);
  font-size: .82rem;
  letter-spacing: .04em;
}

.studio-shell[data-brand-theme] .mode-icon {
  background: var(--ui-soft-primary);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 35%, var(--ui-line));
  box-shadow: none;
  height: 34px;
  width: 34px;
}

.studio-shell[data-brand-theme] .mode-icon--live::after {
  border-color: var(--ui-primary);
}

.studio-shell[data-brand-theme] .mode-icon--ai::before {
  border-color: var(--ui-primary);
  height: 16px;
  width: 21px;
}

.studio-shell[data-brand-theme] .mode-icon--ai::after {
  background:
    linear-gradient(var(--ui-accent), var(--ui-accent)) center / 2px 16px no-repeat,
    linear-gradient(90deg, var(--ui-accent), var(--ui-accent)) center / 16px 2px no-repeat;
  filter: none;
}

.studio-shell[data-brand-theme] .studio-grid {
  gap: 18px;
  grid-template-columns: 240px minmax(0, 1fr) 256px;
  margin: 0 auto;
  max-width: 1560px;
  padding: 18px clamp(18px, 2.4vw, 36px) 40px;
}

.studio-shell[data-brand-theme] .rail {
  gap: 14px;
}

.studio-shell[data-brand-theme] .brand-block,
.studio-shell[data-brand-theme] .rail-invite,
.studio-shell[data-brand-theme] .quick-actions,
.studio-shell[data-brand-theme] .production-panel {
  background: color-mix(in srgb, var(--ui-panel) 94%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 16px;
}

.studio-shell[data-brand-theme] .brand-block,
.studio-shell[data-brand-theme] .production-panel {
  background:
    var(--studio-identity-stripe, transparent) 0 12px / var(--studio-identity-stripe-width, 0px) calc(100% - 24px) no-repeat,
    color-mix(in srgb, var(--ui-panel) 94%, transparent);
}

.studio-shell[data-brand-theme] .brand-block::before {
  display: none;
}

.studio-shell[data-brand-theme] .brand-lockup {
  justify-content: var(--studio-logo-justify, flex-start);
  min-height: var(--studio-logo-max-height, 58px);
}

.studio-shell[data-brand-theme] .brand-lockup img {
  height: var(--studio-logo-max-height, 48px);
  max-height: var(--studio-logo-max-height, 48px);
  max-width: var(--studio-logo-max-width, 180px);
  object-fit: contain;
  object-position: var(--studio-logo-object-position, left center);
  width: auto;
}

.studio-shell[data-brand-theme] .powered-by {
  margin-top: 10px;
}

.studio-shell[data-brand-theme] .on-air-sign {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  box-shadow: none;
  gap: 8px;
  margin-top: 16px;
  min-width: 0;
  padding: 8px 12px;
}

.studio-shell[data-brand-theme] .on-air-sign::before,
.studio-shell[data-brand-theme] .on-air-sign::after {
  display: none;
}

.studio-shell[data-brand-theme] .on-air-bulb {
  background: #e95454;
  border: 0;
  box-shadow: none;
  height: 8px;
  width: 8px;
}

.studio-shell[data-brand-theme] .on-air-text {
  color: var(--ui-muted);
  font-size: .68rem;
  letter-spacing: .12em;
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="live"] {
  background: color-mix(in srgb, #e95454 11%, var(--ui-panel-2));
  border-color: color-mix(in srgb, #e95454 32%, var(--ui-line));
  box-shadow: none;
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="live"] .on-air-text {
  color: var(--ui-text);
  filter: none;
  text-shadow: none;
}

/* OFFLINE/READY/ERROR never pulse or read as "live" — see js/director.js's renderBroadcastChip, which
   drives this off the real broadcast flag, not a VDO.Ninja room-connection ping. */

.studio-shell[data-brand-theme] .on-air-sign[data-state="ready"] {
  background: color-mix(in srgb, #f5a623 11%, var(--ui-panel-2));
  border-color: color-mix(in srgb, #f5a623 32%, var(--ui-line));
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="ready"] .on-air-bulb {
  background: #f5a623;
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="ready"] .on-air-text {
  color: var(--ui-text);
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="error"] {
  background: color-mix(in srgb, #ff8a3d 11%, var(--ui-panel-2));
  border-color: color-mix(in srgb, #ff8a3d 32%, var(--ui-line));
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="error"] .on-air-bulb {
  background: #ff8a3d;
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="error"] .on-air-text {
  color: var(--ui-text);
}

.studio-shell[data-brand-theme] .on-air-sign[data-state="offline"] {
  opacity: 0.7;
}

.studio-shell[data-brand-theme] .rail-invite {
  gap: 9px;
}

.studio-shell[data-brand-theme] .brand-switcher {
  color: var(--ui-muted);
}

.studio-shell[data-brand-theme] .brand-switcher select {
  border-radius: 9px;
}

.studio-shell[data-brand-theme] .quick-actions {
  padding-top: 16px;
}

.studio-shell[data-brand-theme] .quick-action-row:hover:not(:disabled) {
  background: var(--ui-soft-primary);
}

.studio-shell[data-brand-theme] .quick-action-row[aria-pressed="true"],
.studio-shell[data-brand-theme] .rail-eyebrow,
.studio-shell[data-brand-theme] .soundboard-head .rail-card-title {
  color: var(--ui-primary);
}

.studio-shell[data-brand-theme] .stage-main::before {
  background: radial-gradient(closest-side at 50% 32%, var(--ui-soft-primary), transparent 74%);
  opacity: .65;
}

.studio-shell[data-brand-theme] .video-panel {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ui-bg) 60%, transparent);
  transform: none;
}

.studio-shell[data-brand-theme] .video-panel:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-line));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--ui-bg) 65%, transparent);
  transform: translateY(-2px);
}

.studio-shell[data-brand-theme] .video-panel::after {
  background: radial-gradient(ellipse at 50% 100%, var(--ui-soft-primary), transparent 68%);
}

.studio-shell[data-brand-theme] .video-panel .corner-mark {
  border-color: color-mix(in srgb, var(--ui-primary) 48%, transparent);
}

.studio-shell[data-brand-theme] .vdo-frame,
.studio-shell[data-brand-theme] .stage-empty {
  background:
    radial-gradient(80% 80% at 50% 30%, var(--ui-soft-primary), transparent 70%),
    var(--ui-panel-2);
  min-height: min(48vh, 430px);
}

.studio-shell[data-brand-theme] .vdo-frame[data-empty]::after {
  display: none;
}

.camera-launch-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  max-width: 360px;
  padding: 32px;
  text-align: center;
}

.camera-launch-icon {
  align-items: center;
  background: var(--ui-soft-primary);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 35%, var(--ui-line));
  border-radius: 18px;
  color: var(--ui-primary);
  display: flex;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.camera-launch-icon svg {
  height: 28px;
  width: 28px;
}

.camera-launch-copy {
  display: grid;
  gap: 7px;
}

.camera-launch-copy strong {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: 1.15rem;
}

.camera-launch-copy small {
  color: var(--ui-muted);
  line-height: 1.5;
}

.camera-launch-card .btn {
  min-width: 230px;
}

.studio-shell[data-brand-theme] .control-dock,
.studio-shell[data-brand-theme] .soundboard-panel,
.studio-shell[data-brand-theme] .recording-panel,
.studio-shell[data-brand-theme] .ai-production-workbench,
.studio-shell[data-brand-theme] .quick-toast-panel,
.studio-shell[data-brand-theme] .quick-preview,
.studio-shell[data-brand-theme] .create-workflow-head {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  box-shadow: none;
}

.studio-shell[data-brand-theme] .dock-btn,
.studio-shell[data-brand-theme] .sound-tile {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
  color: var(--ui-text);
}

.studio-shell[data-brand-theme] .dock-btn:hover,
.studio-shell[data-brand-theme] .sound-tile:hover {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px var(--ui-soft-primary);
}

.studio-shell[data-brand-theme] .dock-btn[aria-pressed="true"] {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-button-text);
}

.studio-shell[data-brand-theme] .production-panel {
  background:
    var(--studio-identity-stripe, transparent) 0 12px / var(--studio-identity-stripe-width, 0px) calc(100% - 24px) no-repeat,
    var(--ui-panel);
}

.studio-shell[data-brand-theme] .recording-panel {
  background:
    linear-gradient(135deg, color-mix(in srgb, #e95454 10%, transparent), transparent 38%),
    var(--ui-panel);
}

.studio-shell[data-brand-theme] .quick-drop-zone {
  background:
    radial-gradient(circle at 50% 30%, var(--ui-soft-primary), transparent 46%),
    var(--ui-panel-2);
  border-color: color-mix(in srgb, var(--ui-primary) 48%, var(--ui-line));
}

.studio-shell[data-brand-theme] .quick-drop-zone strong,
.studio-shell[data-brand-theme] .quick-customize summary,
.studio-shell[data-brand-theme] .quick-create-link,
.studio-shell[data-brand-theme] .mode-card[aria-pressed="true"] strong {
  color: var(--ui-primary);
}

.studio-shell[data-brand-theme] .quick-drop-zone b,
.studio-shell[data-brand-theme] .workflow-tabs button[aria-pressed="true"] {
  background: var(--ui-gradient);
  color: var(--ui-button-text);
}

.studio-shell[data-brand-theme] .concierge-note {
  background: var(--ui-soft-primary);
  border-color: color-mix(in srgb, var(--ui-primary) 28%, var(--ui-line));
}

.studio-shell[data-brand-theme] .production-head h2,
.studio-shell[data-brand-theme] .quick-preview h3,
.studio-shell[data-brand-theme] .create-workflow-head h3 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
}

/* ---------------- Guest check-in ---------------- */

.guest-shell[data-brand-theme] {
  min-height: 100vh;
}

.guest-shell[data-brand-theme] .guest-grid {
  gap: 22px;
  max-width: 1120px;
  padding: 24px clamp(18px, 4vw, 40px) 56px;
}

.guest-shell[data-brand-theme] .guest-topbar {
  border-bottom: 1px solid var(--ui-line);
  min-height: 72px;
  padding: 0 0 18px;
}

.guest-shell[data-brand-theme] #guestCheckin {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
}

/* ROOT CAUSE (real-device repro: check-in form stayed on screen after Join Studio) — this ID selector's
   unconditional `display: grid` above outranks the plain UA `[hidden] { display: none }` rule
   (specificity (1,2,0) vs (0,1,0)), so guest.js setting `elements.guestCheckin.hidden = true` on join had
   no visible effect whenever a brand theme was active. Same fix pattern already used for .joined-room. */
.guest-shell[data-brand-theme] #guestCheckin[hidden] {
  display: none;
}

.guest-shell[data-brand-theme] .guest-join-card,
.guest-shell[data-brand-theme] .joined-room {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ui-bg) 55%, transparent);
  padding: 24px;
}

.guest-shell[data-brand-theme] .guest-join-card h1 {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.guest-shell[data-brand-theme] .eyebrow {
  color: var(--ui-primary);
  font-size: .68rem;
  letter-spacing: .12em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.guest-shell[data-brand-theme] .guest-lede {
  color: var(--ui-muted);
  line-height: 1.6;
}

.guest-shell[data-brand-theme] .preview-stage {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}

/* Same specificity bug already fixed once for #guestCheckin/.dock-btn in this file (see their own
   comments): this selector's aspect-ratio:16/10 outranked base studio.css's .preview-stage--live modifier
   on any branded page (which is all of them), silently forcing 16/10 back on regardless — a real,
   confirmed contributor to the "camera extends outside its card, desktop-sized" real-device bug (see
   .preview-stage--live's own comment in studio.css for the full root-cause chain). Scoped separately
   instead of merged into the rule above so aspect-ratio stays theme-agnostic (prejoin keeps its base
   16/10, in-studio keeps its base 3/4) while background/border/radius still get the brand skin. */
.guest-shell[data-brand-theme] .preview-stage--live {
  aspect-ratio: 3 / 4;
}

.guest-shell[data-brand-theme] .joined-room .lv-stage-pip.preview-stage {
  aspect-ratio: 3 / 4;
  min-height: 0;
}

.guest-shell[data-brand-theme] .preview-overlay img {
  background: color-mix(in srgb, var(--ui-panel) 78%, transparent);
  border: 1px solid var(--ui-line);
  height: 38px;
  padding: 7px;
}

.guest-shell[data-brand-theme] .guest-join-card {
  gap: 16px;
}

.guest-shell[data-brand-theme] .guest-join-card label,
.guest-shell[data-brand-theme] .bg-picker-label {
  color: var(--ui-muted);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.guest-shell[data-brand-theme] .guest-join-card input,
.guest-shell[data-brand-theme] .guest-join-card select {
  border-radius: 10px;
  min-height: 46px;
}

.guest-shell[data-brand-theme] .bg-swatch {
  background: var(--ui-panel-2);
  border-color: var(--ui-line);
  border-radius: 10px;
  color: var(--ui-muted);
}

.guest-shell[data-brand-theme] .bg-swatch:hover,
.guest-shell[data-brand-theme] .bg-swatch[aria-pressed="true"] {
  background: var(--ui-soft-primary);
  border-color: var(--ui-primary);
  color: var(--ui-text);
}

.studio-public-shell[data-brand-theme="santati"] .public-brand img {
  height: 62px;
  max-width: 180px;
}

.studio-shell[data-brand-theme="santati"] .brand-lockup img {
  height: 62px;
  max-height: 62px;
  max-width: 170px;
}

.studio-public-shell[data-brand-theme="optimai"] .public-brand img,
.studio-shell[data-brand-theme="optimai"] .brand-lockup img {
  max-width: 175px;
}

/* ---------------- Program output ---------------- */

.program-output[data-brand-theme] {
  --po-video-text: #fff;
  --po-video-text-dim: rgba(255, 255, 255, .72);
  background: var(--ui-bg);
}

.program-output[data-brand-theme] .po-canvas {
  background:
    radial-gradient(900px 620px at 10% 0, var(--ui-soft-primary), transparent 70%),
    radial-gradient(700px 520px at 100% 100%, var(--ui-soft-accent), transparent 70%),
    var(--ui-bg);
}

.program-output[data-brand-theme] .po-canvas::before {
  background-image:
    linear-gradient(var(--ui-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-line) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.42), transparent 62%);
  opacity: .18;
  pointer-events: none;
  position: absolute;
}

.program-output[data-brand-theme] .po-chrome {
  padding: clamp(20px, 3vw, 42px);
}

.program-output[data-brand-theme] .po-chrome-top,
.program-output[data-brand-theme] .po-chrome-bottom {
  background: transparent;
}

.program-output[data-brand-theme] .po-brand img {
  height: clamp(30px, 4vw, 58px);
  max-width: 220px;
  object-fit: contain;
}

.program-output[data-brand-theme] .po-live-badge {
  background: color-mix(in srgb, var(--ui-panel) 78%, transparent);
  border-color: var(--ui-line);
  backdrop-filter: blur(16px);
}

.program-output[data-brand-theme] .po-stage {
  padding: 0 clamp(20px, 3vw, 42px) clamp(14px, 2vw, 28px);
}

.program-output[data-brand-theme] .po-tile,
.program-output[data-brand-theme] .po-waitingroom-slot {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}

.program-output[data-brand-theme] .po-waitingroom-slot {
  background:
    radial-gradient(circle at 50% 30%, var(--ui-soft-primary), transparent 70%),
    var(--ui-panel);
}

.program-output[data-brand-theme] .po-waitingroom-icon {
  color: var(--ui-primary);
  opacity: .62;
}

.program-output[data-brand-theme] .po-lower-third-name,
.program-output[data-brand-theme] .po-lower-third-title {
  background: color-mix(in srgb, var(--ui-panel) 84%, transparent);
  border-left-color: var(--ui-primary);
  backdrop-filter: blur(18px);
}

.program-output[data-brand-theme] .po-scene-screen {
  background:
    radial-gradient(620px 460px at 50% 38%, var(--ui-soft-primary), transparent 72%),
    transparent;
  gap: 18px;
}

.program-output[data-brand-theme] .po-scene-screen::before {
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  content: "";
  height: min(64vw, 680px);
  position: absolute;
  width: min(64vw, 680px);
}

.program-output[data-brand-theme] .po-scene-screen::after {
  border: 1px solid color-mix(in srgb, var(--ui-primary) 28%, transparent);
  border-radius: 50%;
  content: "";
  height: min(48vw, 510px);
  position: absolute;
  width: min(48vw, 510px);
}

.program-output[data-brand-theme] .po-scene-mark,
.program-output[data-brand-theme] .po-scene-kicker,
.program-output[data-brand-theme] .po-scene-topic {
  position: relative;
  z-index: 2;
}

.program-output[data-brand-theme] .po-scene-mark {
  background: color-mix(in srgb, var(--ui-panel) 80%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  padding: 18px 24px;
}

.program-output[data-brand-theme] .po-scene-mark img {
  height: clamp(54px, 8vw, 92px);
  max-width: min(46vw, 360px);
  object-fit: contain;
}

.program-output[data-brand-theme] .po-scene-kicker {
  color: var(--ui-primary);
}

.program-output[data-brand-theme] .po-scene-topic {
  color: var(--ui-text);
  font-family: var(--brand-heading-font);
  font-size: clamp(2rem, 5vw, 4.8rem);
  letter-spacing: -.045em;
  max-width: 900px;
  text-wrap: balance;
}

.program-output[data-brand-theme="8alta"] .po-canvas::before {
  background-image: linear-gradient(120deg, transparent 48%, var(--ui-line) 49%, transparent 50%);
  background-size: 90px 90px;
}

.program-output[data-brand-theme="santati"] .po-canvas::before {
  background-image:
    radial-gradient(circle at center, var(--ui-primary) 0 2px, transparent 3px),
    linear-gradient(35deg, transparent 49%, var(--ui-line) 50%, transparent 51%);
  background-size: 84px 84px, 120px 120px;
}

.program-output[data-brand-theme="optimai"] .po-canvas::before {
  background-image:
    linear-gradient(var(--ui-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1120px) {
  .studio-shell[data-brand-theme] .studio-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .studio-shell[data-brand-theme] .rail-right {
    grid-column: 1 / -1;
  }

  .studio-public-shell .studio-hero {
    gap: 44px;
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

@media (max-width: 820px) {
  .studio-public-shell .public-nav {
    align-items: center;
    flex-direction: row;
  }

  .studio-public-shell .public-nav nav {
    display: none;
  }

  .studio-public-shell .studio-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 56px 0 64px;
  }

  .studio-public-shell .hero-copy h1 {
    font-size: clamp(3rem, 13vw, 5.4rem);
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .studio-public-shell .showcase-grid {
    grid-template-columns: 1fr;
  }

  .studio-public-shell .showcase-grid aside {
    border-bottom: 1px solid var(--ui-line);
    border-right: 0;
    grid-template-columns: repeat(4, 1fr);
  }

  .studio-public-shell .showcase-grid aside img {
    grid-column: 1 / -1;
  }

  .studio-public-shell .product-sections article {
    grid-column: 1 / -1 !important;
  }

  .studio-shell[data-brand-theme] .studio-mode-switcher {
    grid-template-columns: 1fr;
  }

  .studio-shell[data-brand-theme] .studio-grid {
    grid-template-columns: 1fr;
  }

  .guest-shell[data-brand-theme] #guestCheckin {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .studio-public-shell .studio-public-page {
    padding-inline: 18px;
  }

  .studio-public-shell .auth-card,
  .guest-shell[data-brand-theme] .guest-join-card {
    padding: 20px;
  }

  .hero-proof {
    gap: 16px;
    justify-content: space-between;
  }

  .studio-public-shell .showcase-grid aside {
    grid-template-columns: 1fr 1fr;
  }

  .studio-public-shell .showcase-main {
    padding: 16px;
  }

  .studio-public-shell .mode-pills {
    grid-template-columns: 1fr;
  }

  /* Deliberately NOT overriding .preview-stage's aspect-ratio here anymore — it used to flip to 4/3 at
     this exact real-phone width, undoing the base 16/10 "one screen, no scroll" fix (see studio.css's own
     comment on .preview-stage) right where it mattered most. This is likely why the giant preview region
     was still reported from a real device despite the base fix already being in place. */
}

.studio-shell[data-brand-theme] .brand-block,
.studio-shell[data-brand-theme] .mode-card[aria-pressed="true"] {
  position: relative;
}

.program-output[data-scene="holding"] .po-holding::after,
.program-output[data-scene="brb"] .po-brb::after,
.program-output[data-scene="ending"] .po-ending::after {
  background: var(--studio-identity-stripe, transparent);
  bottom: 12%;
  content: "";
  height: var(--studio-identity-stripe-width, 0px);
  left: 50%;
  max-width: 280px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 42%;
}

.program-output[data-scene="holding"] .po-holding::before,
.program-output[data-scene="brb"] .po-brb::before,
.program-output[data-scene="ending"] .po-ending::before {
  background: var(--studio-silhouette-image, none) center bottom / min(70vw, 920px) auto no-repeat;
  bottom: 0;
  content: "";
  height: 42%;
  left: 50%;
  opacity: var(--studio-silhouette-opacity, 0);
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 88%;
}

.program-output[data-brand-theme] .po-brand img {
  height: clamp(28px, 4.2vw, 52px);
  max-height: var(--studio-logo-max-height, 52px);
  object-fit: contain;
}

.studio-shell[data-logo-treatment="centered-mark"] .brand-lockup,
.studio-shell[data-logo-treatment="warm-lockup"] .brand-lockup,
.studio-public-shell[data-logo-treatment="centered-mark"] .public-brand,
.studio-public-shell[data-logo-treatment="warm-lockup"] .public-brand {
  justify-content: center;
}


/* DEMO READINESS PASS 2026-09-24 */
.studio-shell[data-brand-theme] .studio-global-nav { padding-top: 10px; }
.studio-shell[data-brand-theme] .studio-mode-switcher {
  align-items: center; background: color-mix(in srgb, var(--ui-panel) 74%, transparent);
  border-radius: 10px; display: inline-flex; gap: 2px; justify-self: start; max-width: max-content; padding: 3px;
}
.studio-shell[data-brand-theme] .mode-card { border-radius: 8px; gap: 0; min-height: 36px; padding: 0 13px; }
.studio-shell[data-brand-theme] .mode-card .mode-icon { display: none; }
.studio-shell[data-brand-theme] .mode-card strong { font-size: .72rem; letter-spacing: .035em; text-transform: none; }
.live-console .lv-brand-chip, .live-console .lv-health-chip, .live-console .lv-identity-chip { display: none; }
.live-console .lv-topbar { gap: .55rem; padding: .45rem .55rem; }
.live-console .lv-topbar-left { flex: 1 1 auto; }
.live-console .lv-topbar-status { flex: 0 0 auto; }
.live-console .lv-session-name { font-size: .9rem; max-width: min(32vw, 420px); }
.live-console .lv-live-state { max-width: none; }
.live-console #lvTopProgramOutput[data-state="connected"]::before {
  background: var(--studio-green); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 6px; width: 7px;
}
.lv-workspace-tabs {
  align-items: center; background: color-mix(in srgb, var(--studio-surface) 90%, transparent);
  border: 1px solid var(--studio-line); border-radius: 9px; display: flex; gap: 3px; padding: 4px; width: max-content;
}
.lv-workspace-tab {
  background: transparent; border: 0; border-radius: 7px; color: var(--studio-cream-dim); cursor: pointer;
  font-family: var(--font-heading); font-size: .68rem; font-weight: 800; padding: .45rem .75rem;
}
.lv-workspace-tab[aria-pressed="true"] { background: var(--studio-orange); color: var(--studio-button-text); }
.live-console[data-lv-view="producer"][data-producer-workspace="focus"] .lv-body > :not(.lv-focus-brief),
.live-console[data-lv-view="producer"][data-producer-workspace="moxie"] .lv-body > :not(.lv-ai-producer-pane) { display: none !important; }
.live-console[data-lv-view="producer"][data-producer-workspace="production"] .lv-focus-brief,
.live-console[data-lv-view="producer"][data-producer-workspace="production"] .lv-ai-producer-pane { display: none !important; }
.live-console[data-lv-view="producer"][data-producer-workspace="focus"] .lv-focus-brief,
.live-console[data-lv-view="producer"][data-producer-workspace="moxie"] .lv-ai-producer-pane {
  display: flex !important; grid-column: 1 / -1; min-height: min(66vh, 680px); overflow: auto; padding: clamp(.8rem, 1.4vw, 1.2rem);
}
/* Sections (.lv-focus-section) now do the grouping that a 2-column masonry grid used to fake — a single
   readable column of labeled sections instead of individual fields scattered across two columns. */
.live-console[data-lv-view="producer"][data-producer-workspace="focus"] .lv-focus-brief {
  align-content: start; display: grid !important; gap: .8rem; grid-template-columns: minmax(0, 760px); justify-content: start;
}
.live-console[data-lv-view="producer"][data-producer-workspace="moxie"] .lv-ai-producer-pane .lv-feed-list {
  flex: 1 1 auto; max-height: none; min-height: 360px;
}
.studio-shell[data-brand-theme="peeps"] {
  background: var(--studio-surface-gradient, linear-gradient(transparent, transparent)),
    linear-gradient(180deg, transparent 54%, color-mix(in srgb, var(--brand-primary) 7%, transparent) 100%), var(--ui-bg);
}
.studio-shell[data-brand-theme="peeps"] .studio-atmosphere::after {
  background-image: var(--studio-background-silhouette-image, none); background-position: center bottom; background-repeat: no-repeat;
  background-size: min(1500px, 98vw) auto; bottom: 0; content: ""; height: 44%; left: 0;
  opacity: var(--studio-silhouette-opacity, .16); pointer-events: none; position: fixed; right: 0;
}
/* Once a Live Studio session's own topbar is on screen, #lvTopLiveState already carries the
   live/starting/recording state — #connectionChip (the global-nav on-air sign) becomes a second,
   redundant LIVE indicator showing the same thing. Only suppress it in Live Studio mode; AI Production
   and Expertise still rely on it as their sole connection indicator. */
.studio-shell[data-production-mode="live"] #connectionChip { display: none; }

/* 901-1360px (common 13"/14" laptop widths): .studio-grid is still 3 columns here (the 2-column
   breakpoint is 1120px, but .stage-main is already narrow well above that), and .lv-topbar had no wrap
   until 900px — between the two, the session-name/state group, Host/Producer switch, and status/action
   chips could overlap or truncate. Let the topbar break onto two rows instead, well short of the 900px
   breakpoint's much bigger single-column body restructuring. */
@media (max-width: 1360px) and (min-width: 901px) {
  .live-console .lv-topbar { flex-wrap: wrap; row-gap: .4rem; }
  .live-console .lv-topbar-left { flex-basis: 100%; }
  .live-console .lv-topbar-status { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 820px) {
  .studio-shell[data-brand-theme] .studio-mode-switcher { max-width: 100%; width: 100%; }
  .studio-shell[data-brand-theme] .mode-card { flex: 1 1 0; justify-content: center; }
  .live-console .lv-topbar { align-items: flex-start; flex-wrap: wrap; }
  .live-console .lv-topbar-status { margin-left: auto; }
}

/* ---- Bottom toolbar (final layout): [Mic Camera Present Leave] | [Record Go Live] | [People Chat Tools] ----
   Three fixed groups on one grid so nothing can overlap; wraps to stacked rows on narrow windows. Declared
   last (this sheet loads after studio.css / studio-chassis.css) with doubled specificity to settle the older
   competing .lv-bottom-* rules. Layout only: no behaviour or media handling lives here. */
.live-console .lv-bottom-bar.lv-bottom-bar {
  align-items: center;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  row-gap: 0.5rem;
}
.live-console .lv-bottom-bar .lv-host-controls,
.live-console .lv-bottom-bar .lv-bottom-actions,
.live-console .lv-bottom-bar .lv-bottom-nav {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0;
  min-width: 0;
}
.live-console .lv-bottom-bar .lv-host-controls { justify-content: flex-start; }
.live-console .lv-bottom-bar .lv-bottom-actions { justify-content: center; }
.live-console .lv-bottom-bar .lv-bottom-nav { justify-content: flex-end; }
.live-console .lv-bottom-bar .lv-icon-btn,
.live-console .lv-bottom-bar .rec-toggle,
.live-console .lv-bottom-bar .lv-bottom-nav-btn {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 0.78rem;
  height: 40px;
  justify-content: center;
  margin: 0;
  min-height: 40px;
  min-width: 4.25rem;
  padding: 0 0.8rem;
  white-space: nowrap;
}
.live-console .lv-bottom-bar .lv-icon-btn-danger { margin-left: 0; }
.live-console .lv-bottom-bar .lv-bottom-nav-btn { min-width: 4.5rem; }
@media (max-width: 960px) {
  .live-console .lv-bottom-bar.lv-bottom-bar { grid-template-columns: 1fr; }
  .live-console .lv-bottom-bar .lv-host-controls,
  .live-console .lv-bottom-bar .lv-bottom-actions,
  .live-console .lv-bottom-bar .lv-bottom-nav { flex-wrap: wrap; }
  .live-console .lv-bottom-bar .lv-host-controls,
  .live-console .lv-bottom-bar .lv-bottom-actions,
  .live-console .lv-bottom-bar .lv-bottom-nav { justify-content: center; }
}
@media (max-width: 520px) {
  .live-console .lv-bottom-bar .lv-icon-btn,
  .live-console .lv-bottom-bar .rec-toggle,
  .live-console .lv-bottom-bar .lv-bottom-nav-btn { flex: 1 1 auto; min-width: 0; padding: 0 0.7rem; }
}

/* ---- Stable controls: nothing moves between idle, recording, presenting, hosting guests or live ----
   Every control that changes its label owns a FIXED-width slot, so a label swap (Record -> Stop recording,
   Present -> Stop presenting, Go Live -> End Live) can never push its neighbours around. The Leave button
   lives in the header menu (it appears only once the host has joined, which used to shift the toolbar). */
.live-console .lv-bottom-bar.lv-bottom-bar { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 0.75rem; }
.live-console .lv-bottom-bar .lv-bottom-nav { justify-content: flex-end; }
.live-console .lv-bottom-bar .lv-icon-btn,
.live-console .lv-bottom-bar .rec-toggle,
.live-console .lv-bottom-bar .lv-bottom-nav-btn { font-size: 0.75rem; padding: 0 0.6rem; min-width: 0; }
.live-console .lv-bottom-bar #lvToggleMic,
.live-console .lv-bottom-bar #lvToggleCamera { width: 4.25rem; }
.live-console .lv-bottom-bar #lvToggleScreen { width: 8rem; }
.live-console .lv-bottom-bar #lvRecordToggle { width: 9.75rem; }
.live-console .lv-bottom-bar #lvBottomGoLive { width: 6.5rem; }
.live-console .lv-bottom-bar .lv-bottom-nav-btn { width: 4rem; padding: 0 0.3rem; }
.live-console .lv-bottom-bar .rec-toggle::before { flex: 0 0 auto; margin-right: 0.4rem; position: static; }
.live-console .lv-bottom-bar .rec-toggle { gap: 0; }
.live-console .lv-topbar-status { align-items: center; display: flex; gap: 0.4rem; }
.live-console .lv-top-settings { min-height: 36px; padding-inline: 0.9rem; }
.live-console .lv-topbar-status .lv-mini-btn { min-height: 36px; }
@media (max-width: 960px) {
  .live-console .lv-bottom-bar.lv-bottom-bar { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .live-console .lv-bottom-bar #lvToggleMic,
  .live-console .lv-bottom-bar #lvToggleCamera,
  .live-console .lv-bottom-bar #lvToggleScreen,
  .live-console .lv-bottom-bar #lvRecordToggle,
  .live-console .lv-bottom-bar #lvBottomGoLive,
  .live-console .lv-bottom-bar .lv-bottom-nav-btn { flex: 1 1 auto; width: auto; }
}

/* ---- Moxie's private feed must be visible ----
   The desktop Host layout capped the AI Producer panel at 8rem (max-height !important). That is shorter than its own
   header + Talk to Moxie row + text field, so the feed list above them collapsed to 0px: Moxie's private reminders,
   research cards and run-of-show nudges were being produced but never shown. Give the panel room and let the feed scroll. */
.live-console[data-lv-view="host"] .lv-ai-producer,
.studio-chassis.live-console[data-lv-view="host"] .lv-ai-producer {
  max-height: 26rem !important;
  min-height: 17rem;
}
.live-console[data-lv-view="host"] .lv-ai-producer .lv-feed-list { flex: 1 1 auto; max-height: none; min-height: 8rem; overflow-y: auto; }

/* ---- Session plan and guest preparation (host and producer only) ---- */
.live-console .lv-prep { display: grid; gap: .6rem; max-height: 24rem; overflow-y: auto; }
.live-console .lv-prep[hidden] { display: none; }
.live-console .lv-prep .lv-prep-block h4 { margin: .5rem 0 .2rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.live-console .lv-prep .lv-prep-block p, .live-console .lv-prep .lv-prep-guest p { margin: .2rem 0; font-size: .9rem; }
.live-console .lv-prep ul { margin: .2rem 0 .4rem 1.1rem; padding: 0; font-size: .9rem; }
.live-console .lv-prep .lv-prep-guest { border: 1px solid rgba(230, 200, 168, 0.14); border-radius: 10px; padding: .55rem .7rem; }
.live-console .lv-prep .lv-prep-guest summary { cursor: pointer; font-weight: 700; }