/* ai-refactor: optimized/refactored at 2026-02-13T00:45:15Z */
@use "sass:string";

/* ai-refactor: optimized/refactored at 2026-02-13T00:45:12Z */
// WHY: Bare `button` + unscoped `input/select/textarea` rules leak into the host document.
// Default off; opt in via `patch-global-native-controls.scss` / `loadFlUIGlobalNativeControlStyles()`.
@use "./essentials-options" as eo;
@use "./native-host-button-chrome" as hostbtn;
@use "layers";

@layer components {
    @if eo.$include-native-button-styles {
        button,
        .btn {
            @include hostbtn.essentials-native-host-button-chrome-base;
        }
    } @else {
        .btn {
            @include hostbtn.essentials-native-host-button-chrome-base;
        }
    }

    .btn {
        --ui-bg: var(--color-surface-container-high);
        --ui-fg: var(--color-on-surface);
        --ui-bg-hover: var(--color-surface-container-highest);
        --ui-ring: var(--color-primary);
        --ui-radius: var(--radius-lg);
        --ui-pad-y: var(--space-sm);
        --ui-pad-x: var(--space-lg);
        --ui-font-size: var(--text-sm);
        --ui-font-weight: var(--font-weight-semibold);
        --ui-min-h: 40px;
        --ui-opacity: 1;
        appearance: none;
        border: none;
        background: var(--ui-bg);
        color: var(--ui-fg);
        border-radius: var(--ui-radius);
        padding: max(var(--ui-pad-y, 0px), 0px) max(var(--ui-pad-x, 0px), 0px);
        font-size: var(--ui-font-size);
        font-weight: var(--ui-font-weight);
        letter-spacing: 0.01em;
        line-height: 1.2;
        block-size: calc-size(fit-content, max(var(--ui-min-h), size));
        transition:
            background-color var(--motion-fast),
            box-shadow var(--motion-fast),
            transform var(--motion-fast);
        box-shadow: var(--elev-0);
        user-select: none;
        touch-action: manipulation;
        pointer-events: auto;
        gap: var(--space-xs);
        text-transform: none;
        opacity: var(--ui-opacity);
        min-block-size: fit-content;
        min-inline-size: calc-size(fit-content, size + 0.5rem + var(--icon-size, 1rem));
        max-inline-size: none;
        max-block-size: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        text-wrap: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-decoration: none;
        text-shadow: none;
        text-rendering: auto;
        contain: none;
        container-type: normal;
        place-items: center;
        place-content: center;
        justify-content: safe center;
        justify-items: safe center;
        align-content: safe center;
        align-items: safe center;

        & > ui-icon {
            flex-shrink: 0;
            pointer-events: none;
            color: inherit;
            align-self: center;
            vertical-align: middle;
        }

        &.btn-icon {
            @media (max-width: 480px) {
                font-size: 0px !important;
                aspect-ratio: 1 / 1;
                block-size: fit-content;
                max-block-size: stretch;
                min-inline-size: 0px;
                max-inline-size: fit-content;
                gap: 0px;

                .btn-text,
                span:not(.sr-only) {
                    display: none !important;
                }
            }
        }

        &:hover {
            background: var(--ui-bg-hover);
            box-shadow: var(--elev-1);
            transform: translateY(-1px);
        }

        &:active {
            transform: translateY(0);
            box-shadow: var(--elev-0);
        }

        &:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-ring) 35%, transparent);
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;

            &:hover {
                background: var(--color-surface-container-high);
                box-shadow: var(--elev-0);
            }
        }

        &.primary,
        &.active {
            --ui-bg: var(--color-primary);
            --ui-fg: var(--color-on-primary);
            --ui-ring: var(--color-primary);
        }

        &.primary {
            --ui-bg-hover: color-mix(in oklab, var(--color-primary) 90%, black);
        }

        &.active {
            box-shadow: var(--elev-1);
        }

        &.small {
            --ui-pad-y: var(--space-xs);
            --ui-pad-x: var(--space-md);
            --ui-font-size: var(--text-xs);
            --ui-min-h: 32px;
            --ui-radius: var(--radius-md);
        }

        &.icon-btn {
            inline-size: 40px;
            block-size: 40px;
            --ui-pad-y: 0px;
            --ui-pad-x: 0px;
            --ui-radius: 9999px;
            --ui-font-size: var(--text-lg);
        }

        &[data-action="open-md"],
        &[data-action="export-md"],
        &[data-action="export-docx"] {
            --ui-font-size: 12px;
            --ui-pad-x: 8px;
            --ui-pad-y: 0px;
            --ui-min-h: 28px;
        }

        &:is(
            [data-action="view-markdown-viewer"],
            [data-action="view-markdown-editor"],
            [data-action="view-rich-editor"],
            [data-action="view-settings"],
            [data-action="view-history"],
            [data-action="view-workcenter"]
        ) {
            --ui-font-size: 13px;
            --ui-font-weight: 500;
            --ui-pad-x: 12px;
            --ui-pad-y: 0px;
            --ui-min-h: 32px;
            --ui-radius: 16px;
            text-transform: capitalize;
        }

        &:is(
            [data-action="view-markdown-viewer"],
            [data-action="view-markdown-editor"],
            [data-action="view-rich-editor"],
            [data-action="view-settings"],
            [data-action="view-history"],
            [data-action="view-workcenter"][data-current],
            [data-action="view-workcenter"].active
        ) {
            --ui-bg: var(--color-surface-container-highest);
            --ui-fg: var(--color-primary);
            --ui-ring: var(--color-primary);
        }

        &:is(
            [data-action="toggle-edit"],
            [data-action="snip"],
            [data-action="solve"],
            [data-action="code"],
            [data-action="css"],
            [data-action="voice"],
            [data-action="edit-templates"],
            [data-action="recognize"],
            [data-action="analyze"],
            [data-action="select-files"],
            [data-action="clear-prompt"],
            [data-action="view-full-history"]
        ) {
            --ui-font-size: 12px;
            --ui-pad-x: 8px;
            --ui-pad-y: 0px;
            --ui-min-h: 28px;
            --ui-radius: 14px;
        }

        &:has(> ui-icon):not(:has(> *:not(ui-icon))),
        &:has(> span:only-of-type:empty) {
            font-size: 0px !important;
            aspect-ratio: 1 / 1;
            block-size: fit-content;
            max-block-size: stretch;
            min-inline-size: 0px;
            max-inline-size: fit-content;
            gap: 0px;
            overflow: visible;

            span:not(.sr-only) {
                display: none !important;
            }
        }
    }

    .btn-primary {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);

        &:hover:not(:disabled) {
            background: var(--color-primary-hover);
            border-color: var(--color-primary-hover);
        }
    }

    @media (max-width: 768px) {
        .btn {
            --ui-pad-y: var(--space-xs);
            --ui-pad-x: var(--space-md);
            --ui-font-size: var(--text-xs);
            --ui-min-h: 36px;
        }
    }

    @media (max-width: 480px) {
        .btn {
            --ui-pad-y: var(--space-xs);
            --ui-pad-x: var(--space-xs);
            --ui-font-size: var(--text-xs);
            --ui-min-h: 32px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &.btn-icon {
                overflow: visible;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .btn {
            transition: none;
            transform: none !important;

            &:hover,
            &:active {
                transform: none !important;
            }
        }
    }
}

@layer utilities {
    .round-decor {
        --background-tone-shift: 0;
        padding-block: 0.25rem;
        border-radius: 0.25rem;
        overflow: hidden;

        &:empty {
            padding: 0;
            display: none;
            pointer-events: none;
            visibility: collapse;
        }
    }

    .time-format {
        display: inline-flex;
        flex-direction: row;
        place-content: center;
        place-items: center;
        place-self: center;
        padding: 0.125rem;
        font: 500 0.9em "InterVariable", "Inter", "Fira Mono", "Menlo", "Consolas", monospace;
        font-optical-sizing: auto;
        font-variant-numeric: tabular-nums;
        font-kerning: auto;
        font-stretch: condensed;
        font-width: condensed;
        letter-spacing: -0.05em;
        text-wrap: nowrap;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /*
     * WHY: Launcher caption rows use `[data-layer="labels"]`; a global `span { aspect-ratio: 1/1 }` makes each pill as tall as its width (“box” tiles).
     * Square helpers apply only outside label captions (icon/grid tiles still use spans elsewhere).
     */
    .ui-ws-item:not([data-layer="labels"]) span:not(.ui-ws-item-caption) {
        pointer-events: none;
        aspect-ratio: 1 / 1;
        inline-size: fit-content;
        block-size: fit-content;
        display: inline;
    }

    .ui-ws-item {
        cursor: pointer;
        user-select: none;
        pointer-events: auto;

        &:active,
        &:has(:active) {
            will-change: inset, translate, transform, opacity, z-index;
            cursor: grabbing;
        }
    }
}

@layer components {

    @media print {
        .ctx-menu, .ux-anchor, .component-loading, .component-error {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            position: absolute !important;
            inset: 0 !important;
            z-index: -1 !important;
            inline-size: 0 !important;
            block-size: 0 !important;
            max-inline-size: 0 !important;
            max-block-size: 0 !important;
            min-inline-size: 0 !important;
            min-block-size: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }
    }

    @media screen {
        ui-window-frame,
        ui-modal,
        .ui-grid-item,
        .ctx-menu {
            --font-family: "InterVariable", "Inter", "Helvetica Neue", "Helvetica", "Calibri", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
        }

        ui-window-frame,
        ui-modal,
        .ui-grid-item {
            --opacity: 1;
            --scale: 1;
            --rotate: 0deg;
            --translate-x: 0%;
            --translate-y: 0%;
            isolation: isolate;
            content-visibility: auto;
            transform-origin: 50% 50%;
            transform-style: flat;
            transform-box: fill-box;
            translate: 0% 0% 0%;
            opacity: var(--opacity, 1);
            rotate: 0deg;
            scale: 1;
        }

        .ctx-menu {
            --font-family: "InterVariable", "Inter", "Helvetica Neue", "Helvetica", "Calibri", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;

            &,
            * {
                visibility: visible;
                content-visibility: visible;
            }

            position: fixed;
            z-index: 99999;
            inline-size: max-content;
            min-inline-size: 160px;
            max-inline-size: min(240px, 100cqi);
            block-size: fit-content;
            padding: 0.25rem 0;
            border: 1px solid var(--color-outline-variant);
            border-radius: var(--radius-md);
            background-color: var(--color-surface);
            color: var(--color-on-surface);
            font-size: 0.875rem;
            font-weight: 400;
            box-shadow: var(--elev-3);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: scale3d(var(--scale, 1), var(--scale, 1), 1) translate3d(var(--translate-x, 0px), var(--translate-y, 0px), 0px);
            transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
            font-family: var(--font-family, 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') !important;
            text-align: start;
            display: flex;
            flex-direction: column;
            align-items: stretch;

            &[data-hidden] {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            & > * {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                text-align: start;
                inline-size: stretch;
                min-block-size: 2rem;
                gap: 0.5rem;
                padding: 0.375rem 0.75rem;
                border: none;
                border-radius: var(--radius-sm);
                outline: none;
                position: relative;
                background-color: transparent;
                color: var(--color-on-surface);
                cursor: pointer;
                text-wrap: nowrap;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                pointer-events: auto;
                transition: background-color 0.15s ease, color 0.15s ease;
                font-family: var(--font-family, 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') !important;

                &:hover {
                    background-color: var(--color-surface-container-high);
                    color: var(--color-on-surface);
                }

                &:active {
                    background-color: var(--color-surface-container-highest);
                    color: var(--color-on-surface);
                }

                &:focus-visible {
                    outline: var(--focus-ring);
                    background-color: var(--color-surface-container-high);
                }

                &:not(.ctx-menu-separator) {
                    gap: 0.5rem;
                }

                & > * {
                    pointer-events: none;
                }

                & > span {
                    flex: 1 1 auto;
                    min-inline-size: 0;
                    text-align: start !important;
                    user-select: none;
                    pointer-events: none;
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 1.25;
                    color: inherit;
                }

                & > ui-icon {
                    --icon-size: 1rem;
                    flex-shrink: 0;
                    inline-size: var(--icon-size);
                    block-size: var(--icon-size);
                    color: var(--color-on-surface-variant);
                    user-select: none;
                    pointer-events: none;
                }
            }

            & > .ctx-menu-separator,
            &.ctx-menu-separator {
                min-block-size: auto;
                block-size: 1px;
                margin: 0.125rem 0.375rem;
                padding: 0;
                background-color: var(--color-outline-variant);
                opacity: 0.3;
                pointer-events: none;
            }

            /*
             * `.grid-rows` applies subgrid + place(center) to children, which centers
             * label text per row. Context menus must stay flex rows with start-aligned labels.
             */
            &.grid-rows {
                display: flex !important;
                flex-direction: column;
                align-items: stretch;
                grid-template-columns: unset !important;
                grid-auto-rows: unset !important;

                & > *:not(.ctx-menu-separator) {
                    display: flex !important;
                    flex-flow: row nowrap !important;
                    align-items: center !important;
                    justify-content: flex-start !important;
                    grid-column: unset !important;
                    grid-row: unset !important;
                    grid-template-columns: unset !important;
                    grid-template-rows: unset !important;
                    place-content: unset !important;
                    place-items: unset !important;
                }
            }
        }

        .ux-anchor {
            --shift-x: var(--client-x, 0px);
            --shift-y: var(--client-y, 0px);
            --translate-x: round(nearest, min(0px, calc(100cqi - (100% + var(--shift-x, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
            --translate-y: round(nearest, min(0px, calc(100cqb - (100% + var(--shift-y, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
            inset-inline-start: max(var(--shift-x), 0px);
            inset-block-start: max(var(--shift-y), var(--status-bar-padding, 0px));
            inset-inline-end: auto;
            inset-block-end: auto;
            direction: ltr;
            writing-mode: horizontal-tb;
            translate: 0% 0% 0%;
            transform: none;
        }

        .component-loading,
        .component-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            gap: 1rem;
            color: var(--text-secondary, light-dark(#666, #aaa));
        }

        .component-loading {
            .loading-spinner {
                inline-size: 2rem;
                block-size: 2rem;
                border: 2px solid var(--border, light-dark(#ddd, #444));
                border-block-start: 2px solid var(--primary, light-dark(#007bff, #5fa8ff));
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
        }

        .component-error {
            text-align: center;

            h3 {
                margin: 0;
                color: var(--error, light-dark(#dc3545, #ff6b6b));
            }

            p {
                margin: 0;
            }
        }

        ui-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            inline-size: var(--icon-size, 1.25rem);
            block-size: var(--icon-size, 1.25rem);
            min-inline-size: var(--icon-size, 1.25rem);
            min-block-size: var(--icon-size, 1.25rem);
            color: currentColor;
            fill: currentColor;
            flex-shrink: 0;
            vertical-align: middle;
            opacity: 1;
            visibility: visible;
            /* When a parent uses font-size: 0 for layout, keep raster/mask math stable */
            font-size: 1rem;

            svg,
            img {
                inline-size: 100%;
                block-size: 100%;
                color: inherit;
                fill: currentColor;
            }
        }

        :is(button, .btn) > ui-icon {
            color: inherit;
        }

        .file-picker {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-block-size: 300px;
            padding: 2rem;
            text-align: center;

            .file-picker-header {
                margin-block-end: 2rem;

                h2 {
                    margin: 0 0 0.5rem 0;
                    color: var(--color-on-surface);
                    font-size: 1.5rem;
                    font-weight: 600;
                }

                p {
                    margin: 0;
                    color: var(--color-on-surface-variant);
                    font-size: 0.9rem;
                }
            }

            .file-picker-actions {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
                margin-block-end: 2rem;

                .btn {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem 1.5rem;
                    border: 1px solid transparent;
                    border-radius: var(--radius-md);
                    font-weight: 500;
                    transition: all 0.2s ease;

                    &:hover {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    }

                    &.btn-primary {
                        background: var(--color-primary);
                        color: var(--color-on-primary);
                        border-color: var(--color-primary);
                    }

                    &:not(.btn-primary) {
                        background: var(--color-surface-container);
                        color: var(--color-on-surface);
                        border-color: var(--color-outline-variant);
                    }
                }
            }

            .file-picker-info {
                max-inline-size: 400px;

                p {
                    margin: 0.25rem 0;
                    font-size: 0.85rem;
                    color: var(--color-on-surface-variant);

                    strong {
                        color: var(--color-on-surface);
                    }
                }
            }
        }
    }
}