/* Final mobile layout contract for the public home, creation and research pages. */

@media (max-width: 920px) {
    :root {
        --fuuvo-adaptive-gutter: clamp(11px, 3.2vw, 24px);
        --fuuvo-adaptive-gap: clamp(10px, 2.2vw, 18px);
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    body > [data-fuuvo-app-shell="1"],
    body > [data-fuuvo-app-shell="1"] [data-fuuvo-app-workspace="1"],
    body > .creation-app,
    body > .creation-app .creation-workspace {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow: visible !important;
    }

    body > .creation-app {
        display: block !important;
    }

    body > .creation-app .creation-main {
        width: min(1180px, calc(100% - (var(--fuuvo-adaptive-gutter) * 2))) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 22px 0 calc(64px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    body > .creation-app :is(
        .creation-home-shell,
        .creation-category-shell,
        .image-workspace,
        .project-content,
        .works-grid,
        .research-work-grid,
        .learning-layout,
        .analysis-layout
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body > .creation-app :is(
        .creation-home-hero,
        .creation-category-hero,
        .creation-heading,
        .research-home-heading,
        .research-subheading
    ) {
        min-width: 0 !important;
    }

    body > .creation-app :is(h1, h2, h3, p, a, button, label, span, strong, small) {
        overflow-wrap: anywhere;
    }

    body > .creation-app :is(img, video, canvas) {
        max-width: 100%;
    }

    body > .creation-app :is(
        .creation-primary,
        .creation-outline,
        .research-outline,
        .creation-pill,
        .research-source,
        .research-variant,
        .learning-mode,
        .learning-tool,
        .analysis-method
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    body > .creation-app :is(.creation-language, .portal-language, .ui-language-switch) {
        flex: 0 0 auto;
    }

    /* Creation Centre home and subpages. */
    body > #creation-app .creation-home-hero,
    body > #creation-app .creation-category-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    body > #creation-app .creation-home-hero h1,
    body > #creation-app .creation-category-hero h1 {
        max-width: 100%;
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.2 !important;
    }

    body > #creation-app .creation-home-hero p,
    body > #creation-app .creation-category-hero p {
        max-width: 62ch;
        line-height: 1.55 !important;
    }

    body > #creation-app :is(.creation-home-categories, .creation-subpage-categories) {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        padding: 3px 0 6px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    body > #creation-app :is(.creation-home-categories, .creation-subpage-categories)::-webkit-scrollbar {
        display: none;
    }

    body > #creation-app :is(.creation-home-categories, .creation-subpage-categories) > a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;
        padding: 8px 13px !important;
        white-space: nowrap !important;
    }

    body > #creation-app :is(.creation-category-card-grid, .creation-quick-start-grid, .creation-inspiration-grid, .works-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--fuuvo-adaptive-gap) !important;
    }

    body > #creation-app :is(.creation-category-card, .creation-inspiration-card, .work-card) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body > #creation-app .creation-category-card-media,
    body > #creation-app .creation-inspiration-card-media,
    body > #creation-app .work-thumb-wrap {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body > #creation-app :is(.creation-category-card-media img, .creation-inspiration-card-media img, .work-thumb) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    body > #creation-app :is(.creation-category-card-copy, .creation-inspiration-card-copy, .work-card-body) {
        min-width: 0 !important;
        padding: 12px !important;
    }

    body > #creation-app :is(.creation-category-card-label, .creation-inspiration-card-brief, .work-card-title) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden !important;
    }

    body > #creation-app .creation-inspiration-tabs {
        display: flex !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    body > #creation-app .creation-inspiration-tabs::-webkit-scrollbar {
        display: none;
    }

    body > #creation-app .creation-inspiration-tabs > * {
        flex: 0 0 auto;
    }

    body > #creation-app :is(.image-workspace, .project-content) {
        display: block !important;
    }

    body > #creation-app :is(.image-form, .settings-panel, .project-ai-brief-card, .project-result-brief-card) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-top: var(--fuuvo-adaptive-gap) !important;
    }

    body > #creation-app :is(.prompt-box, .research-field, .image-form textarea) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 118px !important;
        line-height: 1.55 !important;
    }

    body > #creation-app :is(.creation-pills, .analysis-pills, .setting-options, .reference-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body > #creation-app :is(.creation-pill, .setting-option) {
        width: 100% !important;
        padding: 9px 10px !important;
    }

    /* Research home, setup and analysis surfaces. */
    body > #research-app .research-home-heading,
    body > #research-app .research-subheading {
        text-align: left !important;
    }

    body > #research-app .research-home-heading h1,
    body > #research-app .research-subheading h1 {
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.2 !important;
    }

    body > #research-app .research-tabs {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        gap: 4px !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }

    body > #research-app .research-tabs::-webkit-scrollbar {
        display: none;
    }

    body > #research-app .research-tabs :is(a, button) {
        flex: 0 0 auto !important;
        min-height: 46px !important;
        padding: 8px 13px !important;
        white-space: nowrap !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--fuuvo-adaptive-gap) !important;
        margin-top: 22px !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-card {
        min-width: 0 !important;
        min-height: 184px !important;
        padding: 18px 13px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-card :is(h2, p) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: auto !important;
        overflow-wrap: anywhere;
    }

    body > #research-app[data-research-page="home"] .research-tool-card h2 {
        margin: 10px 0 6px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-card p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    body > #research-app .research-tool-art {
        width: min(100%, 150px) !important;
        height: 72px !important;
        object-fit: cover !important;
    }

    body > #research-app .research-tool-art-linear,
    body > #research-app .research-tool-art-linear .fuuvo-asset-icon {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
        object-fit: contain !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-art-linear {
        margin: 0 0 6px !important;
    }

    body > #research-app :is(.research-work-grid, .learning-layout, .analysis-layout, .result-research-layout) {
        display: block !important;
        margin-top: 18px !important;
    }

    body > #research-app :is(.research-work-grid > aside, .learning-layout > aside, .analysis-layout > aside, .research-result-side) {
        width: 100% !important;
        margin: 16px 0 0 !important;
        position: static !important;
    }

    body > #research-app :is(.research-panel, .learning-tools, .learning-help-card, .analysis-side, .source-panel, .operation-panel) {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: clamp(14px, 3.6vw, 22px) !important;
    }

    body > #research-app :is(.research-select-row, .research-source-row, .research-variant-row, .learning-mode-row, .learning-tool-row, .analysis-methods) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body > #research-app :is(.research-select, select, input, textarea) {
        max-width: 100% !important;
    }

    body > #research-app .research-source-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body > #research-app .research-source,
    body > #research-app .research-variant,
    body > #research-app .learning-mode,
    body > #research-app .learning-tool,
    body > #research-app .analysis-method {
        width: 100% !important;
        min-height: 48px !important;
        padding: 9px 10px !important;
    }

    body > #research-app .analysis-drop {
        min-height: 142px !important;
        padding: 18px 12px !important;
    }

    body > #research-app :is(.analysis-file, .analysis-finding) {
        min-width: 0 !important;
    }

    body > #research-app :is(.analysis-file-copy, .analysis-finding > span:last-child) {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body > #research-app :is(.analysis-file-copy strong, .analysis-file-copy span) {
        overflow-wrap: anywhere !important;
    }

    body > #research-app :is(.data-preview-table, .analysis-spreadsheet-preview, .table-wrap) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body > #research-app :is(.research-bottom-note, .analysis-note, .research-ai-disclaimer) {
        position: static !important;
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 2px !important;
        line-height: 1.55 !important;
        text-align: left !important;
    }
}

