/* =========================================================================
   FlipLane AI Assistant - chat surface
   -------------------------------------------------------------------------
   Design language: onyx + emerald, matching tokens.css. Everything reads from
   the shared tokens so this surface cannot drift from the rest of the site.

   NOTE ON CLASS NAMES
   The markup in assets/js/chat.js is the contract. An earlier revision of this
   file styled names the JS never emitted (.fl-chat-header-title,
   .fl-chat-icon-btn, .fl-chat-locale-toggle, .fl-chat-close-btn, .fl-calc-input)
   while the names it did emit (.fl-chat-header-info, .fl-chat-header-btn,
   .fl-chat-locale-switch, .fl-chat-close) were never defined. That is why the
   header rendered as four native emoji buttons in default browser chrome and a
   bare green language blob. Before renaming anything here, grep chat.js.
   ========================================================================= */

#fl-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  font-family: var(--fp-font-sans, 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #f8fafc;

  /* Local surface scale - deeper than the page so the panel reads as a layer
     above the site rather than a card inside it. */
  --fl-green: #00e676;
  --fl-green-dim: #00c853;
  --fl-green-ink: #040806;
  --fl-green-soft: rgba(0, 230, 118, 0.12);
  --fl-green-line: rgba(0, 230, 118, 0.22);
  --fl-bg-deep: #040806;
  --fl-bg-chrome: #070d09;
  --fl-bg-bubble: #0c1410;
  --fl-line: rgba(255, 255, 255, 0.07);
  --fl-line-strong: rgba(255, 255, 255, 0.12);
  --fl-text: #f1f5f9;
  --fl-text-dim: #c3cfdd;
  --fl-text-mute: #8b9bb0;
  --fl-heading: 'Space Grotesk', var(--fp-font-sans, 'Inter'), sans-serif;
  --fl-mono: var(--fp-font-mono, 'JetBrains Mono'), 'Fira Code', Consolas, Monaco, monospace;
  --fl-radius: 14px;
  --fl-shadow: 0 24px 64px -18px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(0, 230, 118, 0.08);
}

/* =========================================================================
   Launcher
   ========================================================================= */

#fl-chat-launcher {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(150deg, #0d1a13 0%, #060b08 100%);
  color: var(--fl-green);
  border: 1px solid var(--fl-green-line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 230, 118, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color 180ms ease, box-shadow 180ms ease;
}

#fl-chat-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(0, 230, 118, 0.55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 26px rgba(0, 230, 118, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#fl-chat-launcher:active {
  transform: translateY(0) scale(0.98);
}

#fl-chat-launcher:focus-visible {
  outline: 2px solid var(--fl-green);
  outline-offset: 3px;
}

.fl-launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-launcher-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* The "AI" chip - an accent, not a label competing with the icon. */
.fl-launcher-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--fl-green);
  color: var(--fl-green-ink);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 18px;
  text-align: center;
  border: 2px solid #040806;
  box-shadow: 0 2px 10px rgba(0, 230, 118, 0.45);
}

/* Legacy hook kept so an older cached chat.js still shows a pulse dot. */
.fl-chat-badge-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fl-green);
  border: 2.5px solid #060b08;
  pointer-events: none;
  animation: flDotGlowPulse 2.2s infinite ease-in-out;
}

@keyframes flDotGlowPulse {
  0%, 100% { box-shadow: 0 0 6px var(--fl-green); transform: scale(1); }
  50%      { box-shadow: 0 0 16px var(--fl-green); transform: scale(1.15); }
}

/* =========================================================================
   Panel
   ========================================================================= */

#fl-chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 440px;
  height: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #060b08;
  border: 1px solid var(--fl-green-line);
  border-radius: 20px;
  box-shadow: var(--fl-shadow);
  z-index: 100000;
  transform-origin: bottom right;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 200ms;
}

#fl-chat-panel.fl-hidden {
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  visibility: hidden;
  pointer-events: none;
}

#fl-chat-panel:not(.fl-hidden) {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}

/* =========================================================================
   Header
   ========================================================================= */

.fl-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 13px 16px;
  background: linear-gradient(180deg, #08110c 0%, #060b08 100%);
  border-bottom: 1px solid var(--fl-line);
  flex-shrink: 0;
}

