/* =========================================================
   FluencyBot Chat — Stylesheet
   Version: 2.0.0

   v2 CHANGES (markdown rendering):
     - white-space: pre-wrap removed from the shared .fb-chatbot__message rule
       and moved to .fb-chatbot__message--user only.
       Reason: pre-wrap treats all whitespace as significant, which breaks the
       visual spacing of HTML elements (p, ul, li…) injected by marked.js.
     - Section 9 added: scoped markdown styles for bot bubbles.
       These use #fluencybot-root in selectors to gain higher specificity than
       the global reset (.fb-chatbot * { margin:0; padding:0 }) in section 2,
       which would otherwise collapse all paragraph and list spacing to zero.

   Edit freely. All colours live in section 1 (design tokens).
   All selectors are flat BEM — nothing is nested more than
   one level, so the whole file is easy to scan and override.
   ========================================================= */


/* =========================================================
   1. Design tokens
   ========================================================= */
.fb-chatbot {
  --fb-color-primary:      #65bd00;  /* launcher & header background   */
  --fb-color-primary-dark: #4f9900;  /* hover / focus state            */
  --fb-color-panel:        #ffffff;  /* chat window background         */
  --fb-color-bot-message:  #f4f1ec;  /* bot bubble background          */
  --fb-color-user-message: #dcf8c6;  /* user bubble background         */
  --fb-color-text:         #222222;  /* main text                      */
  --fb-color-muted:        #777777;  /* placeholder & loading text     */
  --fb-radius-panel:       18px;     /* panel corner radius            */
  --fb-radius-message:     12px;     /* message bubble corner radius   */
  --fb-width:              340px;    /* panel width (desktop)          */
  --fb-height:             480px;    /* panel height (desktop)         */
  --fb-shadow:             0 18px 45px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   2. Widget container
   ========================================================= */
.fb-chatbot {
  position: fixed;
  bottom: 32px;
  z-index: 999999;

  /*
   * column-reverse: launcher stays at the bottom (near the viewport edge),
   * panel grows upward above it. This is the standard chat widget layout.
   */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  box-sizing: border-box;
  margin-left: 16px;
}

.fb-chatbot *,
.fb-chatbot *::before,
.fb-chatbot *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Position variants */
.fb-chatbot--right { right: 32px; }
.fb-chatbot--left  { left: 32px; align-items: flex-start; }

/*
 * Hard reset for every <button> inside the widget.
 * Many themes set background-color, border, padding, etc. on `button`.
 * Using the ID gives specificity (1,0,1) which beats most theme rules.
 */
#fluencybot-root button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  outline: none;
}


/* =========================================================
   3. Launcher button
   ========================================================= */
#fluencybot-root .fb-chatbot__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--fb-color-primary);
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--fb-shadow);
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

#fluencybot-root .fb-chatbot__launcher:hover {
  background-color: var(--fb-color-primary-dark);
  transform: scale(1.07);
}

#fluencybot-root .fb-chatbot__launcher:focus-visible {
  outline: 3px solid var(--fb-color-primary-dark);
  outline-offset: 3px;
}

.fb-chatbot__launcher-icon {
  pointer-events: none;
  line-height: 1;
}


/* =========================================================
   4. Chat panel
   ========================================================= */
.fb-chatbot__panel {
  display: flex;
  flex-direction: column;
  width: var(--fb-width);
  height: var(--fb-height);
  background-color: var(--fb-color-panel);
  border-radius: var(--fb-radius-panel);
  box-shadow: var(--fb-shadow);
  overflow: hidden;
  margin-bottom: 12px;
}

/* The panel uses the HTML `hidden` attribute to toggle */
.fb-chatbot__panel[hidden] {
  display: none;
}


/* =========================================================
   5. Header
   ========================================================= */
.fb-chatbot__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px;
  background-color: var(--fb-color-primary);
  color: #ffffff;
  flex-shrink: 0;
}

.fb-chatbot__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-align: center;
}

#fluencybot-root .fb-chatbot__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  opacity: 0.85;
  transition: opacity 0.15s;
}

#fluencybot-root .fb-chatbot__close:hover { opacity: 1; }

