/* ============================================================
   reference-media-composer.css  v20261005-reference-rem-v37
   Workbench root scale is measured at 17.625px on desktop.
   Scoped to body.media-mode; overrides styles.css for the
   video/audio composer, hero, billing pill.
   ============================================================ */

/* ── Hero container ─────────────────────────────────────── */

html:not([data-display-theme="light"]) body.media-mode .workspace { background: #0f0f12; }
body.media-mode #model-hero-icon img { filter: drop-shadow(0 0 .625rem #ffffff4d); }

body.media-mode #hero {
  position: absolute;
  top: 5rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(37.5rem, calc(100% - 2.5rem));
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

/* Strip the generic icon border/bg/shadow */
body.media-mode #model-hero-icon {
  position: static;
  flex: none;
  transform: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Detail box */
body.media-mode #hero-notice {
  border: 1px solid rgba(0, 202, 224, .3) !important;
  border-radius: 0.75rem !important;
  background: rgba(27, 28, 33, .95) !important;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,.3) !important;
  backdrop-filter: blur(0.625rem) !important;
  -webkit-backdrop-filter: blur(0.625rem) !important;
  color: rgba(255, 255, 255, .95) !important;
  letter-spacing: 0.0125rem;
  display: block !important;
  overflow: visible !important;
  max-width: none;
  transform: none;
}
body.media-mode #hero-notice .media-announcement-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; line-height: 1.8;
}

@media (max-width: 840px) {
  body.media-mode #hero-notice .media-announcement-text {line-height:inherit;}
  body.media-mode #hero { gap: 1.25rem; }
  body.media-mode #model-hero-icon {
    width: 5rem !important;
    height: 5rem !important;
    top: 0 !important;
  }
  body.media-mode #model-hero-icon img {
    width: 5rem !important;
    height: 5rem !important;
  }
  body.media-mode #hero-notice {
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem 0.875rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.38rem !important;
  }
}

@media (min-width: 841px) {
  body.media-mode #hero { gap: 3.125rem; }
  body.media-mode #model-hero-icon {
    width: 128px !important;
    height: 128px !important;
  }
  body.media-mode #model-hero-icon img {
    width: 128px !important;
    height: 128px !important;
  }
  body.media-mode #hero-notice {
    width: 37.5rem !important;
    max-width: none !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.575rem !important;
  }
}

/* ── Billing pill ────────────────────────────────────────── */

#billing-info .billing-type {font:inherit;color:inherit;}
body.media-mode #billing-info:not([hidden]) {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.25rem 0.625rem !important;
  height: auto !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgb(30, 31, 37) !important;
  background: rgba(27, 28, 33, .95) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.3) !important;
  backdrop-filter: blur(0.625rem) !important;
  -webkit-backdrop-filter: blur(0.625rem) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: rgba(255, 152, 0, .65) !important;
  white-space: nowrap !important;
  z-index: 4;
  bottom: calc(100% + 0.9028rem);
  right: 1.3194rem;
  top: auto;
  left: auto;
}

body.media-mode #billing-info span[aria-hidden="true"] {
  font-size: 1.1111rem !important;
  color: rgba(156, 163, 175, .55) !important;
  font-weight: 400 !important;
}

/* ── Composer shell ──────────────────────────────────────── */

body.media-mode .composer-island {
  position: relative !important;
}

