@charset "UTF-8";

.aip-main__header {
    display: grid;
    grid-template-columns: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 var(--blank-header);
    border-bottom: 1px solid var(--color-opacity-gray150);
    transition: padding-left 0.3s ease;
    scrollbar-gutter: stable;
    width: 100%;
    min-height: calc(24px + (8 / 16 * 1rem) * 2 + (8 / 16 * 1rem) * 2);
    flex-shrink: 0;
}

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

.aip-main__header-container {
    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: calc(8 / 16 * 1rem);
}

.aip-main__header-title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    flex: 1;
}

html[data-menu-state="closed"] .aip-main__header {
    padding-left: calc(
        ((8 / 16 * 1rem) + (12 / 16 * 1rem)) -
            (((8 / 16 * 1rem) * 2 + 24px - 20px) / 2) + 24px + 8 / 16 * 1rem * 2
    );
}

@media (max-width: 768px) {
    .aip-html-body:has(.aip-side-menu__toggle) .aip-main__header {
        padding-left: calc(
            ((8 / 16 * 1rem) + (12 / 16 * 1rem)) -
                (((8 / 16 * 1rem) * 2 + 24px - 20px) / 2) + 24px + 8 / 16 *
                1rem * 2
        );
    }

    html[data-menu-state="closed"] .aip-main__header:has(.aip-main__header-back) {
        padding-left: var(--blank-header);
    }
}

.aip-main__header-buttons {
    display: flex;
    align-items: center;
    gap: calc(12 / 16 * 1rem);
}

.aip-main[data-size="sm"] .aip-main__header-buttons {
    gap: calc(8 / 16 * 1rem);
}

.aip-main__header-search {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    justify-content: stretch;
    box-sizing: border-box;
}

.aip-main__header-search .aip-main__header-search-icon {
    position: absolute;
    color: var(--color-opacity-gray700);
    font-size: calc(20 / 16 * 1rem);
    font-family: "Material Symbols Outlined", sans-serif;
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 20;
    aspect-ratio: 1;
    left: calc(8 / 16 * 1rem);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.aip-main__header-search .aip-input-text--search {
    padding: calc(4 / 16 * 1rem) calc(8 / 16 * 1rem) calc(4 / 16 * 1rem)
        calc(8 / 16 * 1rem + 20px + 4 / 16 * 1rem);
}

.aip-main__header-search--clear {
    display: none;
    position: absolute;
    right: calc(3 / 16 * 1rem);
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    padding: calc(4 / 16 * 1rem);
    background-color: unset;
    border-radius: calc(4 / 16 * 1rem);
    border: none;
    cursor: pointer;
    outline: none;
}

@media (hover: hover) {
    .aip-main__header-search--clear:hover {
        background-color: var(--color-opacity-gray100);
    }
}

.aip-input-text--search:focus-visible + .aip-main__header-search--clear {
    display: flex;
}

.aip-input-text--search:not(:placeholder-shown)
    + .aip-main__header-search--clear {
    display: flex;
}

.aip-main__header-search--clear-icon {
    font-size: calc(20 / 16 * 1rem);
    font-family: "Material Symbols Outlined", sans-serif;
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 20;
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .aip-main__header-search {
        display: none;
    }
}

html[data-chat-state="open"] #aip-chat-toggle {
    background-color: var(--button-text-active-bg-color);
}

html[data-chat-state="open"] #aip-chat-toggle .material-symbols-outlined {
    color: var(--button-color);
    font-variation-settings: "FILL" 1;
}