/* min-width:0 is load-bearing: without it the title's ellipsis never engages
   and the header pushes the action buttons out of the panel. */
.fl-chat-header-info {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.fl-chat-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.fl-avatar-visitor {
  background: #1b2430;
  color: #a7b4c6;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fl-avatar-member {
  background: linear-gradient(150deg, #00e676 0%, #00b862 100%);
  color: var(--fl-green-ink);
  box-shadow: 0 3px 12px rgba(0, 230, 118, 0.3);
}

.fl-avatar-byrddawgs {
  background: linear-gradient(150deg, #ff8a2b 0%, #e2650a 100%);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 122, 26, 0.32);
}

.fl-chat-headings {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.fl-chat-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fl-chat-title {
  font-family: var(--fl-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-chat-subtitle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fl-chat-status-indicator {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fl-green);
  box-shadow: 0 0 7px rgba(0, 230, 118, 0.85);
  animation: flStatusPulse 2.4s ease-in-out infinite;
}

@keyframes flStatusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.fl-chat-agent-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.fl-agent-visitor {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.fl-agent-member {
  background: var(--fl-green-soft);
  color: var(--fl-green);
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.fl-agent-byrddawgs {
  background: rgba(255, 122, 26, 0.16);
  color: #ffa04d;
  border: 1px solid rgba(255, 122, 26, 0.38);
}

.fl-chat-subtitle {
  font-size: 10.5px;
  color: var(--fl-text-mute);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.fl-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* --- header icon buttons ---
   styles.css:1839 sets `min-height: 44px` on every button/input/textarea in the
   project, as a tap-target guarantee. So these controls are 44px tall whether
   we like it or not, and asking for 28px only makes the icons float in a tall
   empty box. The compromise: own the 44px height (tap target intact) and draw
   the visual affordance as a centred 30x30 chip via ::before, so the header
   reads as compact without shrinking what a thumb has to hit. */

.fl-chat-header-btn {
  position: relative;
  width: 30px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--fl-text-mute);
  cursor: pointer;
  transition: color 140ms ease;
}

.fl-chat-header-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background: transparent;
  transition: background 140ms ease;
}

.fl-chat-header-btn svg {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: block;
}

.fl-chat-header-btn:hover {
  color: var(--fl-green);
}

.fl-chat-header-btn:hover::before {
  background: var(--fl-green-soft);
}

.fl-chat-header-btn:focus-visible {
  outline: 2px solid var(--fl-green);
  outline-offset: -6px;
}

.fl-chat-header-btn.fl-chat-close:hover {
  color: #f87171;
}

.fl-chat-header-btn.fl-chat-close:hover::before {
  background: rgba(239, 68, 68, 0.14);
}

/* --- locale switch --- */

.fl-chat-locale-switch {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  margin-right: 3px;
  background: #030705;
  border: 1px solid var(--fl-line-strong);
  border-radius: 999px;
}

.fl-chat-locale-btn {
  min-width: 24px;
  padding: 3px 6px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--fl-text-mute);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.fl-chat-locale-btn:hover {
  color: #e2e8f0;
}

.fl-chat-locale-btn.active {
  background: var(--fl-green);
  color: var(--fl-green-ink);
}

/* Aliases for the names an older cached chat.js may still emit. */
.fl-chat-locale-toggle { display: flex; align-items: center; gap: 1px; }
.fl-chat-icon-btn { width: 28px; height: 28px; background: transparent; border: none;
  border-radius: 8px; color: var(--fl-text-mute); cursor: pointer; display: flex;
  align-items: center; justify-content: center; }
.fl-chat-close-btn { width: 28px; height: 28px; background: transparent; border: none;
  border-radius: 8px; color: var(--fl-text-mute); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 18px; line-height: 1; }

/* =========================================================================
   Mini Deal Desk drawer
   ========================================================================= */

.fl-calc-drawer {
  display: none;
  padding: 14px 16px 16px;
  background: #08110c;
  border-bottom: 1px solid var(--fl-line);
  flex-shrink: 0;
}

.fl-calc-drawer.open {
  display: block;
  animation: flDrawerSlide 200ms ease-out forwards;
}

@keyframes flDrawerSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fl-calc-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fl-green);
}

.fl-calc-title svg {
  width: 14px;
  height: 14px;
}

.fl-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 11px;
}

.fl-calc-input-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fl-text-mute);
}

.fl-calc-input-group input,
.fl-calc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #040806;
  border: 1px solid var(--fl-line-strong);
  border-radius: 9px;
  color: var(--fl-text);
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.fl-calc-input-group input:focus,
.fl-calc-input:focus {
  border-color: var(--fl-green);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.14);
}