@media (max-width: 840px) {
  body.media-mode .composer {
    border: 1px solid rgb(30, 31, 37) !important;
    border-radius: 0.875rem !important;
    background: rgba(27, 28, 33, .95) !important;
    overflow: visible !important;
    /* 2-col: slots/camera-col | prompt/chips-col
       3-row: top | chip-row | footer-row             */
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    grid-template-rows:
      minmax(8.125rem, auto)
      1.875rem
      2.9167rem !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
  }
  /* media-composer-options: display:contents → children are grid items */
  body.media-mode .media-composer-options { display: contents !important; }
  /* slots → col1 row1 */
  body.media-mode #media-reference-slots {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.5625rem 0 1.5625rem 1.5625rem !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  /* prompt → col2 row1 */
  body.media-mode .composer-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    padding: 0.9375rem 0.875rem 0.9375rem 0 !important;
  }
  body.media-mode .composer-main :is(textarea,.refmedia-rich-input) {
    font-size: 0.875rem !important;
    line-height: 1.3125rem !important;
    color: rgba(245, 251, 255, .88) !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  /* chip row → col1 row2 for camera, col2 row2 for chips */
  body.media-mode #media-control-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
    border-top: 1px solid rgba(132, 157, 182, .11) !important;
    min-height: 1.875rem;
  }
  body.media-mode #media-control-row::-webkit-scrollbar { display: none; }
  /* extras: display:contents → camera becomes grid item */
  body.media-mode #media-extra-actions {
    display: contents !important;
    position: static !important;
    width: auto !important;
    padding: 0 !important;
  }
  /* camera chip → col1 row2 */
  body.media-mode .media-extra-action.media-extra-camera {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid rgba(132, 157, 182, .11) !important;
    height: 1.875rem !important;
    padding: 0 0.625rem 0 0.75rem !important;
    font-size: 0.75rem !important;
    color: rgb(245, 251, 255) !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    gap: 0.375rem !important;
    cursor: pointer !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.media-mode .media-extra-action.media-extra-camera::before {
    content: none !important;
  }
  /* footer → col1/-1 row3 */
  body.media-mode .composer-footer {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 0.6241rem 0.6241rem !important;
    gap: 0.375rem !important;
  }
  /* rail → absolute, right of footer */
  body.media-mode .composer-rail {
    position: absolute !important;
    top: auto !important;
    right: 2.8125rem !important;
    bottom: 0.6241rem !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.625rem !important;
    align-items: center !important;
    transform: none !important;
  }
  body.media-mode .composer-rail button {
    flex: 0 0 1.875rem !important;
    width: 1.875rem !important;
    height: 1.875rem !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body.media-mode .composer-rail .control-icon,
  body.media-mode .composer-rail button svg {
    width: 0.9722rem !important;
    height: 0.9722rem !important;
    flex-shrink: 0;
  }
}

@media (min-width: 841px) {
  body.media-mode .chat-workspace {
    width: min(70rem, calc(100% - 9rem));
    bottom: 1.25rem;
  }
  body.media-mode #api-model-link { display: none; }
  body.media-mode .composer {
    border: 1px solid rgb(30, 31, 37) !important;
    border-radius: 1.125rem !important;
    background: rgba(27, 28, 33, .95) !important;
    overflow: visible !important;
  }
  body.media-mode .composer-rail {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    left: calc(100% + .625rem);
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
    padding: .5rem;
    gap: .5rem;
    border: 1px solid #1e1f25;
    border-radius: 999px;
    background: rgba(27,28,33,.95);
    box-shadow: 0 .5rem 1.25rem #0000002e;
  }
  /* Kill the desktop ::before symbols on extras */
  body.media-mode .media-extra-action::before { content: none !important; }
  body.media-mode #media-extra-actions {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    right: calc(100% + .625rem);
    left: auto !important;
    bottom: 0 !important;
    z-index: 12 !important;
    width: auto !important;
    gap: .5rem !important;
    padding: .5rem;
    border: 1px solid #1e1f25;
    border-radius: 999px;
    background: rgba(27,28,33,.95);
    box-shadow: 0 .5rem 1.25rem #0000002e;
  }
  body.media-mode .media-extra-action.media-extra-camera {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 1.875rem !important;
    padding: 0 0.625rem !important;
    border-radius: 0.375rem !important;
    gap: 0.375rem !important;
    background: rgb(41, 43, 51) !important;
    color: rgb(245, 251, 255) !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    cursor: pointer !important;
    position: static !important;
  }
  body.media-mode .media-extra-action.media-extra-camera::before { content: none !important; }
}

/* ── Slot tiles ──────────────────────────────────────────── */

