/*
 * 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).
 *
 * Some variables are unset by default and fall back, where they are used, to
 * another one (0.1.6): --sm-color-on-danger to --sm-color-on-primary,
 * --sm-color-link and --sm-color-focus to --sm-color-primary. Resolved at the
 * element, so a host that sets --sm-color-primary on a deeper element than :root
 * still gets its links and rings in that colour.
 *
 * 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-help-hover-lift: 3px;
}
/* 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; }

/* Every focus ring is --sm-color-focus (0.1.6), unset by default: the primary
   colour, as before. A host whose primary is too light for a ring sets the one
   variable instead of copying this selector list. */
.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-focus, 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);
  /* The number is on the danger fill, so it is on-danger (0.1.6); unset, that is
     on-primary, as before. */
  color: var(--sm-color-on-danger, 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); }
/* 0.4.0: "<name> is typing…" under the messages, and the quiet-watch note. */
.sm-chat__typing { margin: 0; color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); font-style: italic; overflow-wrap: anywhere; }
.sm-chat__typing[hidden] { display: none; }
.sm-chat__watch, .sm-dock__watch { margin: 0; padding: 0.35em 0.5em; border-radius: calc(var(--sm-radius) / 2); background: var(--sm-color-surface-alt); color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); overflow-wrap: anywhere; }
.sm-chat__watch[hidden], .sm-dock__watch[hidden] { display: none; }
.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);
  transition: box-shadow 150ms ease-out;
}
/* The button lifts a little on hover and on keyboard focus (0.1.6, Shannon via
   NewfieCards). The shadow deepens for everyone; the movement (rules at the end of
   this file) only where reduced motion isn't asked for. Hover only where the device
   can hover, so a phone tap doesn't leave the button raised; :focus-visible
   everywhere. The colours are restated from the host's variables so that a host's
   generic button:hover rule can't repaint it. --sm-help-hover-lift is the distance
   (THEME HELP_HOVER_LIFT False, or data-sm-help-hover-lift="off", switches all of
   it off through these variables). */
@media (hover: hover) {
  .sm-help__button:hover {
    background: var(--sm-color-primary);
    color: var(--sm-color-on-primary);
    box-shadow: var(--sm-help-hover-shadow, 0 8px 22px rgb(0 0 0 / 0.32));
  }
}
.sm-help__button:focus-visible {
  box-shadow: var(--sm-help-hover-shadow, 0 8px 22px rgb(0 0 0 / 0.32));
}
[data-sm-help-hover-lift="off" i] {
  --sm-help-hover-lift: 0px;
  --sm-help-hover-scale: 1;
  --sm-help-hover-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}
[data-sm-help-hover-lift="on" i], [data-sm-help-hover-lift="default" i] {
  --sm-help-hover-lift: 3px;
  --sm-help-hover-scale: initial;
  --sm-help-hover-shadow: initial;
}
.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; }
/* 0.6.0: HELP_LINKS, plain text links next to the privacy link. */
.sm-help__link { margin-left: 0.4em; white-space: nowrap; }
.sm-help__form > .sm-btn--primary { margin-top: 0.3em; }
.sm-help__body [data-sm-help-new] { margin-top: 0.6em; }

/* 0.5.0: the header's tools (move, reset position, pop out, pop back in, close). */
.sm-help__head { gap: 0.5em; }
.sm-help__tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sm-help__tool { min-height: 30px; padding: 0.2em 0.4em; }
.sm-help__reset { font-size: var(--sm-font-size-small); }
.sm-help__move { cursor: grab; }
/* Dragging by the header: the browser mustn't scroll or select under a finger. */
.sm-help__head--drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sm-help--dragging .sm-help__head, .sm-help--dragging .sm-help__move { cursor: grabbing; }
/* A dragged panel (help_widget.js sets the variables, fitted inside the window or
   the fullscreen element): fixed at that place whatever side it would open on. */
