/*
 * SiteMessenger styles.
 *
 * Every colour, font and size comes from a --sm-* custom property. The values
 * below are the package defaults (the same as site_messenger.web.conf
 * THEME_DEFAULTS, checked by a test) at zero specificity, so:
 *   1. {% site_messenger_theme %} writes the site's SITE_MESSENGER["THEME"] values
 *      on :root, which wins over these; and
 *   2. a host stylesheet can set any --sm-* variable itself, which wins too.
 * No other colour literal appears in this file (also checked by a test).
 *
 * Class names all start with "sm-" so they can't collide with a host's.
 */
/* sm-theme-defaults:start */
:where(:root) {
  --sm-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sm-font-size: 14px;
  --sm-font-size-small: 12px;
  --sm-color-primary: #0078D7;
  --sm-color-on-primary: #FFFFFF;
  --sm-color-surface: #FFFFFF;
  --sm-color-surface-alt: #F5F5F5;
  --sm-color-text: #333333;
  --sm-color-text-muted: #6B6B6B;
  --sm-color-border: #D2D2D2;
  --sm-color-bubble-mine: #DCEBFA;
  --sm-color-bubble-theirs: #F0F0F0;
  --sm-color-danger: #C62828;
  --sm-radius: 8px;
  --sm-help-button-size: 56px;
  --sm-popup-width: 360px;
  --sm-z-index: 1000;
  --sm-help-anchor: auto;
}
/* sm-theme-defaults:end */

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

/* The honeypot field: off screen for people, still in the form for bots. */
.sm-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sm-help, .sm-popups, .sm-dock, .sm-page, .sm-help *, .sm-popups *, .sm-dock *, .sm-page * {
  box-sizing: border-box;
}

.sm-help, .sm-popups, .sm-dock, .sm-page {
  font-family: var(--sm-font-family);
  font-size: var(--sm-font-size);
  color: var(--sm-color-text);
  line-height: 1.4;
}

/* Author display rules (e.g. .sm-btn's inline-flex) would otherwise beat the
   browser's own [hidden] rule. Scoped to the package's parts, never the host's. */
