/* SmartHelpGenieWidget — panel chrome and transcript styling around the Brandsync <bs-*> web components.
   Colours/spacing come from the --bs-* tokens shipped in @brandsync/wc's brandsync-wc.css (loaded in index.html).
   Not Blazor CSS-isolated: index.html doesn't link the isolation bundle, same reason SmartHelp uses a global <style>. */

.shg-widget {
    position: fixed;
    z-index: 9997;
}

/* Split: docked to the right edge under the app bar; app.css makes the page content give way (body.shg-split-active).
   Width is user-resizable via .shg-resize-handle and published as --shg-panel-width by smartHelpGenie.js. */
.shg-widget.shg-widget--split {
    top: calc(var(--mud-appbar-height, 64px) + 2px);
    right: 2px;
    bottom: 2px;
    width: var(--shg-panel-width, 420px);
    max-width: calc(100vw - 4px);
}

/* Full screen: covers the whole viewport, above the split panel's z-index */
.shg-widget.shg-widget--fullscreen {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.shg-widget.shg-widget--fullscreen .shg-surface {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* Full screen keeps the conversation in a centred column (about 1100px, measured from the Brandsync Genie page)
   instead of stretching text across the whole viewport. The header stays full width, and the scroll area itself stays
   full width so its scrollbar sits at the screen edge: the column is made with side padding/margins that grow as the
   viewport widens, never dropping below the normal gutter. */
.shg-widget.shg-widget--fullscreen {
    --shg-content-width: 1100px;
    --shg-content-gutter: max(var(--bs-spacing-200), calc((100% - var(--shg-content-width)) / 2));
}

.shg-widget.shg-widget--fullscreen .shg-transcript {
    padding-left: var(--shg-content-gutter);
    padding-right: var(--shg-content-gutter);
}

.shg-widget.shg-widget--fullscreen .shg-composer {
    margin-left: var(--shg-content-gutter);
    margin-right: var(--shg-content-gutter);
}

/* Full screen: Chat History opens as a side pane next to the conversation (like the Brandsync Genie page) instead of
   the dimmed overlay drawer the narrow split panel uses. .shg-main becomes a two-column grid: the chat in column 1,
   the history pane in column 2 (a zero-width auto column while history is closed). The centred-column padding above
   is a percentage of the chat's own width, so the conversation re-centres in the space that is left. */
.shg-widget.shg-widget--fullscreen .shg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto auto;
}

.shg-widget.shg-widget--fullscreen .shg-transcript { grid-column: 1; grid-row: 1; }
.shg-widget.shg-widget--fullscreen .shg-composer { grid-column: 1; grid-row: 2; }
.shg-widget.shg-widget--fullscreen .shg-disclaimer { grid-column: 1; grid-row: 3; }

.shg-widget.shg-widget--fullscreen .shg-history-backdrop {
    display: none;
}

.shg-widget.shg-widget--fullscreen .shg-history-drawer {
    position: static;
    grid-column: 2;
    grid-row: 1 / 4;
    width: min(456px, 45vw);
    box-shadow: none;
    border-left: 1px solid var(--bs-border-default);
}

.shg-resize-handle {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}

.shg-resize-handle:hover {
    background: rgba(6, 103, 105, 0.25);
}

.shg-widget .shg-surface {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bs-surface-base);
    border: 1px solid var(--bs-border-default);
    border-radius: var(--bs-border-radius-200);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    font-family: var(--bs-typography-font-family-body), sans-serif;
}

/* ── Launcher button: white circle with a soft green "bloom" ────────────────
   Solid white (also on hover/focus, where MudBlazor would otherwise tint the surface colour) and a diffuse glow in the
   portal's primary teal (#066769) built from three stacked shadows: a faint ring, a tight glow and a wide halo. */
