@media (max-width: 1439px) {
    .main-content {
        grid-template-columns: minmax(350px, 400px) minmax(0, 1fr);
    }

    .activity-panel {
        position: fixed;
        z-index: var(--z-drawer);
        inset: var(--header-height) 0 0 auto;
        width: min(380px, 92vw);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        transition: transform var(--duration-normal) ease;
    }

    .activity-panel.is-open {
        transform: translateX(0);
    }
}

@media (max-width: 900px) {
    .topnav {
        padding: 0 12px;
    }

    .brand-tool,
    .brand-sep,
    .nav-status,
    .nav-mode,
    .nav-action span {
        display: none;
    }

    .nav-action {
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .main-content {
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    body {
        overflow: auto;
    }

    .container {
        height: auto;
        min-height: calc(100vh - var(--header-height));
        margin-bottom: 78px;
    }

    .main-content {
        display: flex;
        min-height: auto;
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        height: auto;
        overflow: visible;
        border: 0;
    }

    .left-panel {
        padding: 12px;
    }

    .right-panel {
        min-height: 70vh;
        padding: 12px;
    }

    .left-panel .params-card .card-body,
    .left-panel .upload-card .card-body {
        max-height: 0;
        padding-block: 0 !important;
        overflow: hidden;
        transition: max-height var(--duration-normal) ease, padding var(--duration-normal) ease;
    }

    .left-panel .params-card.is-expanded .card-body,
    .left-panel .upload-card.is-expanded .card-body {
        max-height: none;
        padding-block: 16px !important;
    }

    .left-panel .params-card > h3,
    .left-panel .upload-card > h3 {
        cursor: pointer;
    }

    .workspace-empty {
        min-height: 420px;
        padding: 20px;
    }

    .mobile-generate-bar {
        position: fixed;
        z-index: calc(var(--z-header) + 2);
        inset: auto 0 0;
        display: block;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--color-border);
        background: color-mix(in srgb, var(--color-surface) 94%, transparent);
        backdrop-filter: blur(12px);
    }

    .mobile-generate-bar button {
        width: 100%;
    }

    .action-buttons .btn-primary {
        visibility: hidden;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    [class$="-modal"] {
        align-items: flex-end !important;
    }

    [class$="-modal"] > [class$="-container"] {
        width: 100% !important;
        max-width: none !important;
        height: min(94vh, 900px) !important;
        max-height: 94vh !important;
        margin: 0 !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    }
}

@media (max-width: 420px) {
    .veo-api-model-options {
        grid-template-columns: 1fr;
    }

    .veo-direct-params {
        grid-template-columns: 1fr;
    }

    .brand-name {
        font-size: 14px;
    }

    .workspace-nav-actions {
        gap: 4px;
    }

    .workspace-nav-actions .nav-action {
        width: 40px;
        min-width: 40px;
        padding: 0;
        font-size: 0;
    }

    .workspace-nav-actions .nav-action::before {
        color: var(--color-text-secondary);
        font-size: 10px;
        font-weight: 750;
        line-height: 1;
    }

    #openToolsDrawer::before {
        content: "工具";
    }

    #openActivityPanel::before {
        content: "活动";
    }

    #openApiDrawer::before {
        content: "API";
    }

    #themeToggle::before {
        content: "主题";
    }

    .workspace-nav-actions a.nav-action::before {
        content: "返回";
    }
}

/* Responsive commercial shell */
@media (max-width: 1439px) {
    .main-content,
    .main-content.sidebar-collapsed {
        grid-template-columns: var(--sidebar-collapsed-width) minmax(370px, 410px) minmax(0, 1fr);
    }

    .main-content .sidebar-item {
        width: 48px;
        padding: 0;
        justify-content: center;
    }

    .main-content .sidebar-item .button-label,
    .main-content .sidebar-version {
        display: none;
    }

    .main-content .sidebar-collapse {
        margin-inline: auto;
    }

    .canvas-tab {
        padding-inline: 10px;
    }
}

