/* Support messenger: the chat panel (/support/embed) and the full page (/support). docs/plans/1015_0533_internal-support-messenger.md §5.1 item 6 and §5.2; spec §10.
 * Loaded after litport.min.css by views/supportChat/layout.pug, hand-written and not purged. These pages
 * run under a nonce CSP that allows styles from this site only, so there is no inline style anywhere:
 * every look is a class here (the script only sets the textarea height through the CSSOM). Colours come
 * from the --lp-* tokens (theme-dark.css), so light and dark both work: an explicit data-theme, or the OS
 * setting when none is chosen.
 *
 * One rule for colour: brand blue marks you and what you act on (your bubbles, Send, Sign in); Mike sits on
 * a quiet surface; green, red and amber only say a status. No gradients, no shadows inside the panel. */

/* The script reads this to tell the launcher the stylesheet arrived (support:ready, css 'ok' or 'missing'). */
:root {
  --sc-ready: 1;
}

html {
  height: 100%;
  /* litport.min.css reserves a scrollbar gutter on <html>; these documents scroll inside .sc-scroll. */
  scrollbar-gutter: auto;
}

.sc-body {
  --sc-brand: #065dff;
  --sc-brand-hover: #0052ea;
  --sc-on-brand: #fff;
  /* --lp-text-muted is 4.4:1 on the light tints; this clears 4.9:1 on every surface used here. */
  --sc-muted: #5d6b7a;
  --sc-ok: #00806b;
  --sc-bad: #c42d57;
  --sc-field-border: #7d8a98;
  --sc-mike-bg: #f1f4fa;
  --sc-mike-border: #e3e8f2;
  --sc-mike-text: var(--lp-text);
  --sc-page-bg: var(--lp-bg-subtle);
  height: 100%;
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: "Open Sans", sans-serif;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.sc-body:lang(zh) {
  /* Open Sans has no Chinese glyphs: Latin text keeps it, Chinese falls through to a system CJK font. The
     punctuation face (declared in litport.min.css, from main.css) gives Chinese text its full-width quotes and ellipsis. */
  font-family: "Litport CJK Punctuation", "Open Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}

:root[data-theme="dark"] .sc-body {
  --sc-muted: var(--lp-text-muted);
  --sc-ok: #2fdcbb;
  --sc-bad: #ff8fa8;
  --sc-field-border: var(--lp-text-muted);
  --sc-mike-bg: var(--lp-surface);
  --sc-mike-border: var(--lp-border);
  --sc-page-bg: var(--lp-bg);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sc-body {
    --sc-muted: var(--lp-text-muted);
    --sc-ok: #2fdcbb;
    --sc-bad: #ff8fa8;
    --sc-field-border: var(--lp-text-muted);
    --sc-mike-bg: var(--lp-surface);
    --sc-mike-border: var(--lp-border);
    --sc-page-bg: var(--lp-bg);
  }
}

.sc-body-embed {
  overflow: hidden;
}

.sc-body-page {
  background: var(--sc-page-bg);
}

.sc-body ::selection {
  background: color-mix(in srgb, var(--lp-primary) 28%, transparent);
}

.sc-body svg {
  display: block;
  margin: 0;
  vertical-align: middle;
}

/* One class of weight: enough to beat the theme's `p` margin, and no more than a component's own rule further down
   (.sc-hint, .sc-count, .sc-status-text…), which then wins by order. */
.sc-body :where(p) {
  margin: 0;
}

.sc-body button,
.sc-body input,
.sc-body textarea {
  font-family: inherit;
}

.sc-body :focus {
  outline: 0;
}

.sc-body :focus-visible {
  outline: 2px solid var(--lp-primary);
  outline-offset: 2px;
}

/* ---- Frame -------------------------------------------------------------------------------- */

.sc {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--lp-bg);
}

.sc-page {
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  border-right: 1px solid var(--lp-border);
  border-left: 1px solid var(--lp-border);
}

@media (max-width: 720px) {
  .sc-page {
    border-right: 0;
    border-left: 0;
  }
}

/* ---- Header ------------------------------------------------------------------------------- */

.sc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--lp-border);
  background: var(--lp-bg);
}

.sc-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lp-primary) 8%, var(--lp-bg));
  color: var(--lp-primary);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
}