.fl-calc-result-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fl-green-soft);
  border: 1px solid rgba(0, 230, 118, 0.28);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}

.fl-calc-result-label {
  color: #b6c4d4;
  letter-spacing: 0.2px;
}

.fl-calc-spread {
  font-family: var(--fl-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--fl-green);
  font-variant-numeric: tabular-nums;
}

.fl-calc-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: var(--fl-green-ink);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.fl-calc-send-btn svg {
  width: 14px;
  height: 14px;
}

.fl-calc-send-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* =========================================================================
   Messages
   ========================================================================= */

.fl-chat-messages {
  flex: 1;
  min-height: 0;
  padding: 16px 14px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 230, 118, 0.045) 0%, transparent 60%),
    var(--fl-bg-deep);
}

.fl-chat-messages::-webkit-scrollbar { width: 8px; }
.fl-chat-messages::-webkit-scrollbar-track { background: transparent; }
.fl-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.fl-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.45);
  background-clip: content-box;
}

/* --- suggested prompts ---
   Six suggestions as full-width rows cost 6 x 44px = 264px of vertical space
   (styles.css:1839 forces 44px on every button), which pushed the last chip
   under the input footer. A wrapping tile grid costs a third of that and reads
   as a deliberate palette rather than a stack of form fields.

   auto-fit + minmax means the grid picks its own column count: 2 columns in the
   440px panel, 1 column when the panel goes fullscreen on a narrow phone. */

.fl-chat-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 7px;
  margin-top: 12px;
}

/* Section heading - sits in the grid so it spans the full width, and lives
   inside #fl-chat-chips so it disappears with the chips after the first turn. */
.fl-chat-chips-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 1px;
  color: rgba(233, 245, 238, 0.4);
  font-family: var(--fl-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.fl-chat-chips-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--fl-line-strong), transparent);
}

.fl-chat-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  /* 44px is the project-wide tap-target floor; own it rather than fight it. */
  min-height: 44px;
  padding: 7px 11px 7px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%,
                                      rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid var(--fl-line);
  border-radius: 11px;
  color: var(--fl-text-dim);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.fl-chat-chip-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.14);
  color: rgba(0, 230, 118, 0.78);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.fl-chat-chip-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.fl-chat-chip-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fl-chat-chip:hover {
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.17) 0%,
                                      rgba(0, 230, 118, 0.06) 100%);
  border-color: rgba(0, 230, 118, 0.38);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(0, 230, 118, 0.7);
}

.fl-chat-chip:hover .fl-chat-chip-icon {
  background: rgba(0, 230, 118, 0.18);
  border-color: rgba(0, 230, 118, 0.42);
  color: var(--fl-green);
}

.fl-chat-chip:focus-visible {
  outline: none;
  border-color: var(--fl-green);
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25);
}

.fl-chat-chip:active {
  transform: translateY(0) scale(0.985);
}

/* --- one turn --- */

.fl-chat-msg {
  display: flex;
  gap: 10px;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.6;
}

.fl-chat-msg-assistant { align-self: flex-start; width: 100%; }

.fl-chat-msg-user {
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 88%;
}

.fl-msg-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.fl-msg-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.fl-chat-msg-user .fl-msg-content {
  align-items: flex-end;
}

.fl-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 3px;
}

.fl-msg-author {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #93a3b8;
}

.fl-msg-time {
  font-size: 9.5px;
  font-weight: 600;
  color: #5d6b7d;
  font-variant-numeric: tabular-nums;
}

/* "You" is noise on your own message - the alignment already says it. */
.fl-chat-msg-user .fl-msg-author { display: none; }

.fl-msg-body {
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--fl-bg-bubble);
  border: 1px solid var(--fl-line);
  color: #e6edf5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.fl-chat-msg-user .fl-msg-body {
  border-radius: 14px 4px 14px 14px;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  border-color: rgba(0, 230, 118, 0.5);
  color: var(--fl-green-ink);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.2);
}

