/* Adapter between the final desktop round-2 handoff and the production app.
 * All selectors here are scoped to the short-film page or its fixed composer. */

html body {
  --rail-width: var(--txm-rail-width, 184px);
  --ink: #f4f5f7;
  --ink-soft: #b9bdc5;
  --muted: #8e949e;
  --line: rgb(255 255 255 / 10%);
  --line-strong: rgb(255 255 255 / 20%);
  --accent: #ff6b35;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 901px) {
  html body #shortfilmView > .pearl-shortfilm-head,
  html body #shortfilmView > .tx22-creation-switch {
    display: none !important;
  }

  html body #shortfilmView {
    padding-bottom: 238px !important;
  }

  html body #shortfilmView .txb-shortfilm-workspace {
    width: min(1180px, 100%) !important;
    margin-inline: auto !important;
  }

  html body #shortfilmView .txb-results-shell {
    width: min(970px, 84%) !important;
    max-width: 970px !important;
    margin-inline: auto !important;
  }

  html body #shortfilmView .txb-shell-head {
    display: none !important;
  }

  html body #shortfilmView .shortfilmWorks {
    display: grid !important;
    gap: 18px !important;
    padding: 0 !important;
  }

  html body #shortfilmView .txMasterBatch.tko-batch {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body #shortfilmView .txMasterBatchHead.tko-batch-head {
    display: grid !important;
    min-height: 58px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 4px 10px !important;
  }

  html body #shortfilmView .txMasterBatchHead > .pearl-sf-batch-status {
    display: none !important;
  }

  html body #shortfilmView .txMasterHeadThumb {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--txm-line);
    border-radius: 5px;
    background: #08090c;
    color: var(--txm-muted);
    font-size: 11px;
  }

  html body #shortfilmView .txMasterHeadThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html body #shortfilmView .txMasterHeadNumber {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgb(3 4 6 / 78%);
    color: #fff;
    font-size: 6px;
  }

  html body #shortfilmView .txMasterHeadCopy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  html body #shortfilmView .txMasterHeadCopy > strong {
    overflow: hidden;
    color: var(--txm-ink);
    font-size: 13px;
    font-weight: 580;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body #shortfilmView .txMasterHeadMeta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: var(--txm-muted);
    font-size: 9px;
    white-space: nowrap;
  }

  html body #shortfilmView .txMasterHeadMeta i {
    font-style: normal;
  }

  html body #shortfilmView .txMasterHeadMeta i + i::before {
    margin-right: 7px;
    color: #4f545e;
    content: "·";
  }

  html body #shortfilmView .txMasterHeadState {
    padding: 4px 7px;
    border: 1px solid var(--txm-line);
    border-radius: 999px;
    color: var(--txm-muted);
    font-size: 8px;
    white-space: nowrap;
  }

  html body #shortfilmView .txMasterHeadState[data-state="failed"],
  html body #shortfilmView .txMasterHeadState[data-state="canceled"] {
    color: var(--txm-danger);
  }

  html body #shortfilmView .txMasterBStage {
    border: 0 !important;
    background: transparent !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    overflow: hidden !important;
    padding: 8px 54px !important;
    border-top: 1px solid var(--txm-line) !important;
    border-bottom: 0 !important;
    background:
      radial-gradient(ellipse at 50% 48%, rgb(122 149 184 / 8%), transparent 44%),
      #090a0d !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] {
    height: 455px !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBSideSlot {
    position: absolute !important;
    top: 50% !important;
    display: block !important;
    width: min(360px, 30vw) !important;
    transform: translateY(-50%) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBSideSlot.left {
    right: calc(50% + min(300px, 26vw) + 12px) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBSideSlot.right {
    left: calc(50% + min(300px, 26vw) + 12px) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBSideSlot {
    width: min(240px, 21vw) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBSideSlot.left {
    right: calc(50% + min(120px, 11.5vw) + 12px) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBSideSlot.right {
    left: calc(50% + min(120px, 11.5vw) + 12px) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBMedia {
    width: 100% !important;
    margin: 0 !important;
    opacity: .54 !important;
    filter: saturate(.72) brightness(.72) !important;
    transform: none !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBMedia.is-center {
    position: relative !important;
    z-index: 3 !important;
    width: 600px !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBMedia.is-center {
    width: 240px !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="16:9"] .txMasterBMedia.is-side,
  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBMedia.is-side {
    width: 100% !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBMedia.is-side .txMasterBPlay {
    display: none !important;
  }

  html body #shortfilmView .txMasterBArrow {
    top: 50% !important;
  }

  html body #shortfilmView .txMasterBActions button,
  html body #shortfilmView .txMasterBActions a {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 9px;
  }

  html body #shortfilmView .txMasterBActions {
    min-height: 42px;
    align-items: center;
    padding: 5px 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #shortfilmView #shortfilmForm.txb-composer {
    display: none !important;
  }

  html body #shortfilmView #image-generation:not([hidden]) {
    display: block !important;
    width: min(970px, 84%) !important;
    margin-inline: auto !important;
  }

  html body #shortfilmView #image-generation .tx22-image-panel {
    display: none !important;
  }

  html body #shortfilmView #image-generation .tx22-image-results {
    width: 100% !important;
    max-width: none !important;
  }

  html body #shortfilmView .txb-mobile-nav {
    display: none !important;
  }

  html body .tko-unified-composer .tko-asset-tabs {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    color: #a7acb5;
    font-size: 10px;
  }

  html body .tko-unified-composer .tko-asset-type {
    padding: 0 9px;
    border-radius: 7px;
    background: rgb(255 255 255 / 8%);
    color: var(--txm-ink);
    line-height: 30px;
  }

  html body .tko-unified-composer .tko-asset-type b {
    margin-left: 4px;
    color: var(--txm-muted);
    font-size: 9px;
  }

  html body .tko-unified-composer .tko-count-row {
    display: flex;
    gap: 6px;
  }

  html body .tko-unified-composer .tko-count-row button {
    min-width: 43px;
    min-height: 36px;
    border: 1px solid var(--txm-line);
    border-radius: 7px;
    background: rgb(255 255 255 / 2.5%);
    color: var(--txm-muted);
    font-size: 11px;
  }

  html body .tko-unified-composer .tko-count-row button.is-selected {
    border-color: var(--txm-line-strong);
    background: rgb(255 255 255 / 10%);
    color: var(--txm-ink);
  }

  html body .tko-unified-composer .tko-resolution-option {
    cursor: default;
    opacity: 1 !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer {
    max-height: calc(100dvh - 24px) !important;
    overflow: visible !important;
  }

  html[data-takeover-page="shortfilm"] .tko-status-bar {
    display: none !important;
  }

  html[data-takeover-page="shortfilm"] .tko-creator-toolbar {
    display: flex !important;
    min-width: 0 !important;
    height: 42px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  html[data-takeover-page="shortfilm"] .tko-tool-anchor,
  html[data-takeover-page="shortfilm"] .tko-tool-button,
  html[data-takeover-page="shortfilm"] .tko-duration-pill,
  html[data-takeover-page="shortfilm"] .tko-points-pill {
    width: auto !important;
    max-width: max-content !important;
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 auto !important;
  }

  html[data-takeover-page="shortfilm"] .tko-mode-button {
    max-width: 124px !important;
    padding-inline: 8px !important;
  }

  html[data-takeover-page="shortfilm"] #tko-model-button {
    max-width: 132px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-settings-button {
    max-width: 112px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-optimize-button {
    max-width: 96px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-duration-pill {
    max-width: 58px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-mention-button {
    width: 32px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-toolbar-spacer {
    min-width: 0 !important;
    flex: 1 1 0% !important;
  }

  html[data-takeover-page="shortfilm"] .tko-points-pill {
    width: auto !important;
    max-width: 76px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-submit-button {
    width: 42px !important;
    height: 42px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer.is-assets-expanded {
    height: min(326px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer.is-assets-expanded .tko-asset-manager {
    min-height: 0 !important;
    max-height: calc(100dvh - 92px) !important;
    overflow: auto !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer.is-assets-expanded .tko-creator-main {
    min-height: 86px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer.is-assets-expanded #tko-creator-prompt {
    min-height: 34px !important;
  }

  html[data-takeover-page="shortfilm"] .tko-unified-composer.is-assets-expanded .tko-creator-toolbar {
    overflow: visible !important;
  }

  html[data-takeover-page="shortfilm"] .tko-asset-grid {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  html body #shortfilmView .txb-results-shell {
    width: 100% !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage .txMasterBMedia.is-center {
    width: min(600px, 72vw) !important;
  }

  html body #shortfilmView .txMasterBViewport.tko-stage[data-aspect="9:16"] .txMasterBMedia.is-center {
    width: 240px !important;
  }
}

/* The creator and its popovers must sit above the fixed site header. */
@media (min-width: 901px) {
  html body[data-page="shortfilm"] .tko-unified-composer {
    z-index: 320 !important;
  }

  html body[data-page="shortfilm"] .tko-unified-composer .tko-popover {
    z-index: 360 !important;
  }
}