.sm-help [hidden], .sm-popups [hidden], .sm-dock [hidden], .sm-page [hidden], .sm-badge[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------ controls */

.sm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 36px;
  padding: 0.4em 0.9em;
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
  background: var(--sm-color-surface);
  color: var(--sm-color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sm-btn:hover { background: var(--sm-color-surface-alt); }
.sm-btn:disabled { opacity: 0.6; cursor: default; }
.sm-btn--primary {
  background: var(--sm-color-primary);
  border-color: var(--sm-color-primary);
  color: var(--sm-color-on-primary);
}
.sm-btn--primary:hover { background: var(--sm-color-primary); filter: brightness(0.92); }
.sm-btn--danger { color: var(--sm-color-danger); border-color: var(--sm-color-danger); }
.sm-btn--quiet { border-color: transparent; background: transparent; }

.sm-btn:focus-visible, .sm-input:focus-visible, .sm-help__button:focus-visible,
.sm-chat__log:focus-visible, .sm-threads__link:focus-visible, .sm-page a:focus-visible {
  outline: 3px solid var(--sm-color-primary);
  outline-offset: 2px;
}

.sm-input {
  display: block;
  width: 100%;
  padding: 0.5em 0.6em;
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
  background: var(--sm-color-surface);
  color: var(--sm-color-text);
  font: inherit;
}
textarea.sm-input { resize: vertical; min-height: 2.8em; }
select.sm-input { width: auto; display: inline-block; }

.sm-label { display: block; margin: 0.6em 0 0.25em; font-weight: 600; }
.sm-hint { color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); font-weight: normal; }

.sm-alert {
  margin: 0.5em 0;
  padding: 0.6em 0.8em;
  border-radius: var(--sm-radius);
  background: var(--sm-color-surface-alt);
  border: 1px solid var(--sm-color-border);
}
.sm-alert--error { border-color: var(--sm-color-danger); color: var(--sm-color-danger); }

.sm-badge {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.45em;
  border-radius: 999px;
  background: var(--sm-color-danger);
  color: var(--sm-color-on-primary);
  font-size: var(--sm-font-size-small);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ------------------------------------------------------------ chat */

.sm-chat { display: flex; flex-direction: column; gap: 0.4em; min-height: 0; }
.sm-chat__status, .sm-chat__note { margin: 0; color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); }
.sm-chat__error { margin: 0; color: var(--sm-color-danger); }
.sm-chat__log {
  list-style: none;
  margin: 0;
  padding: 0.5em;
  overflow-y: auto;
  max-height: 50vh;
  min-height: 6em;
  background: var(--sm-color-surface);
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
}
.sm-chat--page .sm-chat__log { max-height: 60vh; }
.sm-chat__empty { color: var(--sm-color-text-muted); padding: 0.5em; }
.sm-chat__composer { display: flex; gap: 0.5em; align-items: flex-end; }
.sm-chat__composer .sm-chat__input { flex: 1; }

.sm-msg { margin: 0.35em 0; max-width: 85%; }
.sm-msg p { margin: 0; }
.sm-msg__body {
  padding: 0.45em 0.7em;
  border-radius: var(--sm-radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sm-msg__meta { font-size: var(--sm-font-size-small); color: var(--sm-color-text-muted); }
.sm-msg__author { font-weight: 600; }
.sm-msg--mine { margin-left: auto; text-align: right; }
.sm-msg--mine .sm-msg__body { background: var(--sm-color-bubble-mine); text-align: left; }
.sm-msg--theirs .sm-msg__body { background: var(--sm-color-bubble-theirs); }
.sm-msg--system { max-width: 100%; text-align: center; }
.sm-msg--system .sm-msg__body { color: var(--sm-color-text-muted); font-style: italic; font-size: var(--sm-font-size-small); }

/* ------------------------------------------------------------ Help button + panel */

/* --sm-help-offset-bottom (THEME HELP_OFFSET_BOTTOM) lifts the button, the staff
   chat dock and the phone panel above a host's pinned footer. It is unset by
   default, so the fallbacks here (16px; 10px on phones) apply. */
.sm-help { position: fixed; bottom: var(--sm-help-offset-bottom, 16px); z-index: var(--sm-z-index); }
.sm-help--bottom-right { right: 16px; }
.sm-help--bottom-left { left: 16px; }
.sm-help__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: var(--sm-help-button-size);
  height: var(--sm-help-button-size);
  padding: 0 1.1em;
  border: 0;
  border-radius: calc(var(--sm-help-button-size) / 2);
  background: var(--sm-color-primary);
  color: var(--sm-color-on-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}
.sm-help__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sm-color-danger);
  border: 2px solid var(--sm-color-surface);
}
.sm-help__panel {
  position: absolute;
  bottom: calc(var(--sm-help-button-size) + 12px);
  width: var(--sm-popup-width);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--sm-help-offset-bottom, 16px) - var(--sm-help-button-size) - 32px);
  overflow-y: auto;
  padding: 0.8em 1em 1em;
  background: var(--sm-color-surface);
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.25);
}
.sm-help--bottom-right .sm-help__panel { right: 0; }
.sm-help--bottom-left .sm-help__panel { left: 0; }
/* Below the button (0.1.4): help_widget.js adds sm-help--panel-below when the
   anchor says so, or with "auto" when there isn't room above (a button near the top
   of the screen), and sets --sm-help-panel-room (the height there is) and, for the
   phone panel, --sm-help-panel-top. Above stays exactly as it was. */
.sm-help--panel-below .sm-help__panel {
  top: calc(100% + 12px);
  bottom: auto;
  max-height: var(--sm-help-panel-room, calc(100vh - var(--sm-help-button-size) - 32px));
}
.sm-help__head { display: flex; align-items: center; justify-content: space-between; }
.sm-help__title { margin: 0; font-size: calc(var(--sm-font-size) * 1.2); }
.sm-help__intro { margin: 0.2em 0 0.4em; }
.sm-help__privacy { margin: 0.6em 0; }
.sm-help__form > .sm-btn--primary { margin-top: 0.3em; }
.sm-help__body [data-sm-help-new] { margin-top: 0.6em; }

/* ------------------------------------------------------------ Help Desk popups + dock */

