/* Mobile-only crash details remain readable beneath error explanations. */
@media (max-width: 760px) {
  .studioCrashRecovery .mobileCreatorErrorCode {
    margin: 14px 0 0; color: #667085; font: 12px/1.5 system-ui, sans-serif;
    text-align: center; user-select: text;
  }
}

/* A single mobile viewport contract keeps the workspace above both the
   bottom navigation and the on-screen keyboard. */
@media (max-width: 760px) {
  .appShell:has(.exactKreaWorkbench),
  .appShell:has(.exactVideoWorkbench) {
    height: var(--lj-mobile-visual-height, 100dvh) !important;
    min-height: 0 !important;
  }
  :is(.appShell:has(.exactKreaWorkbench), .appShell:has(.exactVideoWorkbench)) > .appMain {
    height: var(--lj-mobile-visual-height, 100dvh) !important;
    min-height: 0 !important;
  }
  :is(.appShell:has(.exactKreaWorkbench), .appShell:has(.exactVideoWorkbench)) :is(.pageContent.toolMain, .pageContent, .toolMain) {
    height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--mobile-bottom-nav-height, 74px)) !important;
    min-height: 0 !important;
  }

  .unifiedCreatorWorkspaceHeader {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    min-height: 48px !important;
    gap: 10px !important;
  }
  .unifiedCreatorWorkspaceBrand {
    min-height: 44px !important;
    font-size: 15px !important;
  }
  .mobileCreatorHistoryButton {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    color: #343431 !important;
    background: #fffffff2 !important;
    border: 1px solid #e1e1dc !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px #18181812 !important;
    font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobileCreatorHistoryButton svg { flex: 0 0 18px !important; }
  .mobileCreatorHistoryButton:active { background: #f0f0ed !important; transform: scale(.98); }
  .mobileCreatorHistoryButton:focus-visible { outline: 3px solid #9c8ad4 !important; outline-offset: 2px !important; }

  /* Keep the global "More" menu readable on narrow and short phones. */
  .appShell .mobileBottomMoreSheet {
    box-sizing: border-box !important;
    max-height: min(560px, calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-bottom-nav-height, 74px) - max(16px, env(safe-area-inset-top)))) !important;
    padding: 20px 14px max(14px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
  }
  .appShell .mobileBottomMoreSheet > header { margin-bottom: 12px !important; }
  .appShell .mobileBottomMoreSheet > header > span { min-width: 0 !important; }
  .appShell .mobileBottomMoreSheet > header strong { font-size: 16px !important; }
  .appShell .mobileBottomMoreSheet > header small {
    max-width: 100% !important;
    color: #777770 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .appShell .mobileBottomMoreGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .appShell:has(.exactKreaWorkbench) .mobileBottomMoreGrid,
  .appShell:has(.exactVideoWorkbench) .mobileBottomMoreGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .appShell .mobileBottomMoreGrid > button {
    box-sizing: border-box !important;
    grid-template-columns: 40px minmax(0, 1fr) 20px !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .appShell .mobileBottomMoreGrid > button > svg:first-child {
    width: 40px !important;
    height: 40px !important;
  }
  .appShell .mobileBottomMoreGrid > button > span { gap: 3px !important; }
  .appShell .mobileBottomMoreGrid > button strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }
  .appShell .mobileBottomMoreGrid > button small {
    display: block !important;
    color: #72726c !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  .appShell .mobileBottomMoreGrid > button > svg:last-child { color: #85857f !important; }
  .appShell .mobileBottomMoreGrid > button:active { transform: scale(.99); }
  .appShell .mobileBottomMoreGrid > button:focus-visible {
    outline: 3px solid #9c8ad4 !important;
    outline-offset: 2px !important;
  }
  .appShell:has(.exactKreaWorkbench) .mobileBottomMoreGrid > button,
  .appShell:has(.exactVideoWorkbench) .mobileBottomMoreGrid > button {
    grid-template-columns: 40px minmax(0, 1fr) 20px !important;
    min-height: 72px !important;
  }
  .appShell .mobileBottomMoreGrid > .mobileCreatorHiddenNav,
  .appShell .mobileBottomNav > .mobileCreatorHiddenNav,
  .appShell .mobileBottomMoreGrid > button:is([data-navigation-id="history"], [data-navigation-id="script"], [title="视频拆解"]),
  .appShell .mobileBottomNav > button:is([data-navigation-id="history"], [data-navigation-id="script"], [aria-label="漫剧项目"]),
  .appShell #main-navigation .mobileCreatorHiddenNav,
  .appShell #main-navigation :is(#professional-navigation-history, #professional-navigation-script) {
    display: none !important;
  }
  .appShell .mobileCreatorDesktopCanvas strong::after {
    content: "仅电脑";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    color: #6d6d66;
    background: #f1f1ed;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    vertical-align: 1px;
  }
  .mobileCreatorCanvasNotice {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 24px;
    overflow-y: auto;
    color: #292927;
    background: #fff;
    border: 1px solid #e5e5df;
    border-radius: 24px;
    box-shadow: 0 24px 80px #15192433;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .mobileCreatorCanvasNotice::backdrop { background: rgb(25 27 32 / 42%); backdrop-filter: blur(4px); }
  .mobileCreatorCanvasNoticeLabel { display: block; margin-bottom: 14px; color: #828278; font-size: 12px; }
  .mobileCreatorCanvasNotice h2 { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: -.4px; }
  .mobileCreatorCanvasNotice p { margin: 12px 0 24px; color: #73736c; font-size: 14px; line-height: 1.75; }
  .mobileCreatorCanvasNotice button {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    color: #fff;
    background: #2d302b;
    border: 0;
    border-radius: 14px;
    font: 600 14px/1.4 system-ui, sans-serif;
    touch-action: manipulation;
  }
  .mobileCreatorCanvasNotice button:active { background: #454940; }
  .mobileCreatorCanvasNotice button:focus-visible { outline: 3px solid #9c8ad4; outline-offset: 3px; }
  .appShell .mobileBottomNav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobileCreatorHistoryBackdrop {
    position: fixed !important;
    z-index: 1098 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: var(--lj-mobile-visual-height, 100dvh) !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgb(25 27 32 / 34%) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    touch-action: manipulation;
  }
  .mobileCreatorHistoryBackdrop[hidden] { display: none !important; }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory {
    position: fixed !important;
    z-index: 1100 !important;
    inset: 0 auto 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    width: min(420px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    height: var(--lj-mobile-visual-height, 100dvh) !important;
    min-height: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    color: #282825 !important;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid #e3e3df !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 22px 0 60px #12182438 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.expanded.hasAgentConversationHistory {
    width: min(420px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory > :not(.mobileCreatorHistoryHeader):not(.railHistory):not(.railHistoryTopActionsHost) {
    display: none !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory > .mobileCreatorHistoryHeader {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid #ededea !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryHeader h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #292927 !important;
    font: 720 16px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryActions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryHeader button {
    position: static !important;
    inset: auto !important;
    float: none !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .railHistoryTopActionsHost {
    position: absolute !important;
    z-index: 4 !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button[aria-label="新建创作对话"] {
    display: none !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button[aria-label="搜索历史对话"],
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button[aria-label="关闭历史搜索"],
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryNew,
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryClose {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    color: #40403c !important;
    background: #f6f6f3 !important;
    border: 1px solid #e2e2dd !important;
    border-radius: 13px !important;
    font: 650 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button[aria-label="搜索历史对话"],
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button[aria-label="关闭历史搜索"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryNew {
    min-width: 68px !important;
    color: #fff !important;
    background: #262624 !important;
    border-color: #262624 !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileCreatorHistoryClose {
    min-width: 56px !important;
    width: 56px !important;
    gap: 5px !important;
    padding: 0 8px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .railHistory {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-top: 0 !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .railHistory > header {
    display: none !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileRailClose {
    z-index: 5 !important;
    display: grid !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #454541 !important;
    background: #f5f5f2 !important;
    border: 1px solid #e4e4de !important;
    border-radius: 13px !important;
    position: relative !important;
    inset: auto !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .mobileRailClose > span { display: none !important; }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .railHistory {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistory {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryList {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    gap: 5px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    padding: 4px 0 12px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistorySearch {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 8px 0 4px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistorySearch > button {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryOpen > span:last-child,
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTitle {
    display: grid !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryOpen .inlineCreativeAgentHistoryTitle b {
    display: block !important;
    max-width: 100% !important;
    color: #343431 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryDetail {
    display: block !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryList > article,
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryOpen {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryOpen {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: center !important;
    place-items: center start !important;
    gap: 10px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 6px 40px 6px 8px !important;
    font-size: 14px !important;
    text-align: left !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryList > article {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryActions {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryIcon {
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    place-items: center !important;
  }
  html[data-lj-mobile-history-open="true"] .appShell #main-navigation.sideRail.hasAgentConversationHistory .inlineCreativeAgentHistoryTopActions > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentPanel.embedded,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentPanel.embedded {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentPanel.embedded > .inlineCreativeAgentConversation,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentPanel.embedded > .inlineCreativeAgentConversation {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 18px !important;
    padding: 10px 8px 24px !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessage,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessage {
    box-sizing: border-box !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    overflow-wrap: anywhere !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessage.assistant,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessage.assistant {
    align-self: stretch !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessage.user,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessage.user {
    align-self: flex-end !important;
    width: min(88%, 640px) !important;
    max-width: 88% !important;
    margin-left: auto !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessageBubble,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessageBubble {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessage.assistant .inlineCreativeAgentMessageBubble {
    width: 100% !important;
    padding: 13px 15px !important;
    background: #f8f8f6 !important;
    border: 1px solid #ededea !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px #22221e08 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessageBubble > :is(p, li),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessageBubble > :is(p, li) {
    font-size: 15px !important;
    line-height: 1.72 !important;
    overflow-wrap: anywhere !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench :is(.inlineCreativeAgentMessageAssets, .inlineCreativeAgentResultTurn, .exactVideoConversationTurn),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench :is(.inlineCreativeAgentMessageAssets, .inlineCreativeAgentResultTurn, .exactVideoConversationTurn) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .inlineCreativeAgentMessageAssets :is(img, video),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .inlineCreativeAgentMessageAssets :is(img, video) {
    max-width: 100% !important;
    height: auto;
    object-fit: contain;
  }

/* Mobile viewport, dock position, bottom-navigation clearance, and conversation area. */
@media (max-width: 760px) {
  .exactKreaWorkbench, .exactVideoWorkbench {
    --lj-mobile-nav-clearance: calc(var(--mobile-bottom-nav-height, 74px) + max(12px, env(safe-area-inset-bottom)));
    --lj-mobile-dock-height: 260px;
    --lj-mobile-input-clearance: 174px;
  }
  .exactVideoWorkbench:has([data-lj-mobile-control-role="execution"]):has([data-lj-mobile-control-role="model"]):has([data-lj-mobile-control-role="reference"]):has([data-lj-mobile-control-role="settings"]) {
    --lj-mobile-dock-height: 308px;
    --lj-mobile-input-clearance: 220px;
  }
  .appShell:has(#main-navigation) .pageContent.toolMain .unifiedMediaWorkspaceHost.isActive > .unifiedCreatorWorkspaceSurface,
  .appShell:has(#main-navigation) .pageContent.toolMain .exactKreaWorkbench { overflow: clip !important; }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench > :is(.exactPromptDock, .unifiedCreatorComposerSurface),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench > :is(.exactVideoPromptDock, .exactVideoComposer, .unifiedCreatorComposerSurface) {
    box-sizing: border-box !important;
    bottom: var(--lj-mobile-nav-clearance) !important;
    left: 50% !important; right: auto !important;
    width: calc(100% - max(24px, env(safe-area-inset-left)) - max(24px, env(safe-area-inset-right))) !important;
    max-width: calc(100% - max(24px, env(safe-area-inset-left)) - max(24px, env(safe-area-inset-right))) !important;
    min-height: var(--lj-mobile-dock-height) !important;
    max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--lj-mobile-nav-clearance) - 12px) !important;
    padding: 12px !important; overflow: visible !important;
    color: #292a26 !important; background: rgb(255 255 255 / 97%) !important;
    border: 1px solid #e7e8e2 !important; border-radius: 22px !important;
    box-shadow: 0 12px 36px rgb(27 31 26 / 14%), 0 2px 6px rgb(27 31 26 / 5%) !important;
    backdrop-filter: blur(16px); transform: translateX(-50%) !important; isolation: isolate;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench > .exactPromptDock:not(.replicateMode),
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench > .unifiedCreatorComposerSurface:not(.replicateMode) {
    --exact-prompt-overlay-bottom: calc(var(--exact-prompt-dock-height, var(--lj-mobile-dock-height)) + var(--lj-mobile-nav-clearance) + 12px) !important;
  }
  /* Preserve the material glyph repair while the native pill is folded away. */
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptPills .exactDockPill.exactImageUploadPill.exactMaterialPlusButton > svg:first-child,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPills .exactVideoPill.exactMaterialPlusButton > svg:first-child {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  }  .exactKreaWorkbench.unifiedCreatorWorkspaceSurface,
  .exactVideoWorkbench.unifiedCreatorWorkspaceSurface {
    --exact-video-prompt-overlay-bottom: calc(var(--exact-prompt-dock-height, var(--lj-mobile-dock-height)) + var(--lj-mobile-nav-clearance) + 12px) !important;
    --exact-video-agent-bottom: calc(var(--exact-prompt-dock-height, var(--lj-mobile-dock-height)) + var(--lj-mobile-nav-clearance) + 12px) !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .imagePreviewStage.imageConversationTimeline,
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .unifiedCreatorConversationSurface,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench > .exactVideoConversationTimeline,
  .appShell:has(#main-navigation) .pageContent.toolMain .unifiedMediaWorkspaceHost.isActive .exactVideoWorkbench .exactVideoConversationTimeline {
    left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important;
    padding-inline: 8px !important; transform: none !important; overscroll-behavior: contain !important; scroll-padding-bottom: 20px !important;
    bottom: var(--exact-prompt-overlay-bottom, var(--exact-video-prompt-overlay-bottom, calc(var(--lj-mobile-dock-height) + var(--lj-mobile-nav-clearance) + 12px))) !important;
  }

  /* Mobile parameter sheets retain the original React controls and handlers. */
  .unifiedCreatorModeOptions, .unifiedAgentExecutionOptions,
  .unifiedAgentThinkingOptions:not(.aoImageThinkingInline), .aoImageThinkingOptions:not(.aoImageThinkingInline),
  .exactVideoMaterialPopover, .exactVideoSettingsPopover, .exactVideoPopover {
    position: fixed !important; z-index: 1300 !important;
    inset: auto max(12px, env(safe-area-inset-right)) calc(var(--mobile-bottom-nav-height, 74px) + max(12px, env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important; width: auto !important; max-width: 620px !important;
    max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--mobile-bottom-nav-height, 74px) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    margin-inline: auto !important; padding: 16px !important; overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain !important; color: #2d2e29 !important; background: #fff !important;
    border: 1px solid #e6e7e1 !important; border-radius: 22px !important; box-shadow: 0 18px 54px rgb(25 27 25 / 22%) !important;
  }
  .unifiedCreatorModeOptions, .unifiedAgentExecutionOptions { display: grid !important; gap: 8px !important; }
  .unifiedCreatorModeOptions::before, .unifiedAgentExecutionOptions::before { display: none !important; content: none !important; }
  .mobileCreatorSheetHeader {
    position: fixed !important; z-index: 1301 !important; box-sizing: border-box !important;
    display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; height: 52px !important; min-height: 52px !important;
    margin: 0 !important; padding: 0 0 8px !important; pointer-events: none !important;
    color: #30312c !important; background: #fff !important; border-bottom: 1px solid #edede9 !important; font: 700 16px/1.35 system-ui, sans-serif !important;
  }
  .mobileCreatorSheetHeader h2 { margin: 0 !important; color: inherit !important; font: 700 16px/1.35 system-ui, sans-serif !important; }
  .mobileCreatorSheetHeader button, .mobileCreatorSheetHeader .mobileCreatorSheetDismiss {
    display: inline-grid !important; place-items: center !important; flex: 0 0 44px !important; width: 44px !important;
    min-width: 44px !important; min-height: 44px !important; padding: 0 !important; color: #44453f !important;
    pointer-events: auto !important; background: #f5f5f2 !important; border: 1px solid #e8e8e3 !important; border-radius: 13px !important;
  }
  .unifiedCreatorModeOptions.unifiedCreatorModeOptions[data-lj-mobile-sheet="mode"],
  .unifiedAgentExecutionOptions.unifiedAgentExecutionOptions[data-lj-mobile-sheet="execution"],
  .unifiedAgentThinkingOptions.aoImageThinkingOptions[data-lj-mobile-sheet="thinking"] {
    padding-top: 70px !important;
  }
  :is(.unifiedAgentThinkingOptions, .aoImageThinkingOptions)[data-lj-mobile-sheet] .unifiedAgentThinkingHeader {
    display: none !important;
  }
  .mobileStructuredPanel .aoImageThinkingInline > .unifiedAgentThinkingHeader { display: none !important; }
  .mobileStructuredPanel .aoImageThinkingInline { gap: 6px !important; padding: 0 !important; }
  .mobileStructuredPanel .aoImageThinkingInline .aoImageThinkingSummary {
    gap: 6px !important; padding: 6px 0 0 !important;
  }
  .mobileStructuredPanel .aoImageThinkingInline .aoImageThinkingMetrics { gap: 4px !important; }
  .mobileStructuredPanel .aoImageThinkingInline .aoImageThinkingMetric { gap: 3px !important; font-size: 10px !important; }
  .unifiedCreatorModeOptions > button, .unifiedAgentExecutionOptions > button {
    display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 20px !important; align-items: center !important; gap: 12px !important;
    box-sizing: border-box !important; width: 100% !important; min-height: 64px !important; padding: 10px 12px !important;
    color: #393a35 !important; background: #fafaf8 !important; border: 1px solid #e8e9e3 !important; border-radius: 15px !important;
    text-align: left !important; white-space: normal !important;
  }
  .unifiedCreatorModeOptions > button b, .unifiedAgentExecutionOptions > button b { display: block !important; font-size: 14px !important; line-height: 1.35 !important; }
  .unifiedCreatorModeOptions > button small, .unifiedAgentExecutionOptions > button small { display: block !important; margin-top: 3px !important; color: #77786f !important; font-size: 12px !important; line-height: 1.4 !important; }
  .unifiedCreatorModeOptions > button.active, .unifiedAgentExecutionOptions > button.active { color: #62478d !important; background: #f5f1fb !important; border-color: #bda9dc !important; }
  .unifiedAgentThinkingOptions:not(.aoImageThinkingInline), .aoImageThinkingOptions:not(.aoImageThinkingInline) { display: grid !important; gap: 12px !important; padding: 18px !important; }
  .unifiedAgentThinkingHeader { display: flex !important; justify-content: space-between !important; gap: 10px !important; font-size: 15px !important; }
  .unifiedAgentThinkingLabels, .aoImageThinkingLabels { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .unifiedAgentThinkingLabels > button, .aoImageThinkingLabels > button { min-height: 48px !important; border-radius: 12px !important; font-size: 13px !important; }
  .unifiedAgentThinkingOptions.aoImageThinkingOptions[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important;
  }
  .unifiedAgentThinkingOptions.aoImageThinkingOptions[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > button {
    position: static !important; inset: auto !important; transform: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important;
    padding: 8px 6px !important; color: #55564f !important; background: #f8f8f5 !important;
    border: 1px solid #e4e5df !important; border-radius: 12px !important;
    font: 600 13px/1.2 system-ui, sans-serif !important; white-space: nowrap !important;
  }
  .unifiedAgentThinkingOptions.aoImageThinkingOptions[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > button.active,
  .unifiedAgentThinkingOptions.aoImageThinkingOptions[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > button[aria-pressed="true"] {
    color: #63488e !important; background: #f2edfa !important; border-color: #b7a1d8 !important;
    box-shadow: inset 0 0 0 1px #b7a1d8 !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] {
    align-content: start !important; gap: 10px !important; padding: 70px 16px 16px !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingSlider {
    display: block !important; position: relative !important; box-sizing: border-box !important; width: 100% !important;
    min-width: 0 !important; height: 44px !important; margin: 0 !important; overflow: visible !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingSlider > input[type="range"] {
    display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    position: absolute !important; inset: 0 !important; z-index: 1 !important; box-sizing: border-box !important;
    width: 100% !important; height: 44px !important; margin: 0 !important; background: transparent !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingRail,
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingMarks { z-index: 0 !important; }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels {
    display: block !important; position: relative !important; box-sizing: border-box !important; width: auto !important;
    height: 20px !important; margin: -2px 17px 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > span {
    display: block !important; position: absolute !important; top: 0 !important; left: var(--agent-thinking-stop) !important;
    transform: translateX(-50%) !important; max-width: none !important; color: #797b83 !important;
    font: 550 11px/1.3 system-ui, sans-serif !important; white-space: nowrap !important;
  }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > span:first-child { transform: none !important; }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingLabels > span:last-child { transform: translateX(-100%) !important; }
  .unifiedAgentThinkingOptions.unifiedAgentThinkingOptions:not(.aoImageThinkingInline):not(.aoImageThinkingOptions)[data-lj-mobile-sheet="thinking"] .unifiedAgentThinkingSummary {
    box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; margin: 0 !important;
  }

  .appShell .exactKreaWorkbench:has([data-lj-mobile-sheet]),
  .appShell .exactVideoWorkbench:has([data-lj-mobile-sheet]) { isolation: auto !important; }

  .appShell:has(.exactKreaWorkbench) .mobileImagePanelStructured.open,
  .appShell:has(.exactVideoWorkbench) .mobileVideoPanelStructured.open {
    position: fixed !important; z-index: 1300 !important;
    inset: auto max(12px, env(safe-area-inset-right)) calc(var(--mobile-bottom-nav-height, 74px) + max(12px, env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)) !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: auto !important;
    max-width: 620px !important; max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--mobile-bottom-nav-height, 74px) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    margin-inline: auto !important; padding: 0 !important; overflow: hidden !important; color: #282924 !important;
    background: #fff !important; border: 1px solid #e6e7e1 !important; border-radius: 24px !important;
    box-shadow: 0 18px 54px rgb(25 27 25 / 22%) !important; transform: none !important;
  }
  /* The host can leave an opened native editor drawer at zero height while its
     transition transform is still applied. Reassert the actual sheet geometry
     only while one of our mobile structured panes is open. */
  .appShell:has(.exactVideoWorkbench) .workPanel.editorPanel.mobileVideoPanelStructured.open:has(> .mobileStructuredPanel.mobileVideoSettingsShell[data-lj-mobile-sheet]),
  .appShell:has(.exactKreaWorkbench) .workPanel.editorPanel.mobileImagePanelStructured.open:has(> .mobileStructuredPanel.mobileImageSettingsShell[data-lj-mobile-sheet]) {
    position: fixed !important; z-index: 1300 !important;
    inset: auto max(12px, env(safe-area-inset-right)) calc(var(--mobile-bottom-nav-height, 74px) + max(12px, env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)) !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    box-sizing: border-box !important; width: auto !important; height: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    max-width: 620px !important; max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--mobile-bottom-nav-height, 74px) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; transform: none !important; translate: none !important;
  }
  .mobileVideoPanelStructured.open:has(> .mobileStructuredPanel.mobileVideoSettingsShell[data-lj-mobile-sheet]) > .mobileVideoSettingsShell,
  .mobileImagePanelStructured.open:has(> .mobileStructuredPanel.mobileImageSettingsShell[data-lj-mobile-sheet]) > .mobileImageSettingsShell {
    display: flex !important; flex: 0 1 auto !important; align-self: stretch !important;
    box-sizing: border-box !important; width: 100% !important; height: auto !important;
    min-width: 0 !important; min-height: 0 !important; max-height: 100% !important;
    overflow: hidden !important; transform: none !important; translate: none !important;
  }
  .mobileImagePanelStructured.open > .mobileImageSettingsShell,
  .mobileVideoPanelStructured.open > .mobileVideoSettingsShell {
    display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important;
    min-height: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important;
  }
  .mobileImagePanelStructured > .exactDrawerClose, .mobileVideoPanelStructured > .exactDrawerClose { display: none !important; }
  .mobileImagePanelStructured .mobileStructuredHeader, .mobileVideoPanelStructured .mobileStructuredHeader {
    display: grid !important; flex: 0 0 auto !important; grid-template-columns: 38px minmax(0, 1fr) 44px !important;
    align-items: center !important; gap: 10px !important; min-height: 68px !important; padding: 8px 14px !important;
    background: #fff !important; border-bottom: 1px solid #edede9 !important; text-align: left !important;
  }
  .mobileImagePanelStructured .mobileStructuredHeader b, .mobileVideoPanelStructured .mobileStructuredHeader b { font-size: 16px !important; line-height: 1.3 !important; }
  .mobileImagePanelStructured .mobileStructuredHeader small, .mobileVideoPanelStructured .mobileStructuredHeader small {
    display: block !important; margin-top: 3px !important; color: #77786f !important; font-size: 12px !important; line-height: 1.35 !important;
  }
  .mobileImagePanelStructured .mobileStructuredHeaderSpacer { display: block !important; width: 36px !important; }
  .mobileImagePanelStructured .mobileStructuredClose, .mobileVideoPanelStructured .mobileStructuredClose {
    display: inline-grid !important; place-items: center !important; box-sizing: border-box !important; width: 44px !important;
    min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; color: #43443f !important;
    background: #f5f5f2 !important; border: 1px solid #e8e8e3 !important; border-radius: 14px !important;
  }
  .mobileImagePanelStructured .mobileStructuredBody, .mobileVideoPanelStructured .mobileStructuredBody {
    flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; padding: 14px !important;
    overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  }
  .mobileImagePanelStructured .mobileStructuredFooter {
    flex: 0 0 auto !important; padding: 10px 14px max(12px, env(safe-area-inset-bottom)) !important;
    background: #fff !important; border-top: 1px solid #edede9 !important;
  }
  .mobileImagePanelStructured .mobileStructuredFooter > button {
    width: 100% !important; min-height: 48px !important; color: #fff !important; background: #292c28 !important;
    border: 0 !important; border-radius: 14px !important; font: 650 14px/1.3 system-ui, sans-serif !important;
  }
  .mobileImagePanelStructured .allSettingsGroup, .mobileVideoPanelStructured .allSettingsGroup {
    min-width: 0 !important; padding: 14px 0 !important; border-bottom: 1px solid #edede8 !important;
  }
  .mobileImagePanelStructured .allSettingsGroup > header, .mobileVideoPanelStructured .allSettingsGroup > header {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; margin: 0 0 10px !important;
  }
  .mobileImagePanelStructured .allSettingsGroup > header b, .mobileVideoPanelStructured .allSettingsGroup > header b { color: #30312c !important; font-size: 14px !important; }
  .mobileImagePanelStructured .allSettingsGroup > header small, .mobileVideoPanelStructured .allSettingsGroup > header small { color: #85857c !important; font-size: 12px !important; }
  .mobileImagePanelStructured .mobileRatioOptionGrid {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  .mobileImagePanelStructured .mobileRatioOptionGrid > button {
    display: grid !important; grid-template-rows: 23px auto !important; justify-items: center !important; align-content: center !important;
    gap: 4px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 64px !important;
    padding: 7px 4px !important; color: #4b4c46 !important; background: #fafaf8 !important; border: 1px solid #e8e9e3 !important;
    border-radius: 12px !important; font: 600 13px/1.2 system-ui, sans-serif !important;
  }
  .mobileImagePanelStructured .mobileRatioOptionGrid > button > i { width: 30px !important; max-width: 36px !important; max-height: 21px !important; border: 1.5px solid #a19d91 !important; border-radius: 4px !important; background: #fff !important; }
  .mobileImagePanelStructured .mobileRatioOptionGrid > button > small { display: none !important; }
  .mobileImagePanelStructured .mobileRatioOptionGrid > button > b { font-size: 13px !important; }
  .mobileVideoPanelStructured .mobileRatioOptionGrid > button {
    display: grid !important; grid-template-rows: 22px auto !important; justify-items: center !important; align-content: center !important;
    gap: 4px !important; min-height: 62px !important; padding: 6px 4px !important; font-size: 13px !important;
  }
  .mobileVideoPanelStructured .mobileRatioOptionGrid > button > i { width: 30px !important; max-width: 36px !important; max-height: 21px !important; border: 1.5px solid #a19d91 !important; border-radius: 4px !important; background: #fff !important; }
  .mobileVideoPanelStructured .mobileRatioOptionGrid > button > small { display: none !important; }
  .mobileVideoPanelStructured .videoModelList, .mobileVideoPanelStructured .videoGenerationMethodList { display: grid !important; gap: 8px !important; }
  .mobileVideoPanelStructured .videoModelChoice, .mobileVideoPanelStructured .videoGenerationMethodChoice {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 22px !important; align-items: center !important; gap: 10px !important;
    box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 64px !important;
    padding: 9px 11px !important; color: #3d3e38 !important; background: #fafaf8 !important; border: 1px solid #e8e9e3 !important;
    border-radius: 14px !important; text-align: left !important;
  }
  .mobileVideoPanelStructured .videoModelChoiceIcon { display: grid !important; width: 38px !important; height: 38px !important; place-items: center !important; border-radius: 11px !important; background: #f0eef5 !important; }
  .mobileVideoPanelStructured .videoModelChoiceCopy, .mobileVideoPanelStructured .videoGenerationMethodCopy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  .mobileVideoPanelStructured .videoModelChoiceCopy b, .mobileVideoPanelStructured .videoGenerationMethodCopy b { display: block !important; font-size: 13px !important; line-height: 1.3 !important; }
  .mobileVideoPanelStructured .videoModelChoiceCopy small, .mobileVideoPanelStructured .videoGenerationMethodCopy small { display: block !important; color: #77786f !important; font-size: 11px !important; line-height: 1.35 !important; }
  .mobileVideoPanelStructured .videoModelChoice .videoModelFeatureBadge { font-size: 10px !important; }
  .mobileVideoPanelStructured .videoGenerationMethodHint, .mobileVideoPanelStructured .videoEntitlementPolicyNotice,
  .mobileVideoPanelStructured .videoTrialNotice { font-size: 12px !important; line-height: 1.5 !important; }
  .mobileImagePanelStructured .mobileRatioOptionGrid > button.active,
  .mobileVideoPanelStructured [data-setting].active { color: #63488e !important; background: #f5f1fb !important; border-color: #bda9dc !important; box-shadow: inset 0 0 0 1px #bda9dc !important; }
  .mobileImagePanelStructured .imageSettingsSplitRow { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .mobileImagePanelStructured .directInlineOptionRow, .mobileImagePanelStructured .mobileCountOptionGrid,
  .mobileVideoPanelStructured .mobileOptionGrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
  .mobileImagePanelStructured .directInlineOptionRow > button, .mobileImagePanelStructured .mobileCountOptionGrid > button,
  .mobileVideoPanelStructured .mobileOptionGrid > button {
    box-sizing: border-box !important; min-width: 0 !important; min-height: 48px !important; padding: 6px 4px !important;
    border-radius: 11px !important; font-size: 12px !important;
  }
  .mobileImagePanelStructured .unifiedAgentThinkingLabels, .mobileVideoPanelStructured .unifiedAgentThinkingLabels {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important;
  }
  .mobileImagePanelStructured .unifiedAgentThinkingLabels > button, .mobileVideoPanelStructured .unifiedAgentThinkingLabels > button {
    min-width: 0 !important; min-height: 44px !important; padding: 6px !important; border-radius: 11px !important; font-size: 12px !important;
  }
  .mobileVideoPanelStructured .videoDurationPresets {
    display: flex !important; gap: 8px !important; justify-content: center !important; flex-wrap: wrap !important;
  }
  .mobileVideoPanelStructured .videoDurationPresets > button {
    min-width: 56px !important; min-height: 44px !important; padding: 8px 12px !important;
    border-radius: 12px !important; font-size: 13px !important;
  }
  .exactVideoMaterialPopover .videoMaterialPickerSurface { padding: 0 !important; font-size: 14px !important; }
  .exactVideoMaterialPopover :is(strong, b, h3) { font-size: 14px !important; line-height: 1.45 !important; }
  .exactVideoMaterialPopover :is(small, p) { font-size: 12px !important; line-height: 1.5 !important; }
  .exactVideoMaterialPopover button { min-height: 44px !important; font-size: 13px !important; }
  .exactVideoMaterialPopover button[aria-label="关闭素材选择"] { min-width: 44px !important; }
}

@media (max-width: 480px) {
  .exactKreaWorkbench, .exactVideoWorkbench { --lj-mobile-dock-height: 252px; }
  .exactVideoWorkbench:has([data-lj-mobile-control-role="execution"]):has([data-lj-mobile-control-role="model"]):has([data-lj-mobile-control-role="reference"]):has([data-lj-mobile-control-role="settings"]) { --lj-mobile-dock-height: 308px; --lj-mobile-input-clearance: 220px; }
  .mobileImagePanelStructured .imageSettingsSplitRow { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
}

@media (max-width: 360px) {
  .mobileCreatorHistoryButton { padding-inline: 9px !important; font-size: 12px !important; }
  .exactKreaWorkbench, .exactVideoWorkbench { --lj-mobile-dock-height: 252px; --lj-mobile-input-clearance: 166px; }
  .exactVideoWorkbench:has([data-lj-mobile-control-role="execution"]):has([data-lj-mobile-control-role="model"]):has([data-lj-mobile-control-role="reference"]):has([data-lj-mobile-control-role="settings"]) { --lj-mobile-dock-height: 308px; --lj-mobile-input-clearance: 220px; }
  .appShell:has(.exactKreaWorkbench) .exactPromptPills, .appShell:has(.exactVideoWorkbench) .exactVideoPills { gap: 6px !important; }
  .appShell:has(.exactKreaWorkbench) .exactPromptPills :is(.unifiedCreatorModeTrigger, .unifiedAgentExecutionTrigger, .unifiedAgentThinkingTrigger) > span,
  .appShell:has(.exactVideoWorkbench) .exactVideoPills :is(.exactVideoModelPill, .exactVideoGenerationModePill, .exactVideoPill[data-ui-pill="settings"]) > span { font-size: 12px !important; }
}

/* Fold mobile creation controls into a conventional chat composer. Native
   React controls stay in place; only their redundant parameter pills are hidden. */
@media (max-width: 760px) {
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench:has(.exactPromptToolbar[data-lj-mobile-layout="folded"]),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench:has(.exactVideoPromptToolbar[data-lj-mobile-layout="folded"]) {
    --lj-mobile-dock-height: 128px;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench > :is(.exactPromptDock, .unifiedCreatorComposerSurface):has(.exactPromptToolbar[data-lj-mobile-layout="folded"]),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench > :is(.exactVideoPromptDock, .exactVideoComposer, .unifiedCreatorComposerSurface):has(.exactVideoPromptToolbar[data-lj-mobile-layout="folded"]) {
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important;
    box-sizing: border-box !important; height: auto !important; min-height: 128px !important;
    max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--lj-mobile-nav-clearance) - 12px) !important;
    padding: 10px 12px !important; overflow: visible !important; background: #fff !important;
    border: 1px solid #e8e9e4 !important; border-radius: 24px !important; box-shadow: 0 8px 26px rgb(27 31 26 / 10%) !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptMain,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptMain {
    position: relative !important; inset: auto !important; display: block !important; flex: 1 1 auto !important;
    box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 52px !important;
    max-height: min(26dvh, 180px) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important;
    color: #292a26 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptMain textarea,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptMain textarea {
    position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important;
    min-width: 0 !important; min-height: 52px !important; max-height: min(26dvh, 180px) !important; height: auto !important;
    padding: 5px 4px !important; color: #292a26 !important; background: transparent !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    overflow-x: hidden !important; overflow-y: auto !important; resize: none !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptMain textarea::placeholder,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptMain textarea::placeholder { color: #9a9b94 !important; }
  .appShell:has(.exactKreaWorkbench) .exactPromptMain .exactPromptCount,
  .appShell:has(.exactVideoWorkbench) .exactVideoPromptMain .exactVideoPromptCount {
    position: absolute !important; top: auto !important; right: auto !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] {
    position: relative !important; inset: auto !important; display: flex !important; flex: 0 0 44px !important;
    grid-template-columns: none !important; grid-template-rows: none !important; align-items: center !important;
    gap: 6px !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important;
    min-width: 0 !important; min-height: 44px !important; height: 44px !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .mobileCreatorControlBar,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .mobileCreatorControlBar { display: contents !important; }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactPromptPills[data-lj-mobile-native-pills="hidden"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] {
    position: static !important; display: contents !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactPromptPills[data-lj-mobile-native-pills="hidden"] > :not(.unifiedCreatorModeMenu),
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] > :not(.unifiedCreatorModeMenu),
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactPromptPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="execution"],
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactPromptPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="thinking"],
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactPromptPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="settings"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="execution"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="thinking"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="model"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="reference"],
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoPills[data-lj-mobile-native-pills="hidden"] [data-lj-mobile-control-role="settings"] { display: none !important; }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu {
    display: flex !important; flex: 1 1 0% !important; align-items: center !important; width: auto !important;
    max-width: none !important; min-width: 0 !important; height: 44px !important; overflow: hidden !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button {
    display: inline-flex !important; flex: 0 1 auto !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important;
    box-sizing: border-box !important; width: auto !important; max-width: 100% !important; min-width: 0 !important;
    min-height: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 8px !important;
    color: #454640 !important; background: transparent !important; border: 0 !important; border-radius: 12px !important;
    box-shadow: none !important; font: 600 12px/1.25 system-ui, sans-serif !important; text-align: center !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button > span,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button > span {
    display: inline-flex !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
    color: inherit !important; font-size: 12px !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button svg,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button svg {
    display: block !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 16px !important;
    width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button svg:last-of-type,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .unifiedCreatorModeMenu > button svg:last-of-type {
    flex-basis: 12px !important; width: 12px !important; height: 12px !important; min-width: 12px !important; max-width: 12px !important;
    margin-left: 0 !important; opacity: .62 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .mobileCreatorPlusButton,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .mobileCreatorPlusButton {
    display: inline-grid !important; flex: 0 0 44px !important; place-items: center !important; box-sizing: border-box !important;
    width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 0 !important; color: #52534d !important; background: #f6f6f3 !important;
    border: 1px solid #e8e9e3 !important; border-radius: 50% !important; box-shadow: none !important;
    font: 400 25px/1 system-ui, sans-serif !important; touch-action: manipulation !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] > .exactImagePointEstimate,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] > .exactVideoPointEstimate {
    position: relative !important; inset: auto !important; display: inline-flex !important; flex: 0 0 auto !important;
    align-items: center !important; justify-content: center !important; box-sizing: border-box !important;
    width: auto !important; min-width: 0 !important; max-width: 64px !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 2px !important; color: #96968e !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; font: 500 11px/1 system-ui, sans-serif !important;
    text-align: center !important; white-space: nowrap !important; opacity: .82 !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactGenerateButton,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoGenerateButton {
    position: relative !important; inset: auto !important; display: inline-grid !important; flex: 0 0 44px !important;
    place-items: center !important; box-sizing: border-box !important; width: 44px !important; min-width: 44px !important;
    max-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important;
    color: #fff !important; background: #292b27 !important; border: 0 !important; border-radius: 50% !important;
    box-shadow: 0 4px 12px rgb(32 33 30 / 14%) !important; touch-action: manipulation !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] .exactGenerateButton:disabled,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] .exactVideoGenerateButton:disabled {
    color: #a6a79f !important; background: #e9eae6 !important; box-shadow: none !important;
  }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] [data-lj-mobile-control-role="submit"]:not([data-lj-mobile-send-label="停止"]) svg,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] [data-lj-mobile-control-role="submit"]:not([data-lj-mobile-send-label="停止"]) svg { display: none !important; visibility: hidden !important; }
  .appShell:has(.exactKreaWorkbench) .exactKreaWorkbench .exactPromptToolbar[data-lj-mobile-layout="folded"] [data-lj-mobile-control-role="submit"]:not([data-lj-mobile-send-label="停止"])::after,
  .appShell:has(.exactVideoWorkbench) .exactVideoWorkbench .exactVideoPromptToolbar[data-lj-mobile-layout="folded"] [data-lj-mobile-control-role="submit"]:not([data-lj-mobile-send-label="停止"])::after {
    content: "" !important; display: block !important; width: 22px !important; height: 22px !important;
    background-color: currentColor !important; -webkit-mask: var(--lj-mobile-send-icon) center / contain no-repeat !important;
    mask: var(--lj-mobile-send-icon) center / contain no-repeat !important;
  }
  .mobileCreatorOverflowBackdrop {
    position: fixed !important; z-index: 1390 !important; inset: 0 !important; display: block !important;
    background: rgb(28 29 32 / 28%) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .mobileCreatorOverflowSheet {
    position: fixed !important; z-index: 1391 !important; inset: auto max(12px, env(safe-area-inset-right)) calc(var(--mobile-bottom-nav-height, 74px) + max(12px, env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)) !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: auto !important;
    max-width: 620px !important; max-height: calc(var(--lj-mobile-visual-height, 100dvh) - var(--mobile-topbar-height, 62px) - var(--mobile-bottom-nav-height, 74px) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    margin-inline: auto !important; padding: 16px !important; overflow: hidden !important; color: #292a26 !important;
    background: #fff !important; border: 1px solid #e7e8e2 !important; border-radius: 24px !important;
    box-shadow: 0 22px 64px rgb(25 27 25 / 24%) !important; outline: none !important;
  }
  .mobileCreatorOverflowHeader { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 12px !important; border-bottom: 1px solid #edede9 !important; }
  .mobileCreatorOverflowHeader h2 { margin: 0 !important; color: #292a26 !important; font: 700 18px/1.35 system-ui, sans-serif !important; }
  .mobileCreatorOverflowHeader p { margin: 4px 0 0 !important; color: #82837a !important; font: 400 12px/1.4 system-ui, sans-serif !important; }
  .mobileCreatorOverflowClose { display: inline-grid !important; flex: 0 0 44px !important; place-items: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; color: #55564f !important; background: #f5f5f2 !important; border: 1px solid #e7e8e2 !important; border-radius: 14px !important; font: 400 25px/1 system-ui, sans-serif !important; }
  .mobileCreatorOverflowList { display: grid !important; flex: 1 1 auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; min-height: 0 !important; padding: 12px 0 2px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
  .mobileCreatorOverflowItem { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 62px !important; padding: 10px 12px !important; color: #383933 !important; background: #fafaf8 !important; border: 1px solid #e8e9e3 !important; border-radius: 15px !important; text-align: left !important; touch-action: manipulation !important; }
  .mobileCreatorOverflowItem:active { background: #f3f0f8 !important; border-color: #cfc0e5 !important; }
  .mobileCreatorOverflowItem:focus-visible, .mobileCreatorOverflowClose:focus-visible { outline: 3px solid #9c8ad4 !important; outline-offset: 2px !important; }
  .mobileCreatorOverflowCopy { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
  .mobileCreatorOverflowCopy strong { color: #383933 !important; font: 650 14px/1.3 system-ui, sans-serif !important; }
  .mobileCreatorOverflowCopy small { color: #85867d !important; font: 400 12px/1.35 system-ui, sans-serif !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .mobileCreatorOverflowChevron { flex: 0 0 auto !important; color: #9a9b93 !important; font: 400 24px/1 system-ui, sans-serif !important; }
  .mobileCreatorOverflowEmpty { margin: 0 !important; padding: 20px 10px !important; color: #888980 !important; text-align: center !important; font-size: 13px !important; }
  .mobileCreatorSheetBackdrop {
    position: fixed !important; z-index: 1298 !important; inset: 0 !important; display: block !important;
    background: rgb(33 34 37 / 24%) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .appShell .mobileCreatorHistoryButton { background: #fff !important; border-color: #e7e8e2 !important; box-shadow: 0 4px 14px rgb(24 26 23 / 8%) !important; }
  .appShell .mobileBottomNav { background: #fff !important; border-top: 1px solid #e8e9e3 !important; box-shadow: 0 -4px 16px rgb(25 27 25 / 4%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobileCreatorHistoryButton,
  .mobileCreatorHistoryBackdrop,
  #main-navigation.sideRail.hasAgentConversationHistory { transition: none !important; animation: none !important; }
}

@media(max-width:760px){:root{--lj-mobile-send-icon:url("/ai/assets/mobile-creator-send-f384ea777c20.svg");}}