/* 87.02. Existing TrueVideo tokens and source controls; responsive fixes only. */
:root { --tv-viewport-height: 100dvh; }
/* A fading-out drawer backdrop must stop intercepting taps immediately. */
.mobile-overlay:not(.open):not(.is-open):not(.active),
.chats-overlay:not(.open):not(.is-open):not(.active),
.tv-home-mobile-backdrop:not(.is-open) { pointer-events: none !important; }
body.tv-8649 .sidebar > .flex.flex-col.h-full > .px-4.mb-4,
body.tv-media-integrated .sidebar:not(.mobile-sidebar) > .flex.flex-col.h-full > .px-4.mb-4,
body.tv-home-studio .main-layout > .sidebar .px-4.mb-4 {
  flex-shrink: 0 !important;
  min-height: 58px;
}
html body.tv-8649 .chat-layout,
html body.tv-8649 .chat-container,
html body.tv-media-integrated.tv-media-chat .chat-layout,
html body.tv-media-integrated.tv-media-chat .chat-container {
  height: var(--tv-viewport-height) !important;
  min-height: 0 !important;
}
html body.tv-8649 .chat-messages,
html body.tv-media-integrated .chat-messages {
  min-height: 0 !important;
}
html body.tv-8649 .chat-input-area { max-height: 100%; }
body.tv-media-veoratio #videoUrlInput { min-width: 0; }
body.tv-media-veoratio .tv-video-url-row > button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1366px) {
  html body.tv-media-integrated #pageTabs { flex-wrap: wrap; }
  html body.tv-media-integrated #libraryTabs { flex-wrap: wrap !important; }
  html body.tv-media-integrated #libraryTabs .lib-tabs-row {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 480px) {
  body.tv-media-veoratio .tv-video-url-row { flex-direction: column; gap: 10px; }
  body.tv-media-veoratio .tv-video-url-row > input { width: 100%; }
}

@media (max-width: 768px), (max-width: 1366px) and (max-height: 540px) {
  html body.tv-8649 .chat-layout,
  html body.tv-8649.tv-shelf-collapsed .chat-layout { width: 100% !important; margin-left: 0 !important; }
  html body.tv-8649 .chat-messages { padding: 12px 14px 12px !important; }
  html body.tv-8649 .chat-container { overflow: hidden; }
  html body.tv-8649 .chat-input-area {
    min-height: 0;
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  html body.tv-8649 .mobile-sidebar,
  html body.tv-8649 .chats-sidebar,
  html body.tv-media-integrated .mobile-sidebar,
  html body.tv-home-studio .mobile-sidebar {
    max-height: var(--tv-viewport-height);
    overscroll-behavior: contain;
  }
  html body.tv-8649 .mobile-sidebar > .flex.flex-col.h-full,
  html body.tv-media-integrated .mobile-sidebar > .flex.flex-col.h-full,
  html body.tv-home-studio .mobile-sidebar > .flex.flex-col.h-full {
    height: var(--tv-viewport-height) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  html body.tv-8649 .chat-input-area,
  html body.tv-media-integrated .mobile-input-section {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  html body.tv-media-integrated .main-content { min-width: 0; }
  html body.tv-media-integrated .bottom-tab-bar {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html body.tv-8649 .mobile-top-nav,
  html body.tv-home-studio .mobile-top-nav,
  html body.tv-media-integrated .mobile-header {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  html body.tv-home-studio .mobile-top-title {
    flex: 1;
    min-width: 0;
    margin-inline: 6px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body.tv-media-integrated .mobile-sidebar,
  html body.tv-8649 .mobile-sidebar { max-width: min(310px, 86vw); }
  html body.tv-8649 .settings-modal-content,
  html body.tv-media-integrated .modal-content {
    max-height: calc(var(--tv-viewport-height) - 24px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* A compact vertical stack when browser chrome or the keyboard leaves little room. */
html.tv-short-viewport body.tv-8649 .chat-container .chat-header {
  min-height: 42px !important;
  padding: 4px 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
}
html.tv-short-viewport body.tv-8649 .chat-header-subtitle { display: none !important; }
html.tv-short-viewport body.tv-8649 .chat-header-title { font-size: 17px !important; }
html.tv-short-viewport body.tv-8649 .chat-container .chat-header > div:last-child {
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  margin-left: auto;
}
html.tv-short-viewport body.tv-8649 .chat-header img { width: 26px !important; height: 26px !important; }
html.tv-short-viewport body.tv-8649 .chat-header .settings-btn { width: 32px; height: 32px; }
html.tv-short-viewport body.tv-8649 .chat-container .chat-input-area {
  gap: 5px !important;
  padding: 6px 10px !important;
  margin: 0 8px max(6px, env(safe-area-inset-bottom)) !important;
  max-height: calc(var(--tv-viewport-height) - 100px);
  overflow-y: auto;
}
html.tv-short-viewport body.tv-8649 .chat-controls { margin-bottom: 0 !important; gap: 6px !important; }
html.tv-short-viewport body.tv-8649 .chat-input {
  min-height: 42px !important;
  height: 42px !important;
  padding: 9px 12px !important;
}
html.tv-short-viewport body.tv-8649 .chat-send-row {
  padding-top: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px !important;
}
html.tv-short-viewport body.tv-8649 .chat-action-buttons > button {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px;
}
html.tv-short-viewport body.tv-8649 .chat-send-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
}
html.tv-short-viewport body.tv-8649 .ctx-status-pill { max-width: 100%; }
html.tv-short-viewport body.tv-8649 .chat-messages { padding: 6px 12px !important; }
html.tv-short-viewport body.tv-8649 .welcome-message { padding: 12px !important; }
@media (max-height: 360px) {
  html.tv-short-viewport body.tv-8649 .chat-messages { padding-block: 2px !important; }
}

@media (max-width: 1366px) and (max-height: 540px) {
  html body.tv-media-integrated .mobile-header { height: 48px !important; min-height: 48px !important; }
  html body.tv-media-integrated .bottom-tab-bar { height: calc(48px + env(safe-area-inset-bottom)) !important; }
  html body.tv-media-integrated #mobileBannerContainer { min-width: 0; }
  html body.tv-media-integrated .main-content {
    padding-top: 54px !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
  html body.tv-media-integrated .mode-selector { margin-bottom: 12px; }
  html body.tv-media-integrated #modeSelector { scroll-margin-top: 60px; }
  html body.tv-home-studio .main-content { padding-top: 70px; }
}