/* Source: public/static/css/fuuvo-home-capability-pills.css */
/* Homepage category controls: keep the labels visually consistent with the
 * reference pill row while leaving the capability actions below intact. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell {
        min-height: 146px !important;
        margin-top: 22px !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group {
        min-height: 0 !important;
        padding: 0 10px !important;
        grid-template-rows: 40px minmax(0, 1fr) !important;
        gap: 10px !important;
        border-left: 1px solid #d8e2ef !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group:first-child {
        padding-left: 0 !important;
        border-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: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 auto !important;
        padding: 0 17px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        border: 1px solid #d6e0eb !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .94) !important;
        color: #34445a !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(36, 67, 104, .05) !important;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
    }

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

    html body.chat-landing[data-mode="chat"] .home-capability-group > h3:is(:hover, :focus-visible),
    html body.chat-landing[data-mode="chat"] .home-capability-group.is-overflow-open > h3 {
        border-color: #a9c7eb !important;
        background: #f3f8ff !important;
        color: #1263b8 !important;
        box-shadow: 0 4px 12px rgba(44, 111, 187, .12) !important;
    }

    html body.chat-landing[data-mode="chat"] .home-capability-group-actions {
        align-self: start !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .home-capability-group > h3 {
        border-color: #414650 !important;
        background: rgba(31, 33, 37, .96) !important;
        color: #e2e5ea !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .16) !important;
    }

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

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

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

    /* The row mixes inline SVGs with masked asset spans. Keep their visible
     * artwork on the same 24px canvas instead of letting masked assets fill
     * the 34px icon slot. */
    html body.chat-landing[data-mode="chat"] .home-capability-group .capability-icon > :is(
        svg,
        img,
        .fuuvo-icon,
        .home-capability-icon,
        .fuuvo-asset-icon,
        .fuuvo-linear-svg
    ) {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        flex: 0 0 24px !important;
        object-fit: contain !important;
        transform: none !important;
    }
}

