/* The focused /ai-chat route has a different layout contract from the
 * homepage. Keep this file last in the cascade so legacy landing rules cannot
 * move the composer back into normal flow. */

html body[data-ai-chat-page="1"].chat-landing {
    --ai-chat-page-surface: #ffffff;
    --ai-chat-page-line: #e5e8ed;
    --ai-chat-page-ink: #202733;
    --ai-chat-page-muted: #758196;
    --ai-chat-page-control: #f4f6f9;
    --ai-chat-page-control-line: #e1e6ed;
    --ai-chat-page-focus: #2d6cdf;
    min-height: 100%;
    overflow: hidden !important;
}

html body[data-ai-chat-page="1"].chat-landing .workspace {
    position: relative !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: var(--home-workspace-bg, #ffffff) !important;
}

html body[data-ai-chat-page="1"] .composer-capability-shell,
html body[data-ai-chat-page="1"] .composer-top,
html body[data-ai-chat-page="1"] .mobile-home-scenes-title,
html body[data-ai-chat-page="1"] #core-feature-slot,
html body[data-ai-chat-page="1"] .composer-actions,
html body[data-ai-chat-page="1"] .mobile-chat-toolbar {
    display: none !important;
}

html body[data-ai-chat-page="1"] .composer {
    position: fixed !important;
    top: auto !important;
    left: calc(50% + 32px) !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    z-index: 5000 !important;
    display: block !important;
    width: min(1112px, calc(100vw - 160px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Keep the active capability on the same centered track as the input surface. */
html body[data-ai-chat-page="1"] #chat-compose-field > .chat-capability-active {
    width: min(950px, 100%) !important;
    margin: 0 auto 8px !important;
    box-sizing: border-box !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
    position: relative !important;
    width: min(950px, 100%) !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 1px solid var(--ai-chat-page-line) !important;
    border-radius: 22px !important;
    background: var(--ai-chat-page-surface) !important;
    color: var(--ai-chat-page-ink) !important;
    box-shadow: 0 1px 3px rgba(35, 48, 68, .04) !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
    display: block !important;
    width: 100% !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    box-sizing: border-box !important;
    padding: 20px 20px 8px !important;
    resize: none !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: var(--ai-chat-page-ink) !important;
    -webkit-text-fill-color: var(--ai-chat-page-ink) !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input::placeholder {
    color: var(--ai-chat-page-muted) !important;
    opacity: 1 !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-hint {
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 2 !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
    position: absolute !important;
    top: auto !important;
    right: 12px !important;
    bottom: 8px !important;
    left: 12px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 132px !important;
    align-items: center !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    z-index: 3 !important;
    pointer-events: auto !important;
}

html body[data-ai-chat-page="1"] #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;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

html body[data-ai-chat-page="1"] #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-radius: 50% !important;
}

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

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

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px 0 6px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 12px !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggles {
    width: 189px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
}

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

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

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
    grid-column: 3 !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    flex: 0 0 132px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
}

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

html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 22px !important;
}

html body[data-ai-chat-page="1"] .ai-chat-heading {
    pointer-events: none !important;
}

html body[data-ai-chat-page="1"] .ai-chat-welcome {
    pointer-events: none !important;
    z-index: 1 !important;
}

html body[data-ai-chat-page="1"] .workspace > .fuuvo-ai-disclaimer {
    position: fixed !important;
    left: calc(50% + 32px) !important;
    right: auto !important;
    bottom: 8px !important;
    z-index: 14 !important;
    width: min(960px, calc(100vw - 170px)) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
}

html body[data-ai-chat-page="1"][data-ui-theme="dark"],
html body[data-ai-chat-page="1"][data-theme="dark"] {
    --ai-chat-page-surface: #303133;
    --ai-chat-page-line: #4a4b4e;
    --ai-chat-page-ink: #e5e7eb;
    --ai-chat-page-muted: #a9b2c0;
    --ai-chat-page-control: #252b34;
    --ai-chat-page-control-line: #3d4959;
}

html body[data-ai-chat-page="1"][data-ui-theme="dark"] .workspace,
html body[data-ai-chat-page="1"][data-theme="dark"] .workspace {
    background: var(--home-workspace-bg, #1a1b1e) !important;
    color: var(--ai-chat-page-ink) !important;
}

html body[data-ai-chat-page="1"][data-ui-theme="dark"] #chat-compose-field > .chat-input-wrap:not(.has-attachments),
html body[data-ai-chat-page="1"][data-theme="dark"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
    background: var(--ai-chat-page-surface) !important;
    border-color: var(--ai-chat-page-line) !important;
    box-shadow: 0 17px 42px rgba(0, 0, 0, .32) !important;
}

html body[data-ai-chat-page="1"][data-ui-theme="dark"] #chat-input,
html body[data-ai-chat-page="1"][data-theme="dark"] #chat-input {
    color: var(--ai-chat-page-ink) !important;
    -webkit-text-fill-color: var(--ai-chat-page-ink) !important;
}

html body[data-ai-chat-page="1"][data-ui-theme="dark"] .ai-chat-model-trigger,
html body[data-ai-chat-page="1"][data-ui-theme="dark"] .ai-chat-composer-toggle,
html body[data-ai-chat-page="1"][data-theme="dark"] .ai-chat-model-trigger,
html body[data-ai-chat-page="1"][data-theme="dark"] .ai-chat-composer-toggle {
    color: var(--ai-chat-page-ink) !important;
    border-color: rgba(170, 190, 221, .36) !important;
}

@media (max-width: 920px) {
    html body[data-ai-chat-page="1"].chat-landing {
        overflow: hidden !important;
    }

    html body[data-ai-chat-page="1"].chat-landing .workspace {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html body[data-ai-chat-page="1"] .composer {
        left: 50% !important;
        right: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        width: 100% !important;
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
        border-radius: 18px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-capability-active {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 17px 15px 64px !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        top: 17px !important;
        left: 15px !important;
        right: 15px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        right: 10px !important;
        bottom: 9px !important;
        left: 10px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: 68px minmax(0, 1fr) max-content !important;
        column-gap: 6px !important;
        overflow: visible !important;
    }

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

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

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

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

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-field {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex-basis: 104px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-trigger {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex-basis: 104px !important;
        padding: 0 6px !important;
        gap: 4px !important;
        font-size: 11px !important;
    }

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

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-composer-toggle {
        width: max-content !important;
        min-width: 88px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        flex-basis: auto !important;
        gap: 4px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .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;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .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;
        padding: 0 !important;
    }

    html body[data-ai-chat-page="1"] .ai-chat-heading {
        top: 20px !important;
        width: calc(100vw - 24px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    html body[data-ai-chat-page="1"] .ai-chat-welcome {
        top: 36% !important;
        width: calc(100vw - 32px) !important;
        left: 50% !important;
        text-align: center !important;
        font-size: clamp(24px, 7vw, 32px) !important;
    }

    html body[data-ai-chat-page="1"] .workspace > .fuuvo-ai-disclaimer {
        display: none !important;
    }
}

/* Show an intentional handoff state immediately after a homepage submit.
 * The full chat runtime still hydrates in the background, but the user never
 * sees the unrelated landing prompt while that happens. */
.ai-chat-handoff-loading {
    display: none;
}

html.fuuvo-home-submit-pending .ai-chat-welcome {
    display: none !important;
}

html.fuuvo-home-submit-pending .ai-chat-handoff-loading {
    position: fixed;
    top: 34%;
    left: 50%;
    z-index: 120;
    display: flex;
    min-width: 260px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: #29384f;
    text-align: center;
}

html.fuuvo-home-submit-pending .ai-chat-handoff-loading > span {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(70, 105, 155, .2);
    border-top-color: #4d78b5;
    border-radius: 50%;
    animation: ai-chat-handoff-spin .8s linear infinite;
}

html.fuuvo-home-submit-pending .ai-chat-handoff-loading strong {
    font-size: 17px;
    line-height: 1.35;
}

html.fuuvo-home-submit-pending .ai-chat-handoff-loading small {
    color: #7c899b;
    font-size: 12px;
}

html[data-ui-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading,
html[data-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading {
    color: #edf3ff;
}

html[data-ui-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading small,
html[data-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading small {
    color: #8fa0bc;
}

@keyframes ai-chat-handoff-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 380px) {
    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        grid-template-columns: 64px minmax(0, 1fr) max-content !important;
        right: 8px !important;
        left: 8px !important;
    }

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

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-upload-btn,
    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) #mobile-chat-more-btn {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-tools > .chat-input-action-group {
        min-width: 76px !important;
        max-width: 76px !important;
        flex-basis: 76px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group .chat-voice-btn {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments) .chat-input-action-group #chat-send-btn {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

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

/* Final route-level layout guard. The shared landing stylesheet contains an
   older centered composer rule. Keep the dedicated /ai-chat route anchored to
   the bottom and place its welcome title above the input surface. */
html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .workspace {
    position: relative !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
}

html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .composer {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    left: calc(50% + 32px) !important;
    width: min(1112px, calc(100vw - 160px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
}

html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .ai-chat-heading {
    position: fixed !important;
    top: 20px !important;
    right: auto !important;
    left: calc(50% + 32px) !important;
    width: min(1112px, calc(100vw - 160px)) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 3000 !important;
}

@media (min-width: 921px) {
    /* The picker opens from a fixed composer near the viewport bottom. Keep
       it in the viewport so the composer or an overflow context cannot cut
       off its heading and model cards. JavaScript supplies the exact anchor
       position after the panel has been made visible. */
    html body[data-ai-chat-page="1"] .ai-chat-model-panel.is-portaled {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
        max-height: calc(100dvh - 24px) !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"]:has(#ai-chat-model)
    .workspace[data-fuuvo-app-workspace="1"] > .ai-chat-welcome {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: calc(58px + 170px + 16px) !important;
        left: calc(50% + 32px) !important;
        width: min(1000px, calc(100vw - 180px)) !important;
        height: auto !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 2 !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    html body.desktop-sidebar-docked[data-ai-chat-page="1"].chat-landing[data-mode="chat"]:has(#ai-chat-model)
    [data-fuuvo-app-shell="1"]:has(> nav#fuuvo-workspace-rail)
    .workspace[data-fuuvo-app-workspace="1"] > .ai-chat-welcome {
        left: calc(50% + var(--fuuvo-desktop-navigation-width, var(--fuuvo-workspace-rail-width, 72px)) / 2) !important;
        width: min(1000px, calc(100vw - var(--fuuvo-desktop-navigation-width, var(--fuuvo-workspace-rail-width, 72px)) - 48px)) !important;
    }
}

/* Keep the visible detail composer controls in lockstep with the homepage.
 * The detail route still owns the fixed bottom position, while the input
 * surface and option buttons use the same presentation as the home composer. */
@media (min-width: 921px) {
    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        display: block !important;
    }

    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
        border-radius: 14px !important;
    }

    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-field {
        justify-content: center !important;
    }

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

    html body[data-ai-chat-page="1"][data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field.has-chat-input > .chat-input-wrap:not(.has-attachments)
    .chat-input-tools .ai-chat-composer-toggle {
        padding: 0 10px !important;
        gap: 5px !important;
        border-radius: 9px !important;
        background: transparent !important;
        font-weight: 560 !important;
    }
}

/* Keep the visible detail composer controls in lockstep with the homepage.
 * The detail route still owns the fixed bottom position, while the input
 * surface and option buttons use the same presentation as the home composer. */
@media (min-width: 921px) {
    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) {
        display: block !important;
    }

    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) #chat-input {
        border-radius: 14px !important;
    }

    html body[data-ai-chat-page="1"][data-mode="chat"]
    #chat-compose-field > .chat-input-wrap:not(.has-attachments) .ai-chat-model-field {
        justify-content: center !important;
    }

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

    html body[data-ai-chat-page="1"][data-mode="chat"]:has(#ai-chat-model)
    #chat-compose-field:has(#chat-input) > .chat-input-wrap:not(.has-attachments)
    .chat-input-tools .ai-chat-composer-toggle {
        padding: 0 10px !important;
        gap: 5px !important;
        border-radius: 9px !important;
        background: transparent !important;
        font-weight: 560 !important;
    }
}

@media (max-width: 920px) {
    html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .workspace {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .composer {
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        width: calc(100vw - 24px) !important;
    }

    html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .ai-chat-heading {
        top: 16px !important;
        left: 50% !important;
        width: calc(100vw - 24px) !important;
    }

    html body[data-ai-chat-page="1"].chat-landing[data-mode="chat"] .ai-chat-welcome {
        top: 40% !important;
        left: 50% !important;
        width: calc(100vw - 32px) !important;
    }
}

/* These final handoff and action-row rules intentionally live at the end of
 * the stylesheet so page-specific composer rules cannot override them. */
html.fuuvo-home-submit-pending .ai-chat-welcome {
    display: none !important;
}

html.fuuvo-home-submit-pending .ai-chat-handoff-loading {
    position: fixed;
    top: 34%;
    left: 50%;
    z-index: 120;
    display: flex;
    min-width: 260px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: #29384f;
    text-align: center;
}

html[data-ui-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading,
html[data-theme="dark"].fuuvo-home-submit-pending .ai-chat-handoff-loading {
    color: #edf3ff;
}

@media (min-width: 1280px) {
    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .chat-input-action-group {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        flex-basis: 200px !important;
        gap: 6px !important;
    }

    html body[data-ai-chat-page="1"] #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;
        flex: 0 0 96px !important;
        gap: 7px !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
        box-sizing: border-box !important;
    }

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

/* Stable winning selectors for the fixed AI chat composer. The shared home
 * stylesheet also targets these elements, so dedicated IDs prevent the call
 * control from collapsing into a circle with overflowing text. */
@media (min-width: 1280px) {
    html body[data-ai-chat-page="1"] #chat-input-action-group {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        flex: 0 0 200px !important;
        gap: 6px !important;
    }

    html body[data-ai-chat-page="1"]:has(#ai-chat-model) #chat-compose-field #chat-ai-call-btn {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        flex: 0 0 96px !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
    }

    html body[data-ai-chat-page="1"]:has(#ai-chat-model) #chat-compose-field #chat-ai-call-btn > span {
        display: inline-block !important;
        min-width: 0;
        overflow: hidden;
        line-height: 1 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 921px) and (max-width: 1279px) {
    html body[data-ai-chat-page="1"] #chat-input-action-group {
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        flex: 0 0 154px !important;
        gap: 6px !important;
    }

    html body[data-ai-chat-page="1"]:has(#ai-chat-model) #chat-compose-field #chat-ai-call-btn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    html body[data-ai-chat-page="1"]:has(#ai-chat-model) #chat-compose-field #chat-ai-call-btn > span {
        display: none !important;
    }
}

@media (min-width: 921px) {
    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > :is(.chat-voice-btn, .home-composer-call, #chat-send-btn) {
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > .home-composer-call > svg {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        display: block;
        flex: 0 0 20px;
    }

    html body[data-ai-chat-page="1"][data-ui-theme="dark"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > .home-composer-call,
    html body[data-ai-chat-page="1"][data-theme="dark"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-action-group > .home-composer-call {
        border: 1px solid rgba(149, 171, 205, .34) !important;
        background: #2a3548 !important;
        color: #d7e2f3 !important;
        box-shadow: none !important;
    }
}

@media (min-width: 921px) and (max-width: 1279px) {
    html body[data-ai-chat-page="1"] #chat-compose-field > .chat-input-wrap:not(.has-attachments)
        .chat-input-tools > .chat-input-action-group {
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        flex-basis: 154px !important;
    }

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

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

/* The shared composer has a very specific "max-content" action-row rule.
 * Mirror its specificity here so the dedicated AI chat route can keep a
 * predictable right-hand action group in both wide and medium desktops. */
@media (min-width: 1280px) {
    html body[data-ai-chat-page="1"]: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 {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        flex: 0 0 200px !important;
        gap: 6px !important;
    }

    html body[data-ai-chat-page="1"]: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 > .home-composer-call {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        flex: 0 0 96px !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
    }
}

@media (min-width: 921px) and (max-width: 1279px) {
    html body[data-ai-chat-page="1"]: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 {
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        flex: 0 0 154px !important;
        gap: 6px !important;
    }

    html body[data-ai-chat-page="1"]: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 > .home-composer-call {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
}