/* The chat widget. (Roadmap 6.0-CH-01)

   Scoped under #jsst-chat throughout, with no element selectors that could
   escape it. This stylesheet is loaded on every page of somebody else's site,
   next to a theme nobody here has seen, so every rule it ships is one it has to
   be certain about.

   Sized in rem against a fixed root rather than in px, so a theme that has
   scaled its base font does not leave the widget a different size from the page
   it is sitting on. */
#jsst-chat {
    position: fixed;
    bottom: 20px;
    z-index: 99999;
    /* A column pinned to the edge the widget is placed on, so the launcher sits
       in the corner rather than wherever the page's own text-align leaves it.
       Without this the pill is an inline-level box in a container as wide as the
       panel, and a theme that centres its body text moves the launcher a hundred
       pixels inwards. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
#jsst-chat.jsst-chat-right { right: 20px; }
#jsst-chat.jsst-chat-left  { left: 20px; align-items: flex-start; }


#jsst-chat .jsst-chat-launcher {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 22px;
    background: var(--jsst-chat-accent, #2563eb);
    color: #fff;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
#jsst-chat .jsst-chat-launcher:hover { background: var(--jsst-chat-accent-dark, #1d4ed8); }
#jsst-chat .jsst-chat-launcher:focus-visible { outline: 2px solid var(--jsst-chat-accent-dark, #1d4ed8); outline-offset: 2px; }
#jsst-chat .jsst-chat-launcher-icon { margin-right: 8px; font-size: 10px; }
#jsst-chat[data-open="1"] .jsst-chat-launcher { display: none; }

#jsst-chat .jsst-chat-panel {
    display: flex;
    flex-direction: column;
    width: 340px;
    /* Capped against the viewport, not given a fixed height: the widget's worst
       failure is on a phone in landscape, where a 480px panel is taller than
       the screen and the send button is unreachable. */
    max-height: min(70vh, 520px);
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

#jsst-chat .jsst-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--jsst-chat-accent, #2563eb);
    color: #fff;
}
#jsst-chat .jsst-chat-title { font-weight: 600; }
#jsst-chat .jsst-chat-hide {
    margin: 0; padding: 0 4px;
    border: 0; background: none; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer;
}

#jsst-chat .jsst-chat-log {
    flex: 1 1 auto;
    min-height: 120px;
    /* min-height: 0 as well as a value, because a flex child holding text
       resolves min-width/min-height against its intrinsic size by default and
       the two engines disagree about what that is - which is how one browser
       scrolls this and the other overflows the panel. */
    overflow-y: auto;
    padding: 12px 14px;
    background: #f8fafc;
}

#jsst-chat .jsst-chat-line { margin: 0 0 10px; min-width: 0; overflow-wrap: break-word; }
#jsst-chat .jsst-chat-who {
    display: block;
    margin-bottom: 2px;
    color: #6b7280;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
#jsst-chat .jsst-chat-body {
    display: inline-block;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-align: start;
}
#jsst-chat .jsst-chat-visitor { text-align: end; }
#jsst-chat .jsst-chat-visitor .jsst-chat-body { background: var(--jsst-chat-accent, #2563eb); border-color: var(--jsst-chat-accent, #2563eb); color: #fff; }

/* The assistant is visibly not a person. A customer reading this back has to be
   able to tell which answers a human stood behind. (Roadmap 6.0-AI-10) */
#jsst-chat .jsst-chat-ai .jsst-chat-body { background: #eef2ff; border-color: #dbe0fb; }
#jsst-chat .jsst-chat-ai .jsst-chat-who { color: #4f46e5; }

#jsst-chat .jsst-chat-system {
    text-align: center;
    color: #6b7280;
    font-size: 12.5px;
    font-style: italic;
}
#jsst-chat .jsst-chat-system .jsst-chat-body { background: none; border: 0; padding: 2px 0; color: inherit; }

#jsst-chat .jsst-chat-note {
    padding: 8px 14px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

#jsst-chat form { margin: 0; padding: 10px 12px; border-top: 1px solid #e5e7eb; background: #fff; }
#jsst-chat textarea,
#jsst-chat input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    color: #111827;
    background: #fff;
    resize: none;
}
#jsst-chat .jsst-chat-actions { display: flex; align-items: center; }
/* Margins first and gap inside a support query: flex gap is ignored by Chrome
   before 84, and this file runs on other people's visitors' browsers. */
#jsst-chat .jsst-chat-actions > * { margin-right: 8px; }
#jsst-chat .jsst-chat-actions > *:last-child { margin-right: 0; }
@supports (gap: 1px) {
    #jsst-chat .jsst-chat-actions { gap: 8px; }
    #jsst-chat .jsst-chat-actions > * { margin-right: 0; }
}

#jsst-chat button.jsst-chat-send,
#jsst-chat button.jsst-chat-human {
    margin: 0;
    padding: 7px 14px;
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
}
#jsst-chat button.jsst-chat-send { border: 0; background: var(--jsst-chat-accent, #2563eb); color: #fff; }
#jsst-chat button.jsst-chat-send:hover { background: var(--jsst-chat-accent-dark, #1d4ed8); }
#jsst-chat button.jsst-chat-human { border: 1px solid #d1d5db; background: #fff; color: #374151; }
#jsst-chat button.jsst-chat-human:hover { background: #f3f4f6; }

#jsst-chat .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* A phone. The panel becomes the width of the screen rather than a 340px card
   floating in the corner with 8px of margin either side. */
@media (max-width: 420px) {
    #jsst-chat { left: 10px; right: 10px; bottom: 10px; }
    #jsst-chat .jsst-chat-panel { width: auto; max-height: 78vh; }
}

/* Somebody who asked their operating system to stop animating things asked
   every application, and a support widget is not the place for an exception. */
@media (prefers-reduced-motion: reduce) {
    #jsst-chat * { transition: none !important; animation: none !important; }
}

/* The panel is `hidden` until somebody opens it, and `hidden` is a UA rule -
   `[hidden] { display: none }` - which any author `display` beats. This
   stylesheet gives `.jsst-chat-panel` `display: flex`, so the attribute did
   nothing: the panel was laid out and painted on every page of the site before
   anybody had clicked anything, and the container was permanently as wide and
   as tall as an open chat. That is also why the launcher looked misplaced -
   it is the first child of that box, so it floated at the top-left of a
   340px-wide panel instead of sitting in the corner. (Roadmap 6.0-CH-01)

   Stated as its own rule rather than by making the panel `display: none` by
   default, because the script toggles the attribute and nothing else - the
   attribute is the state, and the stylesheet has to honour it. Written once for
   everything inside the widget rather than per element: the panel, the offline
   form, the composer and the "Talk to a person" button are all toggled this
   way, and the next thing that is will not need remembering. The id carries
   enough specificity to beat this file's own class rules without an
   !important. */
#jsst-chat [hidden] { display: none; }