@media (max-width: 1100px) {
    :root {
        --creator-width: 372px;
        --sidebar-collapsed-width: 64px;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        grid-template-columns: var(--sidebar-collapsed-width) minmax(340px, var(--creator-width)) minmax(0, 1fr);
    }

    .topnav .nav-mode,
    .topnav .nav-action .button-label {
        display: none;
    }

    .topnav .nav-action {
        width: 40px;
        padding: 0;
    }

    .canvas-title span {
        display: none;
    }

    .canvas-tab .button-label {
        display: none;
    }

    .canvas-tab {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 820px) and (min-width: 768px) {
    :root {
        --creator-width: 340px;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        grid-template-columns: 60px 340px minmax(0, 1fr);
    }

    .app-sidebar {
        padding-inline: 6px;
    }

    .right-panel {
        padding: 10px;
    }

    .canvas-header {
        padding-inline: 10px !important;
    }

    .workspace-empty {
        padding: 14px;
    }

    .workspace-empty-meta,
    .workspace-empty-shortcut {
        display: none;
    }
}

@media (max-width: 767px) {
    :root {
        --header-height: 56px;
    }

    .workspace-ui body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .topnav {
        height: var(--header-height);
        padding: 0 10px;
    }

    .topnav .logo {
        width: 32px;
        height: 32px;
    }

    .brand-wordmark .brand-tool,
    .topnav .nav-mode,
    .topnav .nav-status,
    .topnav .nav-action[href^="https"],
    .topnav .nav-action .button-label {
        display: none;
    }

    .brand-name {
        font-size: 14px;
    }

    .workspace-nav-actions {
        gap: 4px;
    }

    .topnav .nav-action {
        display: inline-grid;
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0;
        place-items: center;
    }

    .container {
        width: 100%;
        height: auto;
        min-height: calc(100dvh - var(--header-height));
        margin: var(--header-height) 0 0;
        margin-bottom: 0;
        padding: 0 0 132px;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        display: block;
        width: 100%;
        height: auto;
        min-height: calc(100dvh - var(--header-height) - 132px);
    }

    .app-sidebar {
        display: none;
    }

    .left-panel,
    .right-panel,
    .history-workspace {
        display: none !important;
        width: 100%;
        height: auto;
        min-height: calc(100dvh - var(--header-height) - 132px);
        overflow: visible;
    }

    .main-content[data-mobile-pane="create"] .left-panel,
    .main-content[data-mobile-pane="results"] .right-panel,
    .main-content[data-mobile-pane="tasks"] .right-panel,
    .main-content[data-mobile-pane="history"] .history-workspace {
        display: flex !important;
    }

    .chat-workspace {
        display: none !important;
    }

    .main-content[data-mobile-pane="chat"] .chat-workspace {
        display: grid !important;
        width: 100%;
        height: calc(100dvh - var(--header-height) - 64px);
        min-height: 0;
        overflow: hidden;
    }

    .main-content[data-mobile-pane="history"] .history-workspace {
        display: block !important;
    }

    .left-panel {
        padding: 0 10px 10px;
        border: 0;
    }

    .creator-panel-header {
        padding: 14px 2px 0;
    }

    .creator-panel-header h1 {
        font-size: 18px;
    }

    .creator-panel-header p,
    .draft-status {
        display: none;
    }

    .mode-switcher-shell,
    .creator-scroll > .card {
        border-radius: 10px !important;
    }

    .creator-scroll {
        padding: 0 10px 10px;
        overflow: visible;
    }

    .left-panel .params-card .card-body,
    .left-panel .upload-card .card-body {
        max-height: 0;
        padding-block: 0 !important;
        overflow: hidden;
    }

    .left-panel .params-card.is-expanded .card-body,
    .left-panel .upload-card.is-expanded .card-body {
        max-height: none;
        padding-block: 14px !important;
    }

    .action-bar {
        display: none !important;
    }

    .right-panel {
        padding: 10px;
        background: var(--color-canvas);
    }

    .right-panel .result-card {
        width: 100%;
        min-height: calc(100dvh - var(--header-height) - 152px);
    }

    .canvas-header {
        min-height: 52px;
        padding-inline: 10px !important;
    }

    .canvas-title {
        display: none;
    }

    .canvas-tabs {
        width: 100%;
        justify-content: stretch;
    }

    .canvas-tab {
        width: auto;
        flex: 1;
        justify-content: center;
    }

    .canvas-tab .button-label {
        display: inline;
    }

    .canvas-view {
        min-height: calc(100dvh - var(--header-height) - 204px);
        padding: 12px;
    }

    .result-group-card {
        padding: 10px;
    }

    .result-prompt-info > summary {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 8px;
    }

    .image-grid-container,
    .video-grid-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .result-group-card .generated-image,
    .image-grid-container.is-single .generated-image {
        max-height: 62dvh;
    }

    #canvasResultsView .workspace-empty {
        min-height: 280px;
    }

    #canvasResultsView .canvas-results-log .log-panel {
        min-height: 130px !important;
        max-height: 220px !important;
    }

    .recent-history-section {
        padding: 10px;
    }

    .recent-history-header {
        align-items: flex-start;
    }

    .recent-history-view-all {
        min-height: 36px;
        padding-inline: 9px;
        font-size: 11px;
    }

    .recent-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .recent-history-card.is-large,
    .recent-history-card.is-small {
        grid-column: span 1;
    }

    .recent-history-card.is-large {
        aspect-ratio: 4 / 3;
    }

    .workspace-empty {
        min-height: calc(100dvh - 255px);
    }

    .workspace-empty h2 {
        font-size: 18px;
    }

    .workspace-empty-shortcut {
        display: none;
    }

    .history-workspace {
        padding: 14px 10px;
        background: var(--color-canvas);
    }

    .workspace-section-header {
        margin-bottom: 12px;
        padding: 0 2px;
    }

    .workspace-section-header h1 {
        font-size: 18px;
    }

    .history-workspace .history-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .history-workspace .history-filter-bar input {
        grid-column: 1 / -1;
    }

    .history-storage-controls {
        grid-column: 1 / -1;
        margin-left: 0;
        justify-content: space-between;
    }

    .history-workspace .history-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .mobile-generate-bar {
        z-index: calc(var(--z-header) + 2);
        inset: auto 0 64px;
        display: block;
        padding: 8px 10px;
        border-top: 1px solid var(--color-border);
        background: color-mix(in srgb, var(--color-surface) 96%, transparent);
        backdrop-filter: blur(14px);
    }

    .mobile-generate-bar .btn {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--color-primary) !important;
    }

    .mobile-generate-bar .btn[data-state="incomplete"] {
        background: var(--color-border-strong) !important;
        box-shadow: none !important;
    }

    .mobile-navigation {
        position: fixed;
        z-index: calc(var(--z-header) + 3);
        inset: auto 0 0;
        display: grid;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 4px 6px env(safe-area-inset-bottom);
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: 0 -8px 24px rgb(16 24 40 / 7%);
    }

    .mobile-generate-bar[hidden] {
        display: none !important;
    }

    .mobile-nav-item {
        display: flex;
        min-width: 0;
        min-height: 56px;
        padding: 5px 2px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--color-text-muted);
        font-size: 10px;
        font-weight: 650;
    }

    .mobile-nav-item .ui-icon {
        width: 20px;
        height: 20px;
    }

    .mobile-nav-item.is-active {
        background: var(--color-primary-soft);
        color: var(--color-primary);
    }

    .workspace-drawer {
        inset: var(--header-height) 0 0;
        width: 100%;
        padding: 14px;
    }

    .drawer-backdrop {
        inset: var(--header-height) 0 0;
    }

    [class$="-modal"]:not(.workspace-media-modal) {
        align-items: stretch !important;
    }

    [class$="-modal"]:not(.workspace-media-modal) > [class$="-container"] {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .workspace-media-modal.workspace-media-modal {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        align-items: center !important;
        justify-items: center;
    }

    .workspace-media-content.workspace-media-content {
        width: auto !important;
        height: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        object-fit: contain !important;
        border-radius: 10px;
    }
}

@media (max-width: 390px) {
    .topnav {
        padding-inline: 8px;
    }

    .workspace-nav-actions .nav-action {
        width: 36px;
        min-width: 36px;
    }

    .workspace-nav-actions .nav-action::before {
        content: none !important;
    }

    .prompt-workspace-tools {
        padding-bottom: 1px;
    }

    .workspace-empty-meta span:last-child {
        display: none;
    }
}