.sm-help.sm-help--placed .sm-help__panel, .sm-help.sm-help--placed .sm-help__chip {
  position: fixed;
  left: var(--sm-help-panel-x, 8px);
  top: var(--sm-help-panel-y, 8px);
  right: auto;
  bottom: auto;
  max-height: var(--sm-help-panel-max, calc(100vh - 16px));
}
/* While Help is popped out: a small chip where the panel was. */
.sm-help__chip {
  position: absolute;
  bottom: calc(var(--sm-help-button-size) + 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  width: max-content;
  max-width: min(var(--sm-popup-width), calc(100vw - 32px));
  padding: 0.6em 0.8em;
  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__chip { right: 0; }
.sm-help--bottom-left .sm-help__chip { left: 0; }
.sm-help--panel-below .sm-help__chip { top: calc(100% + 12px); bottom: auto; }
.sm-help__chip-text { margin: 0; }
.sm-help__chip-typing { margin: 0; color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); font-style: italic; overflow-wrap: anywhere; }
/* The pop out window's own page: the panel fills the window, the log takes the room. */
.sm-help-window { margin: 0; background: var(--sm-color-surface); }
.sm-help.sm-help--window { position: static; }
.sm-help--window .sm-help__panel {
  position: static;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sm-help--window .sm-help__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.sm-help--window [data-sm-help-chat] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sm-help--window .sm-chat { flex: 1 1 auto; }
.sm-help--window .sm-chat__log { flex: 1 1 auto; max-height: none; }
.sm-help--window > .sm-alert { margin: 1em; }

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

/* --sm-popups-top / --sm-popups-bottom (0.1.6, TechieCRM CT6; THEME POPUPS_TOP /
   POPUPS_BOTTOM, per page data-sm-popups-top): where the region starts, and how
   much room to leave below it (a pinned footer). Unset by default: 16px (8px on
   phones) and 0. The max-height follows from both, so a host that moves the
   region sets the one value; on every screen the region ends at the window less
   --sm-popups-bottom (on phones since 0.1.7). */
.sm-popups {
  position: fixed;
  top: var(--sm-popups-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.
     The border box starts 16px above the top, so the window less (top - 16px)
     less the bottom room: unset, exactly 0.1.5's 100vh. vh first for browsers
     without dvh. */
  width: calc(var(--sm-popup-width) + 44px);
  max-width: calc(100vw + 12px);
  max-height: calc(100vh - var(--sm-popups-top, 16px) + 16px - var(--sm-popups-bottom, 0px));
  max-height: calc(100dvh - var(--sm-popups-top, 16px) + 16px - var(--sm-popups-bottom, 0px));
  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; flex-wrap: wrap; 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); }
/* 0.4.0: after the first pointerdown the hint is invisible but keeps its space until
   the click has landed, so the popups below it don't move under the pointer. */
.sm-popup--retired { visibility: hidden; pointer-events: none; }
/* 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-link, 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; }
/* Text links are --sm-color-link (0.1.6), unset by default: the primary colour,
   as before. Primary is a fill; a bright one can be too light to read as text. */
.sm-back { color: var(--sm-color-link, 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); }

/* ------------------------------------------------------------ Help Assistant (0.3.0) */

/* An assistant answer: wider than a chat bubble (it carries steps and buttons),
   marked by a primary-coloured edge. Its body holds blocks, so the bubble's
   pre-wrap (kept for typed messages) is switched off inside it. Every colour is a
   --sm-* variable; links follow --sm-color-link like the package's other links. */
.sm-msg--assistant { max-width: 100%; }
.sm-msg--assistant .sm-msg__body.sm-assistant {
  white-space: normal;
  background: var(--sm-color-surface-alt);
  border-left: 4px solid var(--sm-color-primary);
}
.sm-assistant p, .sm-assistant ol, .sm-assistant ul { margin: 0 0 0.45em; }
.sm-assistant > :last-child, .sm-assistant__more > :last-child { margin-bottom: 0; }
.sm-assistant ol, .sm-assistant ul { padding-left: 1.4em; }
.sm-assistant li + li { margin-top: 0.2em; }
.sm-assistant a { color: var(--sm-color-link, var(--sm-color-primary)); overflow-wrap: anywhere; }
.sm-assistant__lead { font-weight: 600; }
.sm-assistant__title { font-weight: 700; }
.sm-assistant__related-head { color: var(--sm-color-text-muted); font-size: var(--sm-font-size-small); }
/* The members-only label on an answer shown to someone outside its audience. */
.sm-assistant__members {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px solid var(--sm-color-border);
  border-radius: var(--sm-radius);
  color: var(--sm-color-text-muted);
  font-size: var(--sm-font-size-small);
  font-weight: 600;
  white-space: nowrap;
}
.sm-assistant__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; }
.sm-assistant a.sm-assistant__go { color: var(--sm-color-on-primary); text-decoration: none; }
.sm-assistant__more summary { cursor: pointer; color: var(--sm-color-link, var(--sm-color-primary)); }
.sm-assistant__more[open] summary { margin-bottom: 0.3em; }
.sm-assistant__related-list { list-style: disc; }
.sm-assistant__decline-form { margin: 0.2em 0 0; }
.sm-assistant__decline { white-space: normal; text-align: left; }
.sm-assistant__decline:focus-visible, .sm-assistant__more summary:focus-visible, .sm-assistant a:focus-visible {
  outline: 3px solid var(--sm-color-focus, var(--sm-color-primary));
  outline-offset: 2px;
}

/* "Help conversations" (the history card) and the staff visitor pages. */
.sm-help-history__item + .sm-help-history__item { margin-top: 0.6em; border-top: 1px solid var(--sm-color-border); padding-top: 0.6em; }
.sm-help-history__summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; align-items: baseline; }
.sm-help-history__question { font-weight: 600; overflow-wrap: anywhere; }
.sm-help-history__open { margin: 0.4em 0; }
.sm-help-history__open a { color: var(--sm-color-link, var(--sm-color-primary)); }
.sm-help-history__log { max-height: none; margin-top: 0.4em; }
.sm-help-history__outcome { color: var(--sm-color-text-muted); }
.sm-table { width: 100%; border-collapse: collapse; }
.sm-table th, .sm-table td { text-align: left; padding: 0.4em 0.5em; border-bottom: 1px solid var(--sm-color-border); overflow-wrap: anywhere; }
.sm-table th { font-size: var(--sm-font-size-small); color: var(--sm-color-text-muted); font-weight: 600; }
.sm-table a { color: var(--sm-color-link, var(--sm-color-primary)); }

