/* Source: public/static/css/fuuvo-home-composer-preview.css */
/*
 * Homepage composer visual preview.
 *
 * This is intentionally loaded after the landing-page bundles. The homepage
 * has a few legacy geometry passes that are useful for mobile and detail
 * routes, but their pale input frame hides the new visual direction. These
 * rules are scoped to the empty landing chat so all existing controls and
 * routes keep their behaviour.
 */

@property --fuuvo-chat-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes fuuvo-chat-border-flow {
    from { --fuuvo-chat-border-angle: 0deg; }
    to { --fuuvo-chat-border-angle: 360deg; }
}

html body.chat-landing[data-mode="chat"] {
    --fuuvo-composer-ink: #1e293b;
    --fuuvo-composer-muted: #6b7a90;
    --fuuvo-composer-line: rgba(115, 139, 180, .28);
    --fuuvo-composer-surface: rgba(255, 255, 255, .98);
    --fuuvo-composer-soft: rgba(248, 251, 255, .92);
}

/* Keep the glow at the top of the page visible while giving the composer a
 * little more breathing room from the background. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .composer {
        width: min(1320px, calc(100% - 80px)) !important;
        max-width: 1320px !important;
        padding-bottom: 24px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field {
        width: min(1220px, 100%) !important;
        max-width: none !important;
    }
}

/* A transparent border lets the padding layer stay crisp while the conic
 * layer continuously travels around the rounded frame. */
html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) {
    position: relative !important;
    isolation: isolate !important;
    border: 2px solid transparent !important;
    border-radius: 25px !important;
    background:
        linear-gradient(var(--fuuvo-composer-surface), var(--fuuvo-composer-surface)) padding-box,
        conic-gradient(
            from var(--fuuvo-chat-border-angle),
            #5f8dff 0deg,
            #ab7cff 68deg,
            #f58bc7 142deg,
            #ffb774 202deg,
            #5bd8d4 270deg,
            #5f8dff 360deg
        ) border-box !important;
    box-shadow:
        0 26px 56px rgba(43, 73, 128, .17),
        0 7px 18px rgba(53, 75, 110, .12),
        0 0 30px rgba(105, 151, 255, .13) !important;
    animation: fuuvo-chat-border-flow 13s linear infinite !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}

html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments)::before {
    opacity: .22 !important;
    filter: blur(16px) saturate(1.14) !important;
}

html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) > #chat-input {
    color: var(--fuuvo-composer-ink) !important;
    caret-color: #4f7df5 !important;
}

html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) > #chat-input::placeholder,
html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) > .chat-input-hint {
    color: #8391a6 !important;
    -webkit-text-fill-color: #8391a6 !important;
}

/* The catalogue follows the prompt frame. The older landing bundle assigns
 * it the default flex order so it can be used as a desktop drawer; on this
 * landing preview it belongs beneath the composer. */
html body.chat-landing[data-mode="chat"] .composer-capability-shell {
    order: 3 !important;
}

/* Make all three routing controls read as one consistent row of pills. */
html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
    pointer-events: none !important;
}

html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools > *,
html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-action-group,
html body.chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-action-group > * {
    pointer-events: auto !important;
}