/* Final landing-composer corrections. These selectors intentionally outrank
 * the desktop home stylesheet, which has several later legacy overrides. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        height: clamp(148px, 20vw, 164px) !important;
        min-height: clamp(148px, 20vw, 164px) !important;
        max-height: clamp(148px, 20vw, 164px) !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 17px 15px 64px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        left: 11px !important;
        right: 11px !important;
        bottom: 10px !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .workspace > .fuuvo-ai-disclaimer {
        position: static !important;
        width: 100% !important;
        margin: 22px 0 0 !important;
        padding: 0 2px !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        display: block !important;
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        object-fit: contain !important;
        background: transparent !important;
        background-image: none !important;
        color: currentColor !important;
        overflow: visible !important;
    }
}

@media (max-width: 430px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}

/* The homepage template also ships a more specific mobile composer rule.
 * Match its parent condition so the responsive shell can size itself here. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) {
        height: clamp(148px, 20vw, 164px) !important;
        min-height: clamp(148px, 20vw, 164px) !important;
        max-height: clamp(148px, 20vw, 164px) !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) > #chat-input {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 17px 15px 64px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 11px 10px !important;
        width: auto !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 430px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) {
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
    }
}

@media (min-width: 768px) and (max-width: 920px) {
    body > .creation-app .creation-main {
        padding-top: 26px !important;
    }

    body > #creation-app .creation-home-hero,
    body > #creation-app .creation-category-hero {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
    }

    body > #creation-app :is(.creation-category-card-grid, .creation-quick-start-grid, .creation-inspiration-grid, .works-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body > #research-app[data-research-page="home"] .research-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body > #research-app :is(.research-work-grid, .learning-layout, .analysis-layout) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 34%) !important;
        gap: 16px !important;
    }

    body > #research-app :is(.research-work-grid > aside, .learning-layout > aside, .analysis-layout > aside) {
        margin: 0 !important;
    }

    body > #research-app .research-select-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (min-width: 431px) and (max-width: 767px) {
    body > [data-fuuvo-app-shell="1"] header[data-fuuvo-shared-topbar="1"] {
        min-height: 60px !important;
        height: 60px !important;
    }

    body > #creation-app :is(.creation-category-card-grid, .creation-quick-start-grid, .creation-inspiration-grid, .works-grid),
    body > #research-app[data-research-page="home"] .research-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body > #research-app .research-select-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body > #research-app .research-select-row > label:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    body > [data-fuuvo-app-shell="1"] header[data-fuuvo-shared-topbar="1"] {
        min-height: 56px !important;
        height: 56px !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }

    body > .creation-app .creation-main {
        width: calc(100% - 22px) !important;
        padding-top: 18px !important;
        padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }

    body > #creation-app :is(.creation-category-card-grid, .creation-quick-start-grid, .creation-inspiration-grid, .works-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    body > #creation-app :is(.creation-category-card-media img, .creation-inspiration-card-media img, .work-thumb) {
        aspect-ratio: 16 / 9;
    }

    body > #creation-app :is(.creation-pills, .analysis-pills, .setting-options, .reference-grid),
    body > #research-app .research-source-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body > #research-app .research-select-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body > #research-app .research-select-row > label:last-child {
        grid-column: auto;
    }

    body > #research-app[data-research-page="home"] .research-tool-card {
        min-height: 170px !important;
        padding: 16px 10px !important;
    }
}

/* Home landing composer. Keep the text area, controls and catalogue in a
 * stable vertical flow at every phone width. */
