/*
   CHATBOT DISABLED — temporary production gate.
   Hide all chat widget DOM elements while the assistant is unfinished.
   To re-enable: remove this rule and set CHATBOT_ENABLED = true.
   See assets/assistant.js for the feature-flag guard.
*/
#chat-widget, #chat-btn, #chat-box {
  display: none !important;
}

/* ==========================================================================
   LAKE GROUP  OFFLINE KNOWLEDGE ASSISTANT (assets/assistant.css)
   ==========================================================================
   Styles for the assistant widget injected by assets/assistant.js into the
   `#chat-widget` mount on every page.

   Brand chrome tokens come from assets/tokens.css (linked via flagship/theme).
   Local --la-* aliases map onto those shared tokens for widget scoping.

   Palette: Deep Blue / Light Blue / Sunrise Yellow / White - matches navbar
   and home CTAs. No candy red. No warm cream / ink-navy leftovers.

   Everything is scoped under #chat-widget and deliberately overrides the
   legacy inline #chat-btn/#chat-box page styles (those elements no longer
   exist once assistant.js replaces the mount's DOM).
   ========================================================================== */

#chat-widget.la-widget {
  --la-blue: var(--color-brand-blue, #0181bb);
  --la-blue-light: var(--color-brand-blue-light, #0599d3);
  --la-blue-deep: var(--color-brand-blue-deep, #0181bb);
  --la-ink: var(--color-brand-blue-darkest, #0181bb);
  --la-gold: var(--color-yellow-accent, #fff200);
  --la-gold-deep: var(--color-yellow-deep, #fff200);
  --la-paper: var(--color-offwhite, #f7f8fc);
  --la-paper-2: var(--color-light, #eff2fb);
  --la-surface: var(--color-white, #ffffff);
  --la-text: var(--color-text-heading, #0181bb);
  --la-mute: var(--color-text-body, #5a6478);
  --la-on-brand: var(--color-text-on-brand, #ffffff);
  --la-on-brand-muted: var(--color-text-on-brand-muted, rgba(255, 255, 255, 0.85));
  --la-line: var(--color-border, rgba(1, 129, 187, 0.12));
  --la-line-strong: rgba(1, 129, 187, 0.22);
  --la-radius: var(--radius, 4px);
  --la-radius-lg: var(--radius-lg, 10px);
  --la-font: var(--font-body, 'Jost', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --la-shadow: var(--shadow-lg, 0 14px 48px rgba(1, 63, 92, 0.18));

  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--la-font);
}

/* --------------------------------------------------------------------------
   Launcher - full-bleed yellow chat-bubble graphic (not a square button)
   Color = --color-yellow-accent / --la-gold (#FFF200); dots are navy in SVG
   -------------------------------------------------------------------------- */
#chat-widget.la-widget .la-launcher {
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--la-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  position: relative;
  transition: transform 0.18s ease, color 0.18s ease, filter 0.18s ease;
}

/* No decorative tick / star overlays — shape lives entirely in the SVG */
#chat-widget.la-widget .la-launcher::before {
  content: none;
  display: none;
}

#chat-widget.la-widget .la-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  background: transparent;
  color: var(--la-gold-deep);
  filter: brightness(0.97);
}

#chat-widget.la-widget .la-launcher:focus-visible {
  outline: 2px solid var(--la-blue);
  outline-offset: 3px;
}

#chat-widget.la-widget .la-launcher svg,
#chat-widget.la-widget .la-launcher .la-fab-icon {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  overflow: visible;
}

/* Eye dots — default Lake blue; themes override via --la-fab-dot */
#chat-widget.la-widget .la-fab-dot {
  fill: var(--la-fab-dot, var(--la-blue, #0181BB));
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
#chat-widget.la-widget .la-panel {
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--la-surface);
  border: 1px solid var(--la-line-strong);
  border-radius: var(--la-radius-lg);
  box-shadow: var(--la-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#chat-widget.la-widget .la-panel.la-open {
  opacity: 1;
  transform: translateY(0);
}

#chat-widget.la-widget .la-panel[hidden] {
  display: none;
}

/* Header - brand blue band + sunrise yellow hairline (navbar language) */
#chat-widget.la-widget .la-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, var(--la-blue) 0%, var(--la-blue-light) 100%);
  border-bottom: 2px solid var(--la-gold);
}

#chat-widget.la-widget .la-tick {
  width: 8px;
  height: 8px;
  background: var(--la-gold);
  flex: 0 0 auto;
}

#chat-widget.la-widget .la-head-txt {
  flex: 1;
  min-width: 0;
}

#chat-widget.la-widget .la-head h4 {
  margin: 0;
  color: var(--la-on-brand);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

#chat-widget.la-widget .la-head-actions {
  display: flex;
  gap: 4px;
}

#chat-widget.la-widget .la-iconbtn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--la-radius);
  color: var(--la-on-brand-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

#chat-widget.la-widget .la-iconbtn:hover {
  color: var(--la-gold);
  background: rgba(255, 255, 255, 0.14);
}

#chat-widget.la-widget .la-iconbtn:focus-visible {
  outline: 2px solid var(--la-gold);
  outline-offset: 1px;
}

#chat-widget.la-widget .la-iconbtn svg {
  width: 16px;
  height: 16px;
}