body.media-mode .reference-slot-wrap.is-empty .reference-slot-mark,
body.media-mode .reference-slot-wrap.is-empty .reference-slot-copy {
  display: none !important;
}

@media (max-width: 840px) {
  /* Each tile wrap */
  body.media-mode .reference-slot-wrap {
    flex: 0 0 auto !important;
    width: 3.4375rem !important;
    position: relative !important;
    overflow: visible !important;
  }
  /* Tile button */
  body.media-mode .reference-slot {
    width: 3.4375rem !important;
    height: 4.375rem !important;
    border: 1px dashed rgba(98,105,113,.6) !important;
    border-radius: 0.1875rem !important;
    background: rgb(45, 47, 53) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* Empty state: hide mark and copy, show plus + label */
  body.media-mode .reference-slot-wrap.is-empty .reference-slot-mark,
  body.media-mode .reference-slot-wrap.is-empty .reference-slot-copy { display: none !important; }
  body.media-mode .reference-slot-wrap.is-empty .plus-icon {
    font-size: 1.75rem !important;
    font-weight: 300 !important;
    color: rgb(98,105,113) !important;
    line-height: 1 !important;
    display: block !important;
  }
  body.media-mode .reference-slot-wrap.is-empty .frame-label {
    font-size: 0.6875rem !important;
    line-height: 1.03125rem !important;
    color: rgb(98,105,113) !important;
    text-align: center !important;
    display: block !important;
  }
  /* Arrow spacer between tiles */
  body.media-mode #media-reference-slots > .middle-icon {
    flex: 0 0 1.7361rem !important;
    width: 1.7361rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .38 !important;
    align-self: center;
  }
  body.media-mode #media-reference-slots > .middle-icon svg {
    width: 1.3889rem !important;
    height: 1.3889rem !important;
    flex-shrink: 0;
  }
  /* QR mini button — bottom-left −9px */
  body.media-mode .reference-slot-mini.reference-slot-scan {
    position: absolute !important;
    bottom: -0.625rem !important;
    left: -0.625rem !important;
    top: auto !important;
    right: auto !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    background: rgb(28,30,34) !important;
    border: 1px solid rgba(0,202,224,.42) !important;
    border-radius: 0.3125rem !important;
    color: #00cae0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 3;
  }
  body.media-mode .reference-slot-mini.reference-slot-scan svg {
    width: 0.8333rem !important;
    height: 0.8333rem !important;
    flex-shrink: 0;
  }
  /* Layers mini button — top-right −9px */
  body.media-mode .reference-slot-mini.reference-slot-assets {
    position: absolute !important;
    top: -0.625rem !important;
    right: -0.625rem !important;
    bottom: auto !important;
    left: auto !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    background: rgb(28,30,34) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 0.3125rem !important;
    color: rgb(245,251,255) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 3;
  }
  body.media-mode .reference-slot-mini.reference-slot-assets svg {
    width: 0.7639rem !important;
    height: 0.7639rem !important;
    flex-shrink: 0;
  }
}

/* ── Media chip base (both breakpoints) ─────────────────── */

body.media-mode .media-control-shell { display: contents !important; }

body.media-mode .media-control {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 1.875rem !important;
  padding: 0 0.625rem !important;
  border-radius: 0.375rem !important;
  gap: 0.375rem !important;
  background: rgb(41,43,51) !important;
  color: rgb(245,251,255) !important;
  border: none !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1) !important;
}

body.media-mode .media-chip-icon {
  width: 0.9722rem;
  height: 0.9722rem;
  flex-shrink: 0;
  display: block;
}

body.media-mode .media-chip-chevron {
  width: 0.6944rem;
  height: 0.6944rem;
  flex-shrink: 0;
  opacity: .6;
}

/* Count chip (1条) */
body.media-mode .media-control[data-control-id="count"],
body.media-mode .media-control[class*="customCount"] {
  background: linear-gradient(135deg, rgba(255,215,0,.18), rgba(255,193,7,.15)) !important;
  color: rgb(255,223,100) !important;
  box-shadow: inset 0 0.0625rem 0 rgba(255,255,255,.08) !important;
}