@media (max-width: 920px) {
    body.chat-landing[data-mode="chat"] .mobile-chat-topbar {
        min-height: 60px !important;
        height: 60px !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-logo {
        min-width: 0 !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-logo img,
    body.chat-landing[data-mode="chat"] .mobile-chat-brand-en img {
        max-width: min(104px, 29vw) !important;
        height: 30px !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-actions {
        gap: 4px !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-actions .ui-language-switch {
        min-width: 48px !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-btn {
        min-width: 50px !important;
        padding-inline: 10px !important;
        font-size: 13px !important;
    }

    body.chat-landing[data-mode="chat"] .composer {
        min-height: 0 !important;
        padding: clamp(22px, 7vw, 42px) var(--fuuvo-adaptive-gutter) 30px !important;
    }

    body.chat-landing[data-mode="chat"] .composer-top {
        margin-bottom: clamp(18px, 5vw, 30px) !important;
    }

    body.chat-landing[data-mode="chat"] .composer-title,
    body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan {
        max-width: 100% !important;
        white-space: normal !important;
        font-size: clamp(22px, 6.7vw, 31px) !important;
        letter-spacing: 0 !important;
        line-height: 1.25 !important;
    }

    body.chat-landing[data-mode="chat"] .composer-desc {
        max-width: 42ch !important;
        margin-top: 9px !important;
        font-size: clamp(14px, 3.9vw, 17px) !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-wrap {
        height: clamp(148px, 20vw, 164px) !important;
        min-height: clamp(148px, 20vw, 164px) !important;
        border-radius: 18px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-wrap textarea,
    body.chat-landing[data-mode="chat"] #chat-input {
        height: 100% !important;
        min-height: 0 !important;
        padding: 17px 15px 64px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-hint {
        top: 17px !important;
        left: 15px !important;
        right: 15px !important;
        max-width: calc(100% - 30px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 14px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-tools {
        left: 11px !important;
        right: 11px !important;
        bottom: 10px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 6px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-upload-entry {
        width: 42px !important;
        min-width: 42px !important;
    }

    body.chat-landing[data-mode="chat"] #chat-upload-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-chat-toolbar-btn {
        display: none !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-mode-controls {
        grid-column: 2 !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-model-field,
    body.chat-landing[data-mode="chat"] .ai-chat-model-trigger {
        width: clamp(88px, 31vw, 128px) !important;
        min-width: clamp(88px, 31vw, 128px) !important;
        max-width: clamp(88px, 31vw, 128px) !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-model-trigger {
        padding: 0 6px !important;
        gap: 4px !important;
        font-size: 10px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-model-trigger .ai-chat-model-icon {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        font-size: 7px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-model-trigger > span:nth-child(2) {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-composer-toggles {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 1 auto !important;
        gap: 4px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-composer-toggle {
        width: auto !important;
        min-width: 50px !important;
        max-width: 76px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 6px !important;
        gap: 3px !important;
        border: 1px solid #d6dce5 !important;
        border-radius: 9px !important;
        background: transparent !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-composer-toggle > span {
        display: inline !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-composer-toggle svg {
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 13px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-action-group {
        grid-column: 3 !important;
        margin-left: 0 !important;
        gap: 6px !important;
        justify-content: flex-end !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-action-group .chat-voice-btn,
    body.chat-landing[data-mode="chat"] .chat-input-action-group .send-btn {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    body.chat-landing[data-mode="chat"] .mobile-home-disclaimer,
    body.chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        position: static !important;
        width: 100% !important;
        margin: 22px 0 0 !important;
        padding: 0 2px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* The category catalogue is a responsive grid, with the separators
     * retained between groups. Hidden catalogue items stay out of the grid. */
    body.chat-landing[data-mode="chat"] .composer-capability-shell {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin-top: 18px !important;
        overflow: visible !important;
    }

    body.chat-landing[data-mode="chat"] .composer-capability-bar {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        overflow: visible !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 0 16px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .36) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        display: flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 36px !important;
        margin: 0 0 9px !important;
        padding: 0 13px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(148, 163, 184, .42) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #34445a !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group > h3 svg {
        display: none !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 112px !important;
        grid-template-rows: 66px minmax(0, auto) !important;
        padding: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 6px !important;
        border: 1px solid rgba(148, 163, 184, .3) !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, .7) !important;
        color: #334155 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-shadow: 0 4px 12px rgba(31, 67, 112, .05) !important;
        transform: none !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn[hidden] {
        display: none !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn > span:last-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        flex: 0 0 52px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: transparent !important;
        overflow: visible !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon :is(img, svg, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        object-fit: contain !important;
        background: transparent !important;
    }

    body.chat-landing[data-mode="chat"] .composer-capability-nav {
        display: none !important;
    }
}

@media (max-width: 430px) {
    body.chat-landing[data-mode="chat"] .mobile-chat-topbar {
        min-height: 56px !important;
        height: 56px !important;
    }

    body.chat-landing[data-mode="chat"] .composer {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    body.chat-landing[data-mode="chat"] .composer-title,
    body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan {
        font-size: clamp(21px, 7vw, 27px) !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-wrap {
        height: 148px !important;
        min-height: 148px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-input-tools {
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        gap: 4px !important;
    }

    body.chat-landing[data-mode="chat"] .chat-upload-entry,
    body.chat-landing[data-mode="chat"] #chat-upload-btn {
        width: 36px !important;
        min-width: 36px !important;
    }

    body.chat-landing[data-mode="chat"] #chat-upload-btn,
    body.chat-landing[data-mode="chat"] .chat-input-action-group .chat-voice-btn,
    body.chat-landing[data-mode="chat"] .chat-input-action-group .send-btn {
        height: 36px !important;
        min-height: 36px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-mode-controls {
        gap: 3px !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-model-field,
    body.chat-landing[data-mode="chat"] .ai-chat-model-trigger {
        width: clamp(78px, 29vw, 104px) !important;
        min-width: clamp(78px, 29vw, 104px) !important;
        max-width: clamp(78px, 29vw, 104px) !important;
    }

    body.chat-landing[data-mode="chat"] .ai-chat-composer-toggle {
        min-width: 44px !important;
        max-width: 61px !important;
        padding-inline: 4px !important;
        font-size: 9px !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        gap: 8px !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        min-height: 102px !important;
        grid-template-rows: 58px minmax(0, auto) !important;
        font-size: 11px !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon :is(img, svg, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.chat-landing[data-mode="chat"] *,
    body > .creation-app *,
    body > #research-app * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Dark mode keeps the same geometry while restoring readable contrast. */
@media (max-width: 920px) {
    html body[data-ui-theme="dark"] .home-capability-group > h3,
    html body[data-theme="dark"] .home-capability-group > h3 {
        border-color: rgba(148, 163, 184, .48) !important;
        background: transparent !important;
        color: #e3ebf8 !important;
    }

    html body[data-ui-theme="dark"] .home-capability-group,
    html body[data-theme="dark"] .home-capability-group {
        border-bottom-color: rgba(148, 163, 184, .32) !important;
    }

    html body[data-ui-theme="dark"] .home-capability-group .composer-capability-btn,
    html body[data-theme="dark"] .home-capability-group .composer-capability-btn {
        border-color: rgba(148, 163, 184, .34) !important;
        background: rgba(31, 41, 55, .72) !important;
        color: #e3ebf8 !important;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .2) !important;
    }

    html body[data-ui-theme="dark"] .home-capability-group .composer-capability-btn:is(:hover, :focus-visible, .active),
    html body[data-theme="dark"] .home-capability-group .composer-capability-btn:is(:hover, :focus-visible, .active) {
        border-color: #6589ba !important;
        background: #263850 !important;
        color: #c7ddff !important;
    }

    html body[data-ui-theme="dark"] .ai-chat-composer-toggle,
    html body[data-theme="dark"] .ai-chat-composer-toggle {
        border-color: #4c5d78 !important;
        background: transparent !important;
        color: #dce9ff !important;
    }
}

/* Final landing-composer corrections. These selectors intentionally outrank
 * the desktop home stylesheet, which has several later legacy overrides. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        height: clamp(148px, 20vw, 164px) !important;
        min-height: clamp(148px, 20vw, 164px) !important;
        max-height: clamp(148px, 20vw, 164px) !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 17px 15px 64px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        left: 11px !important;
        right: 11px !important;
        bottom: 10px !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .workspace > .fuuvo-ai-disclaimer {
        position: static !important;
        width: 100% !important;
        margin: 22px 0 0 !important;
        padding: 0 2px !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        display: block !important;
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        object-fit: contain !important;
        background: transparent !important;
        background-image: none !important;
        color: currentColor !important;
        overflow: visible !important;
    }
}

@media (max-width: 430px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}