/* ==========================================================================
   Ask AFRI - floating draggable assistant.

   The widget is fixed to the bottom-right until the visitor drags it, at
   which point js/qa.js switches it to explicit left/top and remembers the
   position. Everything uses the same tokens as the rest of the site.
   ========================================================================== */

/* The whole widget is JavaScript. With JS off it could not answer anything,
   so it is not shown at all rather than sitting there as a dead button.
   The inline script in <head> adds .js before first paint. */
html:not(.js) .qa { display: none; }

.qa {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  bottom: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  z-index: 140;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.qa[data-dragging="true"] { user-select: none; cursor: grabbing; }
.qa[data-dragging="true"] * { cursor: grabbing !important; }

/* --- launcher ------------------------------------------------------------- */
.qa__launcher {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem 1.35rem;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--brand-solid);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 6px 16px rgba(11, 58, 26, 0.24), 0 2px 5px rgba(11, 58, 26, 0.18);
  transition: transform var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.qa__launcher:hover {
  background: var(--brand-solid-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(11, 58, 26, 0.3), 0 3px 8px rgba(11, 58, 26, 0.2);
}
.qa__launcher:active { transform: translateY(0); }

/* a soft pulse the first time, so the widget is noticed once and then settles */
@media (prefers-reduced-motion: no-preference) {
  .qa:not([data-open]) .qa__launcher::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--gold-500);
    opacity: 0;
    animation: qa-pulse 3.6s var(--ease-out) 2s 3;
  }
  .qa__launcher { position: relative; }
}
@keyframes qa-pulse {
  0%   { opacity: 0.85; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.22); }
  100% { opacity: 0;    transform: scale(1.22); }
}

.qa[data-open] .qa__launcher { background: var(--ink-700); }
.qa[data-open] .qa__launcher:hover { background: var(--ink-900); }

/* --- panel ---------------------------------------------------------------- */
.qa__panel {
  order: 1;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2rem));
  min-height: 300px;
  max-height: min(560px, calc(100vh - 8rem));
  justify-content: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: 0 18px 50px rgba(11, 58, 26, 0.22), 0 4px 12px rgba(11, 58, 26, 0.12);
  overflow: hidden;
}
.qa__panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .qa[data-open] .qa__panel { animation: qa-in 260ms var(--ease) backwards; }
}
@keyframes qa-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --- drag handle ---------------------------------------------------------- */
.qa__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
  background: var(--brand-950);
  color: #fff;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.qa__bar:active { cursor: grabbing; }
.qa__bar:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; }

.qa__grip { display: grid; place-items: center; color: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.qa__grip svg { width: 20px; height: 20px; }

.qa__heading { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.qa__heading b { font-size: var(--step--1); font-weight: 700; color: #fff; }
.qa__heading span { font-size: var(--step--2); color: rgba(255, 255, 255, 0.55); }

.qa__close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qa__close:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); }
.qa__close svg { width: 17px; height: 17px; }

/* --- conversation --------------------------------------------------------- */
/* flex:1 with min-height:0 is what lets this scroll instead of forcing the
   panel's children to overflow past its max-height */
.qa__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scrollbar-width: thin;
}

.qa__msg {
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  font-size: var(--step--1);
  line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
  .qa__msg { animation: qa-msg 300ms var(--ease) backwards; }
}
@keyframes qa-msg {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.qa__msg--afri {
  align-self: flex-start;
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.qa__msg--you {
  align-self: flex-end;
  background: var(--brand-solid);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.qa__msg a { color: var(--brand-700); font-weight: 600; }
.qa__msg a:hover { color: var(--brand-500); }
.qa__msg b { color: inherit; font-weight: 700; }
.qa__msg ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; list-style: none; }
.qa__msg li { position: relative; padding-left: 0.85rem; margin-bottom: 0.3rem; }
.qa__msg li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 2px;
  border-radius: 2px;
  background: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .qa__msg a { color: var(--brand-500); }
}

/* typing indicator */
.qa__dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.qa__dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
  animation: qa-dot 1.1s ease-in-out infinite;
}
.qa__dots i:nth-child(2) { animation-delay: 0.16s; }
.qa__dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes qa-dot {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .qa__dots i { animation: none; opacity: 0.6; }
}

/* --- suggestion chips ----------------------------------------------------- */
.qa__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.qa__chips[hidden] { display: none; }
.qa__chip {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--step--2);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.qa__chip:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
  transform: translateY(-1px);
}

/* --- input ---------------------------------------------------------------- */
.qa__form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.qa__form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--step--1);
}
.qa__form input::placeholder { color: var(--ink-400); opacity: 1; }
.qa__form input:focus-visible { outline: none; }
.qa__form:focus-within { box-shadow: inset 0 2px 0 -1px var(--brand-600); }

.qa__send {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--gold-500);
  color: #24160A;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.qa__send:hover { background: var(--gold-400); transform: translateX(2px); }
.qa__send:active { transform: translateX(0); }
.qa__send svg { width: 19px; height: 19px; }

/* --- the label -------------------------------------------------------------
   Phones and tablets get the short "Q&A"; desktop keeps "Ask AFRI". Both are
   real text, so whichever one is visible is also the button's accessible
   name - no aria-label overriding what the visitor can read.

   "Q&A" is set larger and heavier than body text, with the letters tightened
   and the ampersand picked out in the brand gold at a lighter weight. Three
   characters is a lockup, not a sentence, so it is worth setting properly.
   -------------------------------------------------------------------------- */
.qa__launcher-label--full {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.qa__launcher-label--short {
  display: none;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}
.qa__amp {
  display: inline-block;
  font-weight: 500;
  font-size: 0.86em;
  color: var(--gold-400);
  padding-inline: 0.06em;
  transform: translateY(-0.02em);
}

@media (max-width: 860px) {
  .qa__launcher-label--full { display: none; }
  .qa__launcher-label--short { display: inline-block; }
  .qa__launcher { padding: 0.62rem 1.25rem; }
}

@media (max-width: 520px) {
  .qa__panel { max-height: min(70vh, 480px); }
}

/* --- print ---------------------------------------------------------------- */
@media print { .qa { display: none; } }

/* --- clearance -------------------------------------------------------------
   The assistant floats over the bottom-right corner, so the footer's last row
   needs room to sit above it. This lives here rather than in layout.css
   because it exists only to serve this widget: remove the widget and this
   rule goes with it.
   -------------------------------------------------------------------------- */
.footer { padding-bottom: calc(var(--space-6) + 60px); }