.sm-popups {
  position: fixed;
  top: 16px;
  z-index: calc(var(--sm-z-index) + 2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 0.1.5: never taller than the window. The newest popup is on top and the
     "+N more waiting" pill at the bottom; on a short screen the region scrolls
     instead of running off the bottom. A scrolling box clips its children's
     shadows, so the region is padded by the shadow's reach (0 6px 22px: 16px up,
     22px across, 28px down) and pulled back by the same negative margin: the
     popups sit exactly where they did before. The padding lets clicks through. */
  width: calc(var(--sm-popup-width) + 44px);
  max-width: calc(100vw + 12px);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 22px 28px;
  margin: -16px -22px -28px;
  pointer-events: none;
}
.sm-popups > * { pointer-events: auto; flex-shrink: 0; }
.sm-popups--bottom-right { right: 16px; }
.sm-popups--bottom-left { left: 16px; }
.sm-popups:empty, .sm-dock:empty { display: none; }
.sm-popup {
  padding: 0.8em 1em;
  background: var(--sm-color-surface);
  border: 1px solid var(--sm-color-border);
  border-left: 5px solid var(--sm-color-primary);
  border-radius: var(--sm-radius);
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.25);
}
.sm-popup p { margin: 0 0 0.35em; }
.sm-popup__title { font-weight: 700; }
.sm-popup__meta, .sm-popup__page { color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); overflow-wrap: anywhere; }
.sm-popup__error { color: var(--sm-color-danger); }
.sm-popup__actions { display: flex; gap: 0.5em; margin-top: 0.4em; }
.sm-popup--taken { border-left-color: var(--sm-color-text-muted); }
.sm-popup--hint { border-left-color: var(--sm-color-border); background: var(--sm-color-surface-alt); }
/* The "+N more waiting" pill (0.1.5): the requests with no popup of their own. */
.sm-popup--more { border-left-color: var(--sm-color-text-muted); padding: 0.6em 1em; }
.sm-popup--more .sm-popup__title { margin: 0; }
.sm-popup--more .sm-popup__actions { flex-wrap: wrap; }
.sm-popup__list { list-style: none; margin: 0.5em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
.sm-popup__waiting { width: 100%; justify-content: flex-start; text-align: left; font-size: var(--sm-font-size-small); overflow-wrap: anywhere; }

.sm-dock {
  position: fixed;
  bottom: var(--sm-help-offset-bottom, 16px);
  z-index: calc(var(--sm-z-index) + 1);
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - var(--sm-help-button-size) - 64px);
}
/* The dock sits on the other side from the Help button. */
.sm-dock--bottom-right { left: 16px; }
.sm-dock--bottom-left { right: 16px; flex-direction: row-reverse; }
.sm-dock__win {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  width: var(--sm-popup-width);
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  padding: 0.6em 0.8em 0.8em;
  background: var(--sm-color-surface);
  border: 1px solid var(--sm-color-border);
  border-top: 4px solid var(--sm-color-primary);
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.25);
  overflow: hidden;
}
.sm-dock__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.sm-dock__title { margin: 0; font-size: var(--sm-font-size); font-weight: 700; }
.sm-dock__contact, .sm-dock__page { margin: 0; font-size: var(--sm-font-size-small); color: var(--sm-color-text-muted); overflow-wrap: anywhere; }
.sm-dock__tools, .sm-dock__transfer { display: flex; flex-wrap: wrap; gap: 0.35em; align-items: center; }
.sm-dock__tools .sm-btn, .sm-dock__transfer .sm-btn { min-height: 30px; padding: 0.2em 0.6em; font-size: var(--sm-font-size-small); }
.sm-dock__full { font-size: var(--sm-font-size-small); color: var(--sm-color-primary); }
.sm-dock__error { margin: 0; color: var(--sm-color-danger); }
.sm-dock__chat { min-height: 0; display: flex; flex-direction: column; }
.sm-dock__chat .sm-chat__log { max-height: 36vh; }

/* ------------------------------------------------------------ pages */

.sm-standalone { margin: 0; background: var(--sm-color-surface-alt); }
.sm-page { display: block; }
.sm-page__inner { max-width: 820px; margin: 0 auto; padding: 1em; }
.sm-page__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin-bottom: 0.6em; }
.sm-page__title { margin: 0; font-size: calc(var(--sm-font-size) * 1.6); flex: 1 1 auto; }
.sm-back { color: var(--sm-color-primary); flex-basis: 100%; }
.sm-card {
  margin: 0 0 1em;
  padding: 0.8em 1em;
  background: var(--sm-color-surface);
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
}
.sm-card__title { margin: 0 0 0.5em; font-size: calc(var(--sm-font-size) * 1.15); }
.sm-card__subtitle { margin: 1em 0 0.4em; font-size: var(--sm-font-size); }
.sm-inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.2em 0.4em 0.2em 0; }
.sm-inline-form .sm-label { display: inline; margin: 0; }
.sm-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.8em; margin: 0.4em 0; }
.sm-plain-list { list-style: none; margin: 0; padding: 0; }
.sm-plain-list li { padding: 0.25em 0; }
.sm-options summary { cursor: pointer; font-weight: 600; }