.sc-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-title {
  margin: 0;
  color: var(--lp-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.sc-sub {
  margin: .125rem 0 0;
  color: var(--sc-muted);
  font-size: .8125rem;
  line-height: 1.4;
}

.sc-icon-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  color: var(--sc-muted);
  cursor: pointer;
}

.sc-icon-btn:hover {
  background: var(--lp-bg-subtle);
  color: var(--lp-text);
}

.sc-icon-btn[aria-disabled="true"] {
  opacity: .55;
}

/* The sound toggle shows the speaker with waves while on, crossed out while muted (aria-pressed="true"). */
.sc-sound .sc-sound-off,
.sc-sound[aria-pressed="true"] .sc-sound-on {
  display: none;
}

.sc-sound[aria-pressed="true"] .sc-sound-off {
  display: block;
}

.sc-home {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--sc-muted);
  font-size: .8125rem;
  text-decoration: none;
  white-space: nowrap;
}

.sc-home:hover {
  color: var(--lp-primary);
  text-decoration: underline;
}

/* ---- Status strip ------------------------------------------------------------------------- */

.sc-status {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--lp-border);
  background: var(--lp-bg-subtle);
  color: var(--sc-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.sc-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.sc-status-title {
  color: var(--lp-text);
  font-weight: 600;
}

.sc-status-text {
  margin: .125rem 0 0;
}

/* The guest strip: equal space above the title and below the text. The Sign in button is taller than the
   title line: pulled up by half the difference, it centres on the title instead of pushing the title down,
   and its full height still sits inside the row, so the text below never runs under it. */
.sc-status.is-guest {
  padding: .75rem 1rem;
}

.sc-status.is-guest .sc-status-row {
  align-items: flex-start;
}

.sc-status-row .sc-btn {
  margin-top: -.4375rem;
}

.sc-status.is-account .sc-status-row {
  justify-content: flex-start;
  gap: .5rem;
}

.sc-dot {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--sc-ok);
}

/* ---- Guest email: the line in the strip, its form, the typo question ------------------------- */

/* "Replies also go to … Change". The text and the button are flex items, so the gap between them is layout, not a
   typed space; a long address breaks anywhere instead of widening the panel. */
.sc-email-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5rem;
  margin: .125rem 0 0;
}

.sc-email-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A copy that bounced is a warning, in the theme's amber family (not red: nothing the visitor did is an error). */
.sc-email-line.is-bounced {
  margin-top: .375rem;
  padding: .375rem .625rem;
  border: 1px solid var(--lp-alert-warning-bd);
  border-radius: .5rem;
  background: var(--lp-alert-warning-bg);
  color: var(--lp-alert-warning-ink);
}

.sc-email-line.is-bounced .sc-link-btn {
  color: inherit;
}

.sc-email-edit {
  margin: .375rem 0 0;
}

.sc-email-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.sc-email-edit-row .sc-input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

.sc-email-edit-actions {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
}

.sc-email-error {
  margin: .375rem 0 0;
  color: var(--sc-bad);
  font-weight: 600;
}

/* "Did you mean …?" with its two answers: under the strip's field and under the first message's field. */
.sc-typo {
  margin: .5rem 0 0;
  padding: .5rem .625rem;
  border: 1px solid var(--lp-alert-warning-bd);
  border-radius: .5rem;
  background: var(--lp-alert-warning-bg);
  color: var(--lp-alert-warning-ink);
  font-size: .8125rem;
  line-height: 1.4;
}

.sc-typo-text {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sc-typo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

/* ---- Buttons ------------------------------------------------------------------------------ */

.sc-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sc-btn-primary {
  background: var(--sc-brand);
  color: var(--sc-on-brand);
}

.sc-btn-primary:hover {
  background: var(--sc-brand-hover);
  color: var(--sc-on-brand);
  text-decoration: none;
}

.sc-btn-ghost {
  border-color: var(--lp-border-strong);
  background: transparent;
  color: var(--lp-text);
}

.sc-btn-ghost:hover {
  background: var(--lp-bg-subtle);
}

.sc-btn-sm {
  min-height: 2rem;
  padding: 0 .75rem;
  border-radius: .5rem;
  font-size: .8125rem;
}

.sc-btn-block {
  display: flex;
  width: 100%;
}

.sc-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* Text-style button inside a line of small print (Retry, Discard). */
.sc-link-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-primary);
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* ---- Thread ------------------------------------------------------------------------------- */

.sc-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* A column, so a short thread sits just above the composer, as in any messenger, and the greeting of an empty one
   sits in the middle of the space. A long thread scrolls as usual: the auto margins are then zero. */
.sc-scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1rem .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lp-border-strong) transparent;
}

