/* =========================================================================
   Live chat widget.

   Its own sheet, loaded by the three layouts that carry the widget, because it
   is the only component that appears on the public site, the investor dashboard
   and the sign-in screens alike — and those load three different stylesheets.
   Duplicating it into each is how the three copies drift.

   Every custom property used here is redeclared locally. The three sheets do
   not all declare the same set, and an undefined var() deletes the whole
   declaration silently (the gotcha recorded in CLAUDE.md that cost nineteen
   admin rules their colour). Scoping them to .apsup means this file works
   wherever it is dropped and cannot be broken by a palette change elsewhere.
   ========================================================================= */

.apsup {
  --sup-bg:      #111110;
  --sup-bg-2:    #191917;
  --sup-line:    rgba(249, 250, 251, .10);
  --sup-line-2:  rgba(249, 250, 251, .18);
  --sup-ink:     #F9FAFB;
  --sup-dim:     rgba(249, 250, 251, .62);
  --sup-dimmer:  rgba(249, 250, 251, .47);
  --sup-gold:    #D4AF37;
  --sup-mono:    var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --sup-body:    var(--f-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 900;
  font-family: var(--sup-body);
}

/* The `hidden` attribute has to actually hide things.

   `[hidden]` is only `display: none` from the browser's default stylesheet, at
   the lowest possible specificity — so any class rule setting `display` beats
   it. Both the panel and the composer are flex containers, which meant
   `el.panel.hidden = true` set the attribute and changed nothing: the close
   button appeared dead, and the guest form and the message box were on screen
   together because neither could be hidden.
   
   Scoped to the widget rather than global, and `!important` because the whole
   point is to win against the layout rules below. */
.apsup [hidden],
.apsup[hidden] { display: none !important; }

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

/* --- Launcher ---------------------------------------------------------- */

/* Gold, and solid.

   It was an outlined dark button on a dark page, which is the brand's language
   for a secondary action — and it read as one: easy to miss entirely. This is
   the one thing on the page inviting somebody to talk to the firm, so it takes
   the primary treatment the "Open an account" button uses. Gold is reserved for
   one action per view (CLAUDE.md §3), and on a page where the visitor has
   scrolled past the header this is the only one on screen. */
.apsup__launch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; min-height: 52px;
  background: var(--sup-gold); color: #0A0A0A;
  border: 1px solid var(--sup-gold); border-radius: 2px;
  font-family: var(--sup-mono); font-size: 10.5px; letter-spacing: .18em;
  font-weight: 600; text-transform: uppercase; cursor: pointer;
  /* Lifts it off whatever it happens to be sitting over — the hero image on
     the homepage, a table on the dashboard. */
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 0 0 6px rgba(212, 175, 55, .10);
  transition: background .25s, box-shadow .25s, transform .15s;
}
.apsup__launch:hover {
  background: #E5C568; border-color: #E5C568;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 8px rgba(212, 175, 55, .16);
}
.apsup__launch:active { transform: translateY(1px); }
.apsup__launch:focus-visible { outline: 2px solid var(--sup-ink); outline-offset: 3px; }
.apsup__launch-icon svg { width: 18px; height: 18px; display: block; }

/* Ivory on gold — a gold badge on a gold button would be invisible. */
.apsup__badge {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0A0A0A; color: var(--sup-gold); border-radius: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}

/* Open: step back to the outlined form, so the panel above is what draws the
   eye rather than the button that opened it. */
.apsup.is-open .apsup__launch {
  background: var(--sup-bg); color: var(--sup-gold);
  border-color: var(--sup-gold); box-shadow: none;
}
.apsup.is-open .apsup__badge { background: var(--sup-gold); color: #0A0A0A; }

/* --- Panel ------------------------------------------------------------- */

.apsup__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(374px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--sup-bg); border: 1px solid var(--sup-line-2); border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.apsup__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--sup-line); flex: none;
}
.apsup__title {
  margin: 0; font-family: var(--sup-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sup-ink); font-weight: 400;
}
.apsup__state { margin: 6px 0 0; font-size: 12px; color: var(--sup-dimmer); }

.apsup__close {
  background: none; border: 0; color: var(--sup-dim); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 2px 6px;
  min-width: 28px; min-height: 28px;
}
.apsup__close:hover { color: var(--sup-ink); }

