/* Source: public/static/css/fuuvo-home-mobile-final.css */
/* Final mobile pass for the landing composer. This file is loaded after the
 * legacy mobile passes so the landing page keeps one predictable geometry. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .composer {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 10px !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        position: static !important;
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        height: 42px !important;
        min-height: 42px !important;
        display: flex !important;
        flex: 0 0 75px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #chat-upload-btn,
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #mobile-chat-more-btn {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        flex: 0 0 35px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #mobile-chat-more-btn > span:last-child {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        flex: 1 1 0 !important;
        flex-basis: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 34px !important;
        flex: 0 0 108px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 108px !important;
        padding: 0 7px !important;
        gap: 5px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger > span:nth-child(2) {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 34px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 86px !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 auto !important;
        padding: 0 9px !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle > span {
        display: inline !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    /* Category groups use a two-column thumbnail grid on phones. */
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        display: block !important;
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 15px auto 0 !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        grid-template-rows: auto minmax(0, auto) !important;
        align-content: start !important;
        border-left: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        width: fit-content !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 0 9px !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        min-width: 0 !important;
        min-height: 120px !important;
        height: 120px !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-rows: 78px minmax(0, auto) !important;
        gap: 6px !important;
        border-radius: 13px !important;
        font-size: 11px !important;
        line-height: 15px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon {
        width: 100% !important;
        height: 78px !important;
        min-height: 78px !important;
        border-radius: 11px !important;
        background-size: cover !important;
        background-position: center !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        display: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        background: #202832 !important;
        border-color: #313b4a !important;
        color: #e3ebf8 !important;
    }
}

@media (max-width: 360px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field,
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex-basis: 104px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        min-width: 82px !important;
    }
}

@media (min-width: 600px) and (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

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

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

/* Last-wins mobile contract. Several legacy passes in the landing template
 * still target these nodes, so the stable phone geometry must be declared at
 * the end of the cascade. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        left: 12px !important;
        z-index: 240 !important;
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(148, 166, 195, .62) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .84) !important;
        color: #35465e !important;
        box-shadow: 0 7px 18px rgba(31, 58, 103, .12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger svg {
        width: 21px !important;
        height: 21px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        width: min(86vw, 340px) !important;
        max-width: min(86vw, 340px) !important;
        padding: max(16px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)) !important;
        background: #f7f9fc !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-row {
        min-height: 42px !important;
        padding: 0 44px 0 2px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand {
        min-height: 38px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo img,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo {
        width: auto !important;
        max-width: 92px !important;
        height: 30px !important;
        max-height: 30px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(148, 166, 195, .34) !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #34445c !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 20px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:is(:hover, :focus-visible, .active) {
        border-color: #8fb6ed !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-icon,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child .rail-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph :is(svg, .fuuvo-linear-svg) {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        flex: 0 0 18px !important;
        display: block !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        position: static !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 8px 0 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        border-top: 1px solid rgba(148, 166, 195, .34) !important;
        background: transparent !important;
        color: #52637c !important;
        font-size: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        inset: auto 10px 10px !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 6px !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        flex: 0 0 68px !important;
        gap: 4px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        flex: 0 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field,
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex: 0 0 104px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 88px !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 auto !important;
        padding: 0 9px !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    /* Use the same thumbnail artwork as the desktop capability hover cards.
     * Name-based selectors stay correct when optional cards are hidden. */
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::before,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::after {
        display: none !important;
        content: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-chat"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ask"] .capability-icon { background-image: url('/static/research-demo/research-learning.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="live-search"] .capability-icon { background-image: url('/static/research-demo/research-data.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="translate"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-social-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="deep-research"] .capability-icon { background-image: url('/static/research-demo/research-deep.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-slides"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-presentation-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-spreadsheet"] .capability-icon { background-image: url('/static/analysis-demo/analysis-chart.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-document"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-general-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-generation"] .capability-icon { background-image: url('/static/creation-demo/works-city.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="video-generate"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-concept-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-music"] .capability-icon { background-image: url('/static/creation-demo/wide/voice-music-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-question"] .capability-icon { background-image: url('/static/research-demo/research-learning.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="local-food"] .capability-icon { background-image: url('/static/food-demo/food-result-qing.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="horoscope"] .capability-icon { background-image: url('/static/fortune-demo/zodiac-aries-centered.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
}

@media (max-width: 360px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: 64px minmax(0, 1fr) max-content !important;
        column-gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        flex-basis: 64px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        flex-basis: 29px !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        border-color: #3a4a60 !important;
        background: rgba(28, 38, 52, .92) !important;
        color: #dce6f6 !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .25) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        background: #151a23 !important;
        color: #edf3fc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn {
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        border-top-color: #2d3a4d !important;
        color: #9aabc2 !important;
    }
}

/* Canonical phone pass. Keep the navigation reachable on the landing page,
 * reserve stable tracks for the composer controls, and restore the product
 * thumbnails after the older mobile icon rules. */
.mobile-home-sidebar-trigger {
    display: none !important;
}

@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        left: 12px !important;
        z-index: 240 !important;
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(148, 166, 195, .62) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .84) !important;
        color: #35465e !important;
        box-shadow: 0 7px 18px rgba(31, 58, 103, .12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger svg {
        width: 21px !important;
        height: 21px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        width: min(86vw, 340px) !important;
        max-width: min(86vw, 340px) !important;
        padding: max(16px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)) !important;
        background: #f7f9fc !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-row {
        min-height: 42px !important;
        padding: 0 44px 0 2px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand {
        min-height: 38px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo img,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo {
        width: auto !important;
        max-width: 92px !important;
        height: 30px !important;
        max-height: 30px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(148, 166, 195, .34) !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #34445c !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 20px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        border-color: #8fb6ed !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:is(:hover, :focus-visible, .active) {
        border-color: #b9d2f5 !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-icon,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child .rail-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph :is(svg, .fuuvo-linear-svg) {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        flex: 0 0 18px !important;
        display: block !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        position: static !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 8px 0 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        border-top: 1px solid rgba(148, 166, 195, .34) !important;
        background: transparent !important;
        color: #52637c !important;
        font-size: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    /* The middle controls scroll as one rail; left and right controls never
     * shrink into the scroll area or overlap their labels. */
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        inset: auto 10px 10px !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 6px !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        flex: 0 0 68px !important;
        gap: 4px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        flex: 0 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field,
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex: 0 0 104px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 88px !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 auto !important;
        padding: 0 9px !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::before,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::after {
        display: none !important;
        content: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-chat"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ask"] .capability-icon { background-image: url('/static/research-demo/research-learning.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="live-search"] .capability-icon { background-image: url('/static/research-demo/research-data.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="translate"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-social-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="deep-research"] .capability-icon { background-image: url('/static/research-demo/research-deep.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-slides"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-presentation-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-spreadsheet"] .capability-icon { background-image: url('/static/analysis-demo/analysis-chart.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-document"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-general-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-generation"] .capability-icon { background-image: url('/static/creation-demo/works-city.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="video-generate"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-concept-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-music"] .capability-icon { background-image: url('/static/creation-demo/wide/voice-music-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-question"] .capability-icon { background-image: url('/static/research-demo/research-learning.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="local-food"] .capability-icon { background-image: url('/static/food-demo/food-result-qing.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="horoscope"] .capability-icon { background-image: url('/static/fortune-demo/zodiac-aries-centered.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
}

@media (max-width: 360px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: 64px minmax(0, 1fr) max-content !important;
        column-gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        flex-basis: 64px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        flex-basis: 29px !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        border-color: #3a4a60 !important;
        background: rgba(28, 38, 52, .92) !important;
        color: #dce6f6 !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .25) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        background: #151a23 !important;
        color: #edf3fc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn {
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        border-top-color: #2d3a4d !important;
        color: #9aabc2 !important;
    }
}

html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-chat"] .capability-icon { background-image: linear-gradient(135deg, rgba(39, 90, 185, .48), rgba(116, 79, 207, .48)), url('/static/research-demo/research-deep.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="live-search"] .capability-icon { background-image: linear-gradient(135deg, rgba(18, 138, 175, .46), rgba(41, 99, 207, .46)), url('/static/research-demo/research-data.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="translate"] .capability-icon { background-image: linear-gradient(135deg, rgba(45, 134, 191, .46), rgba(49, 92, 178, .46)), url('/static/research-demo/research-translate.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-slides"] .capability-icon { background-image: linear-gradient(135deg, rgba(22, 143, 117, .46), rgba(30, 100, 193, .46)), url('/static/office-demo/icon-ppt.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-spreadsheet"] .capability-icon { background-image: linear-gradient(135deg, rgba(205, 142, 40, .46), rgba(197, 84, 89, .46)), url('/static/office-demo/icon-table.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-document"] .capability-icon { background-image: linear-gradient(135deg, rgba(45, 156, 128, .46), rgba(61, 92, 188, .46)), url('/static/office-demo/icon-recent-doc.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="image-generation"] .capability-icon { background-image: linear-gradient(135deg, rgba(218, 74, 143, .46), rgba(106, 75, 202, .5)), url('/static/creation-demo/creation-image.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="video-generate"] .capability-icon { background-image: linear-gradient(135deg, rgba(222, 93, 74, .46), rgba(184, 58, 121, .5)), url('/static/creation-demo/creation-video.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-music"] .capability-icon { background-image: linear-gradient(135deg, rgba(194, 89, 185, .46), rgba(83, 93, 194, .5)), url('/static/creation-demo/voice-music.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="image-question"] .capability-icon { background-image: linear-gradient(135deg, rgba(216, 137, 45, .48), rgba(180, 78, 113, .48)), url('/static/research-demo/learning-question.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="local-food"] .capability-icon { background-image: linear-gradient(135deg, rgba(36, 146, 106, .46), rgba(26, 122, 181, .46)), url('/static/food-demo/food-result-hikari.png') !important; }
html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="horoscope"] .capability-icon { background-image: linear-gradient(135deg, rgba(221, 155, 55, .46), rgba(185, 91, 116, .46)), url('/static/fortune-demo/zodiac-aries-centered.png') !important; }

/* Desktop uses the original transparent line icons. The thumbnail artwork is
 * intentionally limited to the mobile card layout. */
@media (min-width: 921px) {
    /* Desktop capability entries use the shared transparent line-icon family;
     * do not let the mobile thumbnail artwork paint a colored square behind it. */
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon] .capability-icon {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon] .capability-icon > :is(
        svg,
        img,
        .fuuvo-icon,
        .home-capability-icon,
        .fuuvo-asset-icon,
        .fuuvo-linear-svg
    ) {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex: 0 0 22px !important;
        object-fit: contain !important;
        transform: none !important;
    }
}

/* These selectors mirror the older :has() rules so the fixed model control
 * cannot collapse when a narrow viewport still has a voice/send group. */
@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)
    .chat-input-tools > .ai-chat-mode-controls {
        flex: 1 1 0 !important;
        flex-basis: 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-tools > .ai-chat-mode-controls > .ai-chat-model-field {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        flex: 0 0 108px !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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        flex: 0 0 108px !important;
    }
}

@media (max-width: 360px) {
    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 > .chat-upload-entry {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        flex-basis: 64px !important;
        gap: 4px !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 > .chat-upload-entry > #chat-upload-btn,
    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 > .chat-upload-entry > #mobile-chat-more-btn {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        flex-basis: 30px !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 > .ai-chat-mode-controls > .ai-chat-model-field,
    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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        flex-basis: 96px !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 > .chat-input-action-group {
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        flex-basis: 76px !important;
        gap: 4px !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 > .chat-input-action-group .chat-voice-btn {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !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 > .chat-input-action-group #chat-send-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        padding: 0 4px !important;
        gap: 3px !important;
        font-size: 11px !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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger .ai-chat-model-icon {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        font-size: 7px !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)
    .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field,
    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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        flex-basis: 100px !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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        font-size: 11px !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 > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger .ai-chat-model-icon {
        display: none !important;
    }
}

/* The legacy mobile sheet uses an ID-qualified selector for the old icon
 * canvas. Match that specificity so the landing cards keep their thumbnails. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: 78px !important;
        min-height: 78px !important;
        flex: 0 0 auto !important;
        display: block !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 11px !important;
        overflow: hidden !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: none !important;
    }
}

@media (min-width: 600px) and (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .composer-capability-btn .capability-icon {
        height: 70px !important;
        min-height: 70px !important;
    }
}

/* Mobile home uses the current brand surface while exposing the catalogue
 * directly. A scrolling document also prevents iOS fixed-bottom taps from
 * competing with browser chrome after the keyboard or visual viewport changes. */
@media (max-width: 920px) {
    html:has(body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home) {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
    }

    html body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    html body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home[data-mode="chat"] .workspace {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home[data-mode="chat"] .fuuvo-mobile-prototype-hero {
        position: static !important;
        inset: auto !important;
        width: min(320px, calc(100% - 48px)) !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 64px auto 18px !important;
        opacity: 1 !important;
    }

    html body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home[data-mode="chat"] .composer {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 0 28px !important;
        overflow: visible !important;
    }

    /* The mobile home uses the compact composer controls. Keep the legacy
     * capability catalogue out of the landing page even if the prototype
     * script is delayed or an older body class survives from a cached shell. */
    html body.chat-landing[data-mode="chat"] :is(
        .composer-capability-shell,
        #home-capability-preview,
        .mobile-home-capabilities,
        .mobile-home-scenes-title,
        #core-feature-slot
    ),
    html body.chat-landing[data-mode="chat"].fuuvo-mobile-site-home :is(
        .composer-capability-shell,
        #home-capability-preview,
        .mobile-home-capabilities,
        .mobile-home-scenes-title,
        #core-feature-slot
    ) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* Final mobile lockup and language controls after every responsive layer. */
@media (max-width: 920px) {
    html body .fuuvo-mobile-prototype-home-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        height: 68px !important;
    }
    html body .fuuvo-mobile-prototype-home-brand > img {
        position: static !important;
        inset: auto !important;
        width: 200px !important;
        height: 68px !important;
        transform: none !important;
    }
    html body .fuuvo-mobile-prototype-home-brand > span {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        line-height: 1 !important;
    }
    html body .fuuvo-mobile-prototype-home-brand:has(> img[data-mobile-brand-locale="zh"]) {
        height: 94px !important;
    }
    html body .fuuvo-mobile-prototype-home-brand:has(> img[data-mobile-brand-locale="zh"]) > img {
        height: 94px !important;
    }
    html body .mobile-chat-actions .ui-language-switch {
        min-height: 50px !important;
    }
    html body .mobile-chat-actions .ui-language-switch .ui-language-switch-btn {
        height: 44px !important;
        min-height: 44px !important;
    }
}

/* Source: public/static/css/fuuvo-home-mobile-override.css */
/* Single last-wins contract for the phone landing page. */

.mobile-home-sidebar-trigger {
    display: none !important;
}

@media (max-width: 920px) {
    html body.fuuvo-mobile-prototype.fuuvo-mobile-prototype-home[data-mode="chat"] .fuuvo-mobile-prototype-hero {
        position: fixed !important;
        top: var(--mobile-chat-hero-center, calc(50dvh - 50px)) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(320px, calc(100vw - 48px)) !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    /* With an empty composer, use the available action row space for the
     * voice-chat label instead of permanently reserving an inactive send
     * button. The send button returns as soon as text is entered. */
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-compose-field .chat-input-wrap:has(#chat-input:placeholder-shown) .chat-input-action-group #chat-send-btn {
        display: none !important;
    }

    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-input-wrap:has(#chat-input:placeholder-shown) .chat-input-action-group .fuuvo-mobile-prototype-call {
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 4px !important;
        padding: 0 !important;
    }

    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-input-wrap:has(#chat-input:placeholder-shown) .chat-input-action-group .fuuvo-mobile-prototype-call > span {
        display: inline-block !important;
        color: var(--mobile-ink) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }
    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        left: 12px !important;
        z-index: 240 !important;
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(148, 166, 195, .62) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .84) !important;
        color: #35465e !important;
        box-shadow: 0 7px 18px rgba(31, 58, 103, .12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger svg {
        width: 21px !important;
        height: 21px !important;
    }

    /* The navigation is an off-canvas drawer on phones. Keep its contents
     * available through the new menu button and preserve the account footer. */
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        width: min(86vw, 340px) !important;
        max-width: min(86vw, 340px) !important;
        padding: max(16px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)) !important;
        background: #f7f9fc !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell {
        display: flex !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-row {
        min-height: 42px !important;
        padding: 0 44px 0 2px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand {
        min-height: 38px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo img,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-brand-logo {
        width: auto !important;
        max-width: 92px !important;
        height: 30px !important;
        max-height: 30px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(148, 166, 195, .34) !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #34445c !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 20px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:is(:hover, :focus-visible, .active) {
        border-color: #8fb6ed !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-icon,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child .rail-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph :is(svg, .fuuvo-linear-svg) {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        flex: 0 0 18px !important;
        display: block !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        position: static !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 8px 0 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        border-top: 1px solid rgba(148, 166, 195, .34) !important;
        background: transparent !important;
        color: #52637c !important;
        font-size: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    /* Upload/more and send stay fixed. The model and option controls form a
     * separate touch rail, so hidden controls can be reached by swiping. */
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        inset: auto 10px 10px !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 6px !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        flex: 0 0 68px !important;
        gap: 4px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        flex: 0 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field,
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex: 0 0 104px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 88px !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 auto !important;
        padding: 0 9px !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    /* Resolve artwork by feature name so optional cards cannot shift images. */
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::before,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::after {
        display: none !important;
        content: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-chat"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ask"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-question"] .capability-icon { background-image: url('/static/research-demo/research-learning.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="live-search"] .capability-icon { background-image: url('/static/research-demo/research-search-overview.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="translate"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-social-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="deep-research"] .capability-icon { background-image: url('/static/research-demo/research-deep.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="writing"] .capability-icon { background-image: url('/static/creation-demo/works-copy.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="office-tasks"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-slides"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-presentation-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="core-upload-analysis"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-spreadsheet"] .capability-icon { background-image: url('/static/analysis-demo/analysis-chart.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="office-efficiency"] .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="work-assistant"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-planning-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-document"] .capability-icon { background-image: url('/static/creation-demo/wide/writing-general-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="image-generation"] .capability-icon { background-image: url('/static/creation-demo/works-city.png') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="video-generate"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-concept-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-music"] .capability-icon { background-image: url('/static/creation-demo/wide/voice-music-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="ai-audio"] .capability-icon { background-image: url('/static/creation-demo/wide/voice-audio-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="edit-image"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-interior-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="animate-photo"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-lifestyle-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="create-poster"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-poster-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="brand-visual"] .capability-icon { background-image: url('/static/creation-demo/wide/inspiration-product-wide-v2.jpg') !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="local-food"] .capability-icon { background-image: url('/static/food-demo/food-result-qing.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > [data-home-icon="horoscope"] .capability-icon { background-image: url('/static/fortune-demo/zodiac-aries-centered.png') !important; background-size: contain !important; background-color: #f4f7fb !important; }
}

@media (max-width: 360px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: 64px minmax(0, 1fr) max-content !important;
        column-gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-upload-entry {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        flex-basis: 64px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > :is(#chat-upload-btn, #mobile-chat-more-btn) {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        flex-basis: 29px !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        border-color: #3a4a60 !important;
        background: rgba(28, 38, 52, .92) !important;
        color: #dce6f6 !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .25) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        background: #151a23 !important;
        color: #edf3fc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn {
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        border-top-color: #2d3a4d !important;
        color: #9aabc2 !important;
    }
}

/* Source: public/static/css/fuuvo-home-mobile-sidebar.css */
/* Final mobile navigation contract for the landing page. The shared drawer
 * is also used by feature workspaces; this file only neutralizes the legacy
 * landing-page compact rail that is loaded later in the home bundle. */
.mobile-home-sidebar-trigger {
    display: none;
}

@media (max-width: 920px) {
    /* Give the landing title and composer a calmer top offset below the
     * mobile header, then separate the category catalogue from the input. */
    html body.chat-landing[data-mode="chat"] .composer {
        padding-top: clamp(34px, 9vw, 52px) !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        margin-top: 30px !important;
    }

    html body.chat-landing[data-mode="chat"] > .app[data-fuuvo-app-shell="1"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"] {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] > .app[data-fuuvo-app-shell="1"]
        > [data-fuuvo-app-workspace="1"] {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        display: inline-flex !important;
        position: static !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(148, 166, 195, .62) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .84) !important;
        color: #35465e !important;
        box-shadow: 0 7px 18px rgba(31, 58, 103, .12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"],
    html body.chat-landing[data-mode="chat"] > .app[data-fuuvo-app-shell="1"] > aside[data-fuuvo-shared-sidebar="1"] {
        inset: 0 auto 0 0 !important;
        width: min(84vw, 348px) !important;
        max-width: min(84vw, 348px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: max(16px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)) !important;
    }

    html body.chat-landing[data-mode="chat"]
        > .app[data-fuuvo-app-shell="1"] > .fuuvo-mobile-sidebar-backdrop {
        inset: 0 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        border-color: #3a4a60 !important;
        background: rgba(28, 38, 52, .92) !important;
        color: #dce6f6 !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .25) !important;
    }

    /* The legacy mobile composer rules clear the artwork from these spans.
     * Restore the same preview subjects used by the desktop capability cards
     * after those rules so the mobile cards remain visual and scannable. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group .composer-capability-btn {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Keep three cards in the viewport and expose the remaining tools through
     * horizontal touch scrolling instead of wrapping them into a second row. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group-actions {
        display: flex !important;
        flex-flow: row nowrap !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
    }

    /* The selector above intentionally carries the model guard for the home
     * composer, so mirror that specificity for the native hidden state used
     * by the mobile accordion. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group-actions[hidden] {
        display: none !important;
    }

    /* Keep each category visually distinct while keeping its heading close to
     * the cards it labels. The rail still scrolls horizontally within a group. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .composer-capability-bar {
        row-gap: 28px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group > h3 {
        margin-bottom: 5px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group .composer-capability-btn {
        min-height: 104px !important;
        height: 104px !important;
        grid-template-rows: 62px minmax(0, auto) !important;
        gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group-actions::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group-actions > .composer-capability-btn {
        flex: 0 0 calc((100% - 16px) / 3) !important;
        width: calc((100% - 16px) / 3) !important;
        min-width: calc((100% - 16px) / 3) !important;
        max-width: calc((100% - 16px) / 3) !important;
        scroll-snap-align: start !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group .composer-capability-btn .capability-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: 62px !important;
        min-height: 62px !important;
        flex: 0 0 auto !important;
        display: block !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border-radius: 11px !important;
        overflow: hidden !important;
    }

    /* Reuse the same artwork as the desktop hover preview. These are plain
     * image surfaces so the mobile cards show the complete preview instead
     * of the old icon crops and colour overlays. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-chat"] .capability-icon {
        background-image: url('/static/research-demo/research-learning.png') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ask"] .capability-icon {
        background-image: url('/static/research-demo/research-learning.png') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="live-search"] .capability-icon {
        background-image: url('/static/research-demo/research-search-overview.png') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="research"] .capability-icon {
        background-image: url('/static/research-demo/research-search-overview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="translate"] .capability-icon {
        background-image: url('/static/research-demo/research-translate-welcome.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="deep-research"] .capability-icon {
        background-image: url('/static/research-demo/research-deep.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-slides"] .capability-icon {
        background-image: url('/static/office-demo/ai-slides-presentation.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-spreadsheet"] .capability-icon {
        background-image: url('/static/office-demo/ai-spreadsheet-expenses.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-document"] .capability-icon {
        background-image: url('/static/creation-demo/wide/writing-general-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="writing"] .capability-icon {
        background-image: url('/static/creation-demo/works-copy.png') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="office-tasks"] .capability-icon {
        background-image: url('/static/creation-demo/wide/writing-presentation-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="core-upload-analysis"] .capability-icon {
        background-image: url('/static/analysis-demo/analysis-chart.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="office-efficiency"] .capability-icon,
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="work-assistant"] .capability-icon {
        background-image: url('/static/creation-demo/wide/writing-planning-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="image-generation"] .capability-icon {
        background-image: url('/static/office-demo/ai-image-creation.jpg') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="video-generate"] .capability-icon {
        background-image: url('/static/creation-demo/create-video-poster.jpg') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-music"] .capability-icon {
        background-image: url('/static/creation-demo/wide/voice-music-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="ai-audio"] .capability-icon {
        background-image: url('/static/creation-demo/wide/voice-audio-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="edit-image"] .capability-icon {
        background-image: url('/static/creation-demo/wide/inspiration-interior-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="animate-photo"] .capability-icon {
        background-image: url('/static/creation-demo/wide/inspiration-lifestyle-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="create-poster"] .capability-icon {
        background-image: url('/static/creation-demo/wide/inspiration-poster-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="brand-visual"] .capability-icon {
        background-image: url('/static/creation-demo/wide/inspiration-product-wide-v2.jpg') !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="image-question"] .capability-icon {
        background-image: url('/static/research-demo/photo-solver-preview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="local-food"] .capability-icon {
        background-image: url('/static/food-demo/local-food-preview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model) .home-capability-group [data-home-icon="horoscope"] .capability-icon {
        background-image: url('/static/fortune-demo/zodiac-aries-centered.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
}

/* Keep the home drawer's final sidebar spacing after the page-level mobile
 * layout sheets have finished loading. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-fuuvo-v2 {
        transform: translateY(-6px) !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        padding-bottom: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] :is(.workspace-recent-panel, .history-main) {
        margin-top: 0 !important;
        padding-top: 4px !important;
        border-top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link {
        bottom: 0 !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        border-top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        min-height: 56px !important;
        padding-top: 2px !important;
        border-top: 0 !important;
    }
}

/* Short desktop windows need the composer to start higher so the input and
 * the capability catalogue remain visible together without scrolling. Keep
 * this limited to the landing page and the compact-height range; normal
 * desktop and phone layouts retain their existing geometry. */
@media (min-width: 921px) and (min-height: 681px) and (max-height: 820px) {
    html body.chat-landing[data-mode="chat"] .composer {
        top: clamp(88px, 13vh, 116px) !important;
        bottom: auto !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-top {
        margin-bottom: 14px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        margin-top: 20px !important;
    }
}

/* Keep every desktop capability entry on the same optical scale. Several
 * older landing passes assign special sizes to office labels and the motion
 * sheet scales only the hovered icon, which makes otherwise identical items
 * appear inconsistent in the catalogue. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn {
        font-size: 12px !important;
        font-weight: 620 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn .capability-icon {
        display: inline-flex !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex: 0 0 28px !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn .capability-icon > :is(
            svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg
        ) {
        display: block !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        object-fit: contain !important;
        transform: none !important;
        stroke-width: 1.65 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn:hover .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn:focus-visible .capability-icon,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions
        > .composer-capability-btn.active .capability-icon {
        transform: none !important;
    }
}

/* Final mobile capability presentation. The sidebar pass above intentionally
 * supplied a dark card surface, but on the landing page that made each
 * category look like a full-width coloured strip and the cover crop hid part
 * of the preview artwork. Keep the rail aligned with the composer and show
 * the complete thumbnail inside each card. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar,
    html body.chat-landing[data-mode="chat"] .home-capability-group {
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn,
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn {
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon {
        height: 56px !important;
        min-height: 56px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: rgba(255, 255, 255, .045) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn {
        min-height: 92px !important;
        height: 92px !important;
        grid-template-rows: 56px minmax(0, auto) !important;
        gap: 4px !important;
        padding: 6px !important;
    }
}

/* Keep the phone cards tied to the desktop hover-preview catalogue even when
 * an older model-picker bundle is cached and the guarded rules above do not
 * match. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="live-search"] .capability-icon {
        background-image: url('/static/research-demo/research-search-overview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="translate"] .capability-icon {
        background-image: url('/static/research-demo/research-translate-welcome.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="research"] .capability-icon {
        background-image: url('/static/research-demo/research-search-overview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-slides"] .capability-icon {
        background-image: url('/static/office-demo/ai-slides-presentation.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-spreadsheet"] .capability-icon {
        background-image: url('/static/office-demo/ai-spreadsheet-expenses.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-document"] .capability-icon {
        background-image: url('/static/creation-demo/wide/writing-general-wide-v2.jpg') !important;
        background-size: cover !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="image-generation"] .capability-icon {
        background-image: url('/static/office-demo/ai-image-creation.jpg') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="video-generate"] .capability-icon {
        background-image: url('/static/creation-demo/create-video-poster.jpg') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="ai-music"] .capability-icon {
        background-image: url('/static/creation-demo/wide/voice-music-wide-v2.jpg') !important;
        background-size: cover !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="image-question"] .capability-icon {
        background-image: url('/static/research-demo/photo-solver-preview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="local-food"] .capability-icon {
        background-image: url('/static/food-demo/local-food-preview.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group [data-home-icon="horoscope"] .capability-icon {
        background-image: url('/static/fortune-demo/zodiac-aries-centered.png') !important;
        background-size: contain !important;
        background-color: #f4f7fb !important;
    }
}

/* Compact sticky home header on phones. Keep the scroll-state controls in
 * the same proportions as the mobile reference: menu on the left, safety
 * icon and segmented language control on the right, with no centre title. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)) !important;
        border-bottom: 1px solid #e2e7ef !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .shell-topbar-left,
    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .shell-topbar-center {
        min-width: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .shell-topbar-center,
    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .workspace-chat-title,
    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] #workspace-chat-subtitle {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .shell-topbar-right {
        grid-column: 3 !important;
        gap: 10px !important;
        justify-content: flex-end !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .workspace-header-link:not(.hidden) {
        width: 24px !important;
        min-width: 24px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 3px !important;
        flex: 0 0 24px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .workspace-header-link:not(.hidden) > img.fuuvo-design-icon {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 8px !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger :is(svg, .fuuvo-design-icon) {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch {
        width: 82px !important;
        min-width: 82px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 2px !important;
        gap: 2px !important;
        border-radius: 10px !important;
    }

    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch .ui-language-switch-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 4px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
        line-height: 34px !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] {
        border-bottom-color: #222c38 !important;
        background: #0d141e !important;
        color: #dbe6f5 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        background: #111d2d !important;
        color: #8fa9c4 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch {
        border-color: #334155 !important;
        background: #172131 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch .ui-language-switch-btn,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch .ui-language-switch-btn {
        color: #a8b7cf !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch .ui-language-switch-btn.active,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .ui-language-switch .ui-language-switch-btn.active {
        border-color: #426b9f !important;
        background: #203a5c !important;
        color: #b8d4ff !important;
        box-shadow: inset 0 0 0 1px rgba(91, 144, 211, .24) !important;
    }
}

/* Final home phone shell pass. The landing page loads this file after the
 * shared sidebar rules, so keep its footer and sticky header contract here. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        position: relative !important;
        padding-bottom: 52px !important;
        align-content: stretch !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .workspace-recent-panel {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 14px 4px 8px !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .workspace-recent-panel .sidebar-section-label {
        flex: 0 0 auto !important;
        margin: 0 5px 6px !important;
        color: #24344d !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .workspace-recent-panel :is(.conversation-list, .task-list, .portal-recent-list) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        align-content: start !important;
        gap: 2px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .workspace-recent-panel :is(.conversation-list, .task-list, .portal-recent-list)::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link {
        position: absolute !important;
        left: 0 !important;
        right: 7px !important;
        bottom: 0 !important;
        z-index: 20 !important;
        width: auto !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        border-top: 1px solid #e1e8f2 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        min-height: 62px !important;
        margin: 0 !important;
        padding: 7px 0 0 !important;
        border-top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-toggle {
        min-height: 46px !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-name,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-chevron {
        display: block !important;
    }

    /* The phone landing header is the mobile-chat-topbar, not the shared
     * workspace header. Keep it opaque while the page scrolls underneath. */
    html body.chat-landing[data-mode="chat"] .mobile-chat-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 240 !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        background-image: none !important;
        border-bottom: 1px solid #e1e8f2 !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        background: #ffffff !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before {
        display: none !important;
        opacity: 0 !important;
        background: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-chat-topbar,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .mobile-chat-topbar {
        background: #111824 !important;
        border-bottom-color: #2d3a4d !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .18) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        background: #080f1c !important;
    }

    /* The landing composer is measured and positioned absolutely on phones so
     * its title, input, and capability catalogue can be centered as one stack.
     * Keep the legal notice anchored to the bottom of that same workspace
     * instead of letting it fall into the first normal-flow slot at the top. */
    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        position: relative !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] > .fuuvo-ai-disclaimer {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        z-index: 12 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 10px max(6px, env(safe-area-inset-bottom)) !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-image: none !important;
    }

    /* Category shelves should stay quiet on mobile. The thumbnail surface on
     * each .capability-icon remains intact, so only the large surrounding
     * blocks lose their accidental panel fill. */
    html body.chat-landing[data-mode="chat"] .composer-capability-shell,
    html body.chat-landing[data-mode="chat"] .composer-capability-bar,
    html body.chat-landing[data-mode="chat"] .home-capability-group {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        border-color: transparent !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-shell,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-bar,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .home-capability-group {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
}

/* Final phone drawer cleanup. The shared sidebar has several historical
 * responsive passes; keep one separator between the main nav and the first
 * accordion group, and render Safety as a normal footer row instead of a
 * white rounded card. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav {
        border-bottom: 1px solid #e1e8f2 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-new-chat,
    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group:first-child {
        border-top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #aebbd0 !important;
    }

    html body.chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link > :is(img.fuuvo-design-icon, .fuuvo-linear-icon) {
        color: #8498b5 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav {
        border-bottom-color: #2d3a4d !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link {
        background: transparent !important;
        color: #aebbd0 !important;
    }
}

/* Only the mobile homepage scrolls as a document. Conversation workspaces
 * retain their fixed viewport and independently scrolling message pane. */
@media (max-width: 920px) {
    html:has(body.chat-landing[data-mode="chat"]:not([data-ai-chat-page="1"]):not(.chat-detail-page):not(.mobile-nav-open, .fuuvo-mobile-sidebar-open, .fuuvo-mobile-tools-open, .mobile-capability-drawer-open)):not(:has(.modal-backdrop.open, .topbar-settings-drawer:not(.hidden), .image-studio-popover.is-mobile-sheet:not(.hidden))),
    html body.chat-landing[data-mode="chat"]:not([data-ai-chat-page="1"]):not(.chat-detail-page):not(.mobile-nav-open, .fuuvo-mobile-sidebar-open, .fuuvo-mobile-tools-open, .mobile-capability-drawer-open):not(:has(.modal-backdrop.open, .topbar-settings-drawer:not(.hidden), .image-studio-popover.is-mobile-sheet:not(.hidden))) {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: manipulation !important;
    }

    html body.chat-landing[data-mode="chat"]:not([data-ai-chat-page="1"]):not(.chat-detail-page):has(#ai-chat-model)
    :is(.app[data-fuuvo-app-shell="1"], .workspace[data-fuuvo-app-workspace="1"]) {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior-y: auto !important;
        touch-action: manipulation !important;
    }
}

/* Keep the phone landing page in normal flow. The desktop centering pass uses
 * an absolute composer, but that makes the footer notice share the wrong
 * containing block when the long mobile catalogue is scrolled. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] .composer {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: calc(100dvh - var(--fuuvo-home-mobile-topbar-height, 58px)) !important;
        max-height: none !important;
        margin: 0 !important;
        padding-bottom: 34px !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] > .fuuvo-ai-disclaimer {
        position: static !important;
        inset: auto !important;
        order: 999 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 7px 10px max(8px, env(safe-area-inset-bottom)) !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-image: none !important;
    }
}

/* One viewport-fixed header owns both sides; reserve its space in the document. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:not([data-ai-chat-page="1"]):not(.chat-detail-page)
        .workspace[data-fuuvo-app-workspace="1"] {
        --fuuvo-home-mobile-topbar-height: calc(58px + env(safe-area-inset-top, 0px));
        padding-top: var(--fuuvo-home-mobile-topbar-height) !important;
    }

    html body.chat-landing[data-mode="chat"]:not([data-ai-chat-page="1"]):not(.chat-detail-page)
        .workspace[data-fuuvo-app-workspace="1"] > header[data-fuuvo-shared-topbar="1"][data-home-mobile-topbar="1"] {
        position: fixed !important;
        inset: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--fuuvo-home-mobile-topbar-height) !important;
        min-height: var(--fuuvo-home-mobile-topbar-height) !important;
        max-height: var(--fuuvo-home-mobile-topbar-height) !important;
        margin: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        z-index: 90 !important;
    }
}