@media (min-width: 921px) and (max-width: 1120px) {
    html body.chat-landing[data-mode="chat"] .composer-capability-shell,
    html body.chat-landing[data-mode="chat"] .composer-capability-bar {
        min-height: 224px !important;
    }

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

/* Source: public/static/css/fuuvo-chat-model-compact.css */
/* Keep model routing compact. Hover reveals the model list, while chat modes
 * stay beside the model trigger instead of inside its dropdown. */
html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-field {
    position: relative !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) .ai-chat-model-panel {
    width: min(276px, calc(100vw - 28px)) !important;
    bottom: calc(100% + 8px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html body[data-mode="chat"] .ai-chat-model-panel-head {
    display: none !important;
}

html body[data-mode="chat"] .ai-chat-model-auto {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 7px !important;
    border: 0 !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option {
    display: grid !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 7px 9px !important;
    grid-template-columns: 28px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    transform: none !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option:hover,
html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option.is-selected {
    border-color: #c8d9f3 !important;
    background: #f3f7ff !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option .ai-chat-model-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
    font-size: 9px !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-copy {
    display: block !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-copy strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-copy small {
    display: none !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-radio {
    position: static !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 1.5px !important;
}

html body[data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option.is-selected .ai-chat-model-radio {
    border-width: 4px !important;
}

html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    flex: 0 1 auto !important;
    gap: 7px !important;
}

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

html body[data-mode="chat"] .ai-chat-composer-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid #d6dce5 !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    color: #536176 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

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

html body[data-mode="chat"] .ai-chat-composer-toggle:hover,
html body[data-mode="chat"] .ai-chat-composer-toggle.is-active,
html body[data-mode="chat"] .ai-chat-composer-toggle:focus-visible {
    border-color: #9cb9e5 !important;
    background: #eef5ff !important;
    color: #1769d1 !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) .ai-chat-mode-controls .ai-chat-composer-toggle {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 10px !important;
        gap: 5px !important;
        border: 1px solid #d6dce5 !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
        color: #536176 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

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

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls .ai-chat-composer-toggle:is(:hover, :focus-visible, .is-active) {
        border-color: #9cb9e5 !important;
        background: #eef5ff !important;
        color: #1769d1 !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls .ai-chat-composer-toggle {
        border-color: #4c5d78 !important;
        background: #27364b !important;
        color: #dce9ff !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls .ai-chat-composer-toggle:is(:hover, :focus-visible, .is-active) {
        border-color: #8eafe1 !important;
        background: #355277 !important;
        color: #ffffff !important;
    }
}

html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-model-panel {
    border-color: #62728b !important;
    background: #202832 !important;
    color: #f4f7fb !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .52) !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option:hover,
html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-model-auto .ai-chat-model-option.is-selected {
    border-color: #7186a5 !important;
    background: #344762 !important;
}

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

html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-composer-toggle:hover,
html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-composer-toggle.is-active,
html body[data-ui-theme="dark"][data-mode="chat"] .ai-chat-composer-toggle:focus-visible {
    border-color: #8eafe1 !important;
    background: #355277 !important;
    color: #ffffff !important;
}

@media (max-width: 920px) {
    html body[data-mode="chat"] .ai-chat-composer-toggles {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        flex: 0 0 52px !important;
        gap: 2px !important;
    }

    html body[data-mode="chat"] .ai-chat-composer-toggle {
        width: 25px !important;
        min-width: 25px !important;
        max-width: 25px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        border-color: transparent !important;
        background: transparent !important;
    }

    html body[data-mode="chat"] .ai-chat-composer-toggle > span {
        display: none !important;
    }
}

/* Final desktop composer geometry. The model-aware detail rules above can
 * otherwise center the model group and let the right action group size from
 * its label, which pushes Talk past the input frame. */
@media (min-width: 921px) {
    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-tools {
        position: absolute !important;
        inset: auto 12px 8px 12px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 132px !important;
        grid-template-rows: 44px !important;
        column-gap: 0 !important;
        align-items: center !important;
        justify-content: initial !important;
        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !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-tools > .chat-upload-entry {
        position: static !important;
        inset: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !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-items: 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: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;
        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) .chat-input-tools > .ai-chat-mode-controls {
        position: absolute !important;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 62px !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100% - 206px) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-items: center !important;
        transform: 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) .chat-input-tools > .chat-input-action-group {
        position: static !important;
        inset: auto !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        flex: 0 0 132px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-end !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-action-group .chat-voice-btn,
    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-action-group .home-composer-call,
    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-action-group #chat-send-btn.is-talk {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 44px !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-action-group .home-composer-call,
    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-action-group #chat-send-btn.is-talk {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        flex-basis: 80px !important;
    }
}

@media (max-width: 720px) {
    html body[data-mode="chat"] .ai-chat-model-panel {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        width: auto !important;
    }
}

/* Keep the picker visible above the mobile composer. The desktop picker keeps
 * its existing absolute placement; this only applies to phone-sized layouts. */
@media (max-width: 920px) {
    html body[data-mode="chat"] .ai-chat-model-panel:not([hidden]) {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        width: auto !important;
        max-height: min(330px, calc(100dvh - 110px)) !important;
        z-index: 10000 !important;
    }
}

/* Keep the desktop composer controls inside the input frame. The landing
 * styles above intentionally reuse the shared toolbar, but its flexible
 * action group can otherwise size itself from the Talk label and extend past
 * the right edge. Use one 44px baseline for upload, model/options and the
 * voice/Talk actions so each control is vertically aligned. */
@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-wrap:not(.has-attachments) .chat-input-tools {
        inset: auto 12px 8px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) max-content !important;
        grid-template-rows: 44px !important;
        align-items: center !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        box-sizing: border-box !important;
    }

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

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .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;
        margin: 0 !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .ai-chat-mode-controls {
        left: 62px !important;
        right: auto !important;
        bottom: 0 !important;
        top: auto !important;
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100% - 206px) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-items: center !important;
        transform: none !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .ai-chat-model-field,
    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .chat-input-action-group {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: max-content !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) .chat-input-action-group
    .chat-voice-btn.is-hold-to-talk {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 44px !important;
    }

    html body:is(.chat-landing, .chat-detail-page, .chat-detail-open)[data-mode="chat"]
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments) #chat-send-btn.is-talk {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 80px !important;
        box-sizing: border-box !important;
    }
}

/* Keep the three landing composer controls in one outlined, transparent
 * resting state. Only an opened model menu or an enabled toggle gets a fill. */
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,
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 {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border: 1px solid #d6dce5 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #536176 !important;
    box-shadow: 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 .ai-chat-model-field > .ai-chat-model-trigger:is(:hover, :focus-visible):not([aria-expanded="true"]),
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:is(:hover, :focus-visible):not(.is-active):not([aria-pressed="true"]) {
    border-color: #9cb9e5 !important;
    background: transparent !important;
    color: #1769d1 !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[aria-expanded="true"],
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:is(.is-active, [aria-pressed="true"]) {
    border-color: #9cb9e5 !important;
    background: #eef5ff !important;
    color: #1769d1 !important;
}

html body[data-ui-theme="dark"].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,
html body[data-ui-theme="dark"].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 {
    border-color: #4c5d78 !important;
    background: transparent !important;
    color: #c6d0de !important;
}

html body[data-ui-theme="dark"].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:is(:hover, :focus-visible):not([aria-expanded="true"]),
html body[data-ui-theme="dark"].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:is(:hover, :focus-visible):not(.is-active):not([aria-pressed="true"]) {
    border-color: #8eafe1 !important;
    background: transparent !important;
    color: #dce9ff !important;
}

html body[data-ui-theme="dark"].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[aria-expanded="true"],
html body[data-ui-theme="dark"].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:is(.is-active, [aria-pressed="true"]) {
    border-color: #8eafe1 !important;
    background: #355277 !important;
    color: #ffffff !important;
}

@media (max-width: 920px) {
    /* The toolbar itself is a non-interactive positioning shell on some
     * landing layouts. Explicitly restore touch hit testing for the model
     * picker and its sibling controls on compact screens. */
    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-field,
    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-trigger,
    html body[data-mode="chat"] #chat-compose-field .ai-chat-composer-toggles,
    html body[data-mode="chat"] #chat-compose-field .ai-chat-composer-toggle,
    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-panel {
        pointer-events: auto !important;
    }

    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-field {
        position: relative !important;
        z-index: 4 !important;
    }

    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-trigger {
        position: relative !important;
        z-index: 5 !important;
    }

    html body[data-mode="chat"] #chat-compose-field .ai-chat-model-trigger,
    html body[data-mode="chat"] #chat-compose-field .ai-chat-composer-toggle {
        touch-action: manipulation !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 {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 7px !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 {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
    }
}

/* Source: public/static/css/fuuvo-home-spotlight.css */
/*
 * Landing spotlight.
 * The colour variables are assigned by applyLandingInputGlow() so a reload
 * can select a different vivid palette without changing the page structure.
 */
html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    background-image:
        radial-gradient(ellipse 78% 52% at 50% -3%, var(--home-bg-glow-a, rgba(60, 166, 255, .22)), transparent 72%),
        radial-gradient(ellipse 52% 39% at 50% 1%, var(--home-bg-glow-b, rgba(164, 92, 255, .17)), transparent 74%),
        radial-gradient(ellipse 96% 48% at 50% 1%, var(--home-bg-glow-c, rgba(42, 225, 205, .12)), transparent 80%) !important;
}

html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -5% -12% 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse 55% 38% at 50% -2%, var(--home-bg-glow-a, rgba(60, 166, 255, .22)), transparent 68%),
        radial-gradient(ellipse 38% 31% at 54% 1%, var(--home-bg-glow-b, rgba(164, 92, 255, .17)), transparent 71%),
        radial-gradient(ellipse 70% 44% at 46% 0%, var(--home-bg-glow-c, rgba(42, 225, 205, .12)), transparent 76%) !important;
    filter: blur(30px) saturate(1.28) !important;
    opacity: .94 !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .94) 26%, rgba(0, 0, 0, .44) 66%, transparent 98%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .94) 26%, rgba(0, 0, 0, .44) 66%, transparent 98%) !important;
}

html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -8% !important;
    left: -10% !important;
    right: -10% !important;
    height: min(62vh, 620px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse 46% 66% at 50% 0%, var(--home-bg-glow-a, rgba(60, 166, 255, .22)), transparent 68%),
        radial-gradient(ellipse 31% 52% at 48% 0%, var(--home-bg-glow-b, rgba(164, 92, 255, .17)), transparent 73%) !important;
    filter: blur(22px) saturate(1.18) !important;
    opacity: .48 !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 56%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 56%, transparent 100%) !important;
}