/* Messages */
#chat-widget.la-widget .la-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--la-paper);
  scrollbar-width: auto;
  scrollbar-color: var(--color-brand-blue, #0181bb) var(--color-brand-blue-darkest, #0181bb);
}
#chat-widget.la-widget .la-msgs::-webkit-scrollbar {
  width: 10px;
}
#chat-widget.la-widget .la-msgs::-webkit-scrollbar-track {
  background: var(--color-brand-blue-darkest, #0181bb);
  border-radius: 999px;
}
#chat-widget.la-widget .la-msgs::-webkit-scrollbar-thumb {
  background: var(--color-brand-blue, #0181bb);
  border-radius: 999px;
  border: 2px solid var(--color-brand-blue-darkest, #0181bb);
  background-clip: padding-box;
}
#chat-widget.la-widget .la-msgs::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-blue-light, #0599d3);
}

#chat-widget.la-widget .la-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: var(--la-radius);
  font-size: 0.84rem;
  line-height: 1.5;
}

#chat-widget.la-widget .la-msg p {
  margin: 0;
  /* Explicit: page stylesheets (theme.css/flagship.css) set a global p
     color that would otherwise override the bubble's inherited color. */
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

#chat-widget.la-widget .la-bot {
  align-self: flex-start;
  background: var(--la-surface);
  border: 1px solid var(--la-line);
  border-left: 3px solid var(--la-gold);
  color: var(--la-text);
}

#chat-widget.la-widget .la-user {
  align-self: flex-end;
  background: var(--la-blue);
  color: var(--la-on-brand);
}

#chat-widget.la-widget .la-lead {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--la-mute);
  margin-bottom: 4px;
}

#chat-widget.la-widget .la-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--la-line);
}

#chat-widget.la-widget .la-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--la-blue);
  text-decoration: none;
}

#chat-widget.la-widget .la-link:hover {
  color: var(--la-blue-deep);
  text-decoration: underline;
}

#chat-widget.la-widget .la-link:focus-visible {
  outline: 2px solid var(--la-blue);
  outline-offset: 1px;
}

/* Phase 9 — approved-fact citation line */
#chat-widget.la-widget .la-cite {
  display: block;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--la-mute);
  margin-top: 6px;
}

/* Typing indicator */
#chat-widget.la-widget .la-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
}

#chat-widget.la-widget .la-typing span {
  width: 5px;
  height: 5px;
  background: var(--la-blue-light);
  border-radius: 50%;
  animation: la-blink 1s infinite ease-in-out;
}

#chat-widget.la-widget .la-typing span:nth-child(2) { animation-delay: 0.15s; }
#chat-widget.la-widget .la-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes la-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Input row */
#chat-widget.la-widget .la-inputrow {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--la-surface);
  border-top: 1px solid var(--la-line);
  margin: 0;
}