.sm-threads { list-style: none; margin: 0; padding: 0; }
.sm-threads__item + .sm-threads__item { border-top: 1px solid var(--sm-color-border); }
.sm-threads__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1em 0.8em;
  padding: 0.6em 0.3em;
  color: inherit;
  text-decoration: none;
}
.sm-threads__link:hover { background: var(--sm-color-surface-alt); }
.sm-threads__title { font-weight: 600; }
.sm-threads__time { color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); }
.sm-threads__preview { color: var(--sm-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-threads__item--unread .sm-threads__title, .sm-threads__item--unread .sm-threads__preview { color: var(--sm-color-text); font-weight: 700; }

.sm-queue__list { list-style: none; margin: 0; padding: 0; }
.sm-queue__item { padding: 0.6em 0; }
.sm-queue__item + .sm-queue__item { border-top: 1px solid var(--sm-color-border); }
.sm-queue__item--mine { border-left: 4px solid var(--sm-color-primary); padding-left: 0.6em; }
.sm-queue__item p { margin: 0 0 0.25em; }
.sm-queue__summary { overflow-wrap: anywhere; }
.sm-queue__page { overflow-wrap: anywhere; }
.sm-queue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; }
.sm-help-detail__facts p { margin: 0 0 0.3em; overflow-wrap: anywhere; }
.sm-help-detail__tools { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; }
.sm-help-link__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.6em; }
/* A messaging page with the Help button on it: room at the bottom, so the page's
   own composer can always be scrolled clear of the floating button (0.1.2). */
[data-sm-page].sm-help-clearance { padding-bottom: calc(var(--sm-help-offset-bottom, 16px) + var(--sm-help-button-size) + 16px); }

/* ------------------------------------------------------------ full screen + per-page offset (0.1.3) and size (0.1.4) */

/* Full screen shows no host footer and (the regions move in, the Help button
   doesn't) no Help button, so inside a fullscreen element the offset falls back to
   the 16px / 10px defaults: a custom property set to `initial` is guaranteed-
   invalid, so every var(--sm-help-offset-bottom, N) uses its own N. Not when the
   whole document (html or body) is in full screen: that still shows the host's
   footer. One rule per spelling, as an unknown pseudo-class would drop a list. */
:fullscreen:not(:root):not(body) { --sm-help-offset-bottom: initial; }
:-webkit-full-screen:not(:root):not(body) { --sm-help-offset-bottom: initial; }
/* A page's own override (<body data-sm-help-offset-bottom="...">): "default" is
   handled here too, so it holds before (or without) the page script, which applies
   pixel and length values. */
[data-sm-help-offset-bottom="default" i] { --sm-help-offset-bottom: initial; }
/* The same for the button's size (0.1.4, <body data-sm-help-button-size="40">):
   "default" is the package's own 56px, whatever THEME or :root says. */
[data-sm-help-button-size="default" i] { --sm-help-button-size: 56px; }

/* ------------------------------------------------------------ phones */

@media (max-width: 480px) {
  .sm-help { bottom: var(--sm-help-offset-bottom, 10px); }
  .sm-help--bottom-right { right: 10px; }
  .sm-help--bottom-left { left: 10px; }
  .sm-help__label { display: none; }
  .sm-help__button { padding: 0; width: var(--sm-help-button-size); }
  .sm-help--bottom-right .sm-help__panel, .sm-help--bottom-left .sm-help__panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--sm-help-offset-bottom, 10px) + var(--sm-help-button-size) + 8px);
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--sm-help-offset-bottom, 10px) - var(--sm-help-button-size) - 24px);
  }
  .sm-help--panel-below.sm-help--bottom-right .sm-help__panel, .sm-help--panel-below.sm-help--bottom-left .sm-help__panel {
    top: var(--sm-help-panel-top, 8px);
    bottom: auto;
    max-height: var(--sm-help-panel-room, calc(100vh - var(--sm-help-button-size) - 24px));
  }
  .sm-popups { top: 8px; left: 8px; right: 8px; width: auto; max-width: none; }
  .sm-dock { left: 8px; right: 8px; bottom: calc(var(--sm-help-offset-bottom, 10px) + var(--sm-help-button-size) + 8px); max-width: none; }
  .sm-dock__win { width: 100%; max-height: 60vh; }
  .sm-msg { max-width: 95%; }
  .sm-page__inner { padding: 0.6em; }
  [data-sm-page].sm-help-clearance { padding-bottom: calc(var(--sm-help-offset-bottom, 10px) + var(--sm-help-button-size) + 12px); }
  /* Full screen (0.1.3): the dock stacks above the Help button on phones, but the
     button isn't in a fullscreen element unless the host put it there, so the dock
     keeps no room for it. Without :has() support this rule is dropped and the dock
     sits above where the button would be (the offset still falls back). */
  :fullscreen:not(:root):not(body):not(:has(.sm-help)) .sm-dock { bottom: var(--sm-help-offset-bottom, 10px); }
  :-webkit-full-screen:not(:root):not(body):not(:has(.sm-help)) .sm-dock { bottom: var(--sm-help-offset-bottom, 10px); }
  .sm-chat__composer { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: no-preference) {
  .sm-popup { animation: sm-pop-in 160ms ease-out; }
  @keyframes sm-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}