/*
 * Floating support launchers: labelled "Feedback" (red) and "Chat" (blue) pills.
 * The only place these are positioned. Dialogflow's own round launcher is hidden
 * inside its Shadow DOM (feedback_chat_popup.tpl); the "Chat" pill opens the chat.
 *
 * Body classes (set in main.tpl from $req_file_name):
 *   eo-has-mobile-action-bar  page has the fixed mobile "Se kurv" bar; its real height
 *                             is measured into --eo-action-bar-height
 *   eo-support-hide-mobile    checkout: no floating pills below 992px (inline links instead)
 *   eo-support-hide           payment pages: no support launchers at all
 */
:root {
    --eo-support-right: 16px;
    --eo-support-bottom: max(16px, env(safe-area-inset-bottom));
    --eo-support-height: 48px;
    --eo-support-gap: 10px;
    --eo-chat-blue: #0b57d0;
    --eo-feedback-red: #b51817;
}

.eo-support-dock {
    position: fixed;
    right: var(--eo-support-right);
    bottom: var(--eo-support-bottom);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* stacked pills share one width */
    gap: var(--eo-support-gap);
}

/* Desktop: the stuck cart sidebar would be covered on this screen size (set in JS). */
.eo-support-dock.eo-dock-left {
    right: auto;
    left: var(--eo-support-right);
}

.eo-support-pill {
    height: var(--eo-support-height);
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.eo-support-pill svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.eo-support-pill:focus-visible {
    outline: 3px solid #ff8100;
    outline-offset: 2px;
}

.eo-feedback-button {
    background: var(--eo-feedback-red);
}

.eo-chat-button {
    background: var(--eo-chat-blue);
    /* Shown once the chat widget is ready (fails safe to Dialogflow's own launcher). */
    display: none;
}

.eo-support-dock.eo-chat-ready .eo-chat-button {
    display: inline-flex;
}

/* While the chat window is open only the Chat pill stays ("Luk chat" closes it). */
body:has(df-messenger[expand]) .eo-feedback-button {
    display: none;
}

/* Inline support links (footer, checkout). */
.eo-support-inline {
    display: none;
    margin: 16px 0 4px;
    text-align: center;
    font-size: 15px;
}

.eo-support-inline a {
    font-weight: 600;
    text-decoration: underline;
}

.eo-support-inline .eo-inline-chat {
    color: var(--eo-chat-blue);
}

.eo-support-inline .eo-inline-feedback {
    color: var(--eo-feedback-red);
}

@media (max-width: 991.98px) {
    /* Keep the Chat pill 12px above the sticky "Se kurv" bar (height measured in JS). */
    body.eo-has-mobile-action-bar {
        --eo-support-bottom: calc(var(--eo-action-bar-height, 88px) + 12px);
    }

    /* Checkout: no floating pills over the order and payment controls; inline links instead. */
    body.eo-support-hide-mobile .eo-support-dock {
        display: none !important;
    }

    body.eo-support-hide-mobile .eo-support-inline {
        display: block;
    }
}

@media (max-width: 767px) {
    :root {
        --eo-support-right: 12px;
    }

    /* Only the Chat pill floats on mobile; Feedback stays in the footer. */
    .eo-feedback-button {
        display: none;
    }
}

body.eo-support-hide .eo-support-dock,
body.eo-support-hide df-messenger,
body.eo-support-hide .eo-support-inline {
    display: none !important;
}

/* Launchers must not cover overlays. */
body.modal-open .eo-support-dock,
body.modal-open df-messenger,
body:has(#eo-consent-banner:not([hidden])) .eo-support-dock,
body:has(#eo-consent-banner:not([hidden])) df-messenger,
body:has(#eo-consent-dialog:not([hidden])) .eo-support-dock,
body:has(#eo-consent-dialog:not([hidden])) df-messenger {
    visibility: hidden;
}