/* FICRU chatbot widget styles ("Finn"). (CSS v13, live35 chips slice FIX-3.)
   Modern, enterprise-ready look: navy header, blue buttons, white cards,
   clean single borders, rounded corners, subtle shadow.
   No external fonts, images, or libraries. Pure CSS. */

/* Root: fixed to the bottom-right corner of the page.
   display !important overrides the homepage rule
   "footer ~ * { display: none !important; }" — the widget is appended
   to the end of <body> (after <footer>), so without this it is hidden. */
.ficru-chat {
  display: block !important;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
}

/* Avatar: the FICRU logo mark (same as the website header), shown in a
   circle. object-fit: contain so the tall F fits fully instead of being
   cropped; padding keeps it off the circle edge. If the image fails to
   load, the navy background shows instead. */
.ficru-chat-avatar {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0f172a;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

/* Floating button (bottom-right). */
.ficru-chat-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 7px 18px 7px 8px;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  background: #1d4ed8;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ficru-chat-btn:hover,
.ficru-chat-btn:focus {
  background: #1e40af;
  border-color: #1e40af;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.32);
  outline: none;
}
.ficru-chat-btn-open {
  background: #0f172a;
  border-color: #0f172a;
}

/* Panel: absolutely positioned ABOVE the button (bottom: 100% + gap),
   so the "Ask Finn" button always stays pinned to the bottom-right
   corner and the panel opens upward from it. Without this the button
   rendered above the panel, in the middle of the screen.
   Hidden with opacity/transform so it can animate open smoothly.
   Uses dvh (dynamic viewport height) with a vh fallback so the panel
   fits the VISIBLE area on iOS Safari, where 100vh includes the area
   behind the browser toolbar and would push the input + Send button
   below the screen.
   v9 (live33, Kyle Nov 13): the chips area is NO LONGER capped at
   132px — that cap cut the bottom greeting-chip row in half. The
   chips area now takes its full content height (every greeting chip
   visible, whole rows only) and the log flex-shrinks to absorb the
   difference (min-height 40px). Chips are a touch smaller (12px
   desktop, 11px on phones) so all 21 greeting chips fit the panel
   at desktop and phone sizes with the log still visible. On very
   short screens the chips ARE capped again, to an exact whole-row
   multiple (see the short-screen rules at the end), so the input
   can never be pushed out — a partial row can never show.
   v10 (live34): the greeting itself was half-clipped on open —
   desktop 1280x800 left 161px of log for a 165px greeting bubble,
   because the uncapped chips took 390px. The greeting is shorter
   now AND the chips get two more whole-row caps (6 desktop rows
   at vh <= 750, 12 phone rows at vh <= 900) so the log always
   keeps at least the greeting's height. The caps only bite where
   the log would otherwise be shorter than the greeting; where
   space allows, all 21 chips still show.
   v11 (live35, chips slice): 6 chips (was 21) in their own strip
   above the input, never over the message log. The strip is a
   normal flex child below the log, and the log's min-height is 0,
   so a P&L answer's table can never hide behind the chips again.
   v11 FIX-1 (Nov 14, browser check failed the strip): the first
   cut used a one-row nowrap strip, which did NOT fit 6 chips in a
   480px panel (only 3 fully visible, the rest needed a horizontal
   scroll), and at intermediate scroll positions the line at the
   log's bottom edge read as half-hidden behind the strip. The
   strip is a WRAP layout again with shorter labels (2 rows at
   desktop and phone), capped at exactly 3 whole rows (118px
   desktop / 106px phone) so a row is never cut, and the log
   scroll-snaps to whole-message boundaries with a 20px bottom pad
   so its last line always clears the strip. */
.ficru-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: 480px;
  max-width: calc(100vw - 40px);
  height: 680px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.ficru-chat-panel.ficru-chat-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.ficru-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 13px 44px 12px 14px;
  background: #0f172a;
  color: #fff;
}
.ficru-chat-head-text {
  min-width: 0;
}
.ficru-chat-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.ficru-chat-sub {
  font-size: 13px;
  color: #cbd5e1;
}
.ficru-chat-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ficru-chat-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Message log.
   live35 (CSS v11, chips slice): min-height is 0, not 40px. The
   40px floor let the log shrink to a slit while the chips took the
   rest of the panel — that is the layout that hid a P&L answer's
   table behind the chips (see the chips rule below). With the
   one-row strip the log keeps ~480px at desktop, and min-height 0
   is the correct flex value: the log flexes to whatever the panel
   leaves after the fixed-height rows.
   live35 FIX-1 (Nov 14, browser check failed the one-row strip):
   the strip is a normal flex child below the log and can never
   paint over it — there is no sticky/fixed/z-index/negative-margin
   mechanism anywhere in this file — but at intermediate scroll
   positions the line at the log's bottom edge is half-visible, and
   because the strip begins exactly at that edge it reads as
   "half-hidden behind the strip". Two structural answers: the log
   scroll-snaps (proximity) so it settles on whole-message
   boundaries instead of mid-line, and the bottom padding is a full
   line (20px) so the last line always clears the strip.
   live35 FIX-2 (Nov 14, re-check FAILED the top edge): the snap
   above only fixed the BOTTOM edge. The TOP edge still sliced the
   topmost line mid-glyph ("Your top revenue categories:", the
   revenue table's "Category" header) at intermediate scroll
   positions. Root cause, precise: a P&L answer is ONE tall
   .ficru-chat-msg bubble, so message-level snap-align gives exactly
   ONE snap point per message — hundreds of pixels apart inside a
   long answer — and proximity snap never engages while scrolling
   inside it; the wheel handler also drives scrollTop directly, so
   the browser's native snap settling never gets a chance. Fix: (a)
   block-level snap points — every <p>, <table>, <ol>, <ul>, <li>,
   <h3> inside a message is a snap target, so snap points are dense
   inside a long answer; (b) scroll-padding-top: 14px (the log's top
   padding) so a snapped block clears the header edge; (c) the JS
   idle-snap (see ficru-chatbot.js) deterministically settles on the
   nearest block boundary 120ms after the last wheel event, so the
   top edge lands on a whole line at EVERY rest position.
   live35 FIX-3 (Nov 14, re-check FAILED the bottom edge): FIX-2
   settled the TOP edge only — at ~1 in 3 intermediate stops a line
   was still half-hidden at the chip-strip (bottom) edge. Root cause,
   precise: the log has NO common vertical grid — text lines are
   22.5px (15px x 1.5), table rows 26.5px (13px x 1.5 + 6px padding
   + 1px border), gaps 4/6/8/10px — so after a top-only snap the
   bottom edge (top + viewport height - 14px) lands mid-line by
   arithmetic, not by chance. Fix: (a) every line in the log is
   exactly 20px and every gap between lines is a multiple of 20px
   (see the message/table/list rules below — the 1px message borders
   are inside the 18px message margin: 10 + 1 + 18 + 1 + 10 = 40);
   (b) the JS aligns the log's viewport height so (height - 14px)
   is a multiple of 20px by nudging the panel height a few px, and
   (c) the idle-snap now checks BOTH edges against the collected
   line boxes and only settles where the top AND the bottom land on
   line boundaries (finnSnapTargetBoth in ficru-chatbot.js). */
.ficru-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 20px;
  background: #f8fafc;
  scroll-snap-type: y proximity;
  scroll-padding-top: 14px;
  scroll-padding-bottom: 20px;
}
.ficru-chat-msg {
  max-width: 92%;
  /* FIX-3 (Nov 14): the 20px line grid. Every text line in the log
     is exactly 20px (was 22.5px from the inherited 15px x 1.5), and
     the margin below (18px) makes the gap between two messages'
     text lines exactly 40px: 10px bubble padding + 1px border +
     18px margin + 1px border + 10px bubble padding. */
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  color: #1e293b;
  line-height: 20px;
  word-wrap: break-word;
  animation: ficru-chat-pop 0.18s ease;
  scroll-snap-align: start;
}
/* FIX-2 (Nov 14): block-level snap points INSIDE a message. A P&L
   answer is one tall bubble, so message-level snap-align alone
   gives one snap point per message — hundreds of pixels apart —
   and proximity snap never engages while scrolling inside it. Every
   block inside a message is a snap target, so the top edge can
   always settle on a whole line (never mid-glyph) at any rest
   position. The JS idle-snap uses these same blocks as its targets. */