#fluencybot-root .fb-chatbot__close:focus-visible {
  outline: 2px solid #ffffff;
  border-radius: 4px;
}


/* =========================================================
   6. Messages
   ========================================================= */
.fb-chatbot__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Single message bubble — shared styles.
   NOTE (v2): white-space is NOT set here any more.
   Bot bubbles need white-space: normal so that the HTML block elements
   produced by marked.js (p, ul, li, pre…) render with standard spacing.
   User/loading/error bubbles set white-space: pre-wrap individually below. */
.fb-chatbot__message {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--fb-radius-message);
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
}

/* Bot bubble — aligned left.
   white-space: normal lets the browser treat parsed HTML normally;
   block elements (p, ul, li) lay out with their natural margins (restored
   in section 9 below, which overrides the global margin:0 reset). */
.fb-chatbot__message--bot {
  background-color: var(--fb-color-bot-message);
  color: var(--fb-color-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  white-space: normal;
}

/* User bubble — aligned right.
   white-space: pre-wrap preserves the newlines the user typed with Shift+Enter. */
.fb-chatbot__message--user {
  background-color: var(--fb-color-user-message);
  color: var(--fb-color-text);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}

/* Typing indicator — plain text, so pre-wrap is fine */
.fb-chatbot__message--loading {
  background-color: var(--fb-color-bot-message);
  color: var(--fb-color-muted);
  font-style: italic;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  white-space: pre-wrap;
}

/* Error bubble — plain text, so pre-wrap is fine */
.fb-chatbot__message--error {
  background-color: #fff0f0;
  color: #cc3333;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  font-size: 13px;
  white-space: pre-wrap;
}


/* =========================================================
   7. Input area
   ========================================================= */
.fb-chatbot__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #ebebeb;
  flex-shrink: 0;
  background-color: var(--fb-color-panel);
}

.fb-chatbot__input {
  flex: 1;
  resize: none;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fb-color-text);
  max-height: 120px;
  overflow-y: auto;
  background-color: #fafafa;
  transition: border-color 0.2s;
}

.fb-chatbot__input:focus {
  outline: none;
  border-color: var(--fb-color-primary);
  background-color: #ffffff;
}

.fb-chatbot__input::placeholder {
  color: var(--fb-color-muted);
}

#fluencybot-root .fb-chatbot__send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--fb-color-primary);
  color: #ffffff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

#fluencybot-root .fb-chatbot__send:hover {
  background-color: var(--fb-color-primary-dark);
  transform: scale(1.05);
}

#fluencybot-root .fb-chatbot__send:focus-visible {
  outline: 3px solid var(--fb-color-primary-dark);
  outline-offset: 2px;
}

#fluencybot-root .fb-chatbot__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* =========================================================
   8. Responsive
   ========================================================= */
@media (max-width: 480px) {
  .fb-chatbot {
    bottom: 16px;
  }

  .fb-chatbot--right { right: 16px; }
  .fb-chatbot--left  { left:  16px; }

  .fb-chatbot__panel {
    width:         calc(100vw - 24px);
    height:        min(520px, calc(100vh - 100px));
    border-radius: 14px;
  }
}


/* =========================================================
   9. Markdown styles inside bot bubbles  (v2 — NEW)
   =========================================================
   WHY #fluencybot-root IS USED IN EVERY SELECTOR HERE
   ─────────────────────────────────────────────────────
   Section 2 contains this global reset:
       .fb-chatbot * { margin: 0; padding: 0; }
   That rule has CSS specificity (0,1,0) and zeroes out margins/padding on
   every element inside the widget — including the p, ul, li, etc. that
   marked.js injects into bot bubbles.

   By prefixing with #fluencybot-root (an ID, specificity 1,0,0), each rule
   below reaches specificity (1,2,1) or higher, which safely overrides the
   reset and restores natural spacing for markdown-generated elements.

   SCOPE: all rules are scoped to .fb-chatbot__message--bot so they never
   bleed into user bubbles, the header, or any other part of the widget.
   ========================================================= */

/* ── Paragraphs ──────────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot p {
  margin: 0 0 8px;
}
/* Remove bottom margin from the very last paragraph to avoid
   extra padding at the bottom of the bubble. */