.mud-fab.shg-fab,
.mud-fab.shg-fab.mud-fab-surface:hover,
.mud-fab.shg-fab.mud-fab-surface:focus-visible,
.mud-fab.shg-fab.mud-fab-surface:active {
    background-color: #fff;
}

.mud-fab.shg-fab {
    box-shadow:
        0 0 0 3px rgba(6, 103, 105, 0.10),
        0 0 14px 5px rgba(6, 103, 105, 0.26),
        0 0 34px 12px rgba(6, 103, 105, 0.14);
    transition: box-shadow 0.25s ease-in-out;
}

.mud-fab.shg-fab:hover,
.mud-fab.shg-fab:focus-visible {
    box-shadow:
        0 0 0 3px rgba(6, 103, 105, 0.16),
        0 0 18px 7px rgba(6, 103, 105, 0.36),
        0 0 42px 16px rgba(6, 103, 105, 0.20);
}

/* ── Transcript ─────────────────────────────────────────────────────────── */

.shg-transcript {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--bs-spacing-300) var(--bs-spacing-200);
}

.shg-user {
    align-self: flex-end;
    max-width: 80%;
    margin: 0;
    padding: var(--bs-spacing-100) var(--bs-spacing-150);
    border-radius: var(--bs-border-radius-150);
    background: var(--bs-color-primary-container);
    color: var(--bs-text-default);
    font-size: var(--bs-font-size-md);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Gap between a user's bubble and the answer that follows (Genie chatbot pattern: 40px) */
.shg-user + .shg-bot,
.shg-user + .shg-thinking {
    margin-top: var(--bs-spacing-500);
}

/* ...and between an answer and the next user bubble */
.shg-bot + .shg-user {
    margin-top: var(--bs-spacing-300);
}

.shg-bot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bs-spacing-50);
    max-width: 100%;
}

.shg-bot-text {
    color: var(--bs-text-default);
    font-size: var(--bs-font-size-md);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.shg-bot-text--error {
    color: var(--mud-palette-error);
}

.shg-bot-text > :first-child {
    margin-top: 0;
}

.shg-bot-text > :last-child {
    margin-bottom: 0;
}

.shg-bot-text p,
.shg-bot-text ul,
.shg-bot-text ol {
    margin: 0 0 var(--bs-spacing-100);
}

/* MudBlazor's global reset is `ul { margin: 0; padding: 0; list-style: none }`, which strips every bullet and number from
   Markdown lists, so the markers have to be restored explicitly here. */
.shg-bot-text ul,
.shg-bot-text ol {
    padding-left: var(--bs-spacing-300);
    list-style-position: outside;
}

.shg-bot-text ul {
    list-style-type: disc;
}

.shg-bot-text ul ul {
    list-style-type: circle;
}

.shg-bot-text ol {
    list-style-type: decimal;
}

.shg-bot-text li {
    display: list-item;
    margin-bottom: var(--bs-spacing-50);
}

.shg-bot-text li:last-child {
    margin-bottom: 0;
}

.shg-bot-text li > ul,
.shg-bot-text li > ol {
    margin-top: var(--bs-spacing-50);
    margin-bottom: 0;
}

.shg-bot-text table {
    border-collapse: collapse;
    margin: var(--bs-spacing-100) 0;
    font-size: var(--bs-font-size-sm);
}

.shg-bot-text th,
.shg-bot-text td {
    border: 1px solid var(--bs-border-default);
    padding: var(--bs-spacing-50) var(--bs-spacing-100);
    text-align: left;
}

.shg-bot-text code {
    background: var(--bs-color-neutral-container);
    border-radius: var(--bs-border-radius-50, 4px);
    padding: 0 4px;
}

.shg-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-spacing-100);
    margin-top: var(--bs-spacing-100);
}

/* Suggestion chips at Brandsync's "medium" chip size (24px tall, 14px text — the same values bs-chip-filter and
   bs-chip-informative use for size="md"). The suggestion button has no size option, only the exposed ::part, and its
   own default is a 40px-tall pill with 16px text and an 80px minimum width. */
