@charset "UTF-8";

:root {
    --blank-header: max(3vw, calc(12 / 16 * 1rem));
    --blank: max(3vw, calc(16 / 16 * 1rem));
}

html {
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    background-color: var(--color-white);
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.material-symbols-outlined {
    color: var(--icon-primary);
    font-family: "Material Symbols Outlined", sans-serif;
    font-variation-settings:
        "FILL" 0,
        "wght" 300,
        "GRAD" 0,
        "opsz" 24;
    width: 24px;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
}

.aip-layout {
    --_side-menu-width: 14rem;
    --_chat-panel-max-width-open: calc((100vw - var(--_side-menu-width)) / 2);
    --_chat-panel-max-width-closed: calc(100vw / 2);
    --_chat-panel-max-width: var(--_chat-panel-max-width-open);
    --_chat-panel-width: min(var(--_chat-panel-max-width), max(280px, calc((100vw - var(--_side-menu-width)) * 0.3)));
    display: grid;
    grid-template-columns: var(--_side-menu-width) 1fr 0;
    width: 100%;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
}

html[data-menu-state="closed"] .aip-layout {
    --_chat-panel-max-width: var(--_chat-panel-max-width-closed);
    grid-template-columns: 0 1fr 0;
}

html[data-chat-state="open"] .aip-layout {
    grid-template-columns: var(--_side-menu-width) 1fr var(--_chat-panel-width);
}

html[data-menu-state="closed"][data-chat-state="open"] .aip-layout {
    grid-template-columns: 0 1fr var(--_chat-panel-width);
}

.aip-main {
    overflow: hidden;
    width: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.aip-main__content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 1rem var(--blank);
    display: grid;
    grid-template-columns: min(100%, 80rem);
    grid-template-rows: auto;
    align-content: start;
    justify-content: center;
    gap: calc(20 / 16 * 1rem);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.aip-main[data-size="lg"] .aip-main__content {
    grid-template-columns: 100%;
}

.aip-main[data-size="md"] .aip-main__content {
    grid-template-columns: min(100%, 80rem);
}

.aip-main[data-size="sm"] .aip-main__content {
    grid-template-columns: min(100%, 48rem);
}

.aip-main[data-size="xs"] .aip-main__content {
    grid-template-columns: min(100%, 28rem);
}

.aip-main__content-description {
    line-height: 1.5;
}

@media (max-width: 1050px) {
    .aip-layout {
        --_side-menu-width: min(61.8vw, 16rem);
        --_chat-panel-max-width-open: calc(100vw / 2);
        --_chat-panel-max-width-closed: calc(100vw / 2);
        grid-template-columns: 1fr;
    }

    html[data-menu-state="closed"][data-chat-state="open"] .aip-layout {
        grid-template-columns: 1fr var(--_chat-panel-width);
    }

    html[data-menu-state="open"][data-chat-state="open"] .aip-layout {
        grid-template-columns: 1fr var(--_chat-panel-width);
    }

    html[data-chat-state="open"] .aip-layout {
        grid-template-columns: 1fr var(--_chat-panel-width);
    }
}

@media (max-width: 768px) {
    .aip-layout {
        --_chat-panel-width: 100vw;
    }

    html[data-chat-state="open"] .aip-layout {
        grid-template-columns: 1fr;
    }
}