/* Local visual integration over the original TrueVideo pages. All application
   forms, IDs, handlers and API calls remain in their source documents. */
/* Hide source navigation until the new shelf is assembled. If the shell script
   fails, reveal the still-functional original page after a bounded delay. */
html { background: #0d171e; }
@keyframes tv-media-shell-fallback { to { opacity: 1; } }
body.tv-media-integrated:not(.tv-media-shell-ready) {
  opacity: 0;
  animation: tv-media-shell-fallback 0s 15s forwards;
}
html:has(> body.tv-media-integrated:not(.tv-media-shell-ready))::before {
  content: "";
  position: fixed;
  z-index: 2147483647;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid #284047;
  border-top-color: #52cf86;
  border-radius: 50%;
  animation: tv-media-shell-spin .8s linear infinite;
}
@keyframes tv-media-shell-spin { to { transform: rotate(360deg); } }
:root {
  --tv-rail-width: 172px;
  --tv-shelf-width: 268px;
}
body.tv-media-integrated {
  background: var(--tv-stage) !important;
  color: var(--tv-text);
  font-family: var(--tv-font-body);
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) {
  width: var(--tv-rail-width) !important;
  background: var(--tv-rail) !important;
  border-right: 1px solid var(--tv-line) !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 10010 !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) > .flex.flex-col.h-full {
  padding: 14px 10px 12px !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) > .flex.flex-col.h-full > .flex-shrink-0:not(.mt-4) {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tv-line) transparent;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) > .flex.flex-col.h-full > .px-4.mb-4 {
  height: 58px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) > .flex.flex-col.h-full > .px-4.mb-4 img {
  width: 160px !important;
  height: 55px !important;
  max-width: none !important;
  object-fit: contain;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .mt-4.mb-2,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .text-dropdown,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .image-dropdown,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .processing-dropdown,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > #imageDropdown {
  display: none !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .music-feed-item {
  min-height: 40px;
  padding: 8px 9px !important;
  margin: 0 !important;
  gap: 8px !important;
  overflow: hidden;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--tv-muted) !important;
  font: 600 13px/1.25 var(--tv-font-body) !important;
  white-space: nowrap;
  transform: none !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item:hover,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .music-feed-item:hover {
  background: var(--tv-hover) !important;
  color: var(--tv-text) !important;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item.active,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .music-feed-item.active {
  background: var(--tv-green-soft) !important;
  color: var(--tv-text) !important;
  box-shadow: inset 3px 0 var(--tv-green);
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item span,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .music-feed-item span {
  overflow: hidden;
  text-overflow: ellipsis;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [onclick="toggleTextDropdown(event)"] { order: 1; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [onclick="toggleImageDropdown(event)"] { order: 2; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [onclick="goToPage('videogeneration')"] { order: 3; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [onclick="goToPage('musicgeneration')"] { order: 4; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .music-feed-item { order: 5; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [data-sb-menu-item] { order: 6; }
body.tv-media-integrated [data-sb-menu-item] .tv-storyboard-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: visible !important;
  font-size: var(--tv-storyboard-icon-size);
  line-height: 1;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > [onclick="toggleProcessingDropdown(event)"] { order: 7; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) nav > .sidebar-item:not([onclick="toggleTextDropdown(event)"]):not([onclick="toggleImageDropdown(event)"]):not([onclick="goToPage('videogeneration')"]):not([onclick="goToPage('musicgeneration')"]):not(.music-feed-item):not([data-sb-menu-item]):not([onclick="toggleProcessingDropdown(event)"]) { order: 8; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) .profile-dropdown { z-index: 100; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) [onclick="toggleProfile()"] > div:first-child,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) [onclick="toggleProfile()"] .flex-1 { min-width: 0; max-width: 100%; }
body.tv-media-integrated .sidebar:not(.mobile-sidebar) [onclick="toggleProfile()"] :is(#userEmailDesktop, .text-xs.text-gray-400) {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) .profile-dropdown.show {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
body.tv-media-integrated.tv-media-secondary .sidebar:not(.mobile-sidebar) .profile-dropdown.active {
  width: 232px;
  right: auto;
}
body.tv-media-integrated .sidebar:not(.mobile-sidebar) .credits-value { color: var(--tv-yellow) !important; }
body.tv-media-integrated.tv-media-veoratio .tv-veoratio-balance {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px !important;
  margin: 8px 10px 4px !important;
  border: 1px solid var(--tv-line);
  border-radius: 8px;
  background: var(--tv-raised) !important;
  font-size: 11px;
}
body.tv-media-integrated.tv-media-veoratio .tv-veoratio-balance .text-xs { font-size: 0; }
body.tv-media-integrated.tv-media-veoratio .tv-veoratio-balance .credits-value { font-size: 11px; }
body.tv-media-integrated.tv-media-veoratio .tv-veoratio-balance [data-translate="available"] { display: none; }
body.tv-media-integrated .image-library-modal.active .modal-header {
  display: flex;
}
body.tv-media-integrated .tv-media-picker.is-open .tv-media-picker-header {
  display: flex;
}

/* A live history panel is reordered, not cloned. Existing new-chat/search and
   conversation handlers continue to operate on the same DOM nodes. */
body.tv-media-integrated .chat-layout {
  width: calc(100% - var(--tv-rail-width)) !important;
  margin-left: var(--tv-rail-width) !important;
  height: 100dvh !important;
  background: var(--tv-stage) !important;
  gap: 0 !important;
}
body.tv-media-integrated .chats-sidebar,
body.tv-media-integrated .tv-media-shelf {
  order: -1;
  flex: 0 0 var(--tv-shelf-width) !important;
  width: var(--tv-shelf-width) !important;
  height: 100dvh !important;
  min-width: 0;
  margin: 0 !important;
  padding: 12px 10px 16px;
  background: var(--tv-shelf) !important;
  border: 0 !important;
  border-right: 1px solid var(--tv-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tv-line) transparent;
}
body.tv-media-integrated .chat-container {
  flex: 1 1 auto !important;
  min-width: 0;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--tv-stage) !important;
}
body.tv-media-integrated .chat-container::before,
body.tv-media-integrated .chat-container::after { display: none !important; }
body.tv-media-integrated .chat-header {
  background: var(--tv-stage) !important;
  border-bottom: 1px solid var(--tv-line) !important;
  box-shadow: none !important;
}
body.tv-media-integrated .chats-header {
  padding: 5px 5px 12px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--tv-line) !important;
}
body.tv-media-integrated .chats-header h2,
body.tv-media-integrated .tv-media-shelf h2 {
  color: var(--tv-text) !important;
  font: 700 17px/1.25 var(--tv-font-display);
}
body.tv-media-integrated .new-chat-btn {
  background: var(--tv-green-action) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
body.tv-media-integrated .new-chat-btn:hover { background: var(--tv-green-action-hover) !important; }
body.tv-media-integrated .tv-media-shelf .tv-shelf-link.active {
  background: var(--tv-green-soft) !important;
  color: var(--tv-text) !important;
  box-shadow: inset 3px 0 var(--tv-green) !important;
}
body.tv-media-integrated .chats-list { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tv-line) transparent; }
body.tv-media-integrated .chat-item { border-radius: 8px !important; }
body.tv-media-integrated .chat-item:hover { background: var(--tv-hover) !important; }
body.tv-media-integrated .chat-item.active { background: var(--tv-green-soft) !important; }
body.tv-media-integrated .tv-media-shelf h2 { margin: 8px 8px 14px; }
body.tv-media-integrated .tv-shelf-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 39px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--tv-muted);
  font: 600 13px/1.25 var(--tv-font-body);
  text-decoration: none;
}
body.tv-media-integrated .tv-shelf-link:hover { background: var(--tv-hover); color: var(--tv-text); }
body.tv-media-integrated .tv-shelf-heading { margin: 15px 8px 8px; color: var(--tv-dim); font: 700 11px var(--tv-font-display); text-transform: uppercase; letter-spacing: .07em; }
body.tv-media-integrated .tv-shelf-toggle {
  position: fixed;
  z-index: 9998;
  top: 21px;
  left: calc(var(--tv-rail-width) + var(--tv-shelf-width) - 14px);
  width: 29px;
  height: 29px;
  border: 1px solid var(--tv-line);
  border-radius: 50%;
  background: var(--tv-raised);
  color: var(--tv-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: left .2s ease;
}
body.tv-media-integrated .tv-shelf-toggle:hover { background: var(--tv-hover); }
body.tv-media-integrated .tv-shelf-toggle svg { width: 15px; height: 15px; }
body.tv-media-integrated.tv-media-collapsed .chats-sidebar,
body.tv-media-integrated.tv-media-collapsed .tv-media-shelf { display: none !important; }
body.tv-media-integrated.tv-media-collapsed .tv-shelf-toggle { left: calc(var(--tv-rail-width) - 14px); transform: rotate(180deg); }
body.tv-media-integrated.tv-media-collapsed .chat-layout { width: calc(100% - var(--tv-rail-width)) !important; }
body.tv-media-integrated .tv-chat-search {
  width: calc(100% - 10px);
  min-height: 36px;
  margin: 10px 5px;
  padding: 0 10px;
  background: var(--tv-raised);
  border: 1px solid var(--tv-line);
  border-radius: 8px;
  color: var(--tv-text);
  outline: none;
}
body.tv-media-integrated .tv-chat-search:focus { border-color: var(--tv-green); }
body.tv-media-integrated .tv-chat-empty { margin: 12px 7px; color: var(--tv-dim); font-size: 12px; }
body.tv-media-integrated [hidden] { display: none !important; }
body.tv-media-integrated .chat-input-container,
body.tv-media-integrated .input-container,
body.tv-media-integrated .generation-panel { background-color: var(--tv-stage); }
body.tv-media-integrated .generate-btn,
body.tv-media-integrated #sendBtn {
  background: var(--tv-green-action) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tv-media-integrated .generate-btn:hover,
body.tv-media-integrated #sendBtn:hover { background: var(--tv-green-action-hover) !important; }
body.tv-media-integrated .generate-btn:disabled,
body.tv-media-integrated #sendBtn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
/* The existing live price chip remains outside the action. Keep the source
   price node in DOM because application scripts update it by ID. */
body.tv-media-integrated #sendBtn > .tv-button-price { display: none !important; }
body.tv-media-integrated .notification-bell-wrapper > button,
body.tv-media-integrated #notifBellDesktopBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--tv-line) !important;
  border-radius: var(--tv-radius-medium) !important;
  background: var(--tv-raised) !important;
  color: var(--tv-text) !important;
  box-shadow: none !important;
}
body.tv-media-integrated .notification-bell-wrapper > button:hover,
body.tv-media-integrated #notifBellDesktopBtn:hover {
  background: var(--tv-hover) !important;
  border-color: var(--tv-green) !important;
}
body.tv-media-integrated .notification-bell-wrapper > button:disabled { opacity: .45; cursor: wait; }
body.tv-media-integrated .tv-header-actions { display: flex; align-items: center; gap: 12px; }
body.tv-media-integrated .tv-storyboard-bell { position: fixed; z-index: 10001; top: 16px; right: 24px; }
@media (min-width: 1001px) and (min-height: 541px), (min-width: 1001px) and (min-width: 1367px) {
  body.tv-media-integrated .sb-head__acts { margin-right: 58px; }
}
body.tv-media-integrated .tv-mobile-notification-bell { display: none; }
body.tv-media-integrated #mobileGenerateBtn {
  background: var(--tv-green-action) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.tv-media-integrated #mobileGenerateBtn:hover { background: var(--tv-green-action-hover) !important; }
body.tv-media-integrated .tv-mobile-generate-group { flex: 1 1 auto; min-width: 0; }
body.tv-media-integrated .tv-mobile-cost {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
  color: var(--tv-muted);
  font: 600 11px/1.2 var(--tv-font-body);
}
body.tv-media-integrated .tv-mobile-cost svg { width: 15px; height: 15px; }
body.tv-media-integrated .tv-mobile-cost #mobilePriceDisplay { color: var(--tv-yellow) !important; }
body.tv-media-integrated #notifPanel {
  background: var(--tv-raised) !important;
  border-color: var(--tv-line) !important;
}
body.tv-media-integrated :is(button,a,input,textarea,select):focus-visible { outline: 2px solid var(--tv-ring); outline-offset: 2px; }
body.tv-media-integrated .sidebar-item[role="button"]:focus-visible { outline: 2px solid var(--tv-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.tv-media-integrated .tv-shelf-toggle { transition: none; }
}

/* Non-chat pages keep their original document structure and controls; only the
   shared left navigation and stage are reshaped. */
body.tv-media-integrated:not(.tv-media-chat) .main-content,
body.tv-media-integrated:not(.tv-media-chat) main,
body.tv-media-integrated:not(.tv-media-chat) #app,
body.tv-media-integrated:not(.tv-media-chat) .storyboard-main {
  color: var(--tv-text);
}
body.tv-media-integrated:not(.tv-media-chat) .main-content[style*="margin-left: 256px"],
body.tv-media-integrated:not(.tv-media-chat) [style*="margin-left:256px"] {
  margin-left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
}
body.tv-media-integrated:not(.tv-media-chat).tv-media-collapsed .main-content[style*="margin-left: 256px"],
body.tv-media-integrated:not(.tv-media-chat).tv-media-collapsed [style*="margin-left:256px"] {
  margin-left: var(--tv-rail-width) !important;
}
body.tv-media-integrated .sb-main,
body.tv-media-integrated #mainContent {
  margin-left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
}
body.tv-media-integrated.tv-media-collapsed .sb-main,
body.tv-media-integrated.tv-media-collapsed #mainContent {
  margin-left: var(--tv-rail-width) !important;
}
body.tv-media-integrated #topPanel {
  left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
  background: var(--tv-stage) !important;
  border-bottom: 1px solid var(--tv-line) !important;
}
body.tv-media-integrated.tv-media-collapsed #topPanel {
  left: var(--tv-rail-width) !important;
}
body.tv-media-integrated.tv-media-heygen {
  padding-left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
}
body.tv-media-integrated.tv-media-heygen .desktop-gallery {
  width: calc(100vw - var(--tv-rail-width) - var(--tv-shelf-width)) !important;
  max-width: calc(100vw - var(--tv-rail-width) - var(--tv-shelf-width)) !important;
}
body.tv-media-integrated.tv-media-heygen.tv-media-collapsed {
  padding-left: var(--tv-rail-width) !important;
}
body.tv-media-integrated.tv-media-heygen.tv-media-collapsed .desktop-gallery {
  width: calc(100vw - var(--tv-rail-width)) !important;
  max-width: calc(100vw - var(--tv-rail-width)) !important;
}
body.tv-media-integrated .tv-media-shelf.tv-fixed-shelf {
  position: fixed;
  left: var(--tv-rail-width);
  top: 0;
  z-index: 9998;
}
body.tv-media-integrated .tv-media-shelf.tv-fixed-shelf + * { min-width: 0; }
body.tv-media-integrated.tv-media-home {
  padding-left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
}
body.tv-media-integrated.tv-media-home.tv-media-collapsed {
  padding-left: var(--tv-rail-width) !important;
}
body.tv-media-integrated.tv-media-home .desktop-gallery {
  width: 100% !important;
  min-width: 0;
}
body.tv-media-integrated.tv-media-secondary .ml-64 {
  margin-left: calc(var(--tv-rail-width) + var(--tv-shelf-width)) !important;
}
body.tv-media-integrated.tv-media-secondary .main-content {
  background: var(--tv-stage) !important;
}
body.tv-media-integrated.tv-media-secondary.tv-media-collapsed .ml-64 {
  margin-left: var(--tv-rail-width) !important;
}