/* Route chip star + chevron colour */
body.media-mode .media-control.media-chip-route .routing-star {
  color: rgb(171,71,188);
  width: 0.8333rem;
  height: 0.8333rem;
  flex-shrink: 0;
}
body.media-mode .media-control.media-chip-route .media-chip-chevron {
  color: #00cae0;
  opacity: 1;
}

/* Camera tool video icon */
body.media-mode .refmedia-tool-video {
  width: 0.9722rem !important;
  height: 0.9722rem !important;
  flex-shrink: 0;
  display: block;
}
/* Camera count badge */
body.media-mode .media-extra-action.media-extra-camera {
  overflow: visible;
}
body.media-mode .refmedia-camera-count {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  box-sizing: border-box;
  width: auto;
  min-width: .875rem;
  height: .875rem;
  padding: 0 .1875rem;
  border: 0;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-style: normal;
  font-size: .5625rem;
  font-weight: 700;
  line-height: .875rem;
  text-align: center;
}

/* Hide scan and assets extra-actions (minis on tiles handle them) */
@media (max-width: 840px) {
  body.media-mode .media-extra-action.media-extra-scan,
  body.media-mode .media-extra-action.media-extra-assets { display: none !important; }
}

/* Desktop chip row */
@media (min-width: 841px) {
  body.media-mode #media-control-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 0.75rem !important;
    padding: .5625rem 3.75rem .75rem .9375rem !important;
    height: 3rem;
    border-top: 0;
  }
  body.media-mode #media-control-row::-webkit-scrollbar { display: none; }
}

/* v53: measured desktop tray and external tool rails. Preserve real uploads,
   floating previews and popup handlers while removing old inline-row rules. */
@media (min-width: 841px) {
  body.media-mode .composer {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 3rem;
    height: calc(var(--media-input-row, 8.25rem) + 3rem);
    min-height: 11.25rem;
  }
  body.media-mode .composer.without-reference-slots { grid-template-columns: minmax(0, 1fr); }
  body.media-mode #media-reference-slots {
    padding: 1.5625rem 1rem 1.5625rem 1.5625rem;
    gap: .4539rem;
    align-items: flex-start;
  }
  body.media-mode .reference-slot-wrap { width: 3.4375rem; height: 4.375rem; }
  body.media-mode .reference-slot {
    width: 3.4375rem; height: 4.375rem; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .375rem; border: 1px dashed rgba(98,105,113,.6); border-radius: .1875rem;
    background: #2d2f35; color: #626971; transform: rotate(-8deg);
    transition: transform .2s, border-color .2s, background .2s;
  }
  body.media-mode .reference-slot-wrap:hover .reference-slot,
  body.media-mode .reference-slot-wrap:focus-within .reference-slot { transform: rotate(-8deg) scale(1.08); }
  body.media-mode .reference-slot-wrap.is-empty .plus-icon { display: block; font-size: 1.75rem; line-height: 1; }
  body.media-mode .reference-slot-wrap.is-empty .frame-label { display: block; font-size: .6875rem; line-height: 1.5; }
  body.media-mode .reference-slot:not(.filled) .reference-slot-copy { display: none; }
  body.media-mode .middle-icon { flex: none; align-self: center; display: flex; width: 1.3889rem; opacity: .38; }
  body.media-mode .middle-icon svg { width: 1.3889rem; height: 1.3889rem; }
  body.media-mode .reference-slot-mini { position: absolute; opacity: 0; pointer-events: none; width: 1.375rem; height: 1.375rem; padding: .2rem; border-radius: 50%; }
  body.media-mode .reference-slot-mini svg { display: block; width: 100%; height: 100%; }
  body.media-mode .reference-slot-scan { top: -.375rem; left: -.375rem; }
  body.media-mode .reference-slot-assets { top: -.375rem; right: -.375rem; }
  body.media-mode .reference-slot-wrap:hover .reference-slot-mini,
  body.media-mode .reference-slot-wrap:focus-within .reference-slot-mini { opacity: 1; pointer-events: auto; }
  body.media-mode #media-extra-actions .media-extra-action.refmedia-tool-button {
    display: grid !important; place-items: center; width: 1.875rem !important;
    height: 1.875rem !important; flex: none; padding: 0 !important;
    background: #ffffff0d; border: 1px solid #ffffff14 !important; border-radius: 50%; color: #ffffffb3;
  }
  body.media-mode .composer-rail #manual { display: none; }
  body.media-mode .asset-library-dock { display: none; }
  body.media-mode .composer-footer { right: .9375rem; bottom: .75rem; flex-direction: column; align-items: center; gap: .375rem; }
  body.media-mode #composer #ai-prompt-helper { box-shadow: none !important; }
  body.media-mode #ai-prompt-helper .ai-anniu-glow { display: none; }
}
@media (max-width: 450px) {
  body.media-mode #hero { top: 3.25rem; }
}

