/* Floating AI chat widget (sales + support). Brand-aware; responsive; sits bottom-right. */
.agent-chat { position: fixed; right: 20px; bottom: 20px; z-index: 1200; font-family: var(--font-body, system-ui, sans-serif); }

.agent-chat-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand, #2e7d32); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center; transition: transform .12s ease, background-color .2s;
}
.agent-chat-fab:hover { background: var(--brand-dark, #1b5e20); transform: translateY(-1px); }

/* Kiwi-badge variant of the sales trigger: a white pill (kiwi + 3-row copy) that collapses to a
   kiwi-only circle after the intro and expands on hover/focus. Overrides the circular fab styling. */
.agent-chat-fab.agent-chat-kiwi {
  width: auto; height: auto; border-radius: 999px;
  background: #fff; color: #14361a; border: 1px solid rgba(95,61,34,.18);
  box-shadow: 0 8px 24px rgba(34,48,58,.18);
  gap: clamp(6px,1.4vw,12px);
  padding: clamp(5px,1vw,8px) clamp(12px,2vw,18px) clamp(5px,1vw,8px) clamp(5px,1vw,8px);
  max-width: calc(100vw - 40px); text-align: left;
  transition: padding .3s ease, gap .3s ease, transform .15s ease, box-shadow .15s ease;
}
.agent-chat-fab.agent-chat-kiwi:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34,48,58,.24); }
.agent-chat-kiwi-icon {
  width: clamp(38px,3vw + 24px,56px); height: clamp(38px,3vw + 24px,56px); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.agent-chat-kiwi-icon img { width: 92%; height: 92%; object-fit: contain; }
.agent-chat-kiwi-txt {
  display: flex; flex-direction: column; line-height: 1.2; min-width: 0; max-width: 60vw;
  opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width .3s ease, opacity .25s ease;
}
.agent-chat-kiwi-txt span { font-size: clamp(10px,1.1vw + 5.5px,15px); color: #14361a; }
.agent-chat-kiwi-cta { font-weight: 700; }
/* Collapsed: kiwi-only circle. Hover or keyboard focus expands back to the full pill. */
.agent-chat-fab.agent-chat-kiwi.collapsed { gap: 0; padding: clamp(5px,1vw,8px); }
.agent-chat-fab.agent-chat-kiwi.collapsed .agent-chat-kiwi-txt { max-width: 0; opacity: 0; }
.agent-chat-fab.agent-chat-kiwi.collapsed:hover,
.agent-chat-fab.agent-chat-kiwi.collapsed:focus-visible {
  gap: clamp(6px,1.4vw,12px);
  padding: clamp(5px,1vw,8px) clamp(12px,2vw,18px) clamp(5px,1vw,8px) clamp(5px,1vw,8px);
}
.agent-chat-fab.agent-chat-kiwi.collapsed:hover .agent-chat-kiwi-txt,
.agent-chat-fab.agent-chat-kiwi.collapsed:focus-visible .agent-chat-kiwi-txt { max-width: 60vw; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .agent-chat-fab.agent-chat-kiwi { transition: none; } }

/* Fixed kiwi (support launcher): permanently a kiwi-only circle — never expands on hover/focus. */
.agent-chat-fab.agent-chat-kiwi-fixed,
.agent-chat-fab.agent-chat-kiwi-fixed.collapsed:hover,
.agent-chat-fab.agent-chat-kiwi-fixed.collapsed:focus-visible { gap: 0; padding: clamp(5px,1vw,8px); }
.agent-chat-fab.agent-chat-kiwi-fixed .agent-chat-kiwi-txt,
.agent-chat-fab.agent-chat-kiwi-fixed.collapsed:hover .agent-chat-kiwi-txt,
.agent-chat-fab.agent-chat-kiwi-fixed.collapsed:focus-visible .agent-chat-kiwi-txt { max-width: 0; opacity: 0; }

.agent-chat-panel {
  position: absolute; right: 0; bottom: 68px; width: 360px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 110px); display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.agent-chat-panel[hidden] { display: none; }

.agent-chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: var(--brand, #2e7d32); color: #fff; font-weight: 600; flex: 0 0 auto;
}
.agent-chat-close { border: none; background: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .85; }
.agent-chat-close:hover { opacity: 1; }
.agent-chat-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.agent-chat-clear { border: none; background: none; color: #fff; padding: 2px; display: inline-flex; align-items: center; cursor: pointer; opacity: .7; }
.agent-chat-clear:hover { opacity: 1; }

.agent-chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; background: #f7f9f8; }
.agent-chat-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.agent-chat-bot { background: #fff; border: 1px solid rgba(0,0,0,.08); color: #223; align-self: flex-start; border-bottom-left-radius: 4px; }
.agent-chat-user { background: var(--brand, #2e7d32); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.agent-chat-err { background: #fdecec; color: #a12; align-self: flex-start; }

/* Markdown subset inside bot messages */
.agent-chat-bot strong { font-weight: 700; }
.agent-chat-bot em { font-style: italic; }
.agent-chat-bot code { background: #eef1ef; padding: 1px 4px; border-radius: 4px; font-size: .85em; }
.agent-chat-bot a { color: var(--brand, #2e7d32); }
.agent-chat-bot ul { margin: 4px 0 4px 2px; padding-left: 18px; }
.agent-chat-bot li { margin: 2px 0; }
.agent-chat-bot div { margin: 0; }

/* Thinking indicator: three bouncing dots */
.agent-chat-typing { background: #fff; border: 1px solid rgba(0,0,0,.08); align-self: flex-start; border-bottom-left-radius: 4px; padding: 11px 13px; }
.agent-chat-dots { display: inline-flex; gap: 4px; }
.agent-chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9aa7a0; display: inline-block; animation: agent-chat-bounce 1.2s infinite ease-in-out both; }
.agent-chat-dots i:nth-child(2) { animation-delay: .18s; }
.agent-chat-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes agent-chat-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .agent-chat-dots i { animation: none; opacity: .7; } }

.agent-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(0,0,0,.1); background: #fff; flex: 0 0 auto; }
/* 16px so iOS Safari doesn't auto-zoom into the field on focus (which shifts the fixed panel and causes
   the margin overlap). Applies on every device; harmless on desktop. */
.agent-chat-form input { flex: 1 1 auto; min-width: 0; border: 1px solid #ccc; border-radius: 20px; padding: 9px 14px; font: inherit; font-size: 16px; }
.agent-chat-form input:focus { outline: 2px solid var(--brand, #2e7d32); outline-offset: -1px; border-color: transparent; }
.agent-chat-form button { border: none; background: var(--brand, #2e7d32); color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.agent-chat-form button:hover { background: var(--brand-dark, #1b5e20); }
.agent-chat-form button:disabled { opacity: .55; cursor: default; }

@media (max-width: 480px) {
  .agent-chat { right: 12px; bottom: 12px; }
  /* Span between fixed 12px gutters rather than a 100vw-based width — 100vw includes the scrollbar
     gutter, which can push the panel wider than the usable viewport and cause horizontal scroll. */
  .agent-chat-panel { position: fixed; left: 12px; right: 12px; bottom: 76px; width: auto;
    max-width: none; height: auto; top: 12px; max-height: none; }
}