/*
 * MINK support live chat — dedicated page styles.
 *
 * Built to match the site's dark theme (mink.css palette): #1c1c1c body,
 * #2a2a2f surfaces, #3a3a42 borders, #c9c9d4 muted text, #9bf1ff cyan accent,
 * #e63946 red. The form itself reuses the site's .box-field / .button styles;
 * this file styles the step guide and the chat.
 */
/* touch-action: kill the double-tap-to-zoom gesture on the chat (the viewport
   meta already locks pinch / focus zoom) so it behaves like a native app. */
/* Use the site's standard content column (65em, centred — like
   #main > * > .inner) so the header lines up with the rest of the content. The
   chat/form inside keep a comfortable reading width (.support-box), left-aligned
   to that column so everything shares the same left edge. */
.support-wrap { max-width: 65em; margin: 0 auto; padding: 0; touch-action: manipulation; }
.support-head { margin-bottom: 1.8em; }
/* The active request's subject, shown right under the title (tight; the global
   `p { margin: 1.5em 0 }` would otherwise space it out). */
.support-subtitle { margin: .35em 0 0; color: #c9c9d4; font-size: .98em; }
.support-intro { color: #c9c9d4; margin: .6em 0 0; }
.support-alert {
    background: rgba(230, 57, 70, .15);
    border: 1px solid rgba(230, 57, 70, .5);
    color: #ffb3b9;
    padding: .8em 1.1em;
}

/* --- Step guide -------------------------------------------------------- */
.support-steps {
    list-style: none;
    display: flex;
    margin: 0 0 2.2em;
    padding: 0;
}
.support-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 .4em;
}
.support-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    height: 1px;
    background: #3a3a42;
    z-index: 0;
}
.support-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #3a3a42;
    background: #232327;
    color: #c9c9d4;
    font-size: .9em;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.support-step-text { margin-top: .7em; }
