.fuuvo-self-models {
    --self-model-bg: var(--panel-strong, #fff);
    --self-model-ink: var(--text, #141826);
    --self-model-muted: var(--muted, #626977);
    --self-model-line: var(--line, #e2e5e9);
    --self-model-accent: var(--brand, #1769d4);
    --self-model-hover: var(--brand-soft, #edf4ff);
    display: block;
    min-width: 0;
    width: 100%;
    margin: 6px 0;
    color: var(--self-model-ink);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
}

:is(html, body)[data-ui-theme="dark"] .fuuvo-self-models {
    --self-model-bg: var(--fuuvo-dark-surface, #1a222e);
    --self-model-ink: var(--fuuvo-dark-text, #f8fafc);
    --self-model-muted: var(--fuuvo-dark-muted, #d1d9e5);
    --self-model-line: var(--fuuvo-dark-line, #35404e);
    --self-model-accent: var(--fuuvo-dark-blue, #6ba8ff);
    --self-model-hover: var(--fuuvo-dark-blue-soft, #25344a);
}

.fuuvo-self-models *,
.fuuvo-self-models *::before,
.fuuvo-self-models *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

.fuuvo-self-models [hidden] { display: none !important; }

.fuuvo-self-models button,
.fuuvo-self-models input {
    font: inherit;
    color: inherit;
}

.fuuvo-self-models button {
    appearance: none;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.fuuvo-self-models .fuuvo-linear-icon,
.fuuvo-self-models .fuuvo-linear-icon > svg {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.fuuvo-self-models .fuuvo-self-models-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    font-weight: 500;
}

.fuuvo-self-models-toggle-copy { flex: 1; min-width: 0; }
.fuuvo-self-models-toggle-copy > span { display: block; overflow-wrap: anywhere; }
.fuuvo-self-models-current { color: var(--self-model-muted); font-size: 12px; font-weight: 400; }
.fuuvo-self-models-toggle[aria-expanded="true"] .fuuvo-self-models-chevron { transform: rotate(90deg); }

.fuuvo-self-models-popover-header { display: none; }

.fuuvo-self-models.is-desktop-popover {
    position: fixed;
    z-index: 6003;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 24px));
    height: min(560px, calc(100dvh - 24px));
    margin: 0;
    padding: 12px;
    border: 1px solid var(--self-model-line);
    border-radius: 8px;
    background: var(--self-model-bg);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
    box-sizing: border-box;
}

.is-desktop-popover > .fuuvo-self-models-toggle { display: none; }
.is-desktop-popover > .fuuvo-self-models-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 32px;
    margin-bottom: 4px;
    font-size: 14px;
}

.fuuvo-self-models .fuuvo-self-models-popover-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 32px;
}

.is-desktop-popover > .fuuvo-self-models-panel {
    flex: 1 1 auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

.fuuvo-self-models-backdrop {
    position: fixed;
    inset: 0;
    z-index: 6002;
    background: rgb(0 0 0 / 22%);
    overscroll-behavior: contain;
    touch-action: none;
}

.fuuvo-self-models-backdrop[hidden] { display: none !important; }
.fuuvo-self-models.is-context-picker {
    border-radius: 16px;
    padding: 16px;
}
.is-context-picker .fuuvo-self-models-tabs { grid-template-columns: 1fr; }
.fuuvo-self-models.is-context-picker .fuuvo-self-models-option { min-height: 48px; }

@media (max-width: 920px) {
    .fuuvo-self-models.is-context-picker {
        width: calc(100vw - 24px);
        height: min(620px, calc(100dvh - 24px));
        margin: 0 !important;
        border-radius: 22px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .is-context-picker .fuuvo-self-models-search { min-height: 44px; }
    .is-context-picker .fuuvo-self-models-search input { font-size: 16px; }
    .is-context-picker .fuuvo-self-models-popover-close { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (min-width: 921px) {
    aside[data-fuuvo-shared-sidebar="1"] [data-self-selected-models] { display: none; }
}

@media (max-width: 920px) {
    body.fuuvo-mobile-prototype .fuuvo-self-models { margin: 8px 0 0; }
    body.fuuvo-mobile-prototype .sidebar-shell:has(> .fuuvo-self-models) + .fuuvo-mobile-prototype-drawer-links { margin-top: 0; }

    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle {
        gap: 12px;
        min-height: 51px;
        padding: 10px 0;
        border-top: 1px solid var(--mobile-line);
        border-bottom: 1px solid var(--mobile-line);
        border-radius: 0;
        background: transparent !important;
        color: var(--mobile-ink);
        font-size: 14px;
    }

    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-linear-icon,
    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-linear-icon > svg {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        color: var(--mobile-drawer-icon);
    }

    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-linear-icon:first-child {
        display: grid;
        place-items: center;
        align-content: center;
    }

    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-linear-icon:first-child > svg {
        width: 30px;
        height: 30px;
        max-width: none;
        max-height: none;
    }

    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-self-models-chevron,
    body.fuuvo-mobile-prototype .fuuvo-self-models-toggle > .fuuvo-self-models-chevron > svg {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: var(--mobile-drawer-secondary);
    }
}

.fuuvo-self-models-panel {
    display: flex;
    flex-direction: column;
    max-height: min(480px, var(--self-model-available-height, 48dvh));
    min-height: 0;
    margin-top: 4px;
    padding: 6px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid var(--self-model-line);
    border-radius: 8px;
    background: var(--self-model-bg);
}

.fuuvo-self-models-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--self-model-line);
}

.fuuvo-self-models-tabs [role="tab"] {
    min-width: 0;
    min-height: 36px;
    padding: 6px 4px;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--self-model-muted);
}

.fuuvo-self-models-tabs [aria-selected="true"] {
    background: var(--self-model-hover);
    color: var(--self-model-accent);
    font-weight: 600;
}

.fuuvo-self-models-search {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 38px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--self-model-line);
    color: var(--self-model-muted);
}

.fuuvo-self-models-search input {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 3px 0;
    border: 0;
    border-radius: 4px;
    outline: none;
    background: transparent;
    color: var(--self-model-ink);
}

.fuuvo-self-models-search input::placeholder { color: var(--self-model-muted); opacity: 1; }
.fuuvo-self-models-search:focus-within { border-color: var(--self-model-accent); }
.fuuvo-self-models-results {
    flex: 1 1 auto;
    min-height: 64px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fuuvo-self-models-group { margin: 0; padding: 6px 0; }

.fuuvo-self-models .fuuvo-self-models-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 7px;
}

.fuuvo-self-models-option-copy { min-width: 0; }
.fuuvo-self-models-option-copy > span { display: block; overflow-wrap: anywhere; }
.fuuvo-self-models-code { margin-top: 1px; color: var(--self-model-muted); font-size: 11px; }
.fuuvo-self-models-check {
    width: 16px;
    height: 16px;
    visibility: hidden;
    object-fit: contain;
}

.fuuvo-self-models-option[aria-pressed="true"] { background: var(--self-model-hover); }
.fuuvo-self-models-option[aria-pressed="true"] .fuuvo-self-models-check { visibility: visible; }
.fuuvo-self-models button:is(:hover, :focus-visible) { background: var(--self-model-hover); }
.fuuvo-self-models button:focus-visible,
.fuuvo-self-models a:focus-visible { outline: 2px solid var(--self-model-accent); outline-offset: -2px; }
.fuuvo-self-models button:disabled { cursor: wait; opacity: .65; }

.fuuvo-self-models-message {
    flex: 0 0 auto;
    padding: 10px 7px;
    color: var(--self-model-muted);
    overflow-wrap: anywhere;
}

.fuuvo-self-models .fuuvo-self-models-action {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    width: 100%;
    min-height: 38px;
    padding: 7px;
    overflow-wrap: anywhere;
}

.fuuvo-self-models-action > span:last-child { min-width: 0; }
.fuuvo-self-models-footer {
    flex: 0 0 auto;
    margin-top: 5px;
    padding: 8px 7px 4px;
    border-top: 1px solid var(--self-model-line);
    color: var(--self-model-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.fuuvo-self-models-footer p { margin: 0; line-height: 1.55; }
.fuuvo-self-models-footer a {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    color: var(--self-model-accent);
    text-decoration: none;
    font-size: 12px;
}

.fuuvo-self-models-footer a > span:first-child { flex: 1; min-width: 0; }

html[data-fuuvo-self-model-pending="true"] :is(#chat-send-btn, [data-self-selected-model-submit]) {
    cursor: wait;
    opacity: .6;
}

[data-self-model-needs-attention="true"] > :is(.home-rail-action-icon, .fuuvo-linear-icon:first-child) {
    position: relative;
}

[data-self-model-needs-attention="true"] > :is(.home-rail-action-icon, .fuuvo-linear-icon:first-child)::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--self-model-accent, var(--brand, #1769d4));
    pointer-events: none;
}

/* Layered important rules take precedence over legacy inline stylesheet rules. */
@layer fuuvo-self-model-composer {
    body[data-self-selected-model-id] #chat-compose-field.is-media-mode
        :is(.composer-capability-shell, .ai-chat-model-field, .ai-chat-composer-toggles) {
        display: none !important;
    }

    body[data-self-selected-model-id] #chat-compose-field.is-media-mode #image-studio-toolbar {
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    /* The bootstrap can display a saved brand name before the full runtime
     * adds its self-selected/detail attributes. Contain the text in every
     * chat shell without clipping the picker field and its popover. */
    body[data-mode="chat"] #chat-compose-field:not(.is-media-mode) .ai-chat-model-trigger {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body[data-mode="chat"] #chat-compose-field:not(.is-media-mode)
    .ai-chat-model-trigger > [data-ai-chat-current-label] {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        inline-size: auto !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        max-width: 100% !important;
        max-inline-size: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-mode="chat"] #chat-compose-field:not(.is-media-mode)
    .ai-chat-model-trigger > :is([data-ai-chat-current-icon], svg) {
        flex-shrink: 0 !important;
    }

    /* Keep the existing two-column toolbar and scrollable rail. Short model
     * names follow their content; long ones shrink within a bounded button. */
    @media (min-width: 921px) {
        body[data-self-selected-model-id]:is(.chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode),
        body[data-self-selected-model-id]:is(.chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode) > .chat-input-wrap {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        body[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode) .chat-input-tools > .ai-chat-mode-controls {
            inline-size: auto !important;
            min-inline-size: 0 !important;
            max-inline-size: 100% !important;
        }

        body[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode) .ai-chat-mode-controls > .ai-chat-model-field {
            width: max-content !important;
            inline-size: max-content !important;
            min-width: min(96px, 100%) !important;
            min-inline-size: min(96px, 100%) !important;
            max-width: min(220px, 100%) !important;
            max-inline-size: min(220px, 100%) !important;
            flex: 0 1 auto !important;
            box-sizing: border-box !important;
        }

        body[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode) .ai-chat-model-field > .ai-chat-model-trigger {
            width: 100% !important;
            inline-size: 100% !important;
            min-width: 0 !important;
            min-inline-size: 0 !important;
            max-width: 100% !important;
            max-inline-size: 100% !important;
            flex: 1 1 auto !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        /* /ai-chat writes a 44px inline height too. Use that same baseline for
         * the selector and option borders in all conversation detail routes. */
        body[data-self-selected-model-id]:is(.chat-detail-page, .chat-detail-open)[data-mode="chat"]
        #chat-compose-field:not(.is-media-mode)
        :is(.ai-chat-model-field, .ai-chat-model-trigger, .ai-chat-composer-toggles, .ai-chat-composer-toggle) {
            height: 44px !important;
            min-height: 44px !important;
            max-height: 44px !important;
            box-sizing: border-box !important;
        }

        body[data-self-selected-model-id] #chat-compose-field.is-media-mode
        :is(#chat-media-toolbar-host, .image-studio-toolbar, .image-studio-toolbar-left) {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        body[data-self-selected-model-id] #chat-compose-field.is-media-mode #image-studio-route-control {
            min-width: 0 !important;
            max-width: min(240px, 100%) !important;
            flex: 0 1 auto !important;
            box-sizing: border-box !important;
        }

        body[data-self-selected-model-id] #chat-compose-field.is-media-mode #image-studio-route-btn {
            display: inline-flex !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        body[data-self-selected-model-id] #image-studio-route-btn .image-studio-tool-link-copy {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        body[data-self-selected-model-id] #image-studio-route-btn .image-studio-tool-link-value {
            display: block !important;
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
    }
}