/* The SahaAI chat (was "Fynamics Assistant") (2026-11-04, _chat_agent.php + assets/js/chat_agent.js) — replaces the contact form on a
   country page; the form stays one click away ("Prefer a form?"). Uses the page's own tokens (--forest, --gold2, --sand…). */
.cf.fx-on { padding: 0; }
.fx-chat { display: flex; flex-direction: column; height: 620px; max-height: 82vh; }
.fx-chat[hidden], .fx-form-wrap[hidden], .fx-summary[hidden], .fx-chips[hidden], .fx-typing[hidden] { display: none !important; }
.fx-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--brd, #ddd6cc); }
/* SahaAI's mark (assets/img/sahaai-mark.png, a copy of sahaai/assets/fynamics-mark.png) on a white disc. */
.fx-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: #fff; box-shadow: 0 0 0 1px var(--brd, #ddd6cc), 0 2px 6px rgba(0, 66, 37, .12); }
.fx-avatar img, .fx-mini img { display: block; object-fit: contain; }
.fx-avatar::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
.fx-title { flex: 1; min-width: 0; line-height: 1.25; }
.fx-title b { display: block; font: 800 1.02rem 'Playfair Display', serif; color: var(--ink, #1c1c2e); }
.fx-title span { font-size: .78rem; color: var(--muted, #7a8694); }
.fx-alt { flex: none; border: 1px solid var(--brd2, #c8bfb3); background: #fff; color: var(--slate, #4a5568); border-radius: 999px;
  padding: 6px 12px; font-size: .78rem; font-weight: 700; }
.fx-alt:hover { border-color: var(--gold2, #d4a017); color: var(--forest, #004225); }
.fx-log { flex: 1; overflow-y: auto; padding: 16px 18px 6px; background: linear-gradient(180deg, #fff, var(--sand, #faf7f2)); scroll-behavior: smooth; }
.fx-msg { display: flex; gap: 8px; margin: 0 0 12px; animation: fxIn .22s ease-out both; }
.fx-msg.me { justify-content: flex-end; }
.fx-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--brd, #ddd6cc);
  font-size: .9rem; line-height: 1.55; color: var(--ink, #1c1c2e); box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow-wrap: anywhere; }
.fx-msg.me .fx-bubble { border-radius: 16px 16px 4px 16px; background: var(--forest, #004225); border-color: var(--forest, #004225); color: #fff; }
.fx-bubble p { margin: 0 0 8px; } .fx-bubble p:last-child { margin: 0; }
.fx-bubble ul { margin: 4px 0 8px 18px; } .fx-bubble li { margin: 2px 0; }
.fx-bubble b { color: inherit; }
.fx-bubble a { color: var(--forest3, #006b3c); text-decoration: underline; }
.fx-msg.me .fx-bubble a { color: var(--gold3, #f0c040); }
.fx-mini { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1px var(--brd, #ddd6cc); }
.fx-typing { display: flex; gap: 8px; margin: 0 0 12px; }
.fx-typing .fx-bubble { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.fx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #7a8694); animation: fxDot 1.1s infinite ease-in-out; }
.fx-typing i:nth-child(2) { animation-delay: .15s; } .fx-typing i:nth-child(3) { animation-delay: .3s; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px 52px; background: var(--sand, #faf7f2); }
.fx-chips button { border: 1px solid var(--gold3, #f0c040); background: #fffaef; color: var(--forest, #004225); border-radius: 999px;
  padding: 6px 12px; font-size: .8rem; font-weight: 700; }
.fx-chips button:hover { background: var(--gold3, #f0c040); }
.fx-summary { margin: 0 0 12px 34px; padding: 14px 16px; animation: fxIn .22s ease-out both; border: 1.5px solid var(--gold3, #f0c040); border-radius: 14px; background: #fffaef; }
.fx-summary h4 { margin: 0 0 8px; font: 800 .98rem 'Playfair Display', serif; color: var(--forest, #004225); }
.fx-summary dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 3px 10px; margin: 0 0 10px; font-size: .82rem; }
.fx-summary dt { color: var(--muted, #7a8694); } .fx-summary dd { margin: 0; color: var(--ink, #1c1c2e); font-weight: 600; overflow-wrap: anywhere; }
.fx-cap { margin: 4px 0 10px; min-height: 0; }
.fx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-send-details { border: 0; border-radius: 10px; padding: 10px 18px; background: var(--forest, #004225); color: #fff; font: 700 .9rem 'Playfair Display', serif; }
.fx-send-details:hover { background: var(--forest2, #005730); }
.fx-send-details:disabled { opacity: .6; cursor: default; }
.fx-keep { border: 0; background: none; color: var(--slate, #4a5568); font-size: .82rem; font-weight: 700; text-decoration: underline; }
.fx-err { flex-basis: 100%; margin: 4px 0 0; font-size: .8rem; color: #b42318; }
.fx-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 6px; border-top: 1px solid var(--brd, #ddd6cc); background: #fff; }
.fx-input textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; border: 1.5px solid var(--brd, #ddd6cc); border-radius: 12px;
  padding: 11px 14px; font: inherit; font-size: .9rem; line-height: 1.4; color: var(--ink, #1c1c2e); background: #fff; outline: none; }
.fx-input textarea:focus { border-color: var(--gold2, #d4a017); box-shadow: 0 0 0 3px rgba(212, 160, 23, .15); }
.fx-input button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--gold2, #d4a017); color: #fff;
  display: grid; place-items: center; }
.fx-input button:hover { background: var(--gold, #b8860b); }
.fx-input button:disabled { opacity: .5; cursor: default; }
.fx-foot { margin: 0; padding: 0 16px 12px; font-size: .72rem; color: var(--muted, #7a8694); background: #fff; }
.fx-foot a { color: var(--forest3, #006b3c); text-decoration: underline; }
.fx-back { margin: 0 0 14px; border: 0; background: none; padding: 0; color: var(--forest3, #006b3c); font-size: .85rem; font-weight: 700; }
@keyframes fxIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes fxDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) {
  .fx-chat { height: 560px; }
  .fx-summary dl { grid-template-columns: 1fr; gap: 0; } .fx-summary dd { margin-bottom: 6px; }
  .fx-chips { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) { .fx-msg, .fx-typing i { animation: none; } .fx-log { scroll-behavior: auto; } }