#fluencybot-root .fb-chatbot__message--bot p:last-child {
  margin-bottom: 0;
}

/* ── Lists ───────────────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot ul,
#fluencybot-root .fb-chatbot__message--bot ol {
  margin: 4px 0 8px 18px; /* 18px left indent shows the bullet/number */
  padding: 0;
}
#fluencybot-root .fb-chatbot__message--bot ul:last-child,
#fluencybot-root .fb-chatbot__message--bot ol:last-child {
  margin-bottom: 0;
}
#fluencybot-root .fb-chatbot__message--bot ul {
  list-style: disc;
}
#fluencybot-root .fb-chatbot__message--bot ol {
  list-style: decimal;
}
#fluencybot-root .fb-chatbot__message--bot li {
  margin-bottom: 3px;
}
/* Nested lists: reduce extra margin so they don't balloon */
#fluencybot-root .fb-chatbot__message--bot li > ul,
#fluencybot-root .fb-chatbot__message--bot li > ol {
  margin-top: 3px;
  margin-bottom: 0;
}

/* ── Inline emphasis ─────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot strong,
#fluencybot-root .fb-chatbot__message--bot b {
  font-weight: 700;
}
#fluencybot-root .fb-chatbot__message--bot em,
#fluencybot-root .fb-chatbot__message--bot i {
  font-style: italic;
}
#fluencybot-root .fb-chatbot__message--bot del,
#fluencybot-root .fb-chatbot__message--bot s {
  text-decoration: line-through;
}

/* ── Inline code ─────────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 1px 5px;
  /* Prevent the global reset from zeroing the padding */
}

/* ── Code blocks (fenced ``` blocks) ─────────────────────── */
#fluencybot-root .fb-chatbot__message--bot pre {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;  /* horizontal scroll for long code lines */
  margin: 6px 0;
}
/* Reset inline-code styles inside a code block so they don't double-up */
#fluencybot-root .fb-chatbot__message--bot pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
}

/* ── Headings ────────────────────────────────────────────── */
/* AI responses rarely produce h1/h2, but when they do, they
   should look clearly different from body text. */
#fluencybot-root .fb-chatbot__message--bot h1,
#fluencybot-root .fb-chatbot__message--bot h2,
#fluencybot-root .fb-chatbot__message--bot h3,
#fluencybot-root .fb-chatbot__message--bot h4 {
  font-weight: 700;
  line-height: 1.3;
  margin: 8px 0 4px;
  color: var(--fb-color-text);
}
#fluencybot-root .fb-chatbot__message--bot h1 { font-size: 16px; }
#fluencybot-root .fb-chatbot__message--bot h2 { font-size: 15px; }
#fluencybot-root .fb-chatbot__message--bot h3 { font-size: 14px; }
#fluencybot-root .fb-chatbot__message--bot h4 { font-size: 13px; }

/* ── Links ───────────────────────────────────────────────── */
/* Links open in a new tab (set by JS). Show the brand colour
   so they're clearly clickable. The button reset in section 2
   sets text-decoration:none, so we re-declare it here. */
#fluencybot-root .fb-chatbot__message--bot a {
  color: var(--fb-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#fluencybot-root .fb-chatbot__message--bot a:hover {
  color: var(--fb-color-primary-dark);
}

/* ── Blockquotes ─────────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot blockquote {
  border-left: 3px solid var(--fb-color-primary);
  margin: 6px 0;
  padding: 4px 10px;
  color: var(--fb-color-muted);
  font-style: italic;
}

/* ── Horizontal rules ────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 8px 0;
}

/* ── Tables (GFM) ────────────────────────────────────────── */
#fluencybot-root .fb-chatbot__message--bot table {
  border-collapse: collapse;
  width: 100%;
  margin: 6px 0;
  font-size: 13px;
}
#fluencybot-root .fb-chatbot__message--bot th,
#fluencybot-root .fb-chatbot__message--bot td {
  border: 1px solid #d0ccc4;
  padding: 5px 8px;
  text-align: left;
}
#fluencybot-root .fb-chatbot__message--bot th {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
}