/* On compact desktops the second column overlays the stage instead of
   squeezing media controls below their original usable width. */
@media (min-width: 769px) and (max-width: 1000px) and (min-height: 541px) {
  body.tv-media-integrated .chat-layout {
    width: calc(100% - var(--tv-rail-width)) !important;
    margin-left: var(--tv-rail-width) !important;
  }
  body.tv-media-integrated .chat-layout > .chats-sidebar {
    position: fixed !important;
    left: var(--tv-rail-width) !important;
    top: 0;
    z-index: 9998;
  }
  body.tv-media-integrated .chat-container { width: 100% !important; }
  body.tv-media-integrated .sb-main,
  body.tv-media-integrated #mainContent,
  body.tv-media-integrated.tv-media-secondary .ml-64,
  body.tv-media-integrated:not(.tv-media-chat) .main-content[style*="margin-left: 256px"],
  body.tv-media-integrated:not(.tv-media-chat) [style*="margin-left:256px"] {
    margin-left: var(--tv-rail-width) !important;
  }
  body.tv-media-integrated #topPanel { left: var(--tv-rail-width) !important; }
  body.tv-media-integrated.tv-media-heygen,
  body.tv-media-integrated.tv-media-home { padding-left: var(--tv-rail-width) !important; }
  body.tv-media-integrated.tv-media-heygen .desktop-gallery {
    width: calc(100vw - var(--tv-rail-width)) !important;
    max-width: calc(100vw - var(--tv-rail-width)) !important;
  }
  body.tv-media-integrated .page-tabs { flex-wrap: wrap; }
  body.tv-media-integrated .page-tab { padding-inline: 12px; }
}