.fl-chat-msg-error .fl-msg-body {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

/* --- per-message tools --- */

.fl-msg-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 3px;
}

.fl-msg-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--fl-line);
  border-radius: 7px;
  color: var(--fl-text-mute);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fl-msg-tool-btn svg {
  width: 12px;
  height: 12px;
}

.fl-msg-tool-btn:hover {
  color: var(--fl-green);
  border-color: rgba(0, 230, 118, 0.4);
  background: var(--fl-green-soft);
}

/* Honest labelling for a knowledge-base answer: amber, not red - the answer is
   still useful, only its source differs. */
.fl-msg-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  padding: 7px 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #fcd34d;
}

/* =========================================================================
   Markdown typography inside a bubble
   ========================================================================= */

.fl-msg-body > *:first-child { margin-top: 0; }
.fl-msg-body > *:last-child { margin-bottom: 0; }

.fl-md-p {
  margin: 0 0 9px;
}
.fl-md-p:last-child { margin-bottom: 0; }

.fl-md-h2,
.fl-md-h3,
.fl-md-h4 {
  font-family: var(--fl-heading);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: -0.1px;
  margin: 15px 0 8px;
}

.fl-md-h2 { font-size: 15px; }
.fl-md-h3 {
  font-size: 13.5px;
  color: #ffffff;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--fl-line);
}
.fl-md-h4 {
  font-size: 12.5px;
  color: var(--fl-green);
  text-transform: none;
}

.fl-md-hr {
  height: 0;
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--fl-line-strong);
}

.fl-md-ul,
.fl-md-ol {
  margin: 8px 0 10px;
  padding-left: 18px;
}

.fl-md-li,
.fl-md-oli {
  margin-bottom: 5px;
  padding-left: 2px;
  line-height: 1.6;
}

.fl-md-li::marker { color: var(--fl-green); }
.fl-md-oli::marker { color: var(--fl-green); font-weight: 700; }

.fl-md-quote {
  margin: 10px 0;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid var(--fl-green);
  border-radius: 0 8px 8px 0;
  color: #cbd5e1;
  font-style: italic;
}

.fl-msg-body strong { color: #ffffff; font-weight: 700; }
.fl-chat-msg-user .fl-msg-body strong { color: var(--fl-green-ink); }
.fl-msg-body em { font-style: italic; }
.fl-msg-body del { opacity: 0.6; }

.fl-msg-body a {
  color: var(--fl-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 230, 118, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color 140ms ease;
}

.fl-msg-body a:hover {
  text-decoration-color: var(--fl-green);
}

.fl-chat-msg-user .fl-msg-body a {
  color: #04361f;
  text-decoration-color: rgba(4, 54, 31, 0.5);
}

.fl-inline-code {
  padding: 1.5px 5px;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 5px;
  font-family: var(--fl-mono);
  font-size: 0.86em;
  color: #6ee7a8;
}

/* Inline math the model wrote as $\text{...}$ or $\$250$. Rendered as a quiet
   monospace chip rather than a display card - it is a term inside a sentence,
   not a standalone formula. */
.fl-inline-math {
  padding: 1.5px 6px;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 5px;
  font-family: var(--fl-mono);
  font-size: 0.86em;
  color: #6ee7b7;
  white-space: nowrap;
}

/* --- code block --- */

.fl-code-block {
  margin: 10px 0;
  background: #030705;
  border: 1px solid var(--fl-line-strong);
  border-radius: 10px;
  overflow: hidden;
}

.fl-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  background: #070d09;
  border-bottom: 1px solid var(--fl-line);
}

.fl-code-lang {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--fl-text-mute);
}

.fl-code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--fl-line-strong);
  border-radius: 6px;
  color: var(--fl-text-mute);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.fl-code-copy-btn svg { width: 11px; height: 11px; }

.fl-code-copy-btn:hover {
  color: var(--fl-green);
  border-color: rgba(0, 230, 118, 0.45);
}

.fl-code-block pre {
  margin: 0;
  padding: 11px 12px;
  overflow-x: auto;
}

