/* ==========================================================================
   AnythingLLM embed chat widget — site theming (imported in Layout.astro)

   The widget is served from jschat.jswebdesign.ca and, at runtime, injects
   its own <style> block + min.css into <head> AFTER our bundled CSS. So
   every rule here uses !important to win the cascade. Bubble backgrounds are
   INLINE styles set from the data-user/assistant-bg-color attrs in the
   loader, so we can only override them with [style*='...'] attribute
   matchers (see dark mode). Message text colour is class-scoped to the
   widget's own message classes:
     user bubble      .allm-anything-llm-user-message
     assistant bubble .allm-anything-llm-assistant-message
   (Both carry an inline background-color, so NEVER use a broad
   [style*='background-color'] matcher to colour text — it hits both.)

   Palette: --t-* semantic tokens (already swap under .dark). Accent
   #B3261E light / #E1574C dark. Fonts: Raleway Variable.
   ========================================================================== */

/* --- launcher bubble ------------------------------------------------------ */
#anything-llm-embed-chat-button {
  background-color: var(--t-accent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
  border-radius: 9999px !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease, filter 0.3s ease !important;
}
#anything-llm-embed-chat-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.06);
}
#anything-llm-embed-chat-button svg {
  color: #fff !important;
}

/* --- panel shell ---------------------------------------------------------- */
#anything-llm-chat {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(20, 12, 8, 0.22) !important;
  font-family: 'Raleway Variable', Raleway, system-ui, sans-serif !important;
  color: var(--t-ink) !important;
}

/* --- header (logo row) ---------------------------------------------------- */
#anything-llm-header {
  background: var(--t-surface) !important;
  border-bottom: 1px solid var(--t-line) !important;
}

/* --- de-branding: header --------------------------------------------------
   Strip the AnythingLLM logo so the chat reads as native to the site. The
   header becomes a slim bar with just the close button (bottom-right). The
   "Options" vertical-dots menu is hidden; the Close button and the bottom
   "Reset chat" link are separate elements and are kept.                */
#anything-llm-header img {
  display: none !important;
}
/* Tighten the (logo-less) header row into a slim bar. */
#anything-llm-header > div:first-child {
  height: 48px !important;
}
/* Keep the button cluster (close) centred within the slimmed header. */
#anything-llm-header > div.allm-absolute {
  top: 0 !important;
  height: 100% !important;
}
/* Hide the Options (vertical-dots) menu button only. */
#anything-llm-header button[aria-label='Options'] {
  display: none !important;
}

/* --- de-branding: per-message avatars -------------------------------------
   Each assistant message (and the pending/thinking row) carries the
   AnythingLLM logo as a small avatar (alt="Anything LLM Icon"). Hide every
   one so the bubbles are plain text, like a native chat. The assistant NAME
   label ("JS Web Design Assistant") is the site's own brand and is kept.  */
#anything-llm-chat img[alt='Anything LLM Icon'] {
  display: none !important;
}

/* --- message scroll area -------------------------------------------------- */
#anything-llm-chat .allm-overflow-y-auto {
  background: var(--t-surface) !important;
}

/* --- input row -------------------------------------------------------------
   The widget wraps the textarea in TWO nested white panels: a sticky bottom
   bar (.allm-sticky.allm-bg-white) and an inner padded box (form .allm-bg-white).
   Together they read as a white box-in-a-box around the input. Blend both into
   the site surface so only the thin rounded input outline remains — the input
   is no longer "boxed in". The outline pill keeps its native border.         */
#anything-llm-chat .allm-sticky.allm-bg-white,
#anything-llm-chat form .allm-bg-white {
  background-color: var(--t-surface) !important;
}
#anything-llm-chat textarea {
  background: transparent !important;
  color: var(--t-ink) !important;
  font-family: 'Raleway Variable', Raleway, system-ui, sans-serif !important;
  font-size: 15px !important;
  caret-color: var(--t-accent) !important;
}
#anything-llm-chat textarea::placeholder {
  color: var(--t-sub-soft) !important;
  opacity: 1 !important;
}

/* --- send / action buttons ------------------------------------------------- */
#anything-llm-chat button[aria-label*='Send' i] {
  color: var(--t-accent) !important;
}

/* --- message text colour (scoped to the widget's own message classes) ----- */
/* user bubble: inline accent background from the loader -> white text */
#anything-llm-chat .allm-anything-llm-user-message,
#anything-llm-chat .allm-anything-llm-user-message * {
  color: #fff !important;
}
/* assistant bubble: inline white background from the loader -> ink text */
#anything-llm-chat .allm-anything-llm-assistant-message {
  color: var(--t-ink) !important;
}

/* ==========================================================================
   Dark mode
   Assistant bubble = default white (inline) → site dark card + light text.
   User bubble = accent #B3261E (inline) → muted dark accent + light text.
   Attribute matchers use the rgb() form because the inline style is
   serialised as rgb(255, 255, 255) / rgb(179, 38, 30), never hex.
   ========================================================================== */
.dark #anything-llm-chat {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}
.dark #anything-llm-chat [style*='rgb(255, 255, 255)'] {
  background-color: #211d19 !important;
  color: var(--t-ink) !important;
}
.dark #anything-llm-chat [style*='rgb(255, 255, 255)'] * {
  color: var(--t-ink) !important;
}
.dark #anything-llm-chat [style*='rgb(179, 38, 30)'] {
  background-color: #2c211d !important;
  color: var(--t-ink) !important;
}
.dark #anything-llm-chat [style*='rgb(179, 38, 30)'] * {
  color: var(--t-ink) !important;
}
.dark #anything-llm-embed-chat-button {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

/* --- thinking indicator (dark mode) ---------------------------------------
   The widget's native typing indicator is a fixed set of BLACK dots (its
   colour is baked into the vendor's @keyframes, injected after our CSS, so
   it can't be recoloured). In dark mode the pending bubble is recoloured to
   #211d19, which would make the black dots nearly invisible. Keep the bubble
   that is currently showing the dots (the "thinking" bubble) light so the
   native dots stay clearly visible. Once the answer lands, the bubble is the
   normal (dark) assistant bubble again.                                    */
.dark #anything-llm-chat [style*='rgb(255, 255, 255)']:has(.allm-dot-falling) {
  background-color: #fff !important;
  color: var(--t-ink) !important;
}

/* --- name label left-align -------------------------------------------------
   The assistant NAME label ("JS Web Design Assistant") ships with
   allm-ml-[54px] — a 54px left margin sized to clear the 49px avatar. With the
   avatar hidden (de-branding above), that margin is dead space: the label sits
   ~45px right of the bubble edge. Drop it to the bubble columns own 9px so the
   label is left-aligned with the bubble (and the pending/thinking row).        */
#anything-llm-chat [class*="allm-ml-[54px]"] {
  margin-left: 9px !important;
}