.sc-scroll:focus-visible {
  outline-offset: -2px;
}

.sc-scroll > * {
  flex: 0 0 auto;
}

.sc-list {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.sc-fallback {
  padding: 1rem 0;
  color: var(--sc-muted);
  font-size: .875rem;
}

.sc-empty {
  margin: auto 0;
  padding: 1rem;
  text-align: center;
}

.sc-empty:not([hidden]) ~ .sc-list {
  margin-top: 0;
}

.sc-empty-title {
  color: var(--lp-text);
  font-size: 1rem;
  line-height: 1.5;
}

.sc-empty-sub {
  margin-top: .5rem;
  color: var(--sc-muted);
  font-size: .8125rem;
}

.sc-msg {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: .125rem;
}

.sc-msg.is-start {
  margin-top: .75rem;
}

.sc-msg:first-child {
  margin-top: 0;
}

.sc-you {
  align-items: flex-end;
}

.sc-mike {
  align-items: flex-start;
}

.sc-system {
  align-items: center;
}

.sc-bubble {
  box-sizing: border-box;
  max-width: 85%;
  padding: .5rem .8125rem;
  border-radius: 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sc-you .sc-bubble {
  background: var(--sc-brand);
  color: var(--sc-on-brand);
}

.sc-you.is-end .sc-bubble {
  border-bottom-right-radius: .3125rem;
}

.sc-mike .sc-bubble {
  border: 1px solid var(--sc-mike-border);
  background: var(--sc-mike-bg);
  color: var(--sc-mike-text);
}

.sc-mike.is-end .sc-bubble {
  border-bottom-left-radius: .3125rem;
}

.sc-bubble.is-files-only {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.sc-text {
  white-space: pre-wrap;
}

.sc-mike .sc-text a {
  color: var(--lp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-system-line {
  max-width: 90%;
  padding: .25rem .75rem;
  color: var(--sc-muted);
  font-size: .8125rem;
  text-align: center;
}

.sc-files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
}

.sc-text + .sc-files {
  margin-top: .5rem;
}

.sc-thumb {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border-radius: .625rem;
  line-height: 0;
}

.sc-thumb img {
  box-sizing: border-box;
  display: block;
  /* No `width: auto`: the width and height attributes (the server's image size) then reserve the box before
     the picture loads, so the thread doesn't jump. */
  max-width: 240px;
  height: auto;
  max-height: 320px;
  /* A hairline edge, so a white screenshot doesn't dissolve into the thread. */
  border: 1px solid var(--lp-border);
  border-radius: .625rem;
  object-fit: contain;
}

@media (max-width: 360px) {
  .sc-thumb img {
    max-width: 200px;
  }
}

.sc-file {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .375rem .625rem;
  border: 1px solid var(--lp-border-strong);
  border-radius: .625rem;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-size: .8125rem;
  line-height: 1.3;
  text-decoration: none;
}

a.sc-file:hover {
  background: var(--lp-bg-subtle);
  color: var(--lp-text);
  text-decoration: none;
}

.sc-file svg {
  flex: 0 0 auto;
  color: var(--sc-muted);
}

.sc-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-file-refused {
  color: var(--sc-muted);
  font-size: .8125rem;
}

.sc-you .sc-file-refused {
  color: inherit;
}

.sc-meta {
  margin-top: .1875rem;
  padding: 0 .25rem;
  color: var(--sc-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.sc-meta.is-failed {
  color: var(--sc-bad);
}

.sc-typing {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  color: var(--sc-muted);
  font-size: .8125rem;
}

.sc-dots {
  display: inline-flex;
  gap: .1875rem;
}

.sc-dots span {
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: currentColor;
  animation: sc-pulse 1.2s ease-in-out infinite;
}

.sc-dots span:nth-child(2) {
  animation-delay: .15s;
}

.sc-dots span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes sc-pulse {
  0%,
  80%,
  100% {
    opacity: .3;
  }

  40% {
    opacity: 1;
  }
}

.sc-jump {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem .3125rem .625rem;
  border: 1px solid var(--lp-border-strong);
  border-radius: 999px;
  background: var(--lp-surface);
  color: var(--lp-text);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 600;
}

.sc-jump:hover {
  background: var(--lp-bg-subtle);
}

.sc-drop {
  position: absolute;
  inset: .5rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--lp-primary);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--lp-bg) 88%, var(--lp-primary));
  color: var(--lp-text);
  font-weight: 600;
  pointer-events: none;
}

.sc.is-drop .sc-drop {
  display: flex;
}

/* ---- Notification offer ------------------------------------------------------------------- */

.sc-notify {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding: .625rem 1rem;
  border-top: 1px solid var(--lp-border);
  background: var(--lp-bg-subtle);
  font-size: .8125rem;
}

.sc-notify-actions {
  display: flex;
  gap: .5rem;
}

/* ---- Composer ----------------------------------------------------------------------------- */

.sc-composer {
  flex: 0 0 auto;
  margin: 0;
  padding: .625rem .75rem max(.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--lp-border);
  background: var(--lp-bg);
}

.sc-label {
  display: block;
  margin: 0 0 .25rem;
  color: var(--lp-text);
  font-size: .8125rem;
  font-weight: 600;
}

.sc-email {
  margin-bottom: .5rem;
}

.sc-input,
.sc-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--sc-field-border);
  background: var(--lp-surface);
  color: var(--lp-text);
  caret-color: var(--lp-primary);
  font-size: .9375rem;
  line-height: 1.4;
}

.sc-input {
  height: 2.5rem;
  padding: .5rem .75rem;
  border-radius: .625rem;
}

.sc-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 8.75rem;
  padding: .5625rem .75rem;
  border-radius: .75rem;
  overflow-y: hidden;
  resize: none;
}