.fl-code-block code {
  font-family: var(--fl-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #d6e2ef;
  white-space: pre;
}

/* --- formula card --- */

.fl-math-block {
  margin: 11px 0;
  padding: 11px 13px;
  background: linear-gradient(160deg, rgba(0, 230, 118, 0.07) 0%, rgba(0, 230, 118, 0.02) 100%);
  border: 1px solid rgba(0, 230, 118, 0.24);
  border-left: 3px solid var(--fl-green);
  border-radius: 4px 10px 10px 4px;
}

.fl-math-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fl-green);
}

.fl-math-title svg { width: 13px; height: 13px; }

.fl-math-content {
  font-family: var(--fl-mono);
  font-size: 12px;
  line-height: 1.75;
  color: #cfe6da;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* --- table --- */

.fl-table-wrapper {
  margin: 11px 0;
  overflow-x: auto;
  border: 1px solid var(--fl-line-strong);
  border-radius: 10px;
}

.fl-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.fl-md-table th,
.fl-md-table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--fl-line);
}

.fl-md-table th {
  background: rgba(0, 230, 118, 0.1);
  color: var(--fl-green);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.fl-md-table tbody tr:last-child td { border-bottom: none; }
.fl-md-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* =========================================================================
   Loading indicator
   ========================================================================= */

.fl-chat-loading-bubble {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
  background: var(--fl-bg-bubble);
  border: 1px solid var(--fl-line);
  border-radius: 4px 14px 14px 14px;
}

.fl-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fl-green);
  animation: flChatPulse 1.4s infinite ease-in-out both;
}

.fl-chat-dot:nth-child(1) { animation-delay: -0.32s; }
.fl-chat-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes flChatPulse {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.3; }
  40%           { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   Footer / composer
   ========================================================================= */

.fl-chat-footer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 13px;
  background: #070d09;
  border-top: 1px solid var(--fl-line);
  flex-shrink: 0;
}

.fl-chat-input-wrapper { flex: 1; min-width: 0; }

.fl-chat-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  max-height: 128px;
  padding: 12px 14px;
  background: #040806;
  border: 1px solid var(--fl-line-strong);
  border-radius: 13px;
  color: var(--fl-text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow-y: auto;
  scrollbar-width: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* The native textarea scrollbar rendered as a light track with arrow buttons
   in the middle of the composer - hide it; the box grows instead. */
.fl-chat-input::-webkit-scrollbar { width: 0; height: 0; }

.fl-chat-input:focus {
  border-color: var(--fl-green);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.13);
}

.fl-chat-input::placeholder {
  color: #64748b;
  opacity: 1;
}

.fl-chat-mic-btn {
  width: 40px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--fl-text-mute);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.fl-chat-mic-btn svg { width: 18px; height: 18px; }

.fl-chat-mic-btn:hover {
  color: var(--fl-green);
  background: var(--fl-green-soft);
}

.fl-chat-mic-btn.fl-mic-listening {
  color: #ff4d6d !important;
  background: rgba(255, 77, 109, 0.14) !important;
  animation: flMicPulse 1.2s infinite ease-in-out;
}

@keyframes flMicPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.fl-chat-send-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: var(--fl-green-ink);
  border: none;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.28);
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.fl-chat-send-btn svg {
  width: 19px;
  height: 19px;
}

.fl-chat-send-btn:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 230, 118, 0.4);
}

.fl-chat-send-btn:active:not(:disabled) { transform: translateY(0); }

.fl-chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.fl-chat-send-btn:focus-visible {
  outline: 2px solid var(--fl-green);
  outline-offset: 2px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 639px) {
  #fl-chat-widget { bottom: 16px; right: 16px; }

  #fl-chat-panel {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: none;
    border-radius: 0;
  }

  #fl-chat-messages { padding: 14px 12px 16px; }

  .fl-chat-msg { font-size: 14px; }

  .fl-chat-header { padding: 12px 12px 12px 14px; }

  .fl-chat-title { font-size: 13.5px; }
}

/* Narrow phones: four 44px-tall controls plus the language pill leave the title
   about 120px, which truncates "ByrdDawgsOS Co-Pilot" to "ByrdDawgsOS C...".
   Wrapping the actions onto their own row costs ~40px of vertical space and
   gives the title the full width back. The panel is fullscreen here, so that
   space is free. */