@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        inset: auto 14px 11px 14px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        grid-template-columns: 44px minmax(0, 1fr) max-content !important;
        grid-template-rows: 46px !important;
        column-gap: 10px !important;
        align-items: center !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) #chat-upload-btn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: #42669f !important;
        transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) #chat-upload-btn:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) #chat-upload-btn:focus-visible {
        border-color: transparent !important;
        background: rgba(238, 245, 255, .7) !important;
        color: #2367c9 !important;
        transform: translateY(-1px) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls {
        left: 68px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        max-width: calc(100% - 224px) !important;
        gap: 8px !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(122, 148, 190, .34) !important;
        border-radius: 999px !important;
        background: rgba(248, 251, 255, .92) !important;
        color: #52637d !important;
        box-shadow: 0 2px 7px rgba(71, 100, 148, .06) !important;
        font-size: 12px !important;
        font-weight: 620 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggles {
        height: 36px !important;
        min-height: 36px !important;
        gap: 8px !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger:focus-visible,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger[aria-expanded="true"],
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle:focus-visible,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle.is-active,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle[aria-pressed="true"] {
        border-color: rgba(74, 124, 220, .64) !important;
        background: #eef5ff !important;
        color: #2168c8 !important;
        box-shadow: 0 4px 12px rgba(67, 121, 218, .13) !important;
        transform: translateY(-1px) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-icon {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
        border-color: #5e86d7 !important;
        color: #386ec9 !important;
        font-size: 8px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group {
        height: 46px !important;
        min-height: 46px !important;
        gap: 8px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .chat-voice-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        border: 1px solid rgba(112, 139, 187, .28) !important;
        border-radius: 50% !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .chat-voice-btn:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .chat-voice-btn:focus-visible {
        border-color: rgba(77, 126, 223, .56) !important;
        background: #eef5ff !important;
        color: #2367c9 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .home-composer-call {
        width: auto !important;
        min-width: 90px !important;
        max-width: 104px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 14px !important;
        border: 1px solid rgba(112, 139, 187, .34) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #f8fbff, #eef4fd) !important;
        color: #36527a !important;
        box-shadow: 0 3px 9px rgba(71, 100, 148, .08) !important;
        font-size: 13px !important;
        font-weight: 650 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .home-composer-call:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .home-composer-call:focus-visible {
        border-color: rgba(77, 126, 223, .58) !important;
        background: #eaf2ff !important;
        color: #2367c9 !important;
        transform: translateY(-1px) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .home-composer-call svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #4d7eff, #3562d3) !important;
        box-shadow: 0 7px 15px rgba(64, 106, 221, .24) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn.is-talk {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 104px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 16px !important;
        gap: 7px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #f8fbff, #eef4fd) !important;
        color: #36527a !important;
        box-shadow: 0 3px 9px rgba(71, 100, 148, .08) !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn.is-talk:hover,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn.is-talk:focus-visible {
        background: #eaf2ff !important;
        color: #2367c9 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn.is-talk svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }
}

/* Keep the four capability columns on a quiet, lightly tinted shelf. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        min-height: 154px !important;
        margin-top: 26px !important;
        padding: 12px 0 8px !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: rgba(248, 251, 255, .34) !important;
        box-shadow: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        padding: 0 16px !important;
        border-left-color: rgba(127, 151, 187, .32) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group:first-child {
        padding-left: 0 !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        display: inline-flex !important;
        width: auto !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #52637d !important;
        font-size: 14px !important;
        font-weight: 640 !important;
        box-shadow: none !important;
        cursor: default !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 > svg {
        display: inline-flex !important;
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        display: flex !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 66px !important;
        height: 66px !important;
        flex: 1 1 0 !important;
        padding: 6px 4px !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        color: #4c5f7c !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn > span:last-child {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn:hover,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn:focus-visible,
    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn.active {
        border-color: rgba(93, 137, 217, .28) !important;
        background: rgba(238, 245, 255, .95) !important;
        color: #2168c8 !important;
    }

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

/* At laptop widths the catalogue stays inside the available workspace. The
 * groups keep their horizontal entry rows, while the smaller type and tighter
 * gutters leave every category visible beside the chat frame. */
@media (min-width: 921px) and (max-width: 1359px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group:first-child {
        padding-left: 0 !important;
    }

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

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

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions > .composer-capability-btn {
        padding-left: 1px !important;
        padding-right: 1px !important;
        font-size: 10px !important;
    }
}

/* Compact gracefully on phones while keeping the same border and pill
 * language. The existing mobile layout still owns the two toolbar rows. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) {
        border-width: 2px !important;
        border-radius: 21px !important;
        box-shadow: 0 18px 36px rgba(43, 73, 128, .14), 0 4px 13px rgba(53, 75, 110, .1) !important;
        animation-duration: 15s !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle {
        border-radius: 999px !important;
        background: rgba(248, 251, 255, .96) !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        border-radius: 20px !important;
        background: rgba(248, 251, 255, .78) !important;
    }
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] {
    --fuuvo-composer-ink: #f3f6fb;
    --fuuvo-composer-muted: #a8b4c6;
    --fuuvo-composer-surface: rgba(31, 35, 42, .98);
    --fuuvo-composer-soft: rgba(41, 48, 60, .94);
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) {
    box-shadow: 0 25px 54px rgba(0, 0, 0, .34), 0 6px 17px rgba(0, 0, 0, .2) !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-shell {
    border-color: rgba(118, 137, 169, .25) !important;
    background: rgba(29, 34, 42, .7) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) {
        animation: none !important;
    }
}

/* Final dark-home polish. This block stays at the end of the stylesheet so
 * the landing page's older responsive passes cannot reintroduce white controls
 * or uneven capability icon sizing. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] header[data-fuuvo-shared-topbar="1"] .desktop-history-toggle {
        display: none !important;
    }

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

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls {
        left: 54px !important;
        gap: 10px !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle {
        margin: 0 !important;
    }
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .chat-voice-btn {
    border-color: rgba(149, 171, 205, .34) !important;
    background: #2a3548 !important;
    color: #d7e2f3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .24) !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .chat-voice-btn:hover,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .chat-voice-btn:focus-visible {
    border-color: rgba(139, 183, 250, .58) !important;
    background: #35445d !important;
    color: #ffffff !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .home-composer-call,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group #chat-send-btn.is-talk {
    border-color: rgba(149, 171, 205, .34) !important;
    background: #2a3548 !important;
    color: #d7e2f3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .24) !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .home-composer-call:hover,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group .home-composer-call:focus-visible,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group #chat-send-btn.is-talk:hover,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments)
    .chat-input-action-group #chat-send-btn.is-talk:focus-visible {
    border-color: rgba(139, 183, 250, .58) !important;
    background: #35445d !important;
    color: #ffffff !important;
}

@media (min-width: 921px) {
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .composer-capability-shell {
        border: 1px solid rgba(121, 145, 182, .2) !important;
        background: rgba(24, 30, 41, .9) !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group {
        border-left-color: rgba(128, 151, 190, .3) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group:first-child {
        border-left: 0 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3 {
        color: #dbe5f4 !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3 > svg {
        color: #8ea6c8 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3:is(:hover, :focus-visible),
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group.is-overflow-open > h3 {
        padding: 0 9px !important;
        border: 1px solid rgba(129, 171, 235, .34) !important;
        border-radius: 8px !important;
        background: rgba(66, 91, 130, .28) !important;
        color: #f1f6ff !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .2) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        border-color: transparent !important;
        background: transparent !important;
        color: #c1cee1 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn:is(:hover, :focus-visible, .active) {
        border-color: rgba(129, 171, 235, .38) !important;
        background: rgba(66, 91, 130, .28) !important;
        color: #f1f6ff !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .2) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-overflow-panel {
        border-color: rgba(121, 145, 182, .34) !important;
        background: #202734 !important;
        color: #e7eef9 !important;
        box-shadow: 0 24px 62px rgba(0, 0, 0, .42) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-overflow-title {
        color: #aebed5 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-overflow-panel .composer-capability-btn:is(:hover, :focus-visible) {
        border-color: rgba(129, 171, 235, .34) !important;
        background: rgba(66, 91, 130, .3) !important;
        color: #ffffff !important;
    }
}

/* All desktop homepage capability icons use the same optical box. The inner
 * artwork is slightly smaller so different SVG path bounds look equally
 * weighted; mobile keeps its existing larger touch artwork. */
@media (min-width: 921px) {
html body.chat-landing[data-mode="chat"] .home-capability-group-actions
    > .composer-capability-btn .capability-icon,
html body.chat-landing[data-mode="chat"] .home-capability-overflow-panel
    .composer-capability-btn .capability-icon {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

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

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    .home-capability-group-actions > .composer-capability-btn .capability-icon,
html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    .home-capability-overflow-panel .composer-capability-btn .capability-icon {
    color: #a9c6f0 !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    .home-capability-group[data-home-capability-group="office"] .capability-icon {
    color: #66c9a4 !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    .home-capability-group[data-home-capability-group="creation"] .capability-icon {
    color: #c69be5 !important;
}

html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
    .home-capability-group[data-home-capability-group="utilities"] .capability-icon {
    color: #e9ae67 !important;
}
}

/* Match the compact dark capability catalogue shown in the reference: one
 * framed shelf, four columns, pill headings, and colored line icons. */
@media (min-width: 921px) {
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .composer-capability-shell {
        min-height: 154px !important;
        margin-top: 22px !important;
        padding: 18px 16px 16px !important;
        border: 1px solid #344152 !important;
        border-radius: 24px !important;
        background: #1c2027 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .composer-capability-bar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 118px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        background: transparent !important;
        overflow: visible !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group {
        display: grid !important;
        min-width: 0 !important;
        min-height: 0 !important;
        grid-template-rows: 34px minmax(0, 1fr) !important;
        gap: 20px !important;
        padding: 0 16px !important;
        border-left: 1px solid #3c4654 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group:first-child {
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group:last-child {
        padding-right: 0 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3 {
        display: inline-flex !important;
        width: fit-content !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 auto !important;
        padding: 0 14px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #3e4a5b !important;
        border-radius: 999px !important;
        background: #20252d !important;
        color: #edf1f7 !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3 > svg {
        display: none !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group > h3:is(:hover, :focus-visible),
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group.is-overflow-open > h3 {
        border-color: #687991 !important;
        background: #29313d !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .24) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions {
        display: grid !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 8px !important;
        align-content: start !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 76px !important;
        height: 76px !important;
        flex: none !important;
        padding: 4px 3px 2px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #edf1f7 !important;
        font-size: 12px !important;
        font-weight: 620 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn > span:last-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        color: inherit !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn:is(:hover, :focus-visible, .active) {
        border-color: rgba(129, 171, 235, .34) !important;
        background: rgba(66, 91, 130, .24) !important;
        color: #ffffff !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .2) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 auto !important;
        flex: 0 0 28px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg) {
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        flex: 0 0 22px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="conversation"] .capability-icon {
        color: #2f8cff !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="office"] .capability-icon {
        color: #15a477 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="creation"] .capability-icon {
        color: #aa59d3 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="utilities"] .capability-icon {
        color: #d8851b !important;
    }
}

/* Keep the empty composer text and controls on one predictable baseline.
 * The legacy landing rules reserve a wide flexible middle grid cell, which
 * makes the upload control look detached from Smart Select. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) > #chat-input {
        padding: 20px 220px 8px 20px !important;
        line-height: 1.5 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) > .chat-input-hint {
        top: 40px !important;
        right: 220px !important;
        left: 20px !important;
        transform: none !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 {
        inset: auto 14px 11px 14px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: grid !important;
        grid-template-columns: 42px max-content minmax(0, 1fr) !important;
        grid-template-rows: 46px !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 2 !important;
        position: static !important;
        inset: auto !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        grid-column: 3 !important;
        align-self: center !important;
        justify-self: end !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
    }
}

/* These three desktop entries use the line-art icon directly. The later
 * mobile thumbnail pass adds demo artwork backgrounds, which should not leak
 * into the compact desktop catalogue. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group
        :is([data-home-icon="ai-chat"], [data-home-icon="ai-slides"], [data-home-icon="image-question"])
        .capability-icon {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
}

/* The Chinese lockup uses a taller 840x395 artwork than the English FUUVO
 * mark. Give it a proportional slot so the mark and slogan share a clean
 * center line without changing the English layout. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan:has(.composer-fuuvo-logo.is-chinese) {
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        gap: 10px !important;
    }

    html body.chat-landing[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        align-self: center !important;
    }

    html body.chat-landing[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese .fuuvo-video-brand {
        aspect-ratio: 840 / 395 !important;
        top: 0 !important;
    }

    /* The GIF is loaded lazily on hover. Once its first frame is ready, reveal
     * it from left to right while the existing GIF frames provide the color
     * motion, matching the English lockup's entry behavior. */
    html body.chat-landing[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: inset(0 100% 0 0) !important;
        animation: fuuvo-chinese-logo-reveal 1200ms cubic-bezier(.2, .8, .2, 1) both !important;
    }
}

@keyframes fuuvo-chinese-logo-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.chat-landing[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: none !important;
        animation: none !important;
    }
}

/* Final desktop composer alignment: the upload control and the three mode
 * controls share one 8px rhythm, while the send action mirrors the voice
 * button instead of switching between a pill and a circle by state. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: 42px max-content minmax(0, 1fr) max-content !important;
        grid-template-rows: 46px !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: start !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

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

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

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

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn,
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border-color: rgba(77, 126, 223, .56) !important;
        background: #eef5ff !important;
        color: #2367c9 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border-color: rgba(139, 183, 250, .58) !important;
        background: #35445d !important;
        color: #ffffff !important;
    }
}

/* Source: public/static/css/fuuvo-home-composer-final.css */
/*
 * Final shared chat composer pass.
 *
 * This file is loaded after the legacy landing and chat-page bundles. The
 * desktop composer has one predictable row: upload, Smart Select, Think
 * deeper, Web search, then the voice/send actions. Mobile keeps its existing
 * two-row touch layout.
 */

/* The mobile landing shortcuts are loaded from a mobile-only stylesheet.
 * Keep them out of the desktop composer when that stylesheet is intentionally
 * skipped by its media attribute; otherwise their inline SVGs fall back to
 * browser defaults and the buttons render as an oversized, unstyled row. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .mobile-home-capabilities,
    html body.chat-landing[data-mode="chat"] .mobile-home-scenes-title,
    html body.chat-landing[data-mode="chat"] .mobile-home-disclaimer {
        display: none !important;
    }
}

/* Keep the active writing capability beside the chat options inside the
 * composer. It uses the same compact control row as deep thinking and web
 * search, while the translation target stays attached to the capability. */
html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active:not(.hidden) {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: min(164px, 100%) !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    order: -1 !important;
    pointer-events: auto !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-pill {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 164px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 1 auto !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border: 1px solid var(--fuuvo-dark-blue-line, #88afe4) !important;
    border-radius: 9px !important;
    background: var(--fuuvo-dark-blue-soft, #eef5ff) !important;
    color: var(--fuuvo-dark-blue, #1e68c8) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-pill > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-pill:hover {
    background: var(--fuuvo-dark-blue-soft-hover, #e3efff) !important;
    color: var(--fuuvo-dark-blue, #1e68c8) !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-target {
    position: relative !important;
    min-width: 0 !important;
    max-width: 132px !important;
    flex: 0 1 auto !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-target-btn {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 132px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
    .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active
    .chat-capability-target-btn > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 920px) {
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
        .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active:not(.hidden) {
        max-width: 96px !important;
        gap: 2px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
        .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active .chat-capability-pill {
        max-width: 96px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 7px !important;
        gap: 4px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
        .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active .chat-capability-target {
        max-width: 104px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input
        .chat-input-tools .ai-chat-composer-toggles > .chat-capability-active .chat-capability-target-btn {
        max-width: 104px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }
}

/* Keep the first optimistic response in the compact conversation layout. The
 * dedicated AI-chat route has a taller empty-state composer, but that height
 * should not cover the message thread after a turn starts. */
html body.chat-detail-open[data-mode="chat"] .composer {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    width: min(960px, calc(100vw - 24px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 5000 !important;
}

html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) {
    position: relative !important;
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    overflow: hidden !important;
}

html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) > #chat-input {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 148px !important;
    padding: 12px 14px 8px !important;
    box-sizing: border-box !important;
}

html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
    position: absolute !important;
    inset: auto 8px 8px !important;
    display: flex !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools
    > :is(.chat-upload-entry, .ai-chat-mode-controls, .chat-input-action-group),
html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools
    > .chat-upload-entry > #chat-upload-btn,
html body.chat-detail-open[data-mode="chat"] #chat-compose-field
    > .chat-input-wrap:not(.has-attachments) .chat-input-tools
    > .chat-input-action-group > :is(.chat-voice-btn, .home-composer-call, #chat-send-btn) {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

@media (min-width: 921px) {
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 14px 11px 14px !important;
        display: grid !important;
        grid-template-columns: 46px max-content minmax(0, 1fr) max-content !important;
        grid-template-rows: 46px !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        align-items: center !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        overflow: visible !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: start !important;
    }

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

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #mobile-chat-more-btn {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        gap: 10px !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools
        > .ai-chat-mode-controls > .ai-chat-model-field {
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools
        > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: max-content !important;
        min-width: 132px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools
        > .ai-chat-mode-controls > .ai-chat-composer-toggles {
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools
        > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 116px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        grid-column: 4 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-self: center !important;
        justify-self: end !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    /* The idle Talk/send state uses the same circular control as the mic. */
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .chat-voice-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        border-radius: 50% !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn
        .chat-send-mode-label {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border-color: rgba(77, 126, 223, .56) !important;
        background: #eef5ff !important;
        color: #2367c9 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn:is(:hover, :focus-visible) {
        border-color: rgba(139, 183, 250, .58) !important;
        background: #35445d !important;
        color: #ffffff !important;
    }

    /* The supplied Chinese wordmark and its GIF share a fixed slot. */
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title.has-fuuvo-slogan:has(.composer-fuuvo-logo.is-chinese) {
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-self: center !important;
        transform: none !important;
    }

    /* Keep the static and hover layers deterministic in detail-open mode too.
     * The older brand stylesheet only scoped these layers to the landing body. */
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo:has(.fuuvo-video-brand)::before,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo:has(.fuuvo-video-brand)::after {
        display: none !important;
        content: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand > img, .fuuvo-video-brand > picture > img {
        grid-area: 1 / 1 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        pointer-events: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-motion {
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 120ms ease, visibility 120ms ease !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-dark {
        display: none !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-light {
        display: none !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-dark {
        display: block !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-fuuvo-video-playing .fuuvo-video-brand-static {
        opacity: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-fuuvo-video-playing .fuuvo-video-brand-motion.is-fuuvo-video-active {
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese .fuuvo-video-brand {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 840 / 395 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* Restarted GIFs are revealed from left to right after the static layer is
     * hidden, matching the English lockup without moving the title row. */
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: inset(0 100% 0 0) !important;
        animation: fuuvo-chinese-logo-reveal 1200ms cubic-bezier(.2, .8, .2, 1) both !important;
    }
}

/* Mobile baseline; the final phone override below wins after legacy rules. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 10px !important;
        display: grid !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 8px !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > * {
        flex: 0 0 auto !important;
    }

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

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

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

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

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

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

/* Mobile landing contract: keep the brand line compact, reserve the action
 * buttons, and let the model/options rail scroll independently. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 8px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        color: inherit !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    html[lang^="en"] body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan {
        font-size: 11px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        flex: 0 0 52px !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan
        .composer-title-logo-link.composer-fuuvo-logo.is-english {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        flex: 0 0 66px !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan
        .composer-title-logo-link .fuuvo-video-brand,
    html body.chat-landing[data-mode="chat"] .composer-title.has-fuuvo-slogan
        .composer-title-logo-link .fuuvo-video-brand > img, .fuuvo-video-brand > picture > img {
        width: 100% !important;
        max-width: 100% !important;
        height: 26px !important;
        max-height: 26px !important;
        object-fit: contain !important;
    }

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

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > * {
        flex: 0 0 auto !important;
    }

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

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

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

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

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

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

/* Restore the compact mobile workspace rail. The shared sidebar and the
 * skills drawer open to its right, so the page keeps one navigation model. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .mobile-home-sidebar-trigger {
        display: none !important;
    }

    html body.chat-landing[data-mode="chat"] > .app[data-fuuvo-app-shell="1"] {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 0 !important;
    }

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

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"] {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 5200 !important;
        display: flex !important;
        width: 72px !important;
        min-width: 72px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: max(8px, env(safe-area-inset-top)) 4px max(10px, env(safe-area-inset-bottom)) !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid rgba(148, 166, 195, .28) !important;
        border-radius: 0 !important;
        background: #f7f9fc !important;
        color: #34445c !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"]
        .home-workspace-rail-stack {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"] .home-rail-logo {
        display: inline-flex !important;
        width: 64px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 0 6px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"]
        .home-rail-logo .home-rail-logo-wordmark {
        display: block !important;
        width: 52px !important;
        max-width: 52px !important;
        max-height: 29px !important;
        object-fit: contain !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"] .home-rail-action {
        display: flex !important;
        width: 64px !important;
        min-width: 64px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        margin: 0 !important;
        padding: 4px 1px 3px !important;
        flex: 0 0 56px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: #52637c !important;
        font-size: 10px !important;
        font-weight: 650 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"]
        .home-rail-action-icon {
        display: inline-flex !important;
        width: 34px !important;
        height: 31px !important;
        min-height: 31px !important;
        flex: 0 0 31px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"]
        .home-rail-action-icon svg {
        display: block !important;
        width: 21px !important;
        height: 21px !important;
    }

    html body.chat-landing[data-mode="chat"] nav[data-fuuvo-workspace-rail="1"]
        .home-rail-action:is(:hover, :focus-visible, .is-active, .is-expanded) {
        background: #eaf2ff !important;
        color: #1769d4 !important;
        outline: none !important;
    }

    html body.chat-landing[data-mode="chat"]
        > .app[data-fuuvo-app-shell="1"] > .home-tool-drawer {
        inset: 0 0 0 72px !important;
        width: calc(100vw - 72px) !important;
        max-width: calc(100vw - 72px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: -8px 0 24px rgba(24, 43, 72, .08) !important;
    }

    html body.mobile-capability-drawer-open.chat-landing[data-mode="chat"]
        > .app[data-fuuvo-app-shell="1"] > .home-tool-drawer {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    html body.chat-landing[data-mode="chat"]
        > .app[data-fuuvo-app-shell="1"] > aside[data-fuuvo-shared-sidebar="1"] {
        inset: 0 0 0 72px !important;
        z-index: 5190 !important;
        width: calc(100vw - 72px) !important;
        max-width: calc(100vw - 72px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: max(14px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)) !important;
        box-shadow: -8px 0 24px rgba(24, 43, 72, .08) !important;
    }

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

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"],
    html body[data-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"] {
        border-right-color: #2d3a4d !important;
        background: #151a23 !important;
        color: #dce6f6 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"] .home-rail-action,
    html body[data-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"] .home-rail-action {
        color: #b7c5d8 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"] .home-rail-action:is(:hover, :focus-visible, .is-active, .is-expanded),
    html body[data-theme="dark"].chat-landing[data-mode="chat"]
        nav[data-fuuvo-workspace-rail="1"] .home-rail-action:is(:hover, :focus-visible, .is-active, .is-expanded) {
        background: #263548 !important;
        color: #b9d7ff !important;
    }
}

@keyframes fuuvo-chinese-logo-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: none !important;
        animation: none !important;
    }
}

/*
 * Detail-state hardening.
 *
 * Once the first message is entered the app removes `chat-landing` and adds
 * `chat-detail-open`. Older detail bundles still contain a centered toolbar,
 * a pill-shaped send action, and an unconstrained wordmark. Keep the same
 * desktop composer geometry for both states by anchoring every control to a
 * single four-column row. The data-mode/has() guard also covers the brief
 * route-transition frame before the body class is updated.
 */
@media (min-width: 921px) {
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) {
        position: relative !important;
        overflow: visible !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 14px 10px 14px !important;
        display: grid !important;
        grid-template-columns: 46px max-content minmax(0, 1fr) max-content !important;
        grid-template-rows: 46px !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        width: auto !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 5 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #chat-upload-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        border: 1px solid rgba(112, 139, 187, .28) !important;
        border-radius: 50% !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #chat-upload-btn svg {
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

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

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .ai-chat-model-field > .ai-chat-model-trigger {
        display: inline-flex !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 132px !important;
        align-items: center !important;
        padding: 0 9px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

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

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

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        display: inline-flex !important;
        width: max-content !important;
        min-width: 116px !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        grid-column: 4 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
        justify-self: end !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    html body[data-mode="chat"]:not([data-ai-chat-page="1"]):has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > :is(.chat-voice-btn, .home-composer-call, #chat-send-btn) {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > #chat-send-btn {
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > .chat-voice-btn {
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > #chat-send-btn .chat-send-mode-label,
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > .home-composer-call > span {
        display: none !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-upload-entry > #chat-upload-btn,
    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > :is(.chat-voice-btn, #chat-send-btn) {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

    /* The wordmark always occupies one fixed slot, so hover never moves the
     * composer. Both language variants use the same outer dimensions. */
    html body[data-mode="chat"]:has(#chat-compose-field) .composer-title.has-fuuvo-slogan {
        display: flex !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        line-height: 1.2 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo {
        display: inline-flex !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 132px !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        overflow: hidden !important;
        transform: none !important;
        animation: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand {
        position: relative !important;
        display: inline-grid !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        align-items: center !important;
        justify-items: center !important;
        transform: none !important;
        animation: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand > img, .fuuvo-video-brand > picture > img {
        grid-area: 1 / 1 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        pointer-events: none !important;
        transition: opacity 120ms ease, visibility 120ms ease !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-motion {
        visibility: hidden !important;
        opacity: 0 !important;
        clip-path: inset(0 100% 0 0) !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-fuuvo-video-playing .fuuvo-video-brand-static {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        visibility: visible !important;
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        animation: fuuvo-composer-logo-reveal 1200ms cubic-bezier(.2, .8, .2, 1) both !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-light {
        display: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-dark {
        display: none !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo .fuuvo-video-brand-static-dark {
        display: block !important;
    }
}

@keyframes fuuvo-composer-logo-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: none !important;
        animation: none !important;
    }
}

/* The upload entry is the first item inside the mode-controls group. Keep
 * that structure explicit so it cannot fall back to a separate grid column
 * and recreate the large upload-to-model gap. */
@media (min-width: 921px) {
    /* The legacy landing inline block still assumes upload is a sibling of
     * mode-controls. Upload now lives inside that group, so override the old
     * second-column/vertical layout at the actual DOM nesting point. */
    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 14px 11px 14px !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
        grid-template-rows: 46px !important;
        width: auto !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        align-items: center !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        column-gap: 10px !important;
        pointer-events: auto !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry {
        grid-column: auto !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: inline-flex !important;
        flex: 0 0 46px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .chat-input-action-group {
        grid-column: 3 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 1 !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 10px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .chat-upload-entry {
        display: inline-flex !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .chat-upload-entry > #chat-upload-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .chat-upload-entry > #chat-upload-btn {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

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

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        grid-column: 3 !important;
    }
}

@media (max-width: 920px) {
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

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

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

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

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .chat-upload-entry > #chat-upload-btn {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

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

/* Idle Talk is a labelled action, so it keeps the rounded capsule shape of
 * the mic control while showing both its waveform icon and the text label. */
@media (min-width: 921px) {
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > #chat-send-btn.is-talk {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 96px !important;
        gap: 7px !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
        box-sizing: border-box !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > #chat-send-btn.is-talk .chat-send-mode-label {
        display: inline-block !important;
        overflow: visible !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > #chat-send-btn.is-talk > svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > .home-composer-call {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 96px !important;
        gap: 7px !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
        > .home-composer-call > span {
        display: inline-block !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

/* Final desktop anchor: the mode-controls group starts immediately after the
 * left inset of the composer. Older rules position it from the center and can
 * also leak the mobile More control into the desktop row. */
@media (min-width: 921px) {
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #mobile-chat-more-btn {
        display: none !important;
    }
}

/* Chinese home lockup: keep the layout slot stable while allowing the
 * supplied 840x395 artwork to render at its natural ratio. Both the static
 * PNG and GIF use this exact layer size, so hover cannot resize or move the
 * composer below it. */
@media (min-width: 921px) {
    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title.has-fuuvo-slogan:has(.composer-fuuvo-logo.is-chinese) {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-items: flex-end !important;
        gap: 8px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 92px !important;
        overflow: visible !important;
        align-self: center !important;
        transform: none !important;
        animation: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese .fuuvo-video-brand {
        position: relative !important;
        display: inline-grid !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;
        top: 2px !important;
        overflow: hidden !important;
        aspect-ratio: 840 / 395 !important;
        transform: none !important;
        animation: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese .fuuvo-video-brand > img, .fuuvo-video-brand > picture > img {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;
        object-fit: fill !important;
        object-position: center !important;
        transform: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese .fuuvo-video-brand-motion {
        visibility: hidden !important;
        opacity: 0 !important;
        clip-path: inset(0 100% 0 0) !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        visibility: visible !important;
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        animation: fuuvo-chinese-logo-reveal-final 1200ms cubic-bezier(.2, .8, .2, 1) both !important;
    }
}

@keyframes fuuvo-chinese-logo-reveal-final {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-mode="chat"]:has(#chat-compose-field)
        .composer-title-logo-link.composer-fuuvo-logo.is-chinese.is-fuuvo-video-playing
        .fuuvo-video-brand-motion.is-fuuvo-video-active {
        clip-path: none !important;
        animation: none !important;
    }
}

/* Keep the send state in the same Talk-button shell. Typing a message should
 * only swap the inner icon; it must not change the button's width, radius, or
 * surface colour. This block is last so older has-text rules cannot override
 * the shared shell. */
@media (min-width: 921px) {
    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 14px 11px 14px !important;
        width: auto !important;
        max-width: none !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls {
        grid-column: 1 !important;
        justify-self: start !important;
        margin-left: 0 !important;
        left: auto !important;
        transform: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field) #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .ai-chat-mode-controls
        > .chat-upload-entry {
        margin-left: 0 !important;
        transform: none !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > #chat-send-btn.has-text {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 96px !important;
        padding: 0 13px !important;
        gap: 7px !important;
        border-radius: 23px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(112, 139, 187, .28) !important;
        background: rgba(245, 249, 255, .86) !important;
        color: #42669f !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > #chat-send-btn.has-text {
        border-color: rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > #chat-send-btn.has-text > svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > #chat-send-btn.has-text:is(:hover, :focus-visible) {
        border-color: rgba(77, 126, 223, .56) !important;
        background: #eef5ff !important;
        color: #2367c9 !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > #chat-send-btn.has-text:is(:hover, :focus-visible) {
        border-color: rgba(139, 183, 250, .58) !important;
        background: #35445d !important;
        color: #ffffff !important;
    }
}

/* Match the upload control to the 36px tool buttons beside it. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry,
    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry > #chat-upload-btn,
    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry > #chat-upload-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        align-self: center !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    html body[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry > #chat-upload-btn svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    /* The landing group has a different baseline from conversation details.
     * Keep its existing nudge on the landing surface only. */
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry,
    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry {
        transform: translateY(8px) !important;
    }

    html body:is(.chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#chat-compose-field)
        #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry {
        transform: none !important;
    }
}

/* Homepage and conversation details share the actual nested upload/model
 * group. Match the legacy selectors' specificity so their former 62px offset
 * and three-column upload placeholder cannot survive a route transition. */
@media (min-width: 921px) {
    html[lang^="en"] body[data-mode="chat"] {
        --fuuvo-chat-model-width: 132px;
    }

    html body:is(.chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        .workspace[data-fuuvo-app-workspace="1"] > .composer:has(#chat-compose-field) {
        left: calc(50% + var(--fuuvo-desktop-navigation-width, var(--fuuvo-workspace-rail-width, 72px)) / 2) !important;
        right: auto !important;
        width: min(1112px, calc(100vw - var(--fuuvo-desktop-navigation-width, var(--fuuvo-workspace-rail-width, 72px)) - 96px)) !important;
        max-width: calc(100% - 48px) !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) {
        width: min(950px, calc(100vw - var(--fuuvo-desktop-navigation-width, var(--fuuvo-workspace-rail-width, 72px)) - 96px)) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
        padding: 0 !important;
        border: 1px solid #e5e8ed !important;
        border-radius: 22px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(35, 48, 68, .04) !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) > #chat-input {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
        margin: 0 !important;
        padding: 20px 20px 8px !important;
        border: 0 !important;
        background: transparent !important;
        color: #202733 !important;
        -webkit-text-fill-color: #202733 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools {
        position: absolute !important;
        inset: auto 14px 11px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-rows: 44px !important;
        align-items: center !important;
        column-gap: 10px !important;
        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls {
        position: static !important;
        inset: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: stretch !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 1 1 auto !important;
        gap: 10px !important;
        margin: 0 !important;
        transform: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

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

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > * {
        flex: 0 0 auto !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry > #chat-upload-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        align-self: center !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: var(--fuuvo-chat-model-width, 112px) !important;
        min-width: var(--fuuvo-chat-model-width, 112px) !important;
        max-width: var(--fuuvo-chat-model-width, 112px) !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 var(--fuuvo-chat-model-width, 112px) !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        inset: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger {
        padding: 0 10px !important;
        gap: 6px !important;
        border: 1px solid #d6dce5 !important;
        border-radius: 9px !important;
        color: #53627c !important;
        font-size: 12px !important;
        background: transparent !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-composer-toggles {
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        gap: 10px !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        position: static !important;
        inset: auto !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .chat-input-action-group {
        position: static !important;
        inset: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-items: center !important;
        justify-self: end !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) {
        background: #303133 !important;
        border-color: #4a4b4e !important;
        box-shadow: 0 17px 42px rgba(0, 0, 0, .32) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) > #chat-input,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger {
        color: #d7e2f3 !important;
        -webkit-text-fill-color: #d7e2f3 !important;
        border-color: #526783 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input :is(#chat-upload-btn, #chat-voice-btn, #chat-send-btn) {
        background: #2a3548 !important;
        color: #d7e2f3 !important;
        -webkit-text-fill-color: #d7e2f3 !important;
        border-color: rgba(149, 171, 205, .34) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        background: #26364d !important;
        color: #c1cee2 !important;
        -webkit-text-fill-color: #c1cee2 !important;
        border-color: #526783 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]):is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-composer-toggles > .ai-chat-composer-toggle:is(.is-active, :hover, :focus-visible) {
        background: #304967 !important;
        color: #dce9ff !important;
        -webkit-text-fill-color: #dce9ff !important;
        border-color: #88a7d8 !important;
    }
}

/* Final phone override: keep fixed actions visible while the middle rail
 * remains swipeable when its controls exceed the viewport. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 10px !important;
        display: grid !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 8px !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls > * {
        flex: 0 0 auto !important;
    }

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

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

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

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

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

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

/* Short desktop viewports need a little more vertical budget for the full
 * capability catalogue. Keep this scoped to the landing chat so detail pages,
 * the mobile composer, and the English layout keep their existing geometry. */
@media (min-width: 921px) and (max-height: 900px) {
    html body.chat-landing[data-mode="chat"] .composer {
        top: 0 !important;
        padding-bottom: 0 !important;
    }

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

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) > #chat-input {
        height: 112px !important;
        min-height: 112px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        min-height: 118px !important;
        height: 118px !important;
        margin-top: 14px !important;
        padding: 4px 0 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        min-height: 110px !important;
        height: 110px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 110px !important;
        height: 110px !important;
        grid-template-rows: 23px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        min-height: 23px !important;
        height: 23px !important;
        font-size: 11px !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 58px !important;
        height: 58px !important;
        padding: 4px 2px !important;
        gap: 4px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    /* The notice is still anchored to the viewport, but its compact footprint
     * no longer sits on top of the final row of capability icons. */
    html body.chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        right: 12px !important;
        bottom: 0 !important;
        left: 12px !important;
        padding: 4px 0 7px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
}

@media (min-width: 921px) and (max-height: 780px) {
    html body.chat-landing[data-mode="chat"] .composer {
        top: 0 !important;
    }

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

    html body.chat-landing[data-mode="chat"] #chat-compose-field
        > .chat-input-wrap:not(.has-attachments) > #chat-input {
        height: 96px !important;
        min-height: 96px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-shell,
    html body.chat-landing[data-mode="chat"] .composer-capability-bar,
    html body.chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 104px !important;
        height: 104px !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 52px !important;
        height: 52px !important;
    }
}

/* The dark reference catalogue has deliberately stronger selectors. Mirror
 * the compact dimensions above at that specificity so short dark screens do
 * not retain the taller 76px cards and 34px headings. */
@media (min-width: 921px) and (max-height: 900px) {
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-shell {
        min-height: 118px !important;
        height: 118px !important;
        margin-top: 14px !important;
        padding: 4px 0 0 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-bar {
        min-height: 110px !important;
        height: 110px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 110px !important;
        height: 110px !important;
        grid-template-rows: 23px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .home-capability-group > h3 {
        height: 23px !important;
        min-height: 23px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 58px !important;
        height: 58px !important;
        padding: 4px 2px !important;
        gap: 4px !important;
        font-size: 10px !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }
}

@media (min-width: 921px) and (max-width: 1120px) and (max-height: 900px) {
    /* At this width the catalogue intentionally wraps to two rows. Let the
     * shelf grow with both rows instead of forcing the four-column height. */
    html body.chat-landing[data-mode="chat"] .composer-capability-shell,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-shell {
        height: auto !important;
        min-height: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .composer-capability-bar {
        height: auto !important;
        min-height: 0 !important;
        row-gap: 8px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group,
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .home-capability-group {
        height: 94px !important;
        min-height: 94px !important;
    }
}

/* Match the ID-qualified mobile rules in the page head so this contract wins
 * over the older two-row composer declarations. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 10px !important;
        display: grid !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 8px !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

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

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

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > * {
        flex: 0 0 auto !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .ai-chat-mode-controls > .chat-upload-entry {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

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

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

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

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

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

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

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

/* Keep the landing composer and its capability catalogue together on short
 * desktop viewports. The measured layout script supplies the final pixel
 * position; these rules only define the scroll boundary and safe fallback. */
@media (min-width: 921px) and (max-height: 860px) {
    html body.chat-landing[data-mode="chat"] .workspace {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
    }

    html body.chat-landing[data-mode="chat"] .composer {
        top: 0 !important;
        bottom: auto !important;
        max-height: calc(100dvh - 96px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
        scrollbar-width: none !important;
        transform: translateX(-50%) !important;
    }

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

    html body.chat-landing[data-mode="chat"] .composer-capability-shell,
    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        z-index: 20 !important;
        padding-top: 4px !important;
        padding-bottom: max(7px, env(safe-area-inset-bottom)) !important;
    }
}

/* At very short heights, make the available scroll area explicit so the
 * centred stack remains reachable without being hidden behind the footer. */
@media (min-width: 921px) and (max-height: 620px) {
    html body.chat-landing[data-mode="chat"] .composer {
        top: 0 !important;
        max-height: calc(100dvh - 82px) !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        background: rgba(255, 255, 255, .92) !important;
        backdrop-filter: blur(6px) !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        background: rgba(26, 27, 30, .92) !important;
    }
}

/* Balance the compact desktop capability shelf: give the category labels a
 * little breathing room from the top edge while removing the unused space
 * beneath the action row. Keep this override desktop-only so the mobile card
 * rail retains its touch-friendly spacing. */
@media (min-width: 1121px) and (max-height: 900px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        box-sizing: border-box !important;
        min-height: 114px !important;
        height: 114px !important;
        padding: 10px 0 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        min-height: 104px !important;
        height: 104px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 104px !important;
        height: 104px !important;
        grid-template-rows: 25px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

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

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 58px !important;
        height: 58px !important;
    }
}

/* Preserve the tighter short-window footprint while applying the same top /
 * bottom balance to the very short desktop layout. */
@media (min-width: 1121px) and (max-height: 780px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        min-height: 104px !important;
        height: 104px !important;
        padding: 8px 0 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        min-height: 96px !important;
        height: 96px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 96px !important;
        height: 96px !important;
        grid-template-rows: 23px minmax(0, 1fr) !important;
        gap: 4px !important;
    }
}

/* The measured layout script centers the complete landing stack using the
 * actual workspace/viewport rectangles. CSS keeps the containing block stable
 * before the first measurement and protects very short windows. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .workspace {
        position: relative !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
    }

    html body.chat-landing[data-mode="chat"] .composer {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        max-height: calc(100dvh - 96px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
        scrollbar-width: none !important;
        transform: translateX(-50%) !important;
    }

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

/* Use the same whole-stack centering on small screens. The composer keeps its
 * existing mobile width and touch controls; only its vertical anchor changes. */
@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"] .workspace {
        position: relative !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
    }

    html body.chat-landing[data-mode="chat"] .composer {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 84px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        transform: translateX(-50%) !important;
    }

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

/* Keep the original catalogue rhythm while centering the complete category
 * contents. Typography and button sizing intentionally match the desktop
 * catalogue; short-window rules above only constrain the available shelf. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group {
        display: grid !important;
        grid-template-rows: 28px minmax(0, 1fr) !important;
        align-content: center !important;
        gap: 9px !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        position: static !important;
        top: auto !important;
        min-height: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 8px !important;
        position: static !important;
        top: auto !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 108px !important;
        height: 108px !important;
        padding: 7px 6px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        line-height: 1.3 !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex-basis: 44px !important;
    }
}

/* Keep the compact shelf usable on short displays without changing the
 * catalogue typography or its three-column rhythm. */
@media (min-width: 921px) and (max-height: 900px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        min-height: 23px !important;
        height: 23px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 58px !important;
        height: 58px !important;
        padding: 4px 2px !important;
        gap: 4px !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        line-height: 1.2 !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }
}

@media (min-width: 921px) and (max-height: 780px) {
    html body.chat-landing[data-mode="chat"] .home-capability-group > h3 {
        min-height: 23px !important;
        height: 23px !important;
    }

    html body.chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        min-height: 52px !important;
        height: 52px !important;
    }
}

/* Final dark-theme typography override: retain the same catalogue scale and
 * weight instead of the legacy compact selectors. */
@media (min-width: 921px) {
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"] .home-capability-group > h3 {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group-actions > .composer-capability-btn {
        font-size: 13px !important;
        font-weight: 550 !important;
    }

    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="office"]
        .composer-capability-btn span[data-home-copy-en="AI Spreadsheet"],
    html body:is([data-ui-theme="dark"], [data-theme="dark"]).chat-landing[data-mode="chat"]
        .home-capability-group[data-home-capability-group="office"]
        .composer-capability-btn span[data-home-copy-en="AI Document"] {
        font-size: 13px !important;
        font-weight: 550 !important;
    }
}

/* Match the visible desktop row to AI Document without resizing buttons,
 * changing the mobile thumbnails or touching the hover preview media. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .composer-capability-bar > .home-capability-group
        > .home-capability-group-actions > .composer-capability-btn > span:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 12px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .composer-capability-bar > .home-capability-group
        > .home-capability-group-actions > .composer-capability-btn > .capability-icon
        > :is(svg, img, .fuuvo-icon, .home-capability-icon, .fuuvo-asset-icon, .fuuvo-linear-svg, .ai-call-mascot-icon) {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        transform: none !important;
    }
}

/* Utilities stay directly visible: three English entries, four Chinese. */
html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group[data-home-capability-group="utilities"] > .home-capability-group-actions:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 8px !important;
}

html[lang="zh-CN"] body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group[data-home-capability-group="utilities"] > .home-capability-group-actions:not([hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group[data-home-capability-group="utilities"]
    .home-capability-group-actions > .composer-capability-btn[hidden] {
    display: none !important;
}

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

@media (min-width: 921px) {
    html[lang="zh-CN"] body.chat-landing[data-mode="chat"] .composer-capability-bar {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .home-capability-group[data-home-capability-group="utilities"]
        .home-capability-group-actions > .composer-capability-btn:not([hidden]) {
        padding-inline: 2px !important;
    }

}

@media (max-width: 920px) {
    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .home-capability-group[data-home-capability-group="utilities"]
        .home-capability-group-actions > .composer-capability-btn:not([hidden]) {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        min-height: 84px !important;
        height: 84px !important;
        padding: 6px 2px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .home-capability-group[data-home-capability-group="utilities"]
        .home-capability-group-actions > .composer-capability-btn .capability-icon {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
        .home-capability-group[data-home-capability-group="utilities"]
        .home-capability-group-actions > .composer-capability-btn > span:last-child {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        font-size: 11px !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }
}

/* Keep the complete mascot head inside the same icon slot as its neighbours. */
html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .home-utility-ai-call,
html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group .home-utility-ai-call:is(:hover, :focus-visible, :active) {
    transform: none !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group [data-ai-call-mascot-host] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group [data-ai-call-mascot-host]::before,
html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .home-capability-group [data-ai-call-mascot-host]::after {
    content: none !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    [data-ai-call-mascot-host] > .ai-call-mascot-icon {
    width: 44px !important;
    height: 44px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    flex: 0 1 44px !important;
    margin: auto !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    [data-ai-call-mascot-host] .ai-call-mascot-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

html body.chat-landing[data-mode="chat"]:has(#ai-chat-model)
    [data-ai-call-mascot-host] .ai-call-mascot-image[hidden] {
    display: none !important;
}

/* One phone control row for the home composer and existing conversations.
 * Match the ID-bearing legacy inline selectors so detail pages cannot fall
 * back to the old three-column More/model/action layout. */
@media (max-width: 920px) {
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 10px !important;
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: stretch !important;
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-mode-controls::-webkit-scrollbar {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools .chat-upload-entry {
        position: sticky !important;
        inset: auto !important;
        left: 0 !important;
        z-index: 2 !important;
        display: inline-flex !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        align-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        margin: 0 !important;
        background: var(--fuuvo-dark-input, var(--panel-strong, #ffffff)) !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-upload-entry > #chat-upload-btn {
        display: inline-flex !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools .chat-upload-entry > #mobile-chat-more-btn {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 108px !important;
        align-self: center !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
        padding: 0 7px !important;
        gap: 5px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 560 !important;
        justify-content: center !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger .ai-chat-model-icon {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles {
        display: inline-flex !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        align-self: center !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle > span {
        display: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles > .ai-chat-composer-toggle > svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger > span:nth-child(2),
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger > svg,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-composer-toggles > .ai-chat-composer-toggle > span,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > #chat-send-btn > .chat-send-mode-label {
        position: static !important;
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: nowrap !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger > svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger > [data-ai-chat-current-label] {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .chat-input-action-group {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > .chat-voice-btn {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools
        :is(#chat-upload-btn, .ai-chat-model-trigger, .ai-chat-composer-toggle, .chat-voice-btn, #chat-send-btn):not(.is-cancelling, .is-hold-active, .is-listening, .is-processing) {
        border: 1px solid var(--fuuvo-dark-line-strong, #d7e0eb) !important;
        background: var(--fuuvo-dark-surface-raised, #f6f9fd) !important;
        color: var(--fuuvo-dark-text, #45617f) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools
        :is(#chat-upload-btn, .ai-chat-model-trigger, .ai-chat-composer-toggle, .chat-voice-btn, #chat-send-btn):not(.is-cancelling, .is-hold-active, .is-listening, .is-processing):is(:focus-visible, .is-active, [aria-expanded="true"]) {
        border-color: var(--fuuvo-dark-blue-line, #88afe4) !important;
        background: var(--fuuvo-dark-blue-soft, #eef5ff) !important;
        color: var(--fuuvo-dark-blue, #1e68c8) !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > #chat-send-btn {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 68px !important;
        padding: 0 8px !important;
        border-radius: 18px !important;
        white-space: nowrap !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments).has-chat-input {
        min-height: 132px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 1px solid var(--fuuvo-dark-line-strong, #d7e0eb) !important;
        border-radius: 20px !important;
        background: var(--fuuvo-dark-input, var(--panel-strong, #ffffff)) !important;
        box-shadow: 0 9px 20px rgba(23, 49, 84, .08) !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments).has-chat-input > #chat-input {
        width: 100% !important;
        min-height: 132px !important;
        height: auto !important;
        max-height: 180px !important;
        field-sizing: content;
        padding: 16px 16px 62px !important;
        border: 0 !important;
        border-radius: 20px !important;
        background: transparent !important;
        color: var(--fuuvo-dark-text, var(--text, #10284c)) !important;
        -webkit-text-fill-color: var(--fuuvo-dark-text, var(--text, #10284c)) !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        resize: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
        #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments).has-chat-input > .chat-input-hint {
        top: 16px !important;
        right: 16px !important;
        left: 16px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Keep all six controls visible on small phones, with a labelled model
     * button and compact option icons. Use the same row on conversation pages. */
    @media (max-width: 480px) {
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .chat-input-action-group {
            gap: 4px !important;
        }

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

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
            padding: 0 5px !important;
            font-size: 11px !important;
            gap: 4px !important;
        }

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .ai-chat-model-trigger > svg {
            width: 14px !important;
            height: 14px !important;
            flex: 0 0 14px !important;
        }

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > #chat-send-btn {
            width: 64px !important;
            min-width: 64px !important;
            max-width: 64px !important;
            flex: 0 0 64px !important;
        }
    }

    @media (max-width: 360px) {
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-composer-toggles,
        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .chat-input-action-group {
            gap: 3px !important;
        }

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

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-tools > .ai-chat-mode-controls > .ai-chat-model-field > .ai-chat-model-trigger {
            padding: 0 3px !important;
            gap: 3px !important;
        }

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > #chat-send-btn {
            width: 34px !important;
            min-width: 34px !important;
            max-width: 34px !important;
            height: 34px !important;
            min-height: 34px !important;
            max-height: 34px !important;
            flex: 0 0 34px !important;
            padding: 0 !important;
            border-radius: 50% !important;
        }

        html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]:has(#ai-chat-model)
            #chat-compose-field.has-chat-input > .chat-input-wrap.has-chat-input .chat-input-action-group > #chat-send-btn > .chat-send-mode-label {
            display: none !important;
        }
    }
}

/* Keep every desktop capability label on one stable type scale. The older
 * button rules above are retained for layout compatibility, but their
 * inherited 13px value must not change individual labels during theme or
 * model-control initialization. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"]
        .composer-capability-bar .home-capability-group-actions > .composer-capability-btn {
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]
        .composer-capability-bar .home-capability-group-actions > .composer-capability-btn > span:last-child {
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
    }
}

/* Keep the desktop composer controls on the same text scale. The send
 * label is injected by the chat runtime and otherwise keeps the legacy 13px
 * size while the model and option labels use 12px. */
@media (min-width: 921px) {
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input .chat-input-tools
        :is(.ai-chat-model-trigger, .ai-chat-composer-toggle, .home-composer-call, .chat-voice-btn, #chat-send-btn) {
        font-size: 12px !important;
        line-height: 12px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field.has-chat-input .chat-input-tools
        :is(.ai-chat-model-trigger > span:nth-child(2), .ai-chat-composer-toggle > span, .home-composer-call > span, .chat-voice-btn > .chat-voice-label, #chat-send-btn > .chat-send-mode-label) {
        font-size: 12px !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
    }
}

/* Desktop navigation drawers must stay above the fixed composer. The composer
 * remains below the modal backdrop, while the open drawer stays above it so
 * its lower rows cannot be hidden or made unclickable by the input box. */
@media (min-width: 921px) {
    html body[data-mode="chat"] > .app[data-fuuvo-app-shell="1"] > .home-drawer-backdrop {
        z-index: 5150 !important;
    }

    html body[data-mode="chat"] > .app[data-fuuvo-app-shell="1"]
        > :is(.home-tool-drawer, aside[data-fuuvo-shared-sidebar="1"]) {
        z-index: 5200 !important;
    }
}

/* Source: public/static/css/fuuvo-home-logo-video.css */
/* Both layers use the supplied clip's canvas and the same letter baseline.
 * The 132x44 layout slot stays fixed while the original moving droplets can
 * extend above it. AI matches the regular O height, not the taller V/F
 * treatment or the droplets. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    :is(.composer-title-logo-link.composer-fuuvo-logo.is-english[data-fuuvo-desktop-motion], .composer-title-ai) {
        flex-shrink: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    .composer-title-ai {
        display: inline-flex !important;
        height: 28px !important;
        align-items: center !important;
        align-self: flex-end !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        white-space: nowrap !important;
        text-shadow: none !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    .composer-title-logo-link.composer-fuuvo-logo.is-english[data-fuuvo-desktop-motion],
    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    .composer-title-logo-link.composer-fuuvo-logo.is-english[data-fuuvo-desktop-motion] .fuuvo-video-brand {
        overflow: visible !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    .composer-title-logo-link.composer-fuuvo-logo.is-english[data-fuuvo-desktop-motion] .fuuvo-video-brand {
        top: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]:has(#chat-compose-field) #composer-title
    .composer-title-logo-link.composer-fuuvo-logo.is-english[data-fuuvo-desktop-motion] .fuuvo-video-brand > img, .fuuvo-video-brand > picture > img {
        position: absolute !important;
        left: 0 !important;
        top: calc(50% - 8px) !important;
        width: 100% !important;
        height: 64px !important;
        object-fit: contain !important;
        transform: translateY(-50%) !important;
        clip-path: none !important;
        animation: none !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        transition: none !important;
    }
}