/* ------------------------------------------------------------ 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; }
/* The popup region's top (0.1.6, <body data-sm-popups-top="48">): "default" is the
   stylesheet's own 16px (8px on phones), whatever THEME or :root says. */
[data-sm-popups-top="default" i] { --sm-popups-top: initial; }

/* ------------------------------------------------------------ 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);
  }
  /* 0.5.0: the chip is a strip across the screen, like the panel (no dragging here). */
  .sm-help--bottom-right .sm-help__chip, .sm-help--bottom-left .sm-help__chip {
    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;
  }
  .sm-help--panel-below.sm-help--bottom-right .sm-help__chip, .sm-help--panel-below.sm-help--bottom-left .sm-help__chip {
    top: var(--sm-help-panel-top, 8px);
    bottom: auto;
  }
  .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: var(--sm-popups-top, 8px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    /* The border box starts 16px above the top (the desktop rule's negative margin
       still applies here), so the max-height adds back those 16px: the box ends at
       the window less --sm-popups-bottom, as on desktops. 0.1.5 and 0.1.6 added
       back 8px, so the region ended 8px short on phones (TechieCRM CT10). */
    max-height: calc(100vh - var(--sm-popups-top, 8px) + 16px - var(--sm-popups-bottom, 0px));
    max-height: calc(100dvh - var(--sm-popups-top, 8px) + 16px - var(--sm-popups-bottom, 0px));
  }
  .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; }
  /* 0.7.0 (both hosts): the phone sheet keeps its Send button in view. Before, the
     whole panel scrolled, so a long "No one from our Help Desk is online" notice
     above a long chat pushed the composer below the sheet's visible area (Enter
     still sent, but no Send button showed). Now the sheet is a column: the header,
     the notice (at most about five lines, scrolling inside itself), then the chat,
     whose message log takes the room that is left and scrolls, and the composer
     at the bottom, never squeezed. The question form scrolls inside the sheet with
     its Send button held at the bottom of what shows. Only the floating panel's
     phone layout: the pop out window has its own column layout (above), and the
     desktop panel is unchanged. */
  .sm-help--bottom-right .sm-help__panel, .sm-help--bottom-left .sm-help__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sm-help--bottom-right .sm-help__panel > *, .sm-help--bottom-left .sm-help__panel > * { flex: none; }
  .sm-help--bottom-right .sm-help__panel > .sm-help__body, .sm-help--bottom-left .sm-help__panel > .sm-help__body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .sm-help--bottom-right .sm-help__form > .sm-btn--primary, .sm-help--bottom-left .sm-help__form > .sm-btn--primary {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -6px 8px var(--sm-color-surface);
  }
  .sm-help--bottom-right [data-sm-help-chat-view], .sm-help--bottom-left [data-sm-help-chat-view] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sm-help--bottom-right [data-sm-help-chat-view] > *, .sm-help--bottom-left [data-sm-help-chat-view] > * { flex: none; }
  .sm-help--bottom-right [data-sm-help-notice], .sm-help--bottom-left [data-sm-help-notice] {
    flex: 0 1 auto;
    min-height: 2.6em;
    max-height: min(30vh, 8.5em);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sm-help--bottom-right [data-sm-help-chat], .sm-help--bottom-left [data-sm-help-chat] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sm-help--bottom-right [data-sm-help-chat] > .sm-chat, .sm-help--bottom-left [data-sm-help-chat] > .sm-chat { flex: 0 1 auto; min-height: 0; }
  .sm-help--bottom-right [data-sm-help-chat] .sm-chat > *, .sm-help--bottom-left [data-sm-help-chat] .sm-chat > * { flex: none; }
  .sm-help--bottom-right [data-sm-help-chat] .sm-chat__log, .sm-help--bottom-left [data-sm-help-chat] .sm-chat__log {
    flex: 0 1 auto;
    min-height: 4.5em;
    max-height: none;
  }
}

