/* Ask For Help: the button fixed at the bottom right of every page and its small chat panel.
   Uses the tokens in style.css (light and dark), buttons use the .btn class. */
.help-widget { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-family: var(--sans, -apple-system, "Segoe UI", sans-serif); }
.help-toggle { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px var(--glow); }
.help-widget :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.help-panel { position: absolute; right: 0; bottom: 58px; width: min(380px, calc(100vw - 32px));
  max-height: min(580px, calc(100vh - 110px)); max-height: min(580px, calc(100dvh - 110px));
  display: flex; flex-direction: column; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; }
.help-panel[hidden] { display: none; }

.help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  background: var(--block); color: var(--on-block); border-bottom: 3px solid var(--cyan); }
.help-head h2 { margin: 0; font: 600 16px/1.2 var(--sans, sans-serif); letter-spacing: 0; color: inherit; }
.help-close { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; cursor: pointer;
  font: 500 13px/1 var(--sans, sans-serif); padding: 7px 10px; }
.help-close:hover { background: rgba(255,255,255,.12); }
.help-widget .help-head :focus-visible { outline-color: #FFFFFF; }

.help-log { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.help-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.help-msg.bot { align-self: flex-start; background: var(--white); border: 1px solid var(--line); }
.help-msg.you { align-self: flex-end; background: var(--brass-soft); border: 1px solid var(--brass-line); }
.help-msg.wait { color: var(--slate); font-style: italic; }
.help-mail { display: inline-block; margin-top: 8px; font-weight: 600; white-space: normal; }

.help-form { padding: 10px 14px 4px; border-top: 1px solid var(--line); background: var(--white); }
.help-form textarea { display: block; width: 100%; resize: none; font: 16px/1.4 var(--sans, sans-serif);
  color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); }
.help-form textarea:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px var(--glow); }
.help-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.help-count { font-size: 12.5px; color: var(--slate); }
.help-note { margin: 0; padding: 6px 14px 12px; font-size: 12.5px; line-height: 1.45; color: var(--slate); background: var(--white); }
.help-note a { color: var(--ink); }
.help-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Room at the bottom of the page so the button never covers the footer text. */
body:has(.help-widget) .foot { padding-bottom: 84px; }

/* Phone width: the panel fills the screen width above the button. */
@media (max-width: 520px) {
  .help-widget { right: 12px; bottom: 12px; }
  .help-panel { position: fixed; left: 12px; right: 12px; bottom: 68px; width: auto;
    max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); }
}
@media print { .help-widget { display: none; } }