/* =============================================================================
 * Regilyze — Live Chat Widget
 * Loaded site-wide from includes/footer.php.
 *
 * Every selector is prefixed .rgc- and the root is #rgChatRoot, so nothing here
 * can reach into page styles and nothing on a page can accidentally restyle the
 * widget. Colours are taken from the site's existing palette (--accent-orange
 * #FF6B35 and the greys used across the marketing pages) with literal
 * fallbacks, because this file also loads on pages that do not define the
 * custom properties.
 * ========================================================================== */

#rgChatRoot {
    --rgc-accent: var(--accent-orange, #FF6B35);
    --rgc-accent-dark: #E85A28;
    --rgc-text: #18181B;
    --rgc-muted: #71717A;
    --rgc-line: #E4E4E7;
    --rgc-bg: #FFFFFF;
    --rgc-them: #F4F4F5;
    --rgc-radius: 16px;
    --rgc-shadow: 0 12px 40px rgba(24, 24, 27, .16);
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483000;   /* above the cookie banner, below nothing else we own */
    font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT FIX #20 (2026-08-20c) — inline image preview inside a chat bubble.
   Matches .rg-msg-bubble-img in admin/tabs/messages.php and the <img> the
   customer dashboard renders, so a screenshot looks the same on all three
   surfaces. Height-capped so one tall phone screenshot cannot push the rest of
   the conversation off screen.
   ══════════════════════════════════════════════════════════════════════════ */
.rgc-att-img {
    display: block;
    margin-top: 8px;
    line-height: 0;
}
.rgc-att-img img {
    max-width: 100%;
    max-height: 180px;
    border-radius: 10px;
    border: 1px solid var(--rgc-line);
    cursor: pointer;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX #V2 (2026-08-19) — THE WIDGET IGNORED EVERY `hidden` ATTRIBUTE
   ══════════════════════════════════════════════════════════════════════════
   The HTML `hidden` attribute is implemented by the browser's own stylesheet as
   `[hidden] { display: none }`. That rule has almost no specificity, so ANY
   author rule that sets `display` on the same element beats it. Six rules in
   this file did exactly that:

       .rgc-panel     { display: flex }   -> the panel never closed
       .rgc-thread    { display: flex }   -> the message area showed before a
                                             chat existed
       .rgc-typing    { display: flex }   -> the "agent is typing" dots were
                                             permanently visible, including on
                                             the intro form, where there is no
                                             agent and no conversation
       .rgc-composer  { display: flex }   -> "End chat" appeared to do nothing:
       .rgc-end       { display: block }     the server closed the chat, the
                                             client called markEnded(), and the
                                             composer and End button stayed on
                                             screen regardless

   Every one of those was set with el.hidden = true/false in js/live-chat.js and
   silently had no effect. The JavaScript was right; this stylesheet was
   overriding it.

   One rule fixes all of them. !important is warranted here and nowhere else in
   this file: `hidden` means hidden, and no component rule should ever be able
   to argue with it. Scoped to #rgChatRoot so it cannot affect the host page. */
#rgChatRoot [hidden],
#rgChatRoot[hidden] { display: none !important; }

/* ── Launcher ───────────────────────────────────────────────────────────── */
.rgc-launcher {
    position: relative;
    width: 58px; height: 58px;
    border: none; border-radius: 50%;
    background: var(--rgc-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 107, 53, .38);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rgc-launcher:hover { background: var(--rgc-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,107,53,.46); }
.rgc-launcher:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 3px; }
.rgc-launcher svg { width: 26px; height: 26px; }

/* Icon swap is opacity+rotate rather than display, so the transition can run. */
.rgc-launcher-icon, .rgc-launcher-x {
    position: absolute; display: flex;
    transition: opacity .18s ease, transform .18s ease;
}
.rgc-launcher-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.rgc-launcher.is-open .rgc-launcher-icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.rgc-launcher.is-open .rgc-launcher-x { opacity: 1; transform: none; }

.rgc-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 21px; height: 21px; padding: 0 6px;
    background: #DC2626; color: #fff;
    border: 2px solid #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 17px;
    text-align: center;
}
/* Online pip. Sits opposite the badge so the two never overlap. */
.rgc-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 13px; height: 13px;
    background: #16A34A; border: 2px solid #fff; border-radius: 50%;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.rgc-panel {
    position: absolute;
    right: 0; bottom: 72px;
    width: 370px;
    max-height: min(620px, calc(100vh - 120px));
    background: var(--rgc-bg);
    border: 1px solid var(--rgc-line);
    border-radius: var(--rgc-radius);
    box-shadow: var(--rgc-shadow);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: rgcIn .2s ease;
}
@keyframes rgcIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* FIX #H29 (2026-08-20) — expanded reading mode.
   min() against the viewport keeps it inside the window on a small laptop, so
   the panel can never grow past the screen it is anchored to. The transition
   is on width and max-height only — both cheap — and is dropped entirely under
   prefers-reduced-motion. */
