/**
 * KI-Sommelier widget — floating button and chat panel.
 *
 * Written against the bio-o3 child theme (Bootstrap 5); greens follow the
 * theme's primary (#8eb61e) with the same tints the typesense UI uses.
 */

.bio-som__toggle {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    /* Above the page and bio-buybox's buy bar (1030), below Bootstrap's
       overlays: the menu and mini cart (offcanvas 1040/1045) and dialogs like
       the cookie banner (modal 1050/1055) cover it when they open (Seb,
       2026-10-14; it was 1060, on top of all of them). */
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border: 0;
    border-radius: 2rem;
    background: var(--bs-primary, #8eb61e);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: opacity .2s ease, visibility .2s ease;
}

.bio-som__toggle:hover {
    filter: brightness(1.05);
}

/* When the footer is on screen, get out of the way of its legal links —
   the Impressum must stay clickable (a legal requirement in Germany). The JS
   only sets this on pages tall enough to scroll, so short pages keep the
   button reachable. The open chat panel is unaffected. The same while the
   button would cover the product page's buy box (quantity, "In den
   Warenkorb", PayPal): the JS measures the overlap. */
.bio-som--footer .bio-som__toggle,
.bio-som--buybox .bio-som__toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bio-som__panel {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1036; /* the open chat too: an offcanvas or dialog opens on top */
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 2.5rem);
    height: 560px;
    max-height: calc(100vh - 2.5rem);
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);
    overflow: hidden;
}

.bio-som__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    background: #f6f9ef;
    border-bottom: 1px solid #e9ecef;
}

.bio-som__head-actions button {
    border: 0;
    background: none;
    color: #6c757d;
    cursor: pointer;
    font-size: .875rem;
    padding: .25rem .375rem;
}

.bio-som__close {
    font-size: 1.25rem !important;
    line-height: 1;
}

.bio-som__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.bio-som__msg {
    max-width: 88%;
    padding: .5rem .75rem;
    border-radius: .625rem;
    font-size: .9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.bio-som__msg--user {
    align-self: flex-end;
    background: var(--bs-primary, #8eb61e);
    color: #fff;
}

.bio-som__msg--assistant {
    align-self: flex-start;
    background: #f1f3f5;
}

.bio-som__msg--error {
    align-self: center;
    background: #fff3cd;
    color: #664d03;
    font-size: .8125rem;
}

.bio-som__msg--assistant.is-typing:empty::after {
    content: "…";
    animation: bio-som-blink 1s infinite;
}

@keyframes bio-som-blink {
    50% { opacity: .3; }
}

.bio-som__card {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .375rem 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid #d6e4ac;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}

.bio-som__card:hover {
    background: #fbfcf8;
    color: inherit;
    text-decoration: none;
}

.bio-som__card-thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 44px;
}

.bio-som__card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.bio-som__card-title {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-som__card-meta {
    font-size: .75rem;
    color: #6c757d;
}

.bio-som__card-price {
    font-size: .85rem;
    font-weight: 600;
    color: #4a5f10;
}

.bio-som__card-basket {
    flex: 0 0 auto;
    border: 1px solid var(--bs-primary, #8eb61e);
    background: #fff;
    color: #4a5f10;
    border-radius: .375rem;
    font-size: .75rem;
    padding: .25rem .5rem;
    cursor: pointer;
}

.bio-som__card-basket:disabled {
    opacity: .7;
    cursor: default;
}

.bio-som__form {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid #e9ecef;
}

.bio-som__input {
    flex: 1 1 auto;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: .5rem .625rem;
    font-size: .9rem;
}

.bio-som__send {
    border: 0;
    border-radius: .375rem;
    background: var(--bs-primary, #8eb61e);
    color: #fff;
    padding: .5rem .875rem;
    font-weight: 600;
    cursor: pointer;
}

.bio-som__send:disabled {
    opacity: .6;
}

/* AI disclosure: fixed template text under the header, visible before the
   first message and readable (not the old 11px #adb5bd footnote). */
.bio-som__disclosure {
    margin: 0;
    padding: .5rem 1rem;
    font-size: .75rem;
    line-height: 1.35;
    color: #495057;
    background: #f6f9ef;
    border-bottom: 1px solid #e9ecef;
}

/* The close button: one touch target with the word on phones. */
.bio-som__close-text {
    display: none;
}

/* Phones and tablets: a round launcher with the glass only (Seb, 2026-10-14);
   "Sommelier fragen" stays its accessible name. */
@media (max-width: 767.98px) {
    .bio-som__toggle {
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        justify-content: center;
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
    }
    .bio-som__toggle-icon {
        font-size: 1.5rem;
        line-height: 1;
    }
    .bio-som__toggle-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* iOS zooms into a field under 16px on focus, which pushed the chat's
   header out of view. */
@media (max-width: 767.98px), (pointer: coarse) {
    .bio-som__input {
        font-size: 16px;
    }
}

/* Phones: full screen, sized to the visible area (the script follows the
   visual viewport, so the header stays on top when the keyboard is open);
   the page behind does not scroll; the header buttons are 44px targets. */
@media (max-width: 575.98px) {
    .bio-som__panel {
        top: var(--bio-som-top, 0);
        right: 0;
        bottom: auto;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: var(--bio-som-height, 100dvh);
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    html.bio-som-open,
    html.bio-som-open body {
        overflow: hidden;
    }
    .bio-som__head {
        padding: .25rem .25rem .25rem 1rem;
    }
    .bio-som__head-actions {
        display: flex;
        gap: .25rem;
    }
    .bio-som__head-actions button {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        min-width: 44px;
        min-height: 44px;
        padding: 0 .75rem;
        color: #343a40;
        font-size: .9375rem;
    }
    .bio-som__close-text {
        display: inline;
        font-size: .9375rem; /* the button's 1.25rem is for the × */
    }
    .bio-som__messages {
        overscroll-behavior: contain;
    }
    .bio-som__form {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }
}