#chat-widget.la-widget .la-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--la-line-strong);
  border-radius: var(--la-radius);
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--la-text);
  background: var(--la-paper);
}

#chat-widget.la-widget .la-input::placeholder {
  color: var(--la-mute);
}

#chat-widget.la-widget .la-input:focus {
  outline: 2px solid var(--la-blue);
  outline-offset: -1px;
  border-color: var(--la-blue);
  background: var(--la-surface);
}

#chat-widget.la-widget .la-send {
  padding: 0 16px;
  border: none;
  border-radius: var(--la-radius);
  background: var(--la-gold);
  color: var(--la-ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

#chat-widget.la-widget .la-send:hover {
  background: var(--la-gold-deep);
}

#chat-widget.la-widget .la-send:focus-visible {
  outline: 2px solid var(--la-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile: full-height sheet under 600px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  #chat-widget.la-widget .la-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
  }

  /* The launcher stays put; hide it while the sheet covers the screen. */
  #chat-widget.la-widget.la-panel-open .la-launcher {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #chat-widget.la-widget .la-panel,
  #chat-widget.la-widget .la-launcher,
  #chat-widget.la-widget .la-send,
  #chat-widget.la-widget .la-iconbtn {
    transition: none;
  }

  #chat-widget.la-widget .la-panel {
    opacity: 1;
    transform: none;
  }

  #chat-widget.la-widget .la-typing span {
    animation: none;
    opacity: 0.6;
  }
}

/* ==========================================================================
   Lake Agro theme (body.co-theme-agro only)
   ==========================================================================
   Page-level token remaps alone are incomplete for this widget:
   · Header gradient used --la-blue-light → agro bright lime (#489f10), which
     reads muddy vs solid nav green.
   · --la-gold-deep uses the canonical Lake yellow (#FFF200) on hover.
   · Borders / FAB shadows hard-coded Lake blue + sunrise yellow rgba.

   Explicit --la-* remap + chrome overrides keep Agro green/orange cohesive
   with nav/footer. Other pages are unaffected (selectors require co-theme-agro).
   ========================================================================== */
