/* _content/BS.Support.Client/SupportWidget.razor.rz.scp.css */
/* The help widget's own look. Every colour, radius and offset comes from a --bs-support-widget-* variable, falling back to the app's
   design tokens (--primary, --background, --foreground, --border, --muted-foreground, --destructive, --ring) and then to the system
   colours, so it fits each product without a Tailwind scan of the package. */

.bs-support-button[b-8hyiy1pgl3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: var(--bs-support-widget-button-radius, 999px);
    background: var(--bs-support-widget-accent, var(--primary, ButtonFace));
    color: var(--bs-support-widget-accent-text, var(--primary-foreground, ButtonText));
    box-shadow: var(--bs-support-widget-shadow, none);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.bs-support--floating .bs-support-button[b-8hyiy1pgl3] {
    position: fixed;
    right: var(--bs-support-widget-offset-x, 1rem);
    bottom: var(--bs-support-widget-offset-y, 1rem);
    z-index: var(--bs-support-widget-z, 40);
}

.bs-support-icon[b-8hyiy1pgl3] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.bs-support-panel[b-8hyiy1pgl3] {
    box-sizing: border-box;
    width: min(26rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(44rem, calc(100dvh - 2rem));
    margin: auto var(--bs-support-widget-offset-x, 1rem) var(--bs-support-widget-offset-y, 1rem) auto;
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid var(--bs-support-widget-border, var(--border, GrayText));
    border-radius: var(--bs-support-widget-radius, 1rem);
    background: var(--bs-support-widget-surface, var(--background, Canvas));
    color: var(--bs-support-widget-text, var(--foreground, CanvasText));
    box-shadow: var(--bs-support-widget-panel-shadow, none);
    font: inherit;
}

.bs-support-panel[b-8hyiy1pgl3]::backdrop {
    background: var(--bs-support-widget-backdrop, transparent);
}

.bs-support-head[b-8hyiy1pgl3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bs-support-title[b-8hyiy1pgl3] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.bs-support-close[b-8hyiy1pgl3] {
    display: inline-flex;
    flex: none;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bs-support-close svg[b-8hyiy1pgl3] {
    width: 1.25rem;
    height: 1.25rem;
}

.bs-support-intro[b-8hyiy1pgl3],
.bs-support-note[b-8hyiy1pgl3] {
    margin: 0.5rem 0 0;
}

.bs-support-note[b-8hyiy1pgl3],
.bs-support-required[b-8hyiy1pgl3],
.bs-support-hint[b-8hyiy1pgl3],
.bs-support-privacy[b-8hyiy1pgl3] {
    color: var(--bs-support-widget-muted, var(--muted-foreground, inherit));
    font-size: 0.875rem;
}

.bs-support-required[b-8hyiy1pgl3],
.bs-support-hint[b-8hyiy1pgl3],
.bs-support-privacy[b-8hyiy1pgl3] {
    margin: 0;
}

.bs-support-form[b-8hyiy1pgl3] {
    display: grid;
    gap: 0.875rem;
    margin-top: 1rem;
}

.bs-support-field[b-8hyiy1pgl3] {
    display: grid;
    gap: 0.25rem;
}

.bs-support-field label[b-8hyiy1pgl3] {
    font-size: 0.9375rem;
    font-weight: 600;
}

.bs-support-field input[b-8hyiy1pgl3],
.bs-support-field select[b-8hyiy1pgl3],
.bs-support-field textarea[b-8hyiy1pgl3] {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bs-support-widget-border, var(--border, GrayText));
    border-radius: var(--bs-support-widget-field-radius, 0.5rem);
    background: var(--bs-support-widget-field, var(--background, Field));
    color: var(--bs-support-widget-field-text, var(--foreground, FieldText));
    font: inherit;
}

.bs-support-field textarea[b-8hyiy1pgl3] {
    min-height: 8rem;
    resize: vertical;
}

.bs-support-field [aria-invalid="true"][b-8hyiy1pgl3] {
    border-color: var(--bs-support-widget-danger, var(--destructive, currentColor));
}

.bs-support-mark[b-8hyiy1pgl3],
.bs-support-error[b-8hyiy1pgl3] {
    color: var(--bs-support-widget-danger, var(--destructive, inherit));
}

.bs-support-error[b-8hyiy1pgl3] {
    margin: 0;
    font-size: 0.875rem;
}

.bs-support-problem[b-8hyiy1pgl3] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bs-support-widget-danger, var(--destructive, currentColor));
    border-radius: var(--bs-support-widget-field-radius, 0.5rem);
    background: var(--bs-support-widget-danger-soft, transparent);
    font-size: 0.9375rem;
}

.bs-support-problem a[b-8hyiy1pgl3],
.bs-support-privacy a[b-8hyiy1pgl3] {
    color: inherit;
    text-decoration: underline;
}

.bs-support-actions[b-8hyiy1pgl3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.bs-support-send[b-8hyiy1pgl3],
.bs-support-secondary[b-8hyiy1pgl3] {
    padding: 0.5rem 1rem;
    border-radius: var(--bs-support-widget-field-radius, 0.5rem);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bs-support-send[b-8hyiy1pgl3] {
    border: 0;
    background: var(--bs-support-widget-accent, var(--primary, ButtonFace));
    color: var(--bs-support-widget-accent-text, var(--primary-foreground, ButtonText));
}

.bs-support-send:disabled[b-8hyiy1pgl3] {
    opacity: 0.6;
    cursor: progress;
}

.bs-support-secondary[b-8hyiy1pgl3] {
    border: 1px solid var(--bs-support-widget-border, var(--border, GrayText));
    background: transparent;
    color: inherit;
}

.bs-support-done[b-8hyiy1pgl3] {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.bs-support-done-title[b-8hyiy1pgl3] {
    margin: 0;
    color: var(--bs-support-widget-success, inherit);
    font-weight: 700;
}

.bs-support-done-text[b-8hyiy1pgl3] {
    margin: 0;
}

/* The chat with the assistant: the AI notice, the conversation (a scrolling log), the typing line and the question. */
.bs-support-chat[b-8hyiy1pgl3] {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.bs-support-ai-note[b-8hyiy1pgl3] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-support-widget-border, var(--border, GrayText));
    border-radius: var(--bs-support-widget-field-radius, 0.5rem);
    color: var(--bs-support-widget-muted, var(--muted-foreground, inherit));
    font-size: 0.8125rem;
    line-height: 1.4;
}

.bs-support-chat-log[b-8hyiy1pgl3] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-height: min(22rem, 45dvh);
    min-height: 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bs-support-chat-msg[b-8hyiy1pgl3] {
    max-width: 88%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-support-widget-field-radius, 0.5rem);
    font-size: 0.9375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bs-support-chat-msg--customer[b-8hyiy1pgl3] {
    align-self: flex-end;
    background: var(--bs-support-widget-accent, var(--primary, Highlight));
    color: var(--bs-support-widget-accent-text, var(--primary-foreground, HighlightText));
}

.bs-support-chat-msg--assistant[b-8hyiy1pgl3] {
    align-self: flex-start;
    border: 1px solid var(--bs-support-widget-border, var(--border, GrayText));
    background: var(--bs-support-widget-field, var(--background, Canvas));
    color: var(--bs-support-widget-field-text, var(--foreground, CanvasText));
}

.bs-support-chat-line[b-8hyiy1pgl3] {
    display: block;
}

.bs-support-chat-who[b-8hyiy1pgl3] {
    margin: 0 0 0.25rem;
    color: var(--bs-support-widget-muted, var(--muted-foreground, inherit));
    font-size: 0.75rem;
    font-weight: 600;
}

.bs-support-chat-text[b-8hyiy1pgl3],
.bs-support-chat-sources-title[b-8hyiy1pgl3] {
    margin: 0 0 0.375rem;
}

.bs-support-chat-text:last-child[b-8hyiy1pgl3] {
    margin-bottom: 0;
}

.bs-support-chat-list[b-8hyiy1pgl3],
.bs-support-chat-sources[b-8hyiy1pgl3] {
    margin: 0 0 0.375rem;
    padding-left: 1.125rem;
}

.bs-support-chat-sources-title[b-8hyiy1pgl3] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.bs-support-chat-sources[b-8hyiy1pgl3] {
    font-size: 0.8125rem;
}

.bs-support-chat-sources a[b-8hyiy1pgl3] {
    color: inherit;
    text-decoration: underline;
}

.bs-support-chat-handoff[b-8hyiy1pgl3] {
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.bs-support-chat-typing[b-8hyiy1pgl3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.25rem;
    margin: 0;
    color: var(--bs-support-widget-muted, var(--muted-foreground, inherit));
    font-size: 0.8125rem;
}

.bs-support-dots[b-8hyiy1pgl3] {
    display: inline-flex;
    gap: 0.1875rem;
}

.bs-support-dots span[b-8hyiy1pgl3] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
}

.bs-support-chat-form[b-8hyiy1pgl3] {
    display: grid;
    gap: 0.5rem;
}

.bs-support-chat-form textarea[b-8hyiy1pgl3] {
    min-height: 3.5rem;
}

.bs-support-chat-form .bs-support-send[aria-disabled="true"][b-8hyiy1pgl3] {
    opacity: 0.6;
    cursor: progress;
}

/* Read by screen readers, never seen. */
.bs-support-sr[b-8hyiy1pgl3] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The bots' field: off screen, never in view (people and screen readers do not meet it). */
.bs-support-trap[b-8hyiy1pgl3] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bs-support-button:focus-visible[b-8hyiy1pgl3],
.bs-support-close:focus-visible[b-8hyiy1pgl3],
.bs-support-send:focus-visible[b-8hyiy1pgl3],
.bs-support-secondary:focus-visible[b-8hyiy1pgl3],
.bs-support-field input:focus-visible[b-8hyiy1pgl3],
.bs-support-field select:focus-visible[b-8hyiy1pgl3],
.bs-support-field textarea:focus-visible[b-8hyiy1pgl3],
.bs-support-problem a:focus-visible[b-8hyiy1pgl3],
.bs-support-privacy a:focus-visible[b-8hyiy1pgl3],
.bs-support-chat-sources a:focus-visible[b-8hyiy1pgl3],
.bs-support-done:focus-visible[b-8hyiy1pgl3] {
    outline: 2px solid var(--bs-support-widget-focus, var(--ring, Highlight));
    outline-offset: 2px;
}

/* Phones: the panel becomes a sheet along the bottom edge. */
@media (max-width: 30rem) {
    .bs-support-panel[b-8hyiy1pgl3] {
        width: 100%;
        max-height: calc(100dvh - 3rem);
        margin: auto 0 0;
        border-radius: var(--bs-support-widget-radius, 1rem) var(--bs-support-widget-radius, 1rem) 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bs-support-button[b-8hyiy1pgl3] {
        transition: transform 120ms ease;
    }

    .bs-support-button:hover[b-8hyiy1pgl3] {
        transform: translateY(-1px);
    }

    .bs-support-dots span[b-8hyiy1pgl3] {
        animation: bs-support-dot-b-8hyiy1pgl3 1.2s ease-in-out infinite;
    }

    .bs-support-dots span:nth-child(2)[b-8hyiy1pgl3] {
        animation-delay: 0.15s;
    }

    .bs-support-dots span:nth-child(3)[b-8hyiy1pgl3] {
        animation-delay: 0.3s;
    }

    @keyframes bs-support-dot-b-8hyiy1pgl3 {
        0%, 80%, 100% {
            opacity: 0.3;
        }

        40% {
            opacity: 1;
        }
    }
}