/* chat-widget.css - Customer chatbot floating widget (Phase 1).
 *
 * Self-contained component stylesheet. Linked directly from
 * Views/Shared/_ChatWidget.cshtml, which only renders when
 * AppConstants.CHATBOT_ENABLED is true - so when the kill-switch is off,
 * none of these rules match anything (no markup is emitted).
 *
 * NOTE: the <link> is emitted mid-body (the partial sits just before
 * </body>). This is a deliberate trade-off to keep the whole feature behind
 * one kill-switch with zero footprint when off, at the cost of a small flash
 * before the stylesheet applies. Accepted for a gated beta widget.
 *
 * BEM block: chat-widget. Brand accent #ff6b00 matches the site focus colour
 * used throughout style.css. Content ON the accent is dark (#1a1a1a) for AA
 * contrast (white on #ff6b00 is only ~2.86:1; #1a1a1a on #ff6b00 is ~6.1:1).
 * Mobile breakpoint 767px matches style-mobile.css.
 */

.chat-widget {
    /* Component-scoped tokens (style.css has no :root custom properties). */
    --cw-accent: #ff6b00;
    --cw-accent-dark: #cc5600;
    --cw-accent-rgb: 255, 107, 0;   /* hex split for rgba() in the launcher glow */
    --cw-on-accent: #1a1a1a;   /* dark content on the orange surfaces (AA) */
    --cw-bot-bg: #f1f3f5;
    --cw-bot-fg: #1a1a1a;
    --cw-user-bg: #ff6b00;
    --cw-user-fg: #1a1a1a;
    --cw-panel-bg: #ffffff;
    --cw-border: #d9dce0;
    --cw-radius: 14px;
    --cw-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);

    position: fixed;
    right: 20px;
    top: 20px;
    /* High stacking so the widget sits above site chrome. Anchored top-right,
     * so the main thing it can overlap is the site header / search bar (the
     * autocomplete dropdown is z-index 10000). Keep this comment current if
     * other overlays are added. */
    z-index: 99999;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    /* Force left alignment - the widget is injected into the page body, so a
     * site-level text-align (e.g. centred containers) would otherwise cascade
     * into the bubbles. The error bubble re-centres itself below. */
    text-align: left;
}

/* Visually-hidden text for screen readers (Bootstrap 5 dropped .sr-only). */
.chat-widget__sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Launcher bubble ------------------------------------------------ */
.chat-widget__launcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--cw-accent);
    color: var(--cw-on-accent);
    cursor: pointer;
    /* Layered glow: the existing drop-shadow plus a soft accent-coloured
     * halo (inner ring + outer aura) so the launcher reads as "lit". Both
     * are static - no animation, no movement on every page load. */
    box-shadow:
        var(--cw-shadow),
        0 0 0 6px rgba(var(--cw-accent-rgb), 0.16),
        0 0 24px 4px rgba(var(--cw-accent-rgb), 0.35);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-widget__launcher svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    pointer-events: none;
}

/* "Text" lines knocked out of the speech bubble - drawn in the launcher's
   BACKGROUND colour so they read as lines of text on the dark bubble. */
.chat-widget__launcher svg .cw-bubble-line {
    stroke: var(--cw-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Hide the Google Customer Reviews / merchant floating badge while the chat panel
   is open - it is position:fixed at z-index max, bottom-right, and overlaps the
   send button. Keyed on the body class (set by chat-widget.js) so it still applies
   when Google injects the widget AFTER the chat is already open. */
body.chat-widget-open #google-merchantwidget-iframe-wrapper {
    display: none !important;
}

/* Hide the chat launcher while an add-to-basket / notification toast is showing -
   the toast (.grid-notification, appended to <body>) is position:fixed top-right,
   the same spot as the launcher, and the launcher's higher z-index covers it.
   :has() needs no JS and covers every toast source (grid add, variant select,
   error toasts); on a browser without :has() the rule is ignored (icon stays). */
body:has(.grid-notification) .chat-widget__launcher {
    display: none !important;
}

/* When the panel is open, hide the launcher so it doesn't overlap. */
.chat-widget--open .chat-widget__launcher {
    display: none;
}

/* Active-conversation cue: when the panel is MINIMISED but a conversation is in
   progress (e.g. after tapping an in-chat link on mobile, which minimises the
   panel to reveal the page), the launcher gently pulses its glow so the customer
   knows the chat is still there. Disabled under prefers-reduced-motion (below). */
.chat-widget--has-history .chat-widget__launcher {
    animation: cw-launcher-pulse 2.2s ease-in-out infinite;
}

@keyframes cw-launcher-pulse {
    0%, 100% {
        box-shadow:
            var(--cw-shadow),
            0 0 0 6px rgba(var(--cw-accent-rgb), 0.16),
            0 0 24px 4px rgba(var(--cw-accent-rgb), 0.35);
    }
    50% {
        box-shadow:
            var(--cw-shadow),
            0 0 0 11px rgba(var(--cw-accent-rgb), 0.30),
            0 0 36px 12px rgba(var(--cw-accent-rgb), 0.60);
    }
}

/* ---- Panel ---------------------------------------------------------- */
.chat-widget__panel {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 40px);
    background: var(--cw-panel-bg);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow);
    overflow: hidden;
}