@media (max-width: 768px), (max-width: 1366px) and (max-height: 540px) {
  body.tv-media-integrated .sidebar:not(.mobile-sidebar),
  body.tv-media-integrated .tv-media-shelf,
  body.tv-media-integrated .tv-shelf-toggle,
  body.tv-media-integrated .chats-sidebar { display: none !important; }
  body.tv-media-integrated .chat-layout { width: 100% !important; margin-left: 0 !important; }
  body.tv-media-integrated .chat-container { width: 100%; }
  body.tv-media-integrated:not(.tv-media-chat) .main-content[style*="margin-left: 256px"],
  body.tv-media-integrated:not(.tv-media-chat) [style*="margin-left:256px"] { margin-left: 0 !important; }
  body.tv-media-integrated .sb-main,
  body.tv-media-integrated #mainContent { margin-left: 0 !important; }
  body.tv-media-integrated #topPanel { left: 0 !important; }
  body.tv-media-integrated.tv-media-heygen { padding-left: 0 !important; }
  body.tv-media-integrated.tv-media-heygen .desktop-gallery { width: 100% !important; max-width: 100% !important; }
  body.tv-media-integrated.tv-media-home { padding-left: 0 !important; }
  body.tv-media-integrated.tv-media-secondary .ml-64 { margin-left: 0 !important; }
  body.tv-media-integrated .mobile-sidebar { background: var(--tv-rail) !important; }
  body.tv-media-integrated .mobile-only[style*="position: fixed; top: 0"] {
    background: var(--tv-rail) !important;
    border-bottom: 1px solid var(--tv-line) !important;
  }
  body.tv-media-integrated .mobile-only[style*="position: fixed; top: 0"] > div { gap: 8px; }
  body.tv-media-integrated .mobile-header { background: var(--tv-rail) !important; border-bottom-color: var(--tv-line) !important; }
  body.tv-media-integrated .mobile-header .tv-mobile-notification-bell { margin-left: auto; }
  body.tv-media-integrated .mobile-input-section {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  body.tv-media-integrated .tv-mobile-notification-bell { display: flex; }
  body.tv-media-integrated .tv-header-actions .tv-notification-bell,
  body.tv-media-integrated .tv-storyboard-bell { display: none !important; }
  /* The mobile uploader sits beside the bottom action. Open its two choices
     above the trigger so "From library" is reachable on short screens. */
  body.tv-media-integrated #mobileImageUploadMenu.image-upload-menu.mobile {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0;
    transform: none;
    animation: none;
    max-height: min(260px, 48dvh);
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  /* Keep codes readable instead of squeezing their input next to a wide CTA. */
  body.tv-media-integrated .flex:has(> #promoCodeInput),
  body.tv-media-integrated .flex:has(> #referralCodeDisplay),
  body.tv-media-integrated .flex:has(> #referralLinkDisplay) {
    flex-direction: column;
    gap: 10px;
  }
  body.tv-media-integrated .flex:has(> #promoCodeInput) > *,
  body.tv-media-integrated .flex:has(> #referralCodeDisplay) > *,
  body.tv-media-integrated .flex:has(> #referralLinkDisplay) > * {
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
  }
}

@media (max-width: 350px) {
  body.tv-media-integrated .sub-mode-tabs { flex-wrap: wrap; }
  body.tv-media-integrated .sub-mode-tabs > .sub-tab { flex: 1 1 calc(50% - 4px); min-width: 0; padding-inline: 6px; }
  body.tv-media-integrated .sub-mode-tabs > .sub-tab:last-child { flex-basis: 100%; }
}