.rgc-panel { transition: width .18s ease, max-height .18s ease; }
.rgc-panel.is-expanded {
    width: min(560px, calc(100vw - 40px));
    max-height: min(820px, calc(100vh - 100px));
}
/* The thread is the reason to expand, so give the extra height to it rather
   than letting the composer stretch. */
.rgc-panel.is-expanded .rgc-msgs { padding: 20px 18px 8px; }
@media (max-width: 480px) {
    /* Already near full width on a phone; expanding would only add height. */
    .rgc-panel.is-expanded { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    .rgc-panel { transition: none; }
}

.rgc-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 14px 14px 16px;
    background: linear-gradient(135deg, var(--rgc-accent), var(--rgc-accent-dark));
    color: #fff;
}
.rgc-head-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rgc-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(255,255,255,.22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}
.rgc-title { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.rgc-status { font-size: 11.5px; opacity: .9; margin-top: 2px; }
.rgc-status.on::before {
    content: ''; display: inline-block;
    width: 7px; height: 7px; margin-right: 5px;
    background: #4ADE80; border-radius: 50%;
    vertical-align: middle;
}
.rgc-head-actions { display: flex; gap: 2px; }
.rgc-icon-btn {
    width: 32px; height: 32px;
    background: transparent; border: none; border-radius: 8px;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rgc-icon-btn:hover { background: rgba(255,255,255,.18); }
.rgc-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.rgc-icon-btn svg { width: 17px; height: 17px; }

.rgc-body { flex: 1; overflow-y: auto; min-height: 0; }

/* ── Intro form ─────────────────────────────────────────────────────────── */
.rgc-intro { padding: 18px 16px 16px; }
.rgc-intro-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--rgc-muted); }
.rgc-label { display: block; font-size: 12px; font-weight: 600; color: var(--rgc-text); margin: 0 0 5px; }
.rgc-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; margin-bottom: 13px;
    border: 1px solid var(--rgc-line); border-radius: 9px;
    font-size: 13.5px; font-family: inherit; color: var(--rgc-text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rgc-input:focus {
    outline: none;
    border-color: var(--rgc-accent);
    box-shadow: 0 0 0 3px rgba(255,107,53,.14);
}
.rgc-textarea { resize: vertical; min-height: 74px; }
.rgc-hint { margin: -8px 0 13px; font-size: 11.5px; color: var(--rgc-muted); }
/* FIX #H23 (2026-08-20) — the three intro fields are mandatory and now say so.
   The marker uses the error colour so it reads as "this one matters" rather
   than as decoration, and .is-invalid marks the one field the message is
   about. */
.rgc-req { color: #DC2626; font-weight: 600; }
.rgc-input.is-invalid {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.rgc-err {
    background: #FEF2F2; color: #991B1B;
    border: 1px solid #FECACA; border-radius: 8px;
    padding: 9px 11px; margin-bottom: 12px; font-size: 12.5px;
}
.rgc-send-btn {
    width: 100%; padding: 11px;
    background: var(--rgc-accent); color: #fff;
    border: none; border-radius: 9px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .15s ease;
}
.rgc-send-btn:hover:not(:disabled) { background: var(--rgc-accent-dark); }
.rgc-send-btn:disabled { opacity: .6; cursor: default; }
.rgc-legal { margin: 11px 0 0; font-size: 11px; color: var(--rgc-muted); text-align: center; }
.rgc-legal a { color: var(--rgc-accent); }

/* ── Thread ─────────────────────────────────────────────────────────────── */
.rgc-thread { display: flex; flex-direction: column; }
.rgc-msgs { padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 11px; }

.rgc-row { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.rgc-row.me { align-self: flex-end; flex-direction: row-reverse; }
.rgc-row.them { align-self: flex-start; }
.rgc-mini {
    width: 26px; height: 26px; flex-shrink: 0;
    background: var(--rgc-accent); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700;
}
.rgc-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.rgc-row.them .rgc-bubble { background: var(--rgc-them); color: var(--rgc-text); border-bottom-left-radius: 5px; }
.rgc-row.me .rgc-bubble { background: var(--rgc-accent); color: #fff; border-bottom-right-radius: 5px; }
.rgc-from { font-size: 11px; font-weight: 700; opacity: .75; margin-bottom: 2px; }
/* pre-wrap preserves the visitor's line breaks; break-word stops a pasted URL
   from forcing the whole panel wider than the viewport. */
.rgc-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rgc-time { font-size: 10.5px; opacity: .62; margin-top: 3px; text-align: right; }
.rgc-att {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; padding: 5px 9px;
    background: rgba(0,0,0,.07); border-radius: 7px;
    font-size: 12px; color: inherit; text-decoration: none;
}
.rgc-row.me .rgc-att { background: rgba(255,255,255,.22); }
.rgc-att:hover { text-decoration: underline; }
.rgc-att svg { width: 13px; height: 13px; }

.rgc-sys {
    align-self: center; max-width: 90%;
    padding: 5px 12px; background: var(--rgc-them);
    border-radius: 999px; font-size: 11.5px; color: var(--rgc-muted);
    text-align: center;
}

/* Typing dots */
.rgc-typing { display: flex; gap: 4px; padding: 4px 20px 14px; }
.rgc-typing span {
    width: 7px; height: 7px; background: #A1A1AA; border-radius: 50%;
    animation: rgcBounce 1.3s infinite;
}
.rgc-typing span:nth-child(2) { animation-delay: .16s; }
.rgc-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes rgcBounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── Footer / composer ──────────────────────────────────────────────────── */
.rgc-foot { border-top: 1px solid var(--rgc-line); padding: 10px 12px 8px; background: #fff; }
.rgc-composer { display: flex; gap: 8px; align-items: flex-end; }
.rgc-composer-input {
    flex: 1; box-sizing: border-box;
    padding: 9px 12px; max-height: 110px;
    border: 1px solid var(--rgc-line); border-radius: 20px;
    font-size: 13.5px; font-family: inherit; line-height: 1.45;
    resize: none; overflow-y: auto;
}
.rgc-composer-input:focus { outline: none; border-color: var(--rgc-accent); box-shadow: 0 0 0 3px rgba(255,107,53,.14); }
.rgc-icon-send {
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--rgc-accent); color: #fff;
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rgc-icon-send:hover:not(:disabled) { background: var(--rgc-accent-dark); }
.rgc-icon-send:disabled { opacity: .55; cursor: default; }
.rgc-icon-send svg { width: 17px; height: 17px; }

.rgc-end {
    display: block; margin: 7px auto 0;
    background: none; border: none;
    font-size: 11.5px; color: var(--rgc-muted);
    cursor: pointer; font-family: inherit;
}
.rgc-end:hover { color: #DC2626; text-decoration: underline; }
.rgc-ended { padding: 10px 4px; text-align: center; font-size: 12.5px; color: var(--rgc-muted); }
.rgc-link {
    background: none; border: none; padding: 0;
    color: var(--rgc-accent); font-weight: 600; font-size: inherit;
    font-family: inherit; cursor: pointer; text-decoration: underline;
}

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

/* ── Contact page card ──────────────────────────────────────────────────── */
/* Matches .contact-method so the live-chat option sits in the existing grid
   without looking bolted on. It is a <button>, not an <a>, so the reset is
   needed to make it match its anchor siblings exactly. */
.contact-method.contact-method-chat {
    width: 100%; text-align: left;
    background: none; border: none; padding: inherit;
    font: inherit; color: inherit; cursor: pointer;
}
.cm-live-dot {
    display: inline-block; width: 7px; height: 7px;
    margin-left: 6px; border-radius: 50%;
    background: #16A34A; vertical-align: middle;
    animation: rgcPulse 2s infinite;
}
@keyframes rgcPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #rgChatRoot { right: 14px; bottom: 14px; }
    .rgc-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: 100%;
        border: none; border-radius: 0;
    }
    .rgc-launcher { width: 54px; height: 54px; }
}

/* Respect the OS-level reduced-motion preference: the pulsing dot and bouncing
   typing indicator are exactly the kind of persistent animation that setting
   exists to stop. */
@media (prefers-reduced-motion: reduce) {
    .rgc-panel, .rgc-typing span, .cm-live-dot { animation: none; }
    .rgc-launcher, .rgc-launcher-icon, .rgc-launcher-x { transition: none; }
}

@media print { #rgChatRoot { display: none !important; } }


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE HAND-OFF (moved here 2026-08-19 — FIX #V1)
   ══════════════════════════════════════════════════════════════════════════
   These rules were originally injected into contact.php's inline <style>.
   They landed inside a PHP block comment instead: the file contains the literal
   text "16.8 KB of CSS was inlined here in a <style>" in a comment describing a
   PREVIOUS refactor, and that matched before the real element did. The `*/` at
   the end of the injected CSS comment then terminated the PHP comment early,
   and everything after it was parsed as PHP — HTTP 500 on /contact.

   They belong here anyway: this stylesheet is already loaded site-wide from
   includes/footer.php, so the contact page gets them with no extra request and
   no inline CSS to re-parse on every view. */
.form-chat-nudge {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: -6px 0 18px; padding: 9px 12px;
    background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 9px;
    font-size: 13px; color: #166534;
}
.form-chat-nudge[hidden] { display: none; }
.form-chat-link {
    background: none; border: none; padding: 0;
    color: #15803D; font-weight: 700; font-size: 13px;
    font-family: inherit; cursor: pointer; text-decoration: underline;
}
.form-chat-link:hover { color: #14532D; }


/* ══════════════════════════════════════════════════════════════════════════
   IN-PANEL NOTICES AND CONFIRMATION (FIX #W4, 2026-08-19)
   ══════════════════════════════════════════════════════════════════════════
   Replaces the browser's confirm() and alert(). A native dialog blocks the
   whole page, is styled by the browser rather than the site, cannot be
   dismissed by clicking away, and on mobile covers the very conversation the
   person is trying to read. These sit inside the panel, where they are already
   looking. */
.rgc-notice {
    padding: 9px 14px;
    background: var(--rgc-them); color: var(--rgc-text);
    font-size: 12.5px; line-height: 1.45;
    border-bottom: 1px solid var(--rgc-line);
}
.rgc-notice.err { background: #FEF2F2; color: #991B1B; border-bottom-color: #FECACA; }

.rgc-confirm {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px;
    padding: 10px 4px; font-size: 12.5px; color: var(--rgc-muted);
}
.rgc-confirm-yes {
    background: #DC2626; color: #fff;
    border: none; border-radius: 7px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}
.rgc-confirm-yes:hover { background: #B91C1C; }

/* ── FIX #W7 (2026-08-19) — THE CONTACT CARD DID NOT LOOK OR ACT CLICKABLE ──
   The Live Chat option is a <button> so it can open the widget rather than
   navigate. The previous reset used `padding: inherit`, which resolves against
   the .contact-methods container, not against its <a> siblings — so the card
   lost its border and padding entirely and rendered as a bare row of text
   while Email, Phone and WhatsApp sat in proper boxes. It looked like a label,
   so nobody clicked it. Now it inherits nothing and matches its siblings by
   construction. */
/* FIX #X8 (2026-08-19) — the card still did not match its siblings. The base
   .contact-method rules in css/page-contact.css are written for <a> elements,
   so a <button> inherited none of the border, padding, radius or background
   that Email, Phone and WhatsApp get. It rendered as a bare row of text: it did
   not look like a control, so nobody clicked the thing that opens the chat.
   Those properties are restated here explicitly rather than hoped for. */
.contact-method.contact-method-chat {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--rgc-line);
    border-radius: 12px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.contact-method.contact-method-chat:focus-visible {
    outline: 3px solid var(--rgc-accent);
    outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   VISITOR FILE UPLOAD (FIX #X3 / #X4, 2026-08-19)
   ══════════════════════════════════════════════════════════════════════════ */
.rgc-attach {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; cursor: pointer;
    color: var(--rgc-muted);
    transition: background .15s ease, color .15s ease;
}
.rgc-attach:hover { background: var(--rgc-them); color: var(--rgc-accent); }
.rgc-attach svg { width: 17px; height: 17px; }
.rgc-attach input[type="file"] { display: none; }

.rgc-file-chip {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 6px 10px;
    background: var(--rgc-them); border-radius: 8px;
    font-size: 12px; color: var(--rgc-text);
}
.rgc-file-chip[hidden] { display: none; }
.rgc-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgc-file-x {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    font-size: 17px; line-height: 1; color: var(--rgc-muted);
    padding: 0 2px;
}
.rgc-file-x:hover { color: #DC2626; }

.rgc-att-del {
    display: block; margin-top: 5px;
    background: none; border: none; padding: 0;
    font-size: 11px; font-family: inherit;
    color: inherit; opacity: .75;
    text-decoration: underline; cursor: pointer;
}
.rgc-att-del:hover { opacity: 1; }
.rgc-att-del:disabled { opacity: .4; cursor: default; }
.rgc-att-gone {
    margin-top: 6px; padding: 5px 9px;
    background: rgba(0,0,0,.06); border-radius: 7px;
    font-size: 11.5px; font-style: italic; opacity: .8;
}

.contact-method.contact-method-chat:hover {
    border-color: var(--rgc-accent);
    box-shadow: 0 4px 14px rgba(255,107,53,.14);
    transform: translateY(-1px);
}