/* 0.6.0: the review queue for learned answers. */
.sm-learned__question { margin: 0.4em 0; }
.sm-learned__title { margin: 0.6em 0 0.2em; font-size: var(--sm-font-size); }
.sm-learned__steps { margin: 0.2em 0 0.6em; padding-left: 0.75em; border-left: 3px solid var(--sm-color-border); }
.sm-learned__form .sm-input { display: block; width: 100%; box-sizing: border-box; }
.sm-learned__audience { margin: 0.8em 0; padding: 0; border: 0; }
/* 0.7.0: the audience chooser beside the queue's one-click Approve. */
.sm-learned__audience-select { width: auto; max-width: 100%; }

/* ------------------------------------------------------------ touch screens, phone keyboards, notches (0.7.1) */

/* Found by Shannon on an iPhone (Safari, NewfieCards, 0.7.0): tapping "Your
   question" zoomed the whole page in and left it zoomed, so the Help sheet ran off
   the right of the screen. iOS Safari zooms when a focused text field's type is
   smaller than 16px. So on touch screens and the phone layout every field the
   package draws (the Help form, the chat composer, the pop out window, the staff
   dock, the pages' selects) is at least 16px: max(16px, 1rem, 1em), where 1em is
   the size it would inherit (--sm-font-size), so a host with larger type keeps it,
   and 1rem follows a reader's larger browser text. Desktops with a mouse keep
   --sm-font-size as before. The package never touches the host's viewport meta
   (no maximum-scale, no user-scalable=no: people must still be able to zoom). */
@media (pointer: coarse), (max-width: 480px) {
  :is(.sm-help, .sm-popups, .sm-dock, .sm-page) :is(input, textarea, select) {
    font-size: max(16px, 1rem, 1em);
  }
}

/* Notched phones: the Help button and the desktop-layout panel keep clear of the
   rounded corners and the camera housing at the sides (a phone held sideways).
   env(safe-area-inset-*) is 0 unless the host's viewport meta has
   viewport-fit=cover, so on every other page these compute exactly as before. The
   bottom inset is deliberately not added: hosts already lift the button with
   --sm-help-offset-bottom (THEME HELP_OFFSET_BOTTOM) measured from their own
   footer, which includes it where it matters, and adding it here would count it
   twice. */
.sm-help--bottom-right { right: calc(16px + env(safe-area-inset-right, 0px)); }
.sm-help--bottom-left { left: calc(16px + env(safe-area-inset-left, 0px)); }