/* ── Send button ─────────────────────────────────────────── */

body.media-mode #send-button {
  flex: 0 0 1.875rem !important;
  width: 1.875rem !important;
  height: 1.875rem !important;
  min-width: 1.875rem !important;
  border-radius: 50% !important;
  background: #00cae0 !important;
  border: none !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body.media-mode #send-button svg {
  width: 1.1111rem !important;
  height: 1.1111rem !important;
  flex-shrink: 0;
}

/* ── AI button ───────────────────────────────────────────── */

body.media-mode #ai-prompt-helper {
  flex: 0 0 1.875rem !important;
  width: 1.875rem !important;
  height: 1.875rem !important;
  min-width: 1.875rem !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fb923c, #f97316 55%, #ea580c) !important;
  box-shadow:
    0 0.25rem 0.75rem rgba(249,115,22,.38),
    inset 0 0.0625rem 0 rgba(255,255,255,.35) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
}
body.media-mode #ai-prompt-helper .ai-anniu-glow {
  position: absolute;
  width: 2.2222rem;
  height: 2.2222rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(251,146,60,.7);
  pointer-events: none;
}
body.media-mode #ai-prompt-helper .ai-anniu-text {
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
  position: relative;
  z-index: 1;
}

/* Phone media overflow correction (2026-10-05).
   The earlier mobile override stacks every model slot and arrow vertically;
   three slots alone make its auto-sized input row 20.5547rem tall. Keep all
   model-specific slots and their upload controls, but bound the left rail and
   scroll it horizontally. Padding contains rotated previews and the corner
   asset/scan buttons. Desktop, tablet and audio layouts remain unchanged. */
@media (max-width: 450px) {
  body.media-mode:not([data-media-mode="audio"]) .composer {
    grid-template-columns: minmax(5.75rem, 28%) minmax(0, 1fr) !important;
    grid-template-rows: 8.125rem 1.875rem 2.9167rem !important;
    min-height: 0 !important;
  }
  body.media-mode:not([data-media-mode="audio"]) #media-reference-slots {
    box-sizing: border-box !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 8.125rem !important;
    padding: 1.5625rem 0.75rem 1.5625rem 1.5625rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  body.media-mode:not([data-media-mode="audio"]) #media-control-row {
    min-width: 0 !important;
    padding-right: 3.5rem !important;
  }
  /* AI help belongs above the editing rail, not on top of its clear button. */
  body.media-mode:not([data-media-mode="audio"]) #ai-prompt-helper {
    position: absolute !important;
    right: 0.6241rem !important;
    bottom: calc(100% + 0.25rem) !important;
  }
  /* Keep the camera/parameter columns; only the no-slot prompt spans them. */
  body.media-mode:not([data-media-mode="audio"]) .composer.without-reference-slots #media-reference-slots {
    display: none !important;
  }
  body.media-mode:not([data-media-mode="audio"]) .composer.without-reference-slots .composer-main {
    grid-column: 1 / -1 !important;
    padding-left: 0.9375rem !important;
  }
}