html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] > * {
    position: relative !important;
    z-index: 1 !important;
}

html body:is(.chat-landing)[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) {
    position: relative !important;
    isolation: isolate !important;
    box-shadow:
        0 0 26px var(--home-glow-shadow-a, rgba(60, 166, 255, .22)),
        0 0 62px var(--home-glow-shadow-b, rgba(164, 92, 255, .16)),
        0 12px 34px rgba(9, 16, 31, .16) !important;
}

html body:is(.chat-landing)[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
        radial-gradient(ellipse 74% 92% at 12% 16%, var(--home-glow-a, rgba(60, 166, 255, .34)), transparent 68%),
        radial-gradient(ellipse 70% 88% at 88% 16%, var(--home-glow-b, rgba(164, 92, 255, .26)), transparent 70%),
        radial-gradient(ellipse 78% 96% at 50% 104%, var(--home-glow-c, rgba(42, 225, 205, .18)), transparent 72%) !important;
    filter: blur(14px) saturate(1.16) !important;
    opacity: .52 !important;
}

html body:is(.chat-landing)[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) > :is(#chat-input, .chat-input-hint, .chat-input-tools, .chat-attachment-bar) {
    position: relative !important;
    z-index: 1 !important;
}

html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
    background-color: #1a1b1e !important;
    background-image:
        radial-gradient(ellipse 78% 52% at 50% -3%, var(--home-bg-glow-a, rgba(60, 166, 255, .28)), transparent 72%),
        radial-gradient(ellipse 52% 39% at 50% 1%, var(--home-bg-glow-b, rgba(164, 92, 255, .22)), transparent 74%),
        radial-gradient(ellipse 96% 48% at 50% 1%, var(--home-bg-glow-c, rgba(42, 225, 205, .15)), transparent 80%) !important;
}