.support-step-label { display: block; font-size: .88em; font-weight: 600; color: #c9c9d4; letter-spacing: .02em; }
.support-step-desc { display: block; font-size: .76em; color: #7c7c88; margin-top: .25em; line-height: 1.35; }

.support-step.is-active .support-step-num { border-color: #d52634; color: #d52634; box-shadow: 0 0 0 3px rgba(226, 0, 26, .16); }
.support-step.is-active .support-step-label { color: #fff; }
.support-step.is-done .support-step-num { border-color: #d52634; background: #d52634; color: #fff; }
.support-step.is-done::after { background: #d52634; }

/* --- Container --------------------------------------------------------- */
/* The chat/form keep a comfortable reading width, centred within the content
   column (the header above stays at the column's left edge). */
.support-box { color: #eaeaec; max-width: 100%; margin: 0 auto; }
.support-error {
    background: rgba(230, 57, 70, .15);
    border: 1px solid rgba(230, 57, 70, .5);
    color: #ffb3b9;
    padding: .7em 1em;
    margin-bottom: 1.1em;
    font-size: .95em;
}
/* A CSS display rule on the panels would otherwise beat the [hidden] attribute. */
.support-form[hidden], .support-chat[hidden], .support-composer[hidden], .support-tray[hidden],
.support-dock[hidden], .support-chat-bar[hidden], .support-modal[hidden] { display: none !important; }

/* --- Pre-chat form (reuses .box-field / .button from mink.css) --------- */
/* The theme grid offsets its gutter with a negative left margin, which assumes a
   container that carries padding — .support-wrap deliberately has none, so the
   field row would hang 2em left of the title. Splitting the gutter symmetrically
   (half as negative margin, half as padding on each column) keeps the first and
   last columns flush with the column edges and every field the same width. The
   selector outranks the theme's `.row > *`, so it holds at every breakpoint. */
.support-form .row { margin-left: -1em; margin-right: -1em; }
.support-form .row > * { padding: 0 1em; }
.support-turnstile { margin: 1.2em 0 .2em; }
.support-submit { margin-top: 1.2em; }
.support-consent { margin: 1em 0 0; font-size: .82em; color: #7c7c88; }

/* --- Chat (blended into the page — no boxed container) ----------------- */
.support-chat { display: flex; flex-direction: column; }
.support-messages {
    overflow-y: auto;
    padding: .4em 0;
    display: flex;
    flex-direction: column;
    gap: .75em;
    min-height: 300px;
    max-height: 56vh;
}
.support-msg { display: flex; max-width: 100%; gap: .55em; }
.support-msg-visitor { justify-content: flex-end; }
.support-msg-agent { justify-content: flex-start; align-items: flex-start; }
.support-msg-system { justify-content: center; align-items: flex-start; }

/* Avatar + name for agent / system messages. Kept round, but on a transparent
   background (no filled disc / border) so a logo with transparency blends in. */
.support-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    margin-top: 2px;
    background: transparent;
}
.support-msg-main { display: flex; flex-direction: column; gap: .2em; max-width: calc(82% - 40px); }
.support-msg-main .support-bubble { max-width: 100%; }
.support-msg-name { font-size: .76em; font-weight: 600; color: #c9c9d4; margin-left: .2em; }

.support-bubble {
    max-width: 82%;
    padding: .55em .8em;
    border-radius: 12px;
    font-size: .95em;
    line-height: 1.45;
}
.support-msg-visitor .support-bubble {
    background: rgba(155, 241, 255, .12);
    border: 1px solid rgba(155, 241, 255, .3);
    color: #eaf9fc;
    border-bottom-right-radius: 3px;
}
.support-msg-agent .support-bubble {
    background: #2a2a2f;
    border: 1px solid #3a3a42;
    color: #eaeaec;
    border-bottom-left-radius: 3px;
}
.support-msg-system .support-bubble {
    background: rgba(230, 57, 70, .12);
    border: 1px dashed rgba(230, 57, 70, .5);
    color: #ffb3b9;
    font-size: .9em;
    text-align: center;
    max-width: 92%;
}
.support-msg-body { white-space: pre-wrap; word-break: break-word; }
.support-msg-time { margin-top: .25em; font-size: .68em; opacity: .6; text-align: right; }
.support-msg-agent .support-msg-time { text-align: left; }

/* --- Attachments ------------------------------------------------------- */
.support-files { display: flex; flex-direction: column; gap: .35em; margin-top: .35em; }
.support-file {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .4em .6em;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: inherit;
    text-decoration: none;
    font-size: .85em;
    max-width: 100%;
}
.support-file:hover { border-color: #9bf1ff; }
.support-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.support-file-size { opacity: .65; font-size: .78em; flex: none; }
.support-file-pdf .support-file-icon { filter: none; }

/* Inline image preview → thumbnail opening the lightbox. */
.support-thumb-link {
    display: inline-block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    max-width: 100%;
    transition: border-color .2s ease;
}
.support-thumb-link:hover { border-color: #9bf1ff; }
.support-thumb {
    display: block;
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: cover;
    cursor: zoom-in;
}

.support-transferred {
    margin-top: .9em;
    padding: .7em 1em;
    font-size: .88em;
    color: #ffcf9b;
    background: rgba(230, 122, 57, .12);
    border: 1px solid rgba(230, 122, 57, .4);
}

/* Read-only notice shown when the team has resolved (closed) the conversation. */
.support-resolved {
    margin: 1em 0 .2em;
    padding: .75em 1em;
    font-size: .88em;
    color: #c9c9d4;
    background: rgba(255, 255, 255, .04);
    border: 1px solid #3a3a42;
    text-align: center;
}

/* --- Attachment tray (staged files, previewed + removable before send) --- */
.support-tray {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1em;
}
.support-tray-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .4em .6em;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .85em;
    max-width: 100%;
}
/* Image files preview as a bare thumbnail — no chrome, the picture is the chip. */
.support-tray-item-image { padding: 0; border: 0; background: transparent; }
.support-tray-thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
}
.support-tray-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; font-weight: 600; }
.support-tray-size { opacity: .65; font-size: .82em; flex: none; }
/* Remove (×) button — a small disc pinned to the chip's top-right corner. */
.support-tray-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #2a2a2f;
    color: #eaeaec;
    box-shadow: 0 0 0 1px #3a3a42;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.support-tray-remove:hover { background: #d52634; color: #fff; box-shadow: 0 0 0 1px #d52634; }

/* --- Uploading state (optimistic message) — spinner over the local preview --- */
.support-spinner {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #9bf1ff;
    border-radius: 50%;
    animation: support-spin .7s linear infinite;
}
.support-thumb-pending { position: relative; display: inline-block; line-height: 0; cursor: default; }
.support-thumb-pending .support-thumb { opacity: .55; }
.support-thumb-pending .support-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-width: 3px;
}
.support-file-pending { opacity: .9; }
@keyframes support-spin { to { transform: rotate(360deg); } }

/* --- Composer -----------------------------------------------------------
   A sober underline bar holding the attach button, the auto-growing textarea
   and the send button inline. Icons sit centred on the text line; the focus
   tints only the bottom line; hovers only tint the icon. */
.support-composer {
    display: flex;
    align-items: center;
    gap: .25em;
    /* Explicit all-sides margin: the site's global `form { margin: 0 0 2em 0 }`
       would otherwise add a 2em gap under the field, pushing the hint far away. */
    margin: 1em 0 0;
    padding: .1em .1em;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #34343c;
    border-radius: 0;
    transition: border-color .18s ease;
}
.support-composer:focus-within { border-bottom-color: #9bf1ff; }

/* Typing indicator (three bouncing dots). */
.support-typing { display: inline-flex; gap: 5px; align-items: center; padding: 2px 2px; }
.support-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    animation: support-bounce 1.2s infinite ease-in-out;
}
.support-dot:nth-child(2) { animation-delay: .15s; }
.support-dot:nth-child(3) { animation-delay: .3s; }
@keyframes support-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-4px); opacity: .9; }
}
/* Bare icon buttons — no fill, no border, no box. Only the icon colour changes
   on hover. The site's global button:hover paints an inset red box-shadow + red
   text; we drop the box-shadow (no red square) but keep the red on the icon. */
.support-attach,
.support-send {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #8a8a95;
    transition: color .15s ease;
}
.support-attach:hover { color: #c9c9d4; }
/* Once there's something to send (text typed or a file staged) the arrow turns
   mink red to signal it's active — muted grey while there's nothing to send. */
.support-send:not(:disabled) { color: #d52634; }
.support-send:not(:disabled):hover, .support-send:not(:disabled):active,
.support-send:not(:disabled):focus { box-shadow: none !important; background: transparent; color: #e63946; }
/* Nothing to send yet (no text, no staged file) → muted, inert, no red hover. */
.support-send:disabled { color: #4a4a52; cursor: default; }
.support-send:disabled:hover { color: #4a4a52; box-shadow: none !important; }
/* The textarea is the field itself — transparent, borderless, auto-growing.
   Height is driven inline by JS (auto-grow), capped by max-height then scrolls. */
.support-composer-field {
    flex: 1;
    box-sizing: border-box;
    min-height: 24px;
    max-height: 140px;
    padding: .5em .3em;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: .95em;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
    color: #fff;
    background: transparent;
}
.support-composer-field:focus { outline: none; box-shadow: none; }
.support-composer-field::placeholder { color: #7c7c88; }

/* Attach hint sits right under the field line — nearly glued to the text. */
.support-hint { font-size: .78em; color: #7c7c88; margin: .25em 0 0; }

/* --- Chat toolbar — holds the "close the request" action (top-right) ------ */
.support-chat-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: .7em;
}

/* "Close the request" — a compact outlined danger button (was a plain text
   link); clicking it opens a confirmation modal before anything is closed. */
.support-end {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    background: transparent;
    border: 1px solid rgba(213, 38, 52, .45);
    color: #ff8a94;
    font: inherit;
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    height: auto;
    line-height: 1.2;
    padding: .55em .9em;
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.support-end svg { flex: none; }
.support-end:hover, .support-end:active, .support-end:focus {
    background: rgba(213, 38, 52, .14);
    border-color: #d52634;
    color: #ffb3b9;
    box-shadow: none;
}

/* --- Confirmation modal (close the request) ----------------------------- */
.support-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the site's fixed header (10000) and slide-out menu (10002). */
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2em;
}
.support-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
}
.support-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #232327;
    border: 1px solid #3a3a42;
    border-radius: 14px;
    padding: 1.4em 1.4em 1.2em;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.support-modal-title { margin: 0 0 .5em; font-size: 1.1em; color: #fff; }
.support-modal-text { margin: 0 0 1.3em; color: #c9c9d4; font-size: .95em; line-height: 1.5; }
.support-modal-actions { display: flex; justify-content: flex-end; gap: .7em; flex-wrap: wrap; }
.support-modal-btn {
    font: inherit;
    font-size: .88em;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    height: auto;
    line-height: 1.2;
    padding: .7em 1.2em;
    border-radius: 9px;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.support-modal-cancel { background: transparent; border-color: #3a3a42; color: #c9c9d4; }
.support-modal-cancel:hover, .support-modal-cancel:focus { background: transparent; border-color: #6a6a75; color: #fff; box-shadow: none; }
.support-modal-ok { background: #d52634; border-color: #d52634; color: #fff; }
.support-modal-ok:hover, .support-modal-ok:focus { background: #e63946; border-color: #e63946; color: #fff; box-shadow: none; }

@media (max-width: 600px) {
    .support-step-desc { display: none; }
    .support-bubble { max-width: 88%; }

    /* Drop the shared site footer on the mobile support page only (this
       stylesheet loads on /support alone): the composer is docked to the
       bottom of the screen, so the footer would only sit behind it. */
    #footer { display: none; }

    /* The history flows with the page — no inner scrollbar. The whole page
       scrolls and the composer is docked to the bottom (a chat-app layout). */
    .support-messages {
        overflow-y: visible;
        max-height: none;
        min-height: 0;
    }

    /* Reserve room at the end of the thread so the last messages clear the
       fixed composer. Its real height is fed in as --support-dock-h by
       support.js; the fallback covers the first paint. */
    .support-chat {
        padding-bottom: calc(var(--support-dock-h, 128px) + env(safe-area-inset-bottom, 0px));
    }

    /* Composer docked to the bottom of the viewport, always visible — same
       input design, with a soft top fade to the site background above it. */
    .support-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        margin: 0;
        padding: 1.8em 1.5em calc(.7em + env(safe-area-inset-bottom, 0px));
        /* Soft fade to the site background over the top padding only, so the
           thread appears to slide out beneath the composer — which itself sits
           on the fully-solid part below the fade. */
        background: linear-gradient(to bottom, rgba(28, 28, 28, 0) 0, #1c1c1c 1.8em);
        /* The transparent fade lets taps fall through to the thread behind it;
           the controls below re-enable pointer events. */
        pointer-events: none;
    }
    .support-dock > * { pointer-events: auto; }
    /* Line the docked controls up with the message column (760px, centred) and
       drop the top margins they carry in the desktop flow. */
    .support-dock .support-tray { margin: 0 auto .6em; max-width: 760px; }
    .support-dock .support-composer { margin: 0 auto; max-width: 760px; }
    .support-dock .support-hint { margin: .45em auto 0; max-width: 760px; }
}