@media (max-width: 480px) {
  .sm-help--bottom-right { right: calc(10px + env(safe-area-inset-right, 0px)); }
  .sm-help--bottom-left { left: calc(10px + env(safe-area-inset-left, 0px)); }
  /* The phone sheet's edges: inside the safe area on the sides and under the
     status bar / camera at the top; 100dvh (where the browser has it) so the sheet
     isn't taller than the screen while Safari's toolbars show. */
  .sm-help--bottom-right .sm-help__panel, .sm-help--bottom-left .sm-help__panel,
  .sm-help--bottom-right .sm-help__chip, .sm-help--bottom-left .sm-help__chip {
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
  }
  .sm-help--bottom-right .sm-help__panel, .sm-help--bottom-left .sm-help__panel {
    max-height: calc(100vh - var(--sm-help-offset-bottom, 10px) - var(--sm-help-button-size) - 24px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--sm-help-offset-bottom, 10px) - var(--sm-help-button-size) - 24px - env(safe-area-inset-top, 0px));
  }
  .sm-help--panel-below.sm-help--bottom-right .sm-help__panel, .sm-help--panel-below.sm-help--bottom-left .sm-help__panel,
  .sm-help--panel-below.sm-help--bottom-right .sm-help__chip, .sm-help--panel-below.sm-help--bottom-left .sm-help__chip {
    top: max(var(--sm-help-panel-top, 8px), calc(8px + env(safe-area-inset-top, 0px)));
  }
  /* The on-screen keyboard: help_widget.js adds sm-help--keyboard while one is up
     over the open sheet and sets --sm-help-keyboard-bottom (the visible area's
     bottom less 8px, from window.visualViewport, measured from the layout
     viewport's top) and --sm-help-keyboard-room (the visible height less 16px). The
     sheet's bottom edge sits there (top + translateY(-100%), so the window's own
     height, which browsers report differently with a keyboard up, is never used)
     and it is never taller than what shows, so the composer and Send stay above
     the keyboard; the 0.7.0 column layout (above) shrinks the message log to fit.
     Whatever side the panel opened on. Never the dragged panel, the pop out window
     or a panel in browser full screen (the script doesn't add the class there). */
  .sm-help--keyboard.sm-help--bottom-right .sm-help__panel, .sm-help--keyboard.sm-help--bottom-left .sm-help__panel {
    top: var(--sm-help-keyboard-bottom, calc(100vh - 8px));
    bottom: auto;
    transform: translateY(-100%);
    max-height: calc(var(--sm-help-keyboard-room, calc(100vh - 16px)) - env(safe-area-inset-top, 0px));
  }
  /* With the keyboard up a small phone has 250 to 300px left, so the composer gets
     first claim: the notice gives way first (at most about three lines, down to
     nothing; it scrolls and its role="status" text was announced whole), then the
     message log (down to about one line). The chat's column can't shrink below its
     composer, and the chat view is bottom-aligned, so on a screen too short even
     for that it is the top (the notice, the oldest lines) that is cut, never the
     composer and Send. */
  .sm-help--keyboard.sm-help--bottom-right [data-sm-help-chat-view], .sm-help--keyboard.sm-help--bottom-left [data-sm-help-chat-view] {
    justify-content: flex-end;
  }
  .sm-help--keyboard.sm-help--bottom-right [data-sm-help-notice], .sm-help--keyboard.sm-help--bottom-left [data-sm-help-notice] {
    min-height: 0;
    max-height: min(20vh, 4.5em);
  }
  .sm-help--keyboard.sm-help--bottom-right [data-sm-help-chat], .sm-help--keyboard.sm-help--bottom-left [data-sm-help-chat],
  .sm-help--keyboard.sm-help--bottom-right [data-sm-help-chat] > .sm-chat, .sm-help--keyboard.sm-help--bottom-left [data-sm-help-chat] > .sm-chat {
    min-height: auto;
  }
  .sm-help--keyboard.sm-help--bottom-right [data-sm-help-chat] .sm-chat__log, .sm-help--keyboard.sm-help--bottom-left [data-sm-help-chat] .sm-chat__log {
    min-height: 1.6em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The Help button's lift (0.1.6): the movement, for people who haven't asked
     for reduced motion. */
  .sm-help__button { transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
  @media (hover: hover) {
    .sm-help__button:hover {
      transform: translateY(calc(-1 * var(--sm-help-hover-lift, 3px))) scale(var(--sm-help-hover-scale, 1.04));
    }
  }
  .sm-help__button:focus-visible {
    transform: translateY(calc(-1 * var(--sm-help-hover-lift, 3px))) scale(var(--sm-help-hover-scale, 1.04));
  }
  .sm-popup { animation: sm-pop-in 160ms ease-out; }
  @keyframes sm-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}