/* --- Body -------------------------------------------------------------- */

.apsup__body {
  flex: 1 1 auto; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.apsup__intro { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sup-dim); }
.apsup__note  { margin: 0 0 4px; font-size: 12px; line-height: 1.6; color: var(--sup-dimmer); }

.apsup__field { display: block; margin-bottom: 12px; }
.apsup__label {
  display: block; font-family: var(--sup-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sup-dimmer); margin-bottom: 6px;
}
.apsup__field input {
  width: 100%; padding: 11px 12px; min-height: 44px;
  background: var(--sup-bg-2); border: 1px solid var(--sup-line);
  color: var(--sup-ink);
  /* 16px so iOS does not zoom the page when the field takes focus. */
  font-size: 16px; font-family: inherit; border-radius: 2px;
}
.apsup__field input:focus { outline: none; border-color: var(--sup-gold); }

.apsup__btn {
  width: 100%; padding: 13px 16px; min-height: 46px;
  font-family: var(--sup-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--sup-line-2); background: none; color: var(--sup-ink);
}
.apsup__btn--go { background: var(--sup-gold); border-color: var(--sup-gold); color: #0A0A0A; font-weight: 600; }
.apsup__btn--go:disabled { opacity: .55; cursor: default; }

.apsup__error {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: #E5A0A0;
}

/* --- Messages ---------------------------------------------------------- */

.apsup__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.apsup__msg {
  max-width: 84%; padding: 10px 13px; border-radius: 2px;
  display: flex; flex-direction: column; gap: 5px; position: relative;
}
.apsup__msg--out { align-self: flex-end; background: var(--sup-gold); color: #0A0A0A; }
.apsup__msg--in  { align-self: flex-start; background: var(--sup-bg-2); border: 1px solid var(--sup-line); }

.apsup__text {
  margin: 0; font-size: 14px; line-height: 1.6;
  /* Preserve the line breaks somebody typed, and break a pasted address rather
     than letting it push the panel sideways. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.apsup__time { font-size: 10.5px; font-family: var(--sup-mono); letter-spacing: .1em; opacity: .7; }

.apsup__msg.is-sending { opacity: .6; }
.apsup__msg.is-failed  { background: #3A2020; color: var(--sup-ink); border: 1px solid #6B3030; }

.apsup__retry {
  position: absolute; top: 6px; right: -30px;
  width: 24px; height: 24px; border-radius: 12px;
  background: none; border: 1px solid var(--sup-line-2); color: var(--sup-dim);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.apsup__retry:hover { color: var(--sup-gold); border-color: var(--sup-gold); }

.apsup__typing { margin: 0; font-size: 12px; color: var(--sup-dimmer); font-style: italic; }

/* --- Compose ----------------------------------------------------------- */

.apsup__compose {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--sup-line); background: var(--sup-bg);
}
.apsup__compose textarea {
  flex: 1 1 auto; resize: none; max-height: 120px;
  padding: 11px 12px; min-height: 44px;
  background: var(--sup-bg-2); border: 1px solid var(--sup-line);
  color: var(--sup-ink); font-family: inherit; font-size: 16px; line-height: 1.5;
  border-radius: 2px;
}
.apsup__compose textarea:focus { outline: none; border-color: var(--sup-gold); }

.apsup__send {
  flex: none; width: 44px; height: 44px;
  background: var(--sup-gold); border: 0; border-radius: 2px; color: #0A0A0A;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.apsup__send svg { width: 17px; height: 17px; }

.apsup__banner {
  flex: none; margin: 0; padding: 11px 16px;
  border-top: 1px solid var(--sup-line);
  font-size: 12.5px; line-height: 1.55; color: var(--sup-dimmer);
  background: var(--sup-bg-2);
}

/* --- Phones ------------------------------------------------------------
   Full screen, and the launcher lifts clear of the dashboard's bottom tab bar
   — the same crowding problem the language switcher hit (ADR-029). */
@media (max-width: 560px) {
  .apsup__panel {
    position: fixed; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: 0;
  }
}

@media (max-width: 900px) {
  body.has-tabbar .apsup { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .apsup * { transition: none !important; }
}