.sc-input:focus-visible,
.sc-textarea:focus-visible {
  border-color: var(--lp-primary);
  outline: 1px solid var(--lp-primary);
  outline-offset: 0;
}

.sc-input::placeholder,
.sc-textarea::placeholder {
  /* The theme's placeholder grey is 2.6:1; the muted ink keeps the hint readable. */
  color: var(--sc-muted);
  opacity: 1;
}

.sc-row {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}

.sc-row .sc-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
}

.sc-send {
  flex: 0 0 auto;
}

.sc-staged {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

.sc-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .125rem .125rem .125rem .625rem;
  border: 1px solid var(--lp-border-strong);
  border-radius: 999px;
  background: var(--lp-bg-subtle);
  font-size: .8125rem;
  line-height: 1.3;
}

.sc-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-chip-size {
  flex: 0 0 auto;
  color: var(--sc-muted);
}

.sc-chip button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-muted);
  cursor: pointer;
}

.sc-chip button:hover {
  background: var(--lp-bg-muted);
  color: var(--lp-text);
}

.sc-captcha {
  display: flex;
  justify-content: center;
  min-height: 4.875rem;
  margin: 0 0 .5rem;
}

.sc-error,
.sc-hint {
  /* Indented like the character count, so a line of text starts where the thread's text does, not at the field's edge. */
  margin: 0 .25rem .5rem;
  font-size: .8125rem;
  line-height: 1.4;
}

.sc-error {
  color: var(--sc-bad);
  font-weight: 600;
}

.sc-hint {
  color: var(--sc-muted);
}

.sc-count {
  margin: .25rem .25rem 0;
  color: var(--sc-muted);
  font-size: .75rem;
  text-align: right;
}

.sc-count.is-over {
  color: var(--sc-bad);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  /* 16px stops iOS from zooming the page when a field gets the focus. */
  .sc-input,
  .sc-textarea {
    font-size: 1rem;
  }
}

/* ---- Touch and short screens ---------------------------------------------------------------- */

/* A finger needs 44px: the header's icons, the attach button, the fields and Send grow to it on touch screens. */
@media (pointer: coarse) {
  .sc-icon-btn,
  .sc-row .sc-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .sc-head {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .sc-input {
    height: 2.75rem;
  }

  .sc-textarea {
    min-height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .6875rem;
  }

  .sc-row .sc-btn,
  .sc-email-edit .sc-btn,
  .sc-typo .sc-btn {
    min-height: 2.75rem;
  }

  /* Change is a word in a line of small print: its tap area grows past the text without growing the line. */
  .sc-email-line .sc-link-btn {
    padding: .625rem .5rem;
    margin: -.625rem -.5rem;
  }

  .sc-home {
    align-self: stretch;
    padding: 0 .25rem;
  }
}

/* A phone on its side (or a sheet squeezed by the keyboard) keeps the thread in view: the guest strip keeps its
   title and Sign in, and drops the paragraph under them. */
@media (max-height: 500px) {
  .sc-status-text {
    display: none;
  }

  .sc-status.is-guest {
    padding: .5rem 1rem;
  }
}

/* ---- Motion ------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sc-body *,
  .sc-body *::before,
  .sc-body *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}