.shg-suggestions bs-chatbot-suggestion-button::part(button) {
    height: var(--bs-spacing-300);
    min-width: 0;
    padding: 0 var(--bs-spacing-150);
    font-size: var(--bs-font-size-sm);
    line-height: calc(var(--bs-line-height-body-sm) * 1px);
}

/* Smart Help only offers feedback and copy on a reply: the "more options" menu has no entries and regenerate
   isn't supported. A reply that has already been rated keeps copy but drops the thumbs. */
.shg-bot bs-chatbot-response-action::part(menu),
.shg-bot bs-chatbot-response-action::part(regenerate) {
    display: none;
}

.shg-bot bs-chatbot-response-action.shg-actions--rated::part(like),
.shg-bot bs-chatbot-response-action.shg-actions--rated::part(dislike) {
    display: none;
}

.shg-thinking {
    align-self: flex-start;
}

.shg-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bs-spacing-150);
    padding: var(--bs-spacing-500) 0;
    color: var(--bs-text-neutral-default);
    font-size: var(--bs-font-size-sm);
}

/* ── History drawer (docks to the right edge of everything below the header) ── */

.shg-main {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.shg-history-backdrop {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(33, 38, 46, 0.32);
}

.shg-history-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 85%;
    background: var(--bs-surface-raised);
    box-shadow: var(--bs-shadow-lg);
    overflow-y: auto;
}

.shg-history-item.mud-button-root {
    flex-shrink: 0;
    justify-content: flex-start;
    text-transform: none;
    text-align: left;
    margin-bottom: var(--bs-spacing-50);
    padding: var(--bs-spacing-100) var(--bs-spacing-150);
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-150);
}

.shg-history-item.mud-button-root .mud-button-label {
    justify-content: flex-start;
    min-width: 0;
}

.shg-history-item--active.mud-button-root {
    background: var(--bs-color-primary-container);
    border-color: var(--bs-border-default);
}

.shg-history-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.shg-history-item-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--bs-font-size-md);
    font-weight: 500;
    color: var(--bs-text-default);
}

.shg-history-item-date {
    font-size: var(--bs-font-size-sm);
    font-weight: 400;
    color: var(--bs-text-neutral-default);
}

/* ── Feedback card (bs-chatbot-feedback, docked to the bottom of the area below the header) ── */

.shg-feedback-backdrop {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(33, 38, 46, 0.32);
}

.shg-feedback-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: var(--bs-spacing-200);
}

.shg-feedback-card {
    background: var(--bs-surface-raised);
    border-radius: var(--bs-border-radius-200);
    box-shadow: var(--bs-shadow-lg);
}

/* Smart Help feedback is submit-only; the "Start new chat" shortcut isn't wanted here (the header has New chat). */
.shg-feedback-card bs-chatbot-feedback::part(new-chat) {
    display: none;
}

/* ── Composer + disclaimer ──────────────────────────────────────────────── */

.shg-composer {
    margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;
}

/* Voice input is off (SmartHelp:VoiceInputEnabled is false; the default is true): the mic stays visible but greyed out, and the
   widget ignores its click. */
.shg-composer--no-voice::part(mic) {
    opacity: 0.35;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* Image attach isn't supported by Smart Help (the classic widget hides it too). */
.shg-composer::part(attach) {
    display: none;
}

.shg-disclaimer {
    /* AI disclaimer at 12px (--bs-font-size-xs); line-height is a unitless px value in this component */
    --bs-ai-disclaimer-font-size: var(--bs-font-size-xs);
    --bs-ai-disclaimer-line-height: 16;
    padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);
}

.shg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Narrow viewports: no room to dock beside the page, so split takes the full width (as the classic widget did) */
@media (max-width: 900px) {
    .shg-widget.shg-widget--split {
        width: 100vw;
    }

    .shg-resize-handle {
        display: none;
    }
}