@media (max-width: 479px) {
  .fl-chat-header {
    flex-wrap: wrap;
    padding: 12px 12px 10px 14px;
  }

  .fl-chat-header-info { flex-basis: 100%; }

  .fl-chat-header-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid var(--fl-line);
  }

  .fl-chat-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #fl-chat-widget *,
  #fl-chat-panel,
  .fl-chat-dot,
  .fl-chat-status-indicator,
  .fl-copilot *,
  .fl-copilot-dot,
  .fl-copilot-loading-dot {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   ByrdDawgsOS Co-Pilot console (templates/byrddawgsos.php)
   -------------------------------------------------------------------------
   The in-tab AI panel. It shares this file deliberately: both surfaces read the
   same tokens, the same markdown typography (`.fl-msg-body`) and the same
   control geometry, so they cannot drift apart. The `fl-copilot-*` prefix keeps
   the two class namespaces separate while the rules stay in one place.
   ========================================================================= */

.fl-copilot {
  display: flex;
  flex-direction: column;
  /* Fixed height so the console is a stable pane rather than something that
     grows as the transcript does. 600px leaves the message area usable after
     the header, the command bar and the composer have taken their share. */
  height: 600px;
  overflow: hidden;
  background: #060b08;
  border: 1px solid var(--fl-green-line);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* On a phone a 600px pane plus the OS header and the tab strip pushes the
   composer below the fold, which is the one part of the console that must stay
   reachable. Clamp it to the viewport instead. */
@media (max-width: 640px) {
  .fl-copilot { height: min(600px, 68vh); }
}

/* --- header --- */

.fl-copilot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, #08110c 0%, #060b08 100%);
  border-bottom: 1px solid var(--fl-line);
}

.fl-copilot-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fl-copilot-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #00e676 0%, #059669 100%);
  color: #04100b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.fl-copilot-avatar-sm {
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 9px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0, 230, 118, 0.2);
}

.fl-copilot-headings { min-width: 0; }

.fl-copilot-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.fl-copilot-title {
  margin: 0;
  font-family: var(--fl-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-copilot-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fl-green-soft);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: var(--fl-green);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.fl-copilot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fl-green);
  box-shadow: 0 0 7px rgba(0, 230, 118, 0.9);
  animation: flStatusPulse 2.4s ease-in-out infinite;
}

.fl-copilot-subtitle {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--fl-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-copilot-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 0 13px;
  background: transparent;
  border: 1px solid var(--fl-line-strong);
  border-radius: 10px;
  color: var(--fl-text-mute);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fl-copilot-clear svg { width: 14px; height: 14px; }

.fl-copilot-clear:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* --- transcript --- */

.fl-copilot-messages {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 230, 118, 0.04) 0%, transparent 60%),
    var(--fl-bg-deep);
}

.fl-copilot-messages::-webkit-scrollbar { width: 8px; }
.fl-copilot-messages::-webkit-scrollbar-track { background: transparent; }
.fl-copilot-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.fl-copilot-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.45);
  background-clip: content-box;
}

.fl-copilot-msg {
  display: flex;
  gap: 12px;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.6;
}

.fl-copilot-msg-assistant { align-self: flex-start; width: 100%; }

.fl-copilot-msg-user {
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 76%;
}

.fl-copilot-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: min(82%, 760px);
}

.fl-copilot-msg-user .fl-copilot-content {
  align-items: flex-end;
  max-width: 100%;
}

.fl-copilot-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}

.fl-copilot-author {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.fl-copilot-time {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* Bubble shell. */
.fl-copilot-body {
  min-width: 0;
  max-width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(8, 25, 18, 0.95) 0%, rgba(5, 17, 12, 0.98) 100%);
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-radius: 4px 16px 16px 16px;
  color: #f1f5f9;
  font-size: 13.5px;
  line-height: 1.65;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow-wrap: break-word;
  word-break: break-word;
}

.fl-copilot-msg-user .fl-copilot-body {
  border-radius: 16px 4px 16px 16px;
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  border: 1px solid rgba(0, 230, 118, 0.42);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 230, 118, 0.15);
}

.fl-copilot-msg-user .fl-copilot-author { display: none; }

.fl-copilot-notice {
  padding: 7px 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #fcd34d;
}

.fl-copilot-error {
  margin: 0;
  color: #fca5a5;
  font-weight: 600;
}

/* --- loading --- */

.fl-copilot-loading {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: rgba(8, 25, 18, 0.95);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 4px 16px 16px 16px;
}

.fl-copilot-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fl-green);
  animation: flChatPulse 1.4s infinite ease-in-out both;
}

.fl-copilot-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.fl-copilot-loading-dot:nth-child(2) { animation-delay: -0.16s; }

/* --- prompt chips bar --- */

.fl-copilot-chips-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 18px 6px;
  background: rgba(6, 18, 13, 0.92);
  border-top: 1px solid rgba(16, 185, 129, 0.15);
  scrollbar-width: none;
}

.fl-copilot-chips-bar::-webkit-scrollbar { display: none; }

.fl-copilot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.24);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.fl-copilot-chip:hover {
  background: rgba(0, 230, 118, 0.16);
  border-color: rgba(0, 230, 118, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* --- composer --- */

.fl-copilot-composer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, #071610 0%, #040d09 100%);
  border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.fl-copilot-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  box-sizing: border-box;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.fl-copilot-input::placeholder { color: #94a3b8; opacity: 1; }

.fl-copilot-input:focus {
  border-color: var(--fl-green);
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.18), 0 0 20px rgba(0, 230, 118, 0.1);
}

.fl-copilot-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  height: 46px;
  box-sizing: border-box;
  padding: 0 22px;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #040806;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 230, 118, 0.32);
  transition: filter 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.fl-copilot-send svg { width: 16px; height: 16px; }

.fl-copilot-send:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 230, 118, 0.45);
}

.fl-copilot-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 767px) {
  .fl-copilot { height: 520px; }
  .fl-copilot-content { max-width: 100%; }
  .fl-copilot-msg-user { max-width: 88%; }
  .fl-copilot-subtitle { display: none; }
  .fl-copilot-clear span { display: none; }
  .fl-copilot-send span { display: none; }
  .fl-copilot-send { padding: 0 16px; }
}

/* =========================================================================
   ByrdDawgsOS AI Tab
   (.fl-aios-*)
   -------------------------------------------------------------------------
   The AI tab used to be one long hub-card built from inline styles and emoji.
   These classes give it the same design language as the floating widget: the
   same onyx/emerald tokens, the same stroke icon set, real data panels instead
   of decoration.

   Only .fl-copilot-* and .fl-aios-* live here; everything else on the OS page
   keeps its own hub-card styling.
   ========================================================================= */

/* --- hero ---------------------------------------------------------------- */

.fl-aios-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--fl-green-line);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 230, 118, 0.09) 0%, transparent 55%),
    linear-gradient(135deg, rgba(6, 11, 8, 0.98) 0%, rgba(14, 23, 19, 0.95) 100%);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
}

.fl-aios-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
}

.fl-aios-hero-mark {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #00e676 0%, #059669 100%);
  color: #040806;
  box-shadow: 0 0 22px rgba(0, 230, 118, 0.45);
}

.fl-aios-hero-mark svg { width: 26px; height: 26px; display: block; }

.fl-aios-hero-text { min-width: 0; }

.fl-aios-hero-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fl-aios-hero-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--fl-heading);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.fl-aios-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fl-aios-badge--green {
  background: rgba(0, 230, 118, 0.14);
  color: var(--fl-green);
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.fl-aios-badge--teal {
  background: rgba(45, 212, 191, 0.13);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, 0.35);
}

.fl-aios-hero-sub {
  margin: 7px 0 0;
  max-width: 74ch;
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.55;
}

.fl-aios-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fl-aios-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 150ms ease;
}

.fl-aios-btn svg { width: 15px; height: 15px; display: block; }

.fl-aios-btn--primary {
  background: linear-gradient(135deg, #00e676, #10b981);
  border: 1px solid transparent;
  color: #040806;
}

.fl-aios-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.fl-aios-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: var(--fl-green);
}

.fl-aios-btn--ghost:hover {
  background: rgba(0, 230, 118, 0.12);
  border-color: var(--fl-green);
  transform: translateY(-1px);
}

/* --- tool card headings -------------------------------------------------- */

.fl-aios-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.fl-aios-tool-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fl-green);
}

.fl-aios-tool-title svg { width: 15px; height: 15px; flex-shrink: 0; }

.fl-aios-tool-title--teal { color: #5eead4; }

.fl-aios-tool-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(0, 230, 118, 0.1);
  color: var(--fl-green);
}

.fl-aios-tool-tag--teal { background: rgba(45, 212, 191, 0.1); color: #5eead4; }

/* Colour variants keep the five tool cards distinguishable without falling back
   to emoji for identity. */
.fl-aios-tool-title--amber { color: #fbbf24; }
.fl-aios-tool-tag--amber { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.fl-aios-tool-title--emerald { color: #10b981; }
.fl-aios-tool-tag--emerald { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.fl-aios-tool-title--lime { color: #a3e635; }
.fl-aios-tool-tag--lime { background: rgba(163, 230, 53, 0.1); color: #a3e635; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  .fl-aios-hero { padding: 16px; }
  .fl-aios-hero-title { font-size: 1.1rem; }
  .fl-aios-hero-actions { width: 100%; }
  .fl-aios-btn { flex: 1; justify-content: center; }
  .fl-aios-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}


/* The "Open <tool>" action the Co-Pilot attaches to a tool message. */
.fl-copilot-tool-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 16px;
  background: linear-gradient(135deg, #00e676, #10b981);
  border: 1px solid transparent;
  border-radius: 11px;
  color: #040806;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}

.fl-copilot-tool-open svg { width: 15px; height: 15px; display: block; }

.fl-copilot-tool-open:hover { filter: brightness(1.08); transform: translateY(-1px); }

.fl-copilot-tool-open:active { transform: translateY(0) scale(0.985); }

.fl-aios-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffffff;
  font-family: var(--fl-heading);
  font-size: 0.95rem;
  font-weight: 800;
}

.fl-aios-panel-title svg { width: 16px; height: 16px; color: var(--fl-green); }

/* ---------------------------------------------------------------------------
   Your services

   Replaces three shortcut strips - a 14-tile tool launcher, 6 suggested-inquiry
   chips and a 14-command bar, 34 buttons between them - with one panel listing
   what the desk DOES for the member.

   The distinction is the point. Every card asks the Co-Pilot a question in
   plain language and brings the console into view; nothing navigates. The tool
   tabs are already one tap away in the strip above, so the shortcut strips were
   duplicating the navigation while crowding out the assistant itself.
   --------------------------------------------------------------------------- */
.fl-aios-services {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--fl-line);
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(0, 230, 118, 0.06) 0%, transparent 55%),
    #09120c;
}

.fl-aios-services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fl-aios-services-hint {
  color: #8b9bb0;
  font-size: 0.76rem;
}

.fl-aios-servicegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}

.fl-aios-service {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 13px 15px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--fl-line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
  /* Staggered entrance. The delay comes from the card's own index, so the grid
     resolves in reading order instead of all at once. Toggling the pane's
     display (which switchOsTab does) restarts it, so it replays on every visit
     to the tab rather than only on first paint. */
  animation: flSvcIn 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--bd-i, 0) * 45ms);
}

.fl-aios-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(0, 230, 118, 0.1);
  color: var(--fl-green);
  transition: background 160ms ease, transform 160ms ease;
}

.fl-aios-service-icon svg { width: 15px; height: 15px; display: block; }

.fl-aios-service-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fl-aios-service-name {
  color: #e8f5ee;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.3;
}

.fl-aios-service-desc {
  color: #8b9bb0;
  font-size: 0.74rem;
  line-height: 1.45;
}

.fl-aios-service:hover {
  background: rgba(0, 230, 118, 0.05);
  border-color: rgba(0, 230, 118, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.fl-aios-service:hover .fl-aios-service-icon {
  background: rgba(0, 230, 118, 0.18);
  transform: scale(1.06);
}

.fl-aios-service:focus-visible {
  outline: none;
  border-color: var(--fl-green);
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25);
}

.fl-aios-service:active { transform: translateY(0) scale(0.99); }

@keyframes flSvcIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .fl-aios-servicegrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-aios-service,
  .fl-aios-service-icon {
    animation: none !important;
    transition: none !important;
  }
  .fl-aios-service:hover { transform: none; }
}