.ficru-chat-msg p,
.ficru-chat-msg table,
.ficru-chat-msg ol,
.ficru-chat-msg ul,
.ficru-chat-msg li,
.ficru-chat-msg h3 {
  scroll-snap-align: start;
}
.ficru-chat-msg h3 {
  /* FIX-3: an h3 is one 20px line like everything else in the log
     (was UA default margins ~15px + 22.5px lines, which broke the
     grid). */
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
/* Tables inside answers (P&L category tables, vendor breakdowns):
   the presenter emits bare <table> elements, so without rules they
   render with browser defaults and no alignment. Compact, full
   width inside the bubble, amounts right-aligned. */
.ficru-chat-msg table {
  width: 100%;
  border-collapse: collapse;
  /* FIX-3: table margin is a full 20px line (was 6px 0 8px), and the
     table's lines are 20px (was 19.5px from 13px x 1.5). */
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 20px;
}
.ficru-chat-msg table:last-child {
  margin-bottom: 0;
}
.ficru-chat-msg th,
.ficru-chat-msg td {
  /* FIX-3: rows are exactly 20px tall (was 26.5px: 19.5px line +
     6px padding + 1px border). Vertical padding is 0 and the row
     separator is an inset box-shadow, not a border — the shadow
     draws the same 1px line but costs zero layout height, so rows
     stay on the 20px grid. */
  padding: 0 6px;
  text-align: left;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}
.ficru-chat-msg th:last-child,
.ficru-chat-msg td:last-child {
  text-align: right;
}
.ficru-chat-msg th {
  font-weight: 700;
}
@keyframes ficru-chat-pop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.ficru-chat-msg p {
  /* FIX-3: a full 20px blank line between paragraphs (was 8px) so
     paragraph lines stay on the grid. */
  margin: 0 0 20px;
}
.ficru-chat-msg p:last-child {
  margin-bottom: 0;
}
.ficru-chat-msg ol {
  /* FIX-3: list margins on the grid (was 4px 0 8px). */
  margin: 0 0 20px 20px;
  padding: 0;
}
.ficru-chat-msg ul {
  /* FIX-3: lists use <ul> too (13 places in the presenters) — same
     grid margins as <ol>; without this rule the UA default (~15px)
     broke the grid. */
  margin: 0 0 20px 20px;
  padding: 0;
}
.ficru-chat-msg ol:last-child,
.ficru-chat-msg ul:last-child {
  margin-bottom: 0;
}
.ficru-chat-msg li {
  /* FIX-3: list items are consecutive 20px lines (was 4px gap). */
  margin-bottom: 0;
}
.ficru-chat-msg a {
  color: #1d4ed8;
  text-decoration: underline;
}
.ficru-chat-msg-user {
  margin-left: auto;
  border-color: #1d4ed8;
  border-bottom-right-radius: 4px;
  background: #1d4ed8;
  color: #fff;
}
.ficru-chat-msg-user a {
  color: #fff;
}
.ficru-chat-msg-bot {
  border-bottom-left-radius: 4px;
}

/* Typing indicator: three dots that bounce. */
.ficru-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
}
.ficru-chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  animation: ficru-chat-bounce 1.1s ease-in-out infinite;
}
.ficru-chat-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.ficru-chat-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ficru-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Suggestion chips — live35 (CSS v11, chips slice): a compact
   strip above the input, never in the message area.
   ROOT CAUSE of the Nov 13 photo (chips hiding a P&L answer's
   Category/Amount table): the layout is a flex column, so the chips
   never painted OVER the log in the CSS sense — but the old chips
   area took its FULL content height with no cap (21 chips = up to
   ~390px), and the log flex-shrank to its 40px min-height floor.
   A long P&L answer was then only visible as a 40px slit, with the
   chips row sitting where the rest of the answer should be — from
   the user's chair, the chips hid the table. The fix is structural,
   not cosmetic: the strip takes only the height its rows need and
   the log keeps the rest of the panel and scrolls independently.
   live35 FIX-1 (Nov 14, browser check FAILED the one-row strip):
   the one-row nowrap strip did NOT fit 6 chips in a 480px panel —
   only the first 3 were fully visible, chips 4-6 needed a
   horizontal scroll. The strip is a WRAP layout again (the nowrap
   was the over-correction), with the labels shortened so 6 chips
   fit in 2 rows at desktop and phone widths, and a max-height of
   EXACTLY 3 rows (118px desktop: 3 x 30px chips + 2 x 6px gaps +
   16px padding; 106px phone, see the media query) so a row can
   never be cut in half — extra rows (e.g. the 8 Help topics) scroll
   vertically inside the strip. Chip height is exact by
   construction: line-height 18px + 10px padding + 2px border =
   30px desktop (16px + 8px + 2px = 26px phone).
   Action chips (fix-confirm / fix-cancel) render in this same
   strip exactly as before — same container, same showChips path —
   so a fix preview's Yes/No buttons are unaffected. */