html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before {
    opacity: 1 !important;
    filter: blur(32px) saturate(1.36) !important;
}

html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::after {
    opacity: .62 !important;
    filter: blur(24px) saturate(1.26) !important;
}

html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) {
    box-shadow:
        0 0 28px var(--home-glow-shadow-a, rgba(60, 166, 255, .22)),
        0 0 68px var(--home-glow-shadow-b, rgba(164, 92, 255, .16)),
        0 17px 42px rgba(0, 0, 0, .32) !important;
}

@media (max-width: 920px) {
    html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        background-image:
            radial-gradient(ellipse 88% 38% at 50% -2%, var(--home-bg-glow-a, rgba(60, 166, 255, .19)), transparent 72%),
            radial-gradient(ellipse 62% 31% at 50% 0%, var(--home-bg-glow-b, rgba(164, 92, 255, .14)), transparent 74%),
            radial-gradient(ellipse 110% 38% at 50% 0%, var(--home-bg-glow-c, rgba(42, 225, 205, .10)), transparent 82%) !important;
    }

    html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before {
        inset: -4% -20% 0 !important;
        filter: blur(22px) saturate(1.22) !important;
        opacity: .86 !important;
    }

    html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::after {
        top: -6% !important;
        left: -24% !important;
        right: -24% !important;
        height: min(54vh, 470px) !important;
        filter: blur(18px) saturate(1.14) !important;
        opacity: .38 !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before {
        opacity: .92 !important;
    }

    html body[data-ui-theme="dark"]:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::after {
        opacity: .5 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::before,
    html body:is(.chat-landing)[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"]::after {
        filter: blur(24px) saturate(1.14) !important;
    }
}