/* [hidden] is set/removed by the JS; belt-and-braces with the attribute. */
.chat-widget__panel[hidden] {
    display: none;
}

/* ---- Header --------------------------------------------------------- */
.chat-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--cw-accent);
    color: var(--cw-on-accent);
}

.chat-widget__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.chat-widget__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cw-on-accent);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ---- Message log ---------------------------------------------------- */
.chat-widget__log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-widget__msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 12px;
    /* Claude returns text with newlines; preserve them and never inject HTML. */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-widget__msg--bot {
    align-self: flex-start;
    background: var(--cw-bot-bg);
    color: var(--cw-bot-fg);
    border-bottom-left-radius: 4px;
}

.chat-widget__msg--user {
    align-self: flex-end;
    background: var(--cw-user-bg);
    color: var(--cw-user-fg);
    border-bottom-right-radius: 4px;
}

.chat-widget__msg--error {
    align-self: stretch;
    max-width: 100%;
    background: #fff3f3;
    color: #8a1f11;
    border: 1px solid #f3c0bb;
    text-align: center;
    font-size: 14px;
}

.chat-widget__msg a {
    color: inherit;
    text-decoration: underline;
}

/* Typing indicator */
.chat-widget__typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 11px 12px;
    background: var(--cw-bot-bg);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.chat-widget__typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7177;
    animation: cw-bounce 1.2s infinite ease-in-out;
}

.chat-widget__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-widget__typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes cw-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ---- Turnstile + inline notices ------------------------------------ */
.chat-widget__turnstile {
    padding: 0 14px;
}

.chat-widget__turnstile:empty {
    padding: 0;
}

/* ---- Composer ------------------------------------------------------- */
.chat-widget__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--cw-border);
    background: #fff;
}

.chat-widget__input {
    flex: 1 1 auto;
    resize: none;
    max-height: 120px;
    padding: 9px 11px;
    border: 1px solid var(--cw-border);
    border-radius: 10px;
    font: inherit;
    line-height: 1.4;
}

/* Orange focus ring on the white input matches the site-wide focus colour. */
.chat-widget__input:focus {
    outline: 3px solid var(--cw-accent);
    outline-offset: 1px;
    border-color: var(--cw-accent);
}

.chat-widget__send {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--cw-accent);
    color: var(--cw-on-accent);
    cursor: pointer;
}

.chat-widget__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-widget__send svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
}

/* Dark focus ring: the launcher/close/send sit on the orange accent, where a
 * white ring would only reach ~2.86:1. #1a1a1a on #ff6b00 is ~6.1:1 (1.4.11). */
.chat-widget__launcher:focus-visible,
.chat-widget__close:focus-visible,
.chat-widget__send:focus-visible {
    outline: 3px solid var(--cw-on-accent);
    outline-offset: 2px;
}

/* ---- Hover (gated to fine pointers, per style.css convention) ------- */
@media (hover: hover) and (pointer: fine) {
    .chat-widget__launcher:hover {
        background: var(--cw-accent-dark);
        transform: translateY(-2px);
    }

    .chat-widget__close:hover {
        background: rgba(0, 0, 0, 0.12);
    }

    .chat-widget__send:hover:not(:disabled) {
        background: var(--cw-accent-dark);
    }
}

/* ---- Mobile (matches style-mobile.css breakpoint) ------------------- */
@media only screen and (max-width: 767px) {
    .chat-widget {
        right: 14px;
        top: 14px;
    }

    /* >=16px stops iOS Safari from AUTO-ZOOMING the page when the textarea is
       focused. The zoom was shrinking the visual viewport and shifting the
       position:fixed widget - including the send button - off the right edge.
       16px is the iOS no-zoom threshold (the widget base font is 14px). */
    .chat-widget__input {
        font-size: 16px !important;
    }

    /* Open: a tall overlay sized to ~80% of the VISIBLE viewport, bottom-anchored
       with small margins - NOT a full-screen takeover. dvh tracks the visible
       viewport (excludes the mobile browser chrome), so the input row + send button
       always stay on-screen instead of being pushed below the fold by 100vh/100%. */
    .chat-widget--open {
        right: 10px;
        left: 10px;
        bottom: 10px;
        top: auto;
    }

    .chat-widget--open .chat-widget__panel {
        width: 100%;
        max-width: 100%;
        height: 80vh;          /* fallback for browsers without dvh */
        height: 80dvh;
        max-height: 80vh;
        max-height: 80dvh;
        /* keep the base border / radius / shadow so it reads as a floating panel */
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-widget__launcher,
    .chat-widget--has-history .chat-widget__launcher,
    .chat-widget__typing-dot {
        transition: none;
        animation: none;
    }

    .chat-widget__launcher:hover {
        transform: none;
    }
}