/*
 * Material Icons for the storefront.
 *
 * The @font-face lived only in admin.css, so on the front office the icon
 * elements rendered their LIGATURE NAMES as text — the visitor saw the words
 * "chat_bubble" and "close" instead of icons (PSM-MULTICHAT-UI-001).
 *
 * font-display: swap so a slow font never blanks the launcher.
 */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
}

/* Root container is `position: fixed` but takes no width/height itself —
   the launcher button (also fixed) and the channels panel (also fixed)
   anchor themselves directly to the viewport edge. We never let the root
   inherit a static-position offset from the document flow, which would
   otherwise make `position: fixed` snap to the centred theme container
   (the same kind of bug the accessibility module avoids by always
   anchoring its toolbar with an explicit side rule). */
.psm-multichat-root {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    z-index: 9990;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.psm-launcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    z-index: 9990;
}
.psm-launcher:hover { transform: scale(1.1); }
.psm-launcher:focus-visible {
    transform: scale(1.1);
    outline: 3px solid #1d4ed8;
    outline-offset: 3px;
}
/* Hide the visible label text but keep it accessible (screen-reader-only).
   Earlier we shipped a `position:absolute; left:-9999px` rule that
   technically works but is a known bad pattern for screen readers — the
   below is the standard sr-only / visually-hidden recipe. */
.psm-launcher__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.psm-launcher__icon {
    font-size: 26px;
}

.psm-channels {
    position: fixed;
    bottom: 96px;
    right: 24px;
    display: none;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(20, 30, 40, 0.16);
    overflow: hidden;
    z-index: 9989;
}
.psm-multichat-root.is-open .psm-channels { display: block; }
.psm-channels__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}
.psm-channels__item { margin: 0; padding: 0; }
.psm-channel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #1f2933;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.psm-channel:hover { background-color: #f5f7fa; }
.psm-channel:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: -3px;
    background-color: #f5f7fa;
}
.psm-channel-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.psm-channel-body { display: flex; flex-direction: column; }
.psm-channel-title { font-weight: 600; font-size: 0.95rem; }
.psm-channel-subtitle { font-size: 0.8rem; color: #5b6877; }
.psm-channel-qr {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #f1f4f7;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Callback + email forms — both anchored to the viewport edge (the side
   is overridden per-scope by generated-*.css when the merchant flips
   POSITION). Width is fixed; the box is the same visual scale as the
   channels panel. */
.psm-callback,
.psm-email {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(20, 30, 40, 0.16);
    padding: 1rem;
    z-index: 9991;
}
.psm-callback[hidden],
.psm-email[hidden] { display: none; }
.psm-callback__title,
.psm-email__title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.psm-callback__field,
.psm-email__field { display: block; margin-bottom: 0.6rem; }
.psm-callback__label,
.psm-email__label { display: block; font-size: 0.85rem; color: #5b6877; margin-bottom: 0.25rem; }
.psm-callback__field input,
.psm-email__field input,
.psm-email__field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d3dae3;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}
.psm-email__field textarea { resize: vertical; min-height: 90px; }
.psm-callback__submit,
.psm-email__submit {
    margin-top: 0.5rem;
    background: #2c64ff;
    color: #fff;
    border: none;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.psm-callback__submit:hover,
.psm-email__submit:hover { background: #1f4fd9; }
.psm-callback__field input:focus-visible,
.psm-email__field input:focus-visible,
.psm-email__field textarea:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 1px;
    border-color: #1d4ed8;
}
.psm-callback__submit:focus-visible,
.psm-email__submit:focus-visible {
    outline: 3px solid #0b3aa0;
    outline-offset: 2px;
}
.psm-required {
    color: #c92a2a;
    margin-left: 2px;
    font-weight: 700;
}
.psm-prompt__close:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}
.psm-callback__status,
.psm-email__status { margin: 0.5rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.psm-callback__status.is-success,
.psm-email__status.is-success { color: #28a745; }
.psm-callback__status.is-error,
.psm-email__status.is-error { color: #c92a2a; }

/* Prompts */
.psm-prompts { position: fixed; bottom: 88px; max-width: calc(100vw - 24px); z-index: 9988; }
.psm-prompt {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(20, 30, 40, 0.14);
    padding: 0.85rem 2.4rem 0.85rem 1rem;
    margin-bottom: 0.5rem;
    position: relative;
    max-width: 280px;
    font-size: 0.92rem;
    color: #1f2933;
}
.psm-prompt__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #9aa5b1;
    cursor: pointer;
}
.psm-prompt__close:hover { color: #1f2933; }

/* Product CTAs */
.psm-product-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.psm-product-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
}
.psm-product-cta__btn:hover { opacity: 0.92; text-decoration: none; }