@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chat");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400..700&display=swap");
@import "https://unpkg.com/open-props" layer(design-system);

@layer base {
    html {
        --surface-1: white;
        --text-1: var(--stone-11);
        --primary: var(--indigo-7);
        --secondary-container: var(--gray-12);
        --font-family-default: "Source Sans 3", var(--font-neo-grotesque);

        /* Override the default Open Props shadow properties for dark mode.
        Make sure to use @layer when importing Open Props. */

        @media (prefers-color-scheme: dark) {
            --shadow-color: 220 3% 15%;
            --shadow-strength: 1%;
        }
    }
}

@layer layout {
    .chat,
    .info {
        /* background-color: oklch(99% 0 287); */
        background-color: transparent;
        block-size: 100px;
        border-radius: var(--radius-3) var(--radius-3) 0px 0px;
        border-width: 0;
        /* box-shadow: var(--shadow-6); */
        inline-size: min(1028px, 100%);
        inset-block-start: auto;
        margin-inline: auto;
        padding: 0;

        /* --opacityOK  */
        @media (prefers-reduced-transparency: no-preference) {
            backdrop-filter: blur(70px);
            background-color: oklch(99% 0 230 / 50%);
        }

        /* motionOK */
        @media (prefers-reduced-motion: no-preference) {
            animation: slide-out-down-dismiss 0.5s var(--ease-3);

            &:popover-open {
                /* Built-in animation from Open Props */
                animation: var(--animation-slide-in-up);
            }
        }
    }

    @keyframes slide-out-down-dismiss {
        from {
            display: block;
            z-index: 1;
        }

        to {
            transform: translateY(100%);
        }
    }

    .chat-content-wrapper {
        display: grid;
        grid-template-rows: min-content 1fr;
        block-size: 100%;
    }

    .chat-header {
        border-bottom: var(--border-size-1) solid var(--gray-4);
        padding-block: 12px;
        padding-inline: 12px;
        display: grid;
        place-items: center end;
    }

    .info-popover-close-btn {
        display: inline-grid;
        place-items: center;
        padding: 0;
        border-width: 0;
        block-size: 44px;
        inline-size: 44px;
        border-radius: var(--radius-round);
        cursor: pointer;
        background-color: var(--stone-2);
    }

    .chat-section,
    .info-section {
        display: grid;
        grid-template-rows: 1fr min-content;
        padding-block: var(--size-3);
        padding-inline: var(--size-3);
    }

    .chat-input-container,
    .info-container {
        font-size: var(--font-size-0);
        display: grid;
        grid-template-columns: 1fr min-content;
        box-shadow: var(--shadow-4);
        border-radius: var(--radius-round);
        background-color: white;
        padding-inline: var(--size-px-4) var(--size-px-2);
        block-size: 58px;
        align-items: center;

        @media (min-width: 375px) {
            font-size: var(--font-size-1);
        }
    }

    .chat-textarea {
        font-size: var(--font-size-2);
        font-family: inherit;
        caret-color: blue;
        border-width: 0;
        background-color: transparent;
        outline-width: 0;
        outline: none;
        overflow: hidden;
        resize: none;
        block-size: var(--size-5);
        white-space: nowrap;
    }

    .chat-submit-btn {
        color: blue;
        block-size: var(--size-px-8);
        inline-size: var(--size-px-8);
        border-width: 0;
        border-radius: var(--radius-round);
        background-color: transparent;
        cursor: pointer;
    }
}

@layer components {
    .btn {
        --_state-layer-op: 0%;
        --_state-layer-bg: oklch(1 0 0 / var(--_state-layer-op));
        background-color: transparent;
        font-weight: var(--font-weight-6);
        font-size: var(--font-size-0);
        font-family: var(--font-family-default);
        min-block-size: 40px;
        text-decoration: none;
        text-align: center;
        min-inline-size: max-content;
        display: inline-grid;
        place-items: center;
        border-radius: var(--radius-4);
        overflow: clip;
        isolation: isolate;
        -moz-user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        padding: 0;
        border-width: 0;

        @media screen and (min-width: 768px) {
            font-size: var(--font-size-1);
        }

        &:hover {
            --_state-layer-op: 20%;
            box-shadow: var(--shadow-2);
        }

        &:is(:active, :disabled, :focus-within) {
            --_state-layer-op: 12%;
        }

        &.filled {
            background-color: var(--gray-12);
            color: white;
        }

        &.primary {
            --_state-layer-bg: oklch(0 0 0 / var(--_state-layer-op));
            background-color: var(--primary);
        }

        .state-layer {
            border-radius: inherit;
            padding-block: 12px;
            padding-inline: var(--size-3);
            inline-size: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--_state-layer-bg);
            transition-property: background-color, box-shadow;
            transition-duration: 0.2s;
            transition-timing-function: var(--ease-3);
        }

        .material-symbols-outlined {
            color: white;
            padding-left: 10px;
        }

        .md-size {
            font-size: var(--font-size-1) !important;

            @media screen and (min-width: 768px) {
                font-size: var(--font-size-2) !important;
            }
        }
    }

    .action-button {
        border-radius: 50%;
        position: fixed;
        bottom: 30px;
        right: 30px;
        cursor: pointer;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    }
}