.ficru-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
  max-height: 118px;
  scrollbar-width: thin;
}
.ficru-chat-chip {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  background: #fff;
  color: #1e293b;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ficru-chat-chip:hover,
.ficru-chat-chip:focus {
  border-color: #1d4ed8;
  color: #1d4ed8;
  outline: none;
}

/* Type-bar quick actions (live35 chips slice): Fix / Analyze /
   Help. A compact row between the chips strip and the input — real
   <button> elements, keyboard-focusable, small enough that the
   input row still fits at 360px wide. */
.ficru-chat-quick-actions {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}
.ficru-chat-quick-btn {
  padding: 4px 12px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.ficru-chat-quick-btn:hover,
.ficru-chat-quick-btn:focus {
  border-color: #1d4ed8;
  color: #1d4ed8;
  outline: none;
}

/* Input row */
.ficru-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}
.ficru-chat-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  font-size: 15px;
  color: #1e293b;
  background: #fff;
}
.ficru-chat-input:focus {
  border-color: #1d4ed8;
  outline: none;
}
.ficru-chat-send {
  padding: 9px 16px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: #1d4ed8;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ficru-chat-send:hover,
.ficru-chat-send:focus {
  background: #1e40af;
  outline: none;
}

/* Small screens: panel takes most of the screen, button stays bottom-right.
   dvh keeps the input + Send button visible above the iOS toolbar;
   safe-area-inset-bottom keeps the button clear of the home indicator.
   v9 (live33): the panel is taller — 100dvh - 96px minus the
   safe-area inset (was 100dvh - 140px). The button stack below the
   panel is ~74px + the safe-area inset (12px bottom + ~50px button +
   12px gap), so the panel top stays >= 22px inside the viewport even
   with a 34px home-indicator inset. Chips are 11px on phones and the
   header / input row are slightly compacted; the 6 greeting chips sit
   in one horizontal strip, so the log keeps most of the panel at
   every phone size (see the node viewport-fit tests). */
@media (max-width: 480px) {
  .ficru-chat {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .ficru-chat-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 96px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px));
  }
  .ficru-chat-head {
    padding: 10px 44px 9px 12px;
  }
  .ficru-chat-title {
    font-size: 16px;
  }
  .ficru-chat-sub {
    font-size: 12px;
  }
  .ficru-chat-chip {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  /* live35 FIX-1: exactly 3 phone rows — 16px padding + 3 x 26px
     chips + 2 x 6px gaps = 106px. A row can never be cut in half. */
  .ficru-chat-chips {
    max-height: 106px;
  }
  .ficru-chat-form {
    padding: 8px 12px;
  }
  .ficru-chat-input {
    padding: 8px 12px;
  }
}

/* Do not let the widget cover the site footer on very short screens. */
@media (max-height: 520px) {
  .ficru-chat-panel {
    height: calc(100vh - 96px);
    height: calc(100dvh - 96px);
    max-height: calc(100dvh - 96px);
  }
}

/* Short screens (live35, chips slice): the whole-row max-height caps
   from live33/live34 are GONE as a wrap-layout cap — the strip is
   capped at exactly 3 whole rows instead (118px desktop, 106px
   phone), so a row can never be cut in half and the log keeps the
   panel even on short screens. FIX-1 keeps that cap: it is an exact
   whole-row multiple by construction (chip height 30px desktop /
   26px phone, gap 6px, padding 16px), never an arbitrary cut. */