body.co-theme-agro #chat-widget.la-widget {
  --la-blue: var(--color-agro-green, #008435);
  --la-blue-light: var(--color-agro-green, #008435);
  --la-blue-deep: var(--color-agro-green-deep, #004b1e);
  --la-ink: #012814;
  /* Panel accents stay harvest orange; FAB mirrors home yellow + green dots */
  --la-gold: var(--color-agro-orange, #e67e22);
  --la-gold-deep: #c96a1a;
  --la-fab-bubble: #fff200; /* same sunrise yellow as homepage FAB */
  --la-fab-dot: #004b1e;    /* agro deep green (home uses blue dots on yellow) */
  --la-paper: #f4f8f4;
  --la-paper-2: #e8f1ea;
  --la-surface: var(--color-white, #ffffff);
  --la-text: #012814;
  --la-mute: #4a5c50;
  --la-on-brand: #ffffff;
  --la-on-brand-muted: rgba(255, 255, 255, 0.88);
  --la-line: rgba(0, 132, 53, 0.14);
  --la-line-strong: rgba(0, 75, 30, 0.28);
  --la-shadow: 0 14px 48px rgba(0, 75, 30, 0.22);
}

/* Header: deep → solid Agro green (matches nav), orange hairline accent */
body.co-theme-agro #chat-widget.la-widget .la-head {
  background: linear-gradient(
    135deg,
    var(--color-agro-green-deep, #004b1e) 0%,
    var(--color-agro-green, #008435) 100%
  );
  border-bottom-color: var(--color-agro-orange, #e67e22);
}

body.co-theme-agro #chat-widget.la-widget .la-tick {
  background: var(--color-agro-orange, #e67e22);
}

body.co-theme-agro #chat-widget.la-widget .la-iconbtn:hover {
  color: var(--color-agro-orange, #e67e22);
}

body.co-theme-agro #chat-widget.la-widget .la-iconbtn:focus-visible {
  outline-color: var(--color-agro-orange, #e67e22);
}

/*
   FAB: same geometry / hover / no-halo treatment as homepage — only recolored.
   Home = yellow bubble + blue dots. Agro = yellow bubble + deep-green dots.
*/
body.co-theme-agro #chat-widget.la-widget .la-launcher {
  width: 58px;
  height: 58px;
  background: transparent;
  color: var(--la-fab-bubble, #fff200);
  box-shadow: none;
  filter: none;
}

body.co-theme-agro #chat-widget.la-widget .la-launcher::before {
  content: none;
  display: none;
}

body.co-theme-agro #chat-widget.la-widget .la-fab-dot {
  fill: var(--la-fab-dot, #004b1e);
}

body.co-theme-agro #chat-widget.la-widget .la-launcher:hover {
  background: transparent;
  color: #fff200; /* canonical Lake yellow hover state */
  filter: brightness(0.97);
  transform: translateY(-2px) scale(1.04);
}

body.co-theme-agro #chat-widget.la-widget .la-launcher:focus-visible {
  outline: 2px solid var(--color-agro-green, #008435);
  outline-offset: 3px;
}

/* Legacy #chat-btn mount (before assistant.js upgrades the DOM) */
body.co-theme-agro #chat-btn {
  color: #fff200;
  box-shadow: none;
  filter: none;
}
body.co-theme-agro #chat-btn:hover {
  color: #fff200;
  filter: brightness(0.97);
}
body.co-theme-agro #chat-btn .la-fab-dot {
  fill: #004b1e;
}

/* Bubbles + links */
body.co-theme-agro #chat-widget.la-widget .la-bot {
  border-left-color: var(--color-agro-orange, #e67e22);
  color: var(--la-text);
}

body.co-theme-agro #chat-widget.la-widget .la-user {
  background: var(--color-agro-green, #008435);
  color: var(--la-on-brand);
}

body.co-theme-agro #chat-widget.la-widget .la-link {
  color: var(--color-agro-green, #008435);
}

body.co-theme-agro #chat-widget.la-widget .la-link:hover {
  color: var(--color-agro-green-deep, #004b1e);
}

body.co-theme-agro #chat-widget.la-widget .la-link:focus-visible {
  outline-color: var(--color-agro-green, #008435);
}

body.co-theme-agro #chat-widget.la-widget .la-typing span {
  background: var(--color-agro-green-bright, #489f10);
}

/* Input + send */
body.co-theme-agro #chat-widget.la-widget .la-input:focus {
  outline-color: var(--color-agro-green, #008435);
  border-color: var(--color-agro-green, #008435);
}

body.co-theme-agro #chat-widget.la-widget .la-send {
  background: var(--color-agro-orange, #e67e22);
  color: var(--la-ink);
}

body.co-theme-agro #chat-widget.la-widget .la-send:hover {
  background: var(--la-gold-deep);
}

body.co-theme-agro #chat-widget.la-widget .la-send:focus-visible {
  outline-color: var(--color-agro-green, #008435);
}

/* Message list scrollbar — Agro greens (no Lake blue) */
body.co-theme-agro #chat-widget.la-widget .la-msgs {
  scrollbar-color: var(--color-agro-green, #008435) rgba(0, 132, 53, 0.12);
}

body.co-theme-agro #chat-widget.la-widget .la-msgs::-webkit-scrollbar {
  width: 10px;
}

body.co-theme-agro #chat-widget.la-widget .la-msgs::-webkit-scrollbar-track {
  background: rgba(0, 132, 53, 0.08);
}

body.co-theme-agro #chat-widget.la-widget .la-msgs::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--color-agro-green-bright, #489f10) 0%,
    var(--color-agro-green, #008435) 100%
  );
  border-radius: 4px;
}

body.co-theme-agro #chat-widget.la-widget .la-msgs::-webkit-scrollbar-thumb:hover {
  background: var(--color-agro-green-deep, #004b1e);
}