/* BD Knowledge Assistant - v1.4.0 chat interface.
   A modern, minimal conversation: message bubbles, a typing indicator, starter
   chips and a single-line composer. Uses the theme's tokens where they exist
   and sensible fallbacks where they do not, so it looks native on Bismay Dash
   and acceptable on any theme. Follows the theme's dark mode switch.

   The launcher's position is deliberate and must not be loosened: the theme's
   back-to-top button sits at right:1.2rem bottom:1.2rem and its contact rail
   becomes a bottom dock at 720px and below, so the launcher sits at 5rem to
   clear both on DESKTOP. From v1.11.2 the launcher is stacked directly above
   the back-to-top button on phone and tablet - see the two media blocks below
   the base rule for the offsets and the reasoning. */

.bdka {
  --bdka-ink: var(--ink, #23281f);
  --bdka-muted: var(--muted, #5c6660);
  --bdka-line: var(--line-dark, #d9d3c2);
  --bdka-accent: var(--gold, #145a43);
  --bdka-accent-ink: #ffffff;
  --bdka-panel: var(--paper, #fafaf7);
  --bdka-surface: var(--warm-ivory, #f3efe3);
  --bdka-radius: var(--radius-card, 14px);

  display: flex;
  flex-direction: column;
  margin: 2.5rem 0 0;
  min-height: 22rem;
  max-height: 34rem;
  border: 1px solid var(--bdka-line);
  border-radius: var(--bdka-radius);
  background: var(--bdka-panel);
  color: var(--bdka-ink);
  overflow: hidden;
}

html[data-bd-theme="dark"] .bdka {
  --bdka-ink: #edf1ef;
  --bdka-muted: #a8b3ac;
  --bdka-line: #3a4a41;
  --bdka-accent: var(--emerald-light, #7fd8b4);
  --bdka-accent-ink: #10231b;
  --bdka-panel: #1b211d;
  --bdka-surface: #232a25;
}

/* ---------- the thread ---------- */
.bdka__thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  scroll-behavior: smooth;
}

.bdka__turn {
  display: flex;
  gap: 0.55rem;
  align-items: flex-end;
  max-width: 100%;
}
.bdka__turn--user { flex-direction: row-reverse; }

/* ---------- the mascot avatar in the transcript ----------
   A small STILL mascot replaces the green star (v1.9.9). Since v1.10.0 it is the
   body only: it no longer waves, blinks or floats, so the animation cost does not
   grow with the transcript. It is SMALL and sized to the chat window: where
   container queries are supported it is a clamp in cqw of the chat section, so it
   scales with the panel instead of being a fixed size; the rem value is the
   fallback. It is decorative (aria-hidden) and adds no focusable element, so it
   is not announced to assistive technology, and it cannot shift the transcript:
   it is a flex item on the existing row, sized inside the bubble's own line box. */
.bdka__avatar {
  flex: 0 0 auto;
  width: 1.7rem;
  aspect-ratio: 127 / 160;
  height: auto;
  max-height: 2.6rem;
  position: relative;
  align-self: flex-end;
}
@supports (container-type: inline-size) {
  .bdka { container-type: inline-size; }
  .bdka__avatar { width: clamp(1.2rem, 5.5cqw, 2rem); }
}
.bdka__avatar .bdka-mascot__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bdka__avatar .bdka-mascot__layer img { display: block; width: 100%; height: 100%; }

.bdka__bubble {
  max-width: min(34rem, 84%);
  padding: 0.6rem 0.85rem;
  border-radius: 1rem;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.bdka__bubble--bot {
  background: var(--bdka-surface);
  border: 1px solid var(--bdka-line);
  border-bottom-left-radius: 0.35rem;
}
.bdka__bubble--user {
  background: var(--bdka-accent);
  color: var(--bdka-accent-ink);
  border-bottom-right-radius: 0.35rem;
}
.bdka__bubble p { margin: 0 0 0.6em; }
.bdka__bubble p:last-child { margin-bottom: 0; }

/* the disclaimer bubble is quieter than a normal reply */
.bdka__bubble--note { font-size: 0.78rem; line-height: 1.55; color: var(--bdka-muted); }

/* sources under a reply, small and out of the way */
.bdka__src {
  margin: 0.6em 0 0;
  padding-top: 0.5em;
  border-top: 1px solid var(--bdka-line);
  font-size: 0.78rem;
}
.bdka__src b { display: block; font-weight: 600; color: var(--bdka-muted); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.68rem; margin-bottom: 0.2em; }
.bdka__src a { color: var(--bdka-accent); display: inline-block; margin: 0 0.7em 0.15em 0; }

/* ---------- typing indicator ---------- */
.bdka__typing { display: inline-flex; gap: 0.22rem; align-items: center; padding: 0.15rem 0; }
.bdka__typing i {
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--bdka-muted); opacity: 0.45;
  animation: bdka-dot 1.05s infinite ease-in-out;
}
.bdka__typing i:nth-child(2) { animation-delay: 0.15s; }
.bdka__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bdka-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-0.22rem); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .bdka__typing i { animation: none; opacity: 0.6; }
  .bdka__thread { scroll-behavior: auto; }
}

/* ---------- starter chips ---------- */
.bdka__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 2.4rem; }
.bdka__chip {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  color: var(--bdka-ink);
  background: transparent;
  border: 1px solid var(--bdka-line);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bdka__chip:hover { border-color: var(--bdka-accent); background: var(--bdka-surface); }

/* ---------- composer ---------- */
.bdka__composer {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--bdka-line);
  background: var(--bdka-panel);
}
.bdka__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 0.94rem;
  color: var(--bdka-ink);
  background: var(--bdka-surface);
  border: 1px solid var(--bdka-line);
  border-radius: 999px;
}
.bdka__input:focus-visible { outline: 2px solid var(--bdka-accent); outline-offset: 1px; }
.bdka__send {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--bdka-accent-ink);
  background: var(--bdka-accent);
  border: 1px solid var(--bdka-accent);
  border-radius: 50%;
}
.bdka__send[disabled] { opacity: 0.5; cursor: progress; }

/* ---------- panel size (v1.4.2) ----------
   A chat needs more room than a search box. Three sizes, chosen in the
   settings. The inline box and the launcher panel both scale. */
.bdka--compact     { min-height: 18rem; max-height: 26rem; }
.bdka--comfortable { min-height: 24rem; max-height: 36rem; }
.bdka--large       { min-height: 30rem; max-height: 70vh; }
.bdka--large .bdka__thread { padding: 1.35rem; gap: 1rem; }
.bdka--large .bdka__bubble { max-width: min(42rem, 80%); }

/* ---------- the sitewide launcher ---------- */
.bdka-launch {
  position: fixed;
  bottom: 5rem;
  z-index: 9998;
  font-family: inherit;
}
.bdka-launch--right { right: 1.1rem; }
.bdka-launch--left { left: 1.1rem; }

.bdka-launch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.05rem;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  color: #fff;
  background: var(--gold, #145a43);
  border: 1px solid var(--gold, #145a43);
  border-radius: 999px;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.5);
}
html[data-bd-theme="dark"] .bdka-launch__btn { background: var(--emerald-light, #7fd8b4); color: #10231b; border-color: var(--emerald-light, #7fd8b4); }
.bdka-launch__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.75; }

.bdka-launch__panel {
  position: fixed;
  bottom: 8.5rem;
  width: min(28rem, calc(100vw - 2.2rem));
  max-height: min(38rem, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-card, 14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.bdka-launch--right .bdka-launch__panel { right: 1.1rem; }
.bdka-launch--left .bdka-launch__panel { left: 1.1rem; }

/* per-size panel geometry */
.bdka-launch--compact .bdka-launch__panel { width: min(24rem, calc(100vw - 2.2rem)); max-height: min(30rem, 70vh); }
.bdka-launch--large .bdka-launch__panel {
  /* v1.4.4 - the owner asked for the window to be 70% of the screen. */
  width: min(70vw, 78rem);
  height: 70vh;
  max-height: 70vh;
}
.bdka-launch__panel .bdka { margin: 0; max-height: none; border: 0; border-radius: 0; flex: 1 1 auto; }

/* ---------- v1.9.9 - a much larger window on DESKTOP only (issue 1) --------
   The owner reported the desktop window is too small while the phone is fine.
   Mobile is untouched: it is a full sheet and he is happy with it. Here the
   panel is at least 70% of the viewport height with a comfortable reading
   width, at every size setting, and it sits above the launcher button so the
   button stays tappable. On a very short desktop viewport the max-height cap
   wins so the panel cannot run off the top of the screen. */
@media (min-width: 721px) {
  .bdka-launch__panel,
  .bdka-launch--compact .bdka-launch__panel,
  .bdka-launch--comfortable .bdka-launch__panel,
  .bdka-launch--large .bdka-launch__panel {
    width: min(46rem, 62vw);
    height: 70vh;
    max-height: min(70vh, calc(100vh - 9.3rem));
    bottom: 8.5rem;
  }
  .bdka__bubble { max-width: min(40rem, 82%); }
}

/* v1.4.6 - MAKE [hidden] ACTUALLY HIDE.
   The rule above sets display:flex on the panel. The browser's own rule for
   the hidden attribute is display:none, but it is a USER-AGENT rule, so any
   author rule that sets display on the same element beats it. The panel was
   therefore never hidden: it showed on load, and the close button and the
   launcher toggle both appeared dead because setting the attribute changed
   nothing. This is the same mistake the theme made at v4.9.112. */
.bdka-launch__panel[hidden] { display: none !important; }

.bdka-launch__close {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  z-index: 2;
  width: 2rem; height: 2rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #5c6660);
  background: transparent;
  border: 0;
}
.bdka-launch__close:hover { color: var(--ink, #23281f); }
html[data-bd-theme="dark"] .bdka-launch__close { color: #a8b3ac; }
html[data-bd-theme="dark"] .bdka-launch__close:hover { color: #edf1ef; }

/* ============ v1.11.2 - ONE CLEAN STACK AT THE BOTTOM RIGHT ===============
   THE FAULT: on a phone and on a tablet the launcher (the mascot button and the
   pill under it) floated with a visible gap above the theme's back-to-top
   arrow instead of sitting on top of it. The owner asked for the three floating
   controls to stack: contact rail at the bottom, back-to-top level with it, the
   launcher immediately above the button with only a small gap.

   THE MEASUREMENTS, taken from the theme (v4.9.294):
     - the back-to-top control .bd-top is 44px tall;
     - at 720px and below it sits at bottom calc(0.75rem - 1px + safe-area) and
       right calc(0.9rem + safe-area), so its TOP edge is 0.75rem - 1px + 44px
       = 55px above the bottom of the viewport;
     - between 721px and 1024px the theme has NOT moved it onto the dock
       baseline: it is still the desktop rule, bottom 1.2rem / right 1.2rem, so
       its top edge there is 1.2rem + 44px = 63.2px.

   THE OFFSETS: the launcher's bottom edge is the back-to-top's top edge plus an
   8px gap, written as that sum rather than as a bare magic number so the two
   files stay in step if the theme's numbers move. The same env(safe-area-*)
   terms the theme uses are carried here, so neither control can tuck under a
   phone's home bar or a rounded corner.

   Tablet is a separate step on purpose. Copying the phone numbers (bottom 63px)
   to 721-1024px would have left a 0.2px gap there - the launcher sitting on the
   button, which is the same fault in the other direction. Each range therefore
   uses its own baseline.

   Desktop above 1024px is deliberately untouched: the base 5rem / 1.1rem rule
   still wins there, because the owner is happy with the desktop arrangement.
   ONLY the bottom and the horizontal offset change. Size, the mascot's hover and
   blink, the click behaviour, the chat panel and the in-chat avatar are not
   touched by anything in this section. */

/* TABLET - 721px to 1024px. The back-to-top is on its desktop baseline here. */
@media (min-width: 721px) and (max-width: 1024px) {
  .bdka-launch {
    bottom: calc(1.2rem + 44px + 8px + env(safe-area-inset-bottom, 0px));
  }
  .bdka-launch--right { right: calc(1.2rem + env(safe-area-inset-right, 0px)); }
  .bdka-launch--left { left: calc(1.2rem + env(safe-area-inset-left, 0px)); }
}

/* On the mobile dock layout the contact rail occupies the bottom centre and
   the back-to-top button the bottom right, so the launcher clears both and the
   panel becomes a near-full-screen sheet, which also avoids the dock entirely. */
@media (max-width: 720px) {
  /* v1.9.9 - the owner reported the launcher/mascot cluster covering the theme's
     back-to-top arrow on a phone. v1.11.2 - it no longer just clears the arrow:
     it sits directly on top of it, 8px above the arrow's top edge (0.75rem - 1px
     + 44px = 55px), on the same right offset as the arrow, so the two read as
     one column. The safe-area terms are the theme's own. */
  .bdka-launch {
    bottom: calc(0.75rem - 1px + 44px + 8px + env(safe-area-inset-bottom, 0px));
  }
  .bdka-launch--right { right: calc(0.9rem + env(safe-area-inset-right, 0px)); }
  .bdka-launch--left { left: calc(0.9rem + env(safe-area-inset-left, 0px)); }
  .bdka-launch__btn { padding: 0.6rem 0.9rem; font-size: 0.85rem; }
  /* On a phone the panel becomes a full sheet: the contact dock and the
     launcher are both covered while it is open, and the close button ends it.
     This is the largest a chat can usefully be on a small screen. */
  .bdka-launch__panel,
  .bdka-launch--compact .bdka-launch__panel,
  .bdka-launch--comfortable .bdka-launch__panel,
  .bdka-launch--large .bdka-launch__panel {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    /* height: auto so the fixed top and bottom stretch it to a full sheet.
       Without this the Large size's 70vh height wins and leaves it short. */
    height: auto;
    max-height: none;
  }
  .bdka__bubble { max-width: 88%; }
  .bdka__chips { padding-left: 0; }
}

@media (max-width: 520px) {
  .bdka-launch__btn { padding: 0.55rem 0.8rem; font-size: 0.8rem; }
}

/* v1.5.8 - the admin-only timing line under a reply. */
.bdka__timing { margin: 0.5em 0 0; font-size: 0.72rem; color: var(--bdka-muted); font-style: italic; }

/* ---------- v1.11.0 - the speaker button beside every chat message ----------
   The site already reads its text blocks aloud: the theme injects a small
   speaker button (.bd-a11y-sect-btn) beside each article heading, using the
   browser's own speech synthesis, an inline speaker SVG, aria-label /
   aria-pressed and an .is-playing state. This is the SAME control moved beside a
   chat message, so a visitor meets one pattern and not two. The declarations
   below are the theme's own (size, radius, resting opacity, hover fill, playing
   fill and the dark-mode playing fill), with the chat's tokens substituted only
   where the theme's do not reach inside the panel.

   The button is a flex item on the existing .bdka__turn row, so the transcript
   layout is untouched: bot turns read [avatar][bubble][speaker] and user turns,
   which are row-reverse, read [speaker][bubble]. */
.bdka__speak {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0 0.1rem 0;
  padding: 0;
  font-size: 0.72em;
  line-height: 1;
  cursor: pointer;
  color: var(--gold-deep, #104532);
  background: transparent;
  border: 1px solid var(--bdka-line, var(--line-dark, #d9d4c4));
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.bdka__speak svg { width: 1em; height: 1em; display: block; }
.bdka__speak:hover,
.bdka__speak:focus-visible { opacity: 1; background: var(--gold-faint, #eaf0ec); }
.bdka__speak:focus-visible { outline: 2px solid var(--bdka-accent); outline-offset: 1px; }
.bdka__speak.is-playing {
  opacity: 1;
  background: var(--gold, #145a43);
  border-color: var(--gold, #145a43);
  color: #fafaf7;
}
@media (hover: none) { .bdka__speak { opacity: 0.8; } }

/* The theme's dark rule only repaints the PLAYING button; inside the chat's own
   dark panel the resting icon also needs to stay legible, so the resting state
   is repainted from the chat's tokens here. */
html[data-bd-theme="dark"] .bdka__speak { color: var(--bdka-accent); border-color: var(--bdka-line); }
html[data-bd-theme="dark"] .bdka__speak:hover,
html[data-bd-theme="dark"] .bdka__speak:focus-visible { background: var(--bdka-surface); }
html[data-bd-theme="dark"] .bdka__speak.is-playing {
  background: var(--emerald, #3fa57e);
  border-color: var(--emerald, #3fa57e);
  color: #14171a;
}

/* It is only shown where speech synthesis exists; the server renders it hidden
   and the script unhides it, so with no script (or no speech) there is no dead
   button in the transcript. */
.bdka__speak[hidden] { display: none !important; }