/* Chat bar — Messenger + Instagram DM buttons with a status line and dot.
 * BOTTOM-BANNER VARIANT: the bar is a dock fixed to the foot of the page
 * rather than a cluster in the header, so the header keeps its CTA space.
 * Spec: D21 (FOR-NICOLE-2026-10-14). Header variant lives on branch
 * header-chat-bar. Doug 2026-10-15: dark blue ground, white buttons,
 * white bold availability line.
 *
 * Loaded only on the pages that carry the bar: /, /school-year, /tutoring,
 * /school-year-ms, /tutoring-ms, /elementary, /florida, /books.
 *
 * Token bridge: the site runs two generations of CSS variable names. The newer
 * pages (school-year, tutoring, the -ms pair, florida) carry --accent-navy /
 * --text-secondary / --radius-sm / --border-subtle. The older pages (home,
 * elementary, books) carry --navy / --secondary / --radius-md / --border and
 * define no blue or purple at all. Each value below falls through both names to
 * the DESIGN.md literal, so the bar inherits a page's own tokens where they
 * exist and still paints correctly where they do not.
 */

/* ── The dock ──────────────────────────────────────────────────────────────
 * --chatdock-lift is set by header-chat.js. Four pages (school-year,
 * tutoring, and the two -ms) already have their own bottom bar: a mobile-only
 * price + Enroll CTA (.sticky) that appears once the hero button scrolls off.
 * Rather than cover it or be covered by it, the dock rides above it, and the
 * script keeps the lift equal to that bar's height while it is on screen.
 */
.chatdock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--chatdock-lift, 0px);
  z-index: 45;                 /* under .sticky (50) and every modal (90+) */
  /* The same blue as the receipts band (.flexband on the home page, which is
   * --navy-deep there and --dark-bg on the newer pages: both #0f1f33).
   * Doug 2026-10-15. Deeper than --accent-navy, which this was before. */
  background: var(--dark-bg, var(--navy-deep, #0f1f33));
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .22);
  padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
  transition: bottom .2s ease;
}

/* The fixed dock would otherwise sit on top of the last of the footer. */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .chatdock { transition: none; }
}

.chatbar {
  --cb-navy:    var(--accent-navy, var(--navy, #1b3a5c));
  /* Lifted from DESIGN.md's #2b6cb0 / #7c3aed, which all but disappear on a
   * navy ground. Same two hues, enough lightness to read against it. */
  --cb-blue:    #63b3ed;
  --cb-purple:  #b794f4;
  --cb-text:    var(--text-secondary, var(--secondary, #4a5568));
  --cb-hover:   var(--bg-secondary, var(--off-white, #f7f8fc));
  --cb-radius:  var(--radius-sm, 8px);

  /* Desktop: one row, centred — the status line reads first, then the two
   * buttons. row-reverse because the buttons come first in the markup, which
   * keeps them first for a screen reader and for a page with no CSS. */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.chatbtns { display: flex; gap: 8px; }

.chatbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid #fff;
  border-radius: var(--cb-radius);
  color: var(--cb-navy);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.chatbtn:hover { background: #e8edf4; }
.chatbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chatbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.chatstatus {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  min-height: 16px;
  white-space: nowrap;
}
.chatstatus .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cb-purple);
  flex: 0 0 auto;
  animation: chatdot 1.6s ease-in-out infinite;
}
.chatbar[data-state="live"] .dot { background: var(--cb-blue); }

@keyframes chatdot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  .chatstatus .dot { animation: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, .35); }
  .chatbar[data-state="live"] .dot { box-shadow: 0 0 0 2px rgba(43, 108, 176, .35); }
  .chatbtn { transition: none; }
}

/* ── Phone and mid widths ──────────────────────────────────────────────────
 * Two rows: the status line on top, the two buttons beneath it at a 44px tap
 * target, closest to the thumb. column-reverse for the same markup-order
 * reason as above.
 */
@media (max-width: 1180px) {
  .chatdock { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }

  .chatbar {
    flex-direction: column-reverse;
    gap: 7px;
    max-width: 420px;
  }
  .chatbtns { width: 100%; gap: 10px; }
  .chatbtn { flex: 1 1 0; justify-content: center; min-height: 44px; font-size: 14px; }
}

@media (min-width: 1181px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}