/* Source: public/static/css/fuuvo-mobile-chat-navigation.css */
/* Mobile chat navigation and capability surface. This file is loaded after
 * the legacy responsive sheets so the phone layout has one clear contract. */

.fuuvo-mobile-tool-groups {
    display: none;
}

/* The phone sidebar is a simple one-column navigation surface. The full
 * capability catalogue opens as its own page from the New Chat action. */
@media (max-width: 920px) {
    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 4px !important;
        padding-bottom: 12px !important;
    }

    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        grid-column: 1 / -1 !important;
        display: flex !important;
        min-height: 50px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        text-align: left !important;
    }

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-text {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open {
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: grid !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f7f9fc !important;
        color: #17243a !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header {
        min-height: calc(72px + env(safe-area-inset-top)) !important;
        padding: max(18px, env(safe-area-inset-top)) 18px 14px !important;
        align-items: center !important;
        border-bottom: 1px solid #e1e8f2 !important;
        background: #f7f9fc !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header > div {
        gap: 4px !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header strong {
        font-size: 20px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header span {
        color: #718198 !important;
        font-size: 12px !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #52637c !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-close:is(:hover, :focus-visible, :active) {
        background: #e7edf6 !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-scroll {
        display: grid !important;
        min-height: 0 !important;
        padding: 12px 14px calc(22px + env(safe-area-inset-bottom)) !important;
        gap: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-scroll::-webkit-scrollbar {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group {
        display: grid !important;
        padding: 2px 0 16px !important;
        gap: 10px !important;
        border-bottom: 1px solid #e1e8f2 !important;
    }

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

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group h2 {
        margin: 0 !important;
        padding: 0 2px !important;
        color: #34445c !important;
        font-size: 16px !important;
        font-weight: 760 !important;
        line-height: 1.35 !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item,
    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item.composer-capability-btn,
    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item.core-feature-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 96px !important;
        min-height: 96px !important;
        padding: 10px 8px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 1px solid #e0e6ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #40516b !important;
        font-size: 13px !important;
        font-weight: 680 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(29, 52, 83, .05) !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item:is(:hover, :focus-visible, :active),
    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item.active {
        border-color: #b9d2f5 !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
        box-shadow: 0 5px 14px rgba(31, 91, 169, .12) !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item .capability-icon {
        display: inline-flex !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        align-items: center !important;
        justify-content: center !important;
        color: #3476d4 !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item .capability-icon :is(svg, .fuuvo-linear-svg, .fuuvo-asset-icon, .home-capability-icon) {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group[data-home-tool-group="office"] .capability-icon {
        color: #20966c !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group[data-home-tool-group="creation"] .capability-icon {
        color: #9854bf !important;
    }

    html body.chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group[data-home-tool-group="utilities"] .capability-icon {
        color: #ba6b20 !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer {
        background: #151a23 !important;
        color: #edf3fc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header {
        border-bottom-color: #2d3a4d !important;
        background: #151a23 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header span,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-header span {
        color: #9aabc2 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group {
        border-bottom-color: #2d3a4d !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group h2,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-group h2 {
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item,
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item {
        border-color: #2d3a4d !important;
        background: #1c2431 !important;
        color: #c7d3e5 !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item:is(:hover, :focus-visible, :active),
    html body[data-theme="dark"].chat-landing[data-mode="chat"].mobile-capability-drawer-open .home-tool-drawer-item:is(:hover, :focus-visible, :active) {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }
}

/* Keep the four primary phone navigation actions stacked after all legacy
 * responsive rules have loaded. */
@media (max-width: 920px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        min-height: 50px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        text-align: left !important;
    }

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

/* Final mobile landing contract: keep the composer above the capability
 * catalogue, then present every category as a collapsible thumbnail grid. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .composer {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 12px calc(26px + env(safe-area-inset-bottom)) !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-top {
        order: 1 !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        text-align: center !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field {
        order: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] :is(.mobile-home-scenes-title, #core-feature-slot, .composer-actions, .work-skill-bar) {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 168px !important;
        min-height: 168px !important;
        max-height: 168px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(147, 166, 196, .7) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .92) !important;
        box-shadow: 0 13px 34px rgba(31, 58, 103, .12) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) > #chat-input {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 168px !important;
        min-height: 168px !important;
        max-height: 168px !important;
        margin: 0 !important;
        padding: 18px 16px 64px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        resize: none !important;
        box-sizing: border-box !important;
        background: transparent !important;
        color: var(--home-ink, #1e2d43) !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
        z-index: 1 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        top: 18px !important;
        right: 16px !important;
        left: 16px !important;
        z-index: 2 !important;
        color: #737f92 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        right: 12px !important;
        bottom: 10px !important;
        left: 12px !important;
        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        z-index: 3 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 20px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border: 1px solid rgba(148, 166, 195, .58) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .72) !important;
        color: #31435e !important;
        font-size: 15px !important;
        font-weight: 720 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: 0 5px 14px rgba(31, 58, 103, .06) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3:is(:hover, :focus-visible),
    html body.chat-landing[data-mode="chat"] .home-capability-group.is-mobile-collapsed > h3 {
        border-color: #8fb6ed !important;
        background: rgba(239, 246, 255, .94) !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 > svg {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
        color: currentColor !important;
        transition: transform .18s ease !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group.is-mobile-collapsed > h3 > svg {
        transform: rotate(-90deg) !important;
    }

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

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

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn {
        display: grid !important;
        grid-template-rows: 92px minmax(0, auto) !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 132px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 7px !important;
        border: 1px solid rgba(148, 166, 195, .58) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .82) !important;
        color: #31435e !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-decoration: none !important;
        overflow: hidden !important;
        box-shadow: 0 5px 14px rgba(31, 58, 103, .06) !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn:is(:hover, :focus-visible, :active),
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn.active {
        border-color: #8fb6ed !important;
        background: #f1f7ff !important;
        color: #1769d4 !important;
        outline: none !important;
        box-shadow: 0 8px 18px rgba(31, 91, 169, .13) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 92px !important;
        min-height: 92px !important;
        flex: none !important;
        border: 0 !important;
        border-radius: 10px !important;
        background-position: center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        color: transparent !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn .capability-icon::after {
        position: absolute !important;
        inset: 0 !important;
        content: "" !important;
        background: linear-gradient(180deg, rgba(13, 28, 48, .03), rgba(13, 28, 48, .4)) !important;
        pointer-events: none !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn > span:last-child {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !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="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 { 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-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-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="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; }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group > h3,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group > h3 {
        border-color: #354358 !important;
        background: rgba(28, 36, 49, .92) !important;
        color: #dce6f6 !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group > h3:is(:hover, :focus-visible),
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group > h3:is(:hover, :focus-visible),
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group.is-mobile-collapsed > h3,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group.is-mobile-collapsed > h3 {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }

    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 {
        border-color: #354358 !important;
        background: #1c2431 !important;
        color: #dce6f6 !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn:is(:hover, :focus-visible, :active),
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn:is(:hover, :focus-visible, :active) {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }
}

@media (max-width: 920px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        width: min(88vw, 380px) !important;
        padding: 14px 12px max(10px, env(safe-area-inset-bottom)) !important;
        background: #f7f9fc !important;
        color: #17243a !important;
        box-shadow: 18px 0 46px rgba(22, 39, 68, .2) !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        padding: 0 4px 64px 0 !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-shell {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-sidebar-close {
        top: 12px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        color: #61718a !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-sidebar-close:active,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-sidebar-close:focus-visible {
        background: #e7edf6 !important;
        outline: none !important;
    }

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

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-chinese .sidebar-brand-logo,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-chinese .sidebar-brand-logo img.sidebar-brand-zh-logo {
        width: 76px !important;
        min-width: 76px !important;
        height: auto !important;
        max-width: 76px !important;
        max-height: 34px !important;
    }

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-search-trigger {
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid #e1e8f2 !important;
        border-radius: 13px !important;
        background: #fff !important;
        color: #64748b !important;
        box-shadow: 0 2px 8px rgba(24, 49, 84, .04) !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-search-trigger-shortcut {
        display: none !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid #e1e8f2 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        width: 100% !important;
        min-height: 62px !important;
        margin: 0 !important;
        padding: 7px 4px !important;
        border: 1px solid transparent !important;
        border-radius: 13px !important;
        background: transparent !important;
        color: #52637c !important;
        font-size: 11px !important;
        font-weight: 650 !important;
    }

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

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

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-glyph {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex: 0 0 22px !important;
        color: currentColor !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn .rail-text {
        color: inherit !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-groups {
        display: grid !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-groups-head {
        display: grid !important;
        gap: 3px !important;
        padding: 0 4px 10px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-groups-head strong {
        color: #1e2d43 !important;
        font-size: 18px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-groups-head span {
        color: #8190a6 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group {
        display: grid !important;
        gap: 7px !important;
        padding: 13px 0 14px !important;
        border-top: 1px solid #e1e8f2 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group h2 {
        margin: 0 !important;
        padding: 0 4px !important;
        color: #34445c !important;
        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a {
        min-width: 0 !important;
        min-height: 74px !important;
        padding: 8px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        color: #56657b !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        transition: background .16s ease, border-color .16s ease, color .16s ease !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a:active,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a:focus-visible,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a:hover {
        border-color: #c9dcfa !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex: 0 0 28px !important;
        color: #3476d4 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-icon svg {
        width: 26px !important;
        height: 26px !important;
        display: block !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group[data-mobile-tool-group="office"] .fuuvo-mobile-tool-icon {
        color: #20966c !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group[data-mobile-tool-group="creation"] .fuuvo-mobile-tool-icon {
        color: #9854bf !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group[data-mobile-tool-group="utilities"] .fuuvo-mobile-tool-icon {
        color: #ba6b20 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .history-main {
        margin: 0 !important;
        padding: 14px 4px 0 !important;
        border-top: 1px solid #e1e8f2 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-safety-link {
        background: #f7f9fc !important;
    }

    /* The home composer uses the same grouped vocabulary as the drawer. */
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 14px 0 0 !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 2px 5px !important;
        border: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        display: grid !important;
        width: min(76vw, 270px) !important;
        min-width: min(76vw, 270px) !important;
        flex: 0 0 min(76vw, 270px) !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        padding: 11px 10px 10px !important;
        border: 1px solid #e2e9f2 !important;
        border-radius: 15px !important;
        background: #f8fafc !important;
        scroll-snap-align: start;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group h3 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 !important;
        color: #33445d !important;
        font-size: 13px !important;
        font-weight: 760 !important;
        line-height: 1.35 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group h3 svg {
        width: 15px !important;
        height: 15px !important;
        color: #8996a8 !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 72px !important;
        height: auto !important;
        padding: 7px 3px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #58677d !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:active,
    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:focus-visible,
    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:hover {
        border-color: #c9dcfa !important;
        background: #edf4ff !important;
        color: #1769d4 !important;
        outline: none !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex: 0 0 28px !important;
        color: #3476d4 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .capability-icon {
        color: #20966c !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .capability-icon {
        color: #9854bf !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .capability-icon {
        color: #ba6b20 !important;
    }

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

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

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

@media (max-width: 430px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        width: min(91vw, 360px) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        width: min(79vw, 252px) !important;
        min-width: min(79vw, 252px) !important;
        flex-basis: min(79vw, 252px) !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"],
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] {
        background: #151a23 !important;
        color: #e8eef8 !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] :is(.sidebar-search-trigger, .fuuvo-mobile-tool-group, .fuuvo-mobile-tool-groups-head, .history-main),
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] :is(.sidebar-search-trigger, .fuuvo-mobile-tool-group, .fuuvo-mobile-tool-groups-head, .history-main) {
        border-color: #2d3a4d !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-search-trigger,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-search-trigger {
        background: #1c2431 !important;
        color: #aebdd2 !important;
    }

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

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

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

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        border-color: #385c8f !important;
        background: #22334d !important;
        color: #a9d0ff !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:is(:hover, :focus-visible, :active),
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:is(:hover, :focus-visible, :active) {
        border-color: #385c8f !important;
        background: #22334d !important;
        color: #a9d0ff !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] :is(.fuuvo-mobile-tool-groups-head strong, .fuuvo-mobile-tool-group h2),
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] :is(.fuuvo-mobile-tool-groups-head strong, .fuuvo-mobile-tool-group h2) {
        color: #e7edf7 !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a {
        color: #becbe0 !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a:is(:hover, :focus-visible, :active),
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-grid > a:is(:hover, :focus-visible, :active) {
        background: #22334d !important;
        border-color: #385c8f !important;
        color: #a9d0ff !important;
    }

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

    html body.chat-landing[data-ui-theme="dark"][data-mode="chat"] .home-capability-group,
    html body.chat-landing[data-theme="dark"][data-mode="chat"] .home-capability-group {
        border-color: #2d3a4d !important;
        background: #1b2431 !important;
    }

    html body.chat-landing[data-ui-theme="dark"][data-mode="chat"] .home-capability-group h3,
    html body.chat-landing[data-theme="dark"][data-mode="chat"] .home-capability-group h3 {
        color: #e7edf7 !important;
    }

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

    html body.chat-landing[data-ui-theme="dark"][data-mode="chat"] .home-capability-group .composer-capability-btn:is(:hover, :focus-visible, :active),
    html body.chat-landing[data-theme="dark"][data-mode="chat"] .home-capability-group .composer-capability-btn:is(:hover, :focus-visible, :active) {
        background: #22334d !important;
        border-color: #385c8f !important;
        color: #a9d0ff !important;
    }
}

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

/* Phone navigation uses compact accordion groups so the drawer stays useful
 * on a small screen without hiding any of the existing destinations. */
@media (max-width: 920px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group {
        display: block !important;
        padding: 0 !important;
        border-top: 1px solid #e1e8f2 !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle {
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #34445c !important;
        font: inherit !important;
        font-size: 14px !important;
        font-weight: 720 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:hover,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:focus-visible,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group.is-open .fuuvo-mobile-tool-group-toggle {
        color: #1769d4 !important;
        outline: none !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        transition: transform .18s ease !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group.is-open .fuuvo-mobile-tool-group-toggle svg {
        transform: rotate(180deg) !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-content {
        padding: 0 0 13px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-content[hidden] {
        display: none !important;
    }

    /* OpenArt-inspired landing layout: the prompt stays first, then every
     * capability category gets its own full-width row of visual cards. */
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 20px 0 0 !important;
        overflow: visible !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group h3 {
        display: flex !important;
        min-height: 27px !important;
        margin: 0 0 10px !important;
        padding: 0 2px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        color: #202b3c !important;
        font-size: 17px !important;
        font-weight: 760 !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group h3 svg {
        width: 17px !important;
        height: 17px !important;
        color: #8c98aa !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 133px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 9px !important;
        grid-template-rows: 88px minmax(0, auto) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 8px !important;
        border: 1px solid #e0e5ed !important;
        border-radius: 16px !important;
        background: #f7f9fc !important;
        color: #25334a !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-shadow: 0 5px 14px rgba(29, 52, 83, .06) !important;
        overflow: hidden !important;
        transform: none !important;
        transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:hover,
    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:focus-visible,
    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn.active {
        border-color: #a9c9f3 !important;
        background: #f4f8ff !important;
        color: #125fb9 !important;
        box-shadow: 0 9px 20px rgba(31, 91, 169, .14) !important;
        outline: none !important;
        transform: translateY(-2px) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 88px !important;
        min-height: 88px !important;
        flex: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #4f8df4, #8f6de8) !important;
        color: #fff !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon::before {
        content: "" !important;
        position: absolute !important;
        inset: -30% -12% 24% 28% !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .2) !important;
        transform: rotate(-16deg) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon::after {
        content: "" !important;
        position: absolute !important;
        right: -22px !important;
        bottom: -30px !important;
        width: 86px !important;
        height: 74px !important;
        border-radius: 50% !important;
        background: rgba(9, 25, 61, .18) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon > :is(svg, .fuuvo-asset-icon, .home-capability-icon, .fuuvo-icon) {
        position: relative !important;
        z-index: 1 !important;
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        color: #fff !important;
        background-color: #fff !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="conversation"] .composer-capability-btn:nth-child(2n) .capability-icon {
        background: linear-gradient(135deg, #13a7b5, #3d73e8) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .capability-icon {
        background: linear-gradient(135deg, #14a67d, #2d7eea) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .composer-capability-btn:nth-child(2n) .capability-icon {
        background: linear-gradient(135deg, #efb33f, #ea6d66) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .capability-icon {
        background: linear-gradient(135deg, #ec6db1, #815ee8) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .composer-capability-btn:nth-child(2n) .capability-icon {
        background: linear-gradient(135deg, #f18b51, #e84f85) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .capability-icon {
        background: linear-gradient(135deg, #eea33b, #d86279) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .composer-capability-btn:nth-child(2n) .capability-icon {
        background: linear-gradient(135deg, #48a977, #1f8dc7) !important;
    }

    /* Reuse the product demo artwork as lightweight thumbnails. The icon
     * remains on top so every card keeps a clear, scannable affordance. */
    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="conversation"] .composer-capability-btn:nth-child(1) .capability-icon {
        background-image: linear-gradient(135deg, rgba(39, 90, 185, .58), rgba(116, 79, 207, .58)), url('/static/research-demo/research-deep.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="conversation"] .composer-capability-btn:nth-child(2) .capability-icon {
        background-image: linear-gradient(135deg, rgba(18, 138, 175, .56), rgba(41, 99, 207, .56)), url('/static/research-demo/research-data.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="conversation"] .composer-capability-btn:nth-child(3) .capability-icon {
        background-image: linear-gradient(135deg, rgba(45, 134, 191, .56), rgba(49, 92, 178, .56)), url('/static/research-demo/research-translate.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .composer-capability-btn:nth-child(1) .capability-icon {
        background-image: linear-gradient(135deg, rgba(22, 143, 117, .56), rgba(30, 100, 193, .56)), url('/static/office-demo/icon-ppt.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .composer-capability-btn:nth-child(2) .capability-icon {
        background-image: linear-gradient(135deg, rgba(205, 142, 40, .56), rgba(197, 84, 89, .56)), url('/static/office-demo/icon-table.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="office"] .composer-capability-btn:nth-child(3) .capability-icon {
        background-image: linear-gradient(135deg, rgba(45, 156, 128, .56), rgba(61, 92, 188, .56)), url('/static/office-demo/icon-recent-doc.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .composer-capability-btn:nth-child(1) .capability-icon {
        background-image: linear-gradient(135deg, rgba(218, 74, 143, .54), rgba(106, 75, 202, .58)), url('/static/creation-demo/creation-image.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .composer-capability-btn:nth-child(2) .capability-icon {
        background-image: linear-gradient(135deg, rgba(222, 93, 74, .54), rgba(184, 58, 121, .58)), url('/static/creation-demo/creation-video.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="creation"] .composer-capability-btn:nth-child(3) .capability-icon {
        background-image: linear-gradient(135deg, rgba(194, 89, 185, .54), rgba(83, 93, 194, .58)), url('/static/creation-demo/voice-music.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .composer-capability-btn:nth-child(1) .capability-icon {
        background-image: linear-gradient(135deg, rgba(216, 137, 45, .58), rgba(180, 78, 113, .58)), url('/static/research-demo/learning-question.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .composer-capability-btn:nth-child(2) .capability-icon {
        background-image: linear-gradient(135deg, rgba(36, 146, 106, .56), rgba(26, 122, 181, .56)), url('/static/food-demo/food-result-hikari.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group[data-home-capability-group="utilities"] .composer-capability-btn:nth-child(3) .capability-icon {
        background-image: linear-gradient(135deg, rgba(221, 155, 55, .56), rgba(185, 91, 116, .56)), url('/static/fortune-demo/zodiac-aries-centered.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

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

    html body.chat-landing[data-mode="chat"] .composer {
        align-items: stretch !important;
        padding: 43px 14px 32px !important;
        background: transparent !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-top,
    html body.chat-landing[data-mode="chat"] #chat-compose-field {
        width: 100% !important;
        max-width: 760px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        max-width: 760px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* Keep the cards legible on narrow devices without introducing a third
     * cramped column. */
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 360px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn {
        min-height: 125px !important;
        grid-template-rows: 80px minmax(0, auto) !important;
        padding: 8px !important;
    }

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

@media (max-width: 920px) {
    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle {
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:hover,
    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:focus-visible,
    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group.is-open .fuuvo-mobile-tool-group-toggle,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:hover,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle:focus-visible,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group.is-open .fuuvo-mobile-tool-group-toggle {
        color: #9fc8ff !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-mobile-tool-group-toggle {
        border-color: #2d3a4d !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group h3,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group h3 {
        color: #edf3fc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group h3 svg,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group h3 svg {
        color: #8da0ba !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 {
        border-color: #313b4a !important;
        background: #202832 !important;
        color: #e3ebf8 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:hover,
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:focus-visible,
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn.active,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:hover,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn:focus-visible,
    html body[data-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group .composer-capability-btn.active {
        border-color: #5279ac !important;
        background: #263548 !important;
        color: #b9d7ff !important;
    }
}

/* Final phone-sidebar override: keep the four actions in one readable list. */
@media (max-width: 920px) {
    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 4px !important;
    }

    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn,
    html body aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav-btn:first-child {
        grid-column: 1 / -1 !important;
        display: flex !important;
        min-height: 50px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        text-align: left !important;
    }

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

/* Final phone drawer sizing: this selector is deliberately more specific
 * than the legacy card rules above, so every small-screen route gets the
 * same compact left-aligned navigation. */
@media (max-width: 920px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav #sidebar-new-chat {
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 10px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav #sidebar-new-chat .rail-icon {
        width: 100% !important;
        gap: 10px !important;
    }

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-english,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-chinese {
        min-height: 40px !important;
        margin-bottom: 12px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-english .sidebar-brand-logo,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-english .sidebar-brand-en-lockup,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-english .sidebar-brand-logo img.sidebar-brand-en-logo {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex-basis: 112px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-chinese .sidebar-brand-logo,
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-chinese .sidebar-brand-logo img.sidebar-brand-zh-logo {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        flex-basis: 66px !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 2px !important;
        padding-bottom: 10px !important;
    }

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

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav #sidebar-new-chat .rail-icon::before {
        content: none !important;
        display: none !important;
    }

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

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-nav.portal-nav .sidebar-nav-btn .rail-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: inherit !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region {
        position: relative !important;
        min-height: 0 !important;
        padding-bottom: 60px !important;
    }

    html body[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;
        min-height: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        border-top: 1px solid rgba(148, 163, 184, .2) !important;
        background: #f7f9fc !important;
    }

    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-account-area {
        flex: 0 0 auto !important;
        min-height: 63px !important;
        background: inherit !important;
    }
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link,
    html body[data-theme="dark"][data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .sidebar-scroll-region .sidebar-safety-link {
        background: #151a23 !important;
        border-top-color: #2d3a4d !important;
    }
}

/* Final mobile drawer alignment. This file loads after the shared sidebar on
 * the home page, so repeat the spacing contract at the winning cascade layer. */
@media (max-width: 920px) {
    html body[data-mode="chat"] aside[data-fuuvo-shared-sidebar="1"] .fuuvo-sidebar-brand.is-fuuvo-v2 {
        transform: translateY(-6px) !important;
    }

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

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

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

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

/* Source: public/static/css/fuuvo-mobile-adaptive.css */
/* Final mobile layout contract for the public home, creation and research pages. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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