/* Ask Ain, the floating assistant (assistant.js). Uses each page's own colour tokens, with fallbacks for pages
   that do not define them. The button sits at the inline end: bottom-right in English, bottom-left in Arabic. */
:root {
  --ain-accent: var(--accent, #0E5E57); --ain-surface: var(--surface, #fff); --ain-soft: var(--soft, #EEF3F1);
  --ain-line: var(--line, #D5DFDB); --ain-ink: var(--ink, #10231F); --ain-ink2: var(--ink2, #33443F); --ain-ink3: var(--ink3, #5A6B66);
  --ain-link: var(--accent-ink, #0B5A52); --ain-fab-ink: #0E5E57; --ain-err: var(--red-ink, #A3321F);
}
.ain-fab, .ain-chat { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; box-sizing: border-box; }
.ain-chat *, .ain-chat *::before, .ain-chat *::after { box-sizing: border-box; }
.ain-chat .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ain-fab { position: fixed; z-index: 60; bottom: calc(20px + env(safe-area-inset-bottom)); inset-inline-end: 20px;
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 14px; padding-inline: 14px 20px;
  border: 0; border-radius: 999px; background: var(--ain-accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  outline: 2px solid rgba(255, 255, 255, .22); outline-offset: -2px;
  box-shadow: 0 6px 22px rgba(10, 30, 26, .28), 0 1px 3px rgba(10, 30, 26, .2); transition: transform .15s, box-shadow .15s; }
.ain-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(10, 30, 26, .32); }
.ain-fab:focus-visible { outline: 3px solid #5FD3A8; outline-offset: 3px; }
.ain-fab svg { width: 26px; height: 26px; flex: none; }
.ain-fab[aria-expanded="true"] { background: var(--ain-ink2); }
.ain-fab.ain-new::after { content: ''; position: absolute; top: 6px; inset-inline-end: 6px; width: 11px; height: 11px; border-radius: 50%; background: #FFD166; border: 2px solid var(--ain-accent); }

.ain-chat { position: fixed; z-index: 61; bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline-end: 20px;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 120px)); height: min(620px, calc(100dvh - 120px));
  display: flex; flex-direction: column; background: var(--ain-surface); color: var(--ain-ink); border: 1px solid var(--ain-line);
  border-radius: 18px; box-shadow: 0 18px 60px rgba(8, 24, 20, .28), 0 2px 8px rgba(8, 24, 20, .12); overflow: hidden;
  font-size: 14px; line-height: 1.5; animation: ain-in .18s ease-out; }
.ain-chat[hidden] { display: none; }
@keyframes ain-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ain-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; padding-inline: 16px 10px; background: var(--ain-accent); color: #fff; flex: none; }
.ain-head b { flex: 1; font-size: 16px; }
.ain-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); --ain-fab-ink: #0E5E57; }
.ain-dot svg { width: 18px; height: 18px; }
.ain-ic { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: none; }
.ain-ic svg { width: 20px; height: 20px; }
.ain-head .ain-ic:hover { background: rgba(255, 255, 255, .14); }
.ain-head .ain-spk[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }
.ain-ic[hidden] { display: none; }

.ain-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ain-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ain-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ain-q { align-self: flex-end; background: var(--ain-accent); color: #fff; border-end-end-radius: 5px; }
.ain-a { align-self: flex-start; background: var(--ain-soft); color: var(--ain-ink); border-end-start-radius: 5px; }
.ain-e { align-self: flex-start; background: transparent; border: 1px solid var(--ain-line); color: var(--ain-err); }
.ain-hello { color: var(--ain-ink2); }
.ain-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; white-space: normal; }
.ain-acts a { color: var(--ain-link); font-weight: 600; font-size: 13px; text-decoration: none; }
.ain-acts a:hover { text-decoration: underline; }
.ain-say { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border: 1px solid var(--ain-line); border-radius: 999px;
  background: var(--ain-surface); color: var(--ain-ink2); font: inherit; font-size: 12px; cursor: pointer; }
.ain-say svg { width: 15px; height: 15px; }
.ain-say[aria-pressed="true"] { background: var(--ain-accent); color: #fff; border-color: transparent; }
.ain-busy { display: flex; gap: 5px; padding: 14px 16px; }
.ain-busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--ain-ink3); animation: ain-dots 1s infinite ease-in-out; }
.ain-busy i:nth-child(2) { animation-delay: .15s; } .ain-busy i:nth-child(3) { animation-delay: .3s; }
@keyframes ain-dots { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.ain-chips { display: flex; gap: 6px; padding: 8px 14px 0; overflow-x: auto; scrollbar-width: none; flex: none; }
.ain-chips::-webkit-scrollbar { display: none; }
.ain-chips button { flex: none; min-height: 32px; padding: 4px 12px; border: 1px solid var(--ain-line); border-radius: 999px; background: var(--ain-surface);
  color: var(--ain-ink2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ain-chips button:hover { border-color: var(--ain-accent); color: var(--ain-link); }
.ain-form { display: flex; align-items: center; gap: 6px; padding: 10px 12px; flex: none; }
.ain-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--ain-line); border-radius: 999px; background: var(--ain-soft); color: var(--ain-ink); font: inherit; font-size: 15px; }
.ain-form input:focus { outline: 2px solid var(--ain-accent); outline-offset: 0; }
.ain-send { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ain-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; flex: none; }
.ain-send:disabled { opacity: .6; cursor: wait; }
.ain-mic { width: 44px; height: 44px; background: var(--ain-soft); color: var(--ain-accent); border: 1px solid var(--ain-line); }
.ain-mic[aria-pressed="true"] { background: #C0392B; color: #fff; border-color: transparent; animation: ain-pulse 1.2s infinite; }
@keyframes ain-pulse { 0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); } 70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); } }
.ain-foot { display: flex; align-items: flex-start; gap: 10px; padding: 0 14px 12px; color: var(--ain-ink3); flex: none; }
.ain-foot small { flex: 1; font-size: 11.5px; color: var(--ain-ink3); }
.ain-link { border: 0; background: none; padding: 0; color: var(--ain-link); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.ain-status { position: absolute; inset-inline: 12px; bottom: 120px; padding: 8px 12px; border-radius: 10px; background: var(--ain-ink); color: var(--ain-surface); font-size: 13px; text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.ain-status[hidden] { display: none; }

/* The UAE 3D page: its own Ask form, moved into the panel */
.ain-chat .ain-mapform { flex: 1; min-height: 0; overflow-y: auto; border: 0; padding: 14px; margin: 0; gap: 10px; display: flex; flex-direction: column; }
.ain-chat .ain-mapform > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ain-chat .ain-mapform > div:first-of-type { order: 3; display: flex; align-items: center; gap: 6px; position: sticky; bottom: -14px; background: var(--ain-surface); padding: 8px 0; margin-top: auto; }
.ain-chat .ain-mapform input { height: 44px; border-radius: 999px; font-size: 15px; }
.ain-chat .ain-mapform button[type="submit"] { height: 44px; border-radius: 999px; padding: 0 18px; }
.ain-chat .ain-mapform .ain-mic { order: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--ain-soft); color: var(--ain-accent); border: 1px solid var(--ain-line); }
.ain-chat .ain-mapform .ain-mic[aria-pressed="true"] { background: #C0392B; color: #fff; }
.ain-chat .ain-mapform .askchips { order: 2; }
.ain-chat .ain-mapform #answer { order: 1; }
.ain-chat .ain-mapform .ain-mapnote { order: 4; font-size: 11.5px; color: var(--ain-ink3); }
body.ain-mapmode .legend { bottom: 90px; }

@media (max-width: 760px) {
  .ain-fab { width: 56px; height: 56px; padding: 0; justify-content: center; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline-end: 16px; }
  .ain-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ain-fab svg { width: 28px; height: 28px; }
  .ain-chat { inset: auto 0 0 0; width: 100%; height: 82vh; height: 82dvh; border-radius: 20px 20px 0 0; border-inline: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  body.ain-open .ain-fab { display: none; }
  .ain-msg { max-width: 92%; }
  /* UAE 3D on a phone: the bottom sheet and the legend fill the bottom, so the button sits above the sheet at the inline start */
  body.ain-mapmode .legend { bottom: calc(46vh + 10px); }
  body.ain-mapmode .ain-fab { bottom: calc(46vh + 12px); bottom: calc(46dvh + 12px); inset-inline-end: auto; inset-inline-start: 12px; width: 50px; height: 50px; }
  body.ain-mapmode:has(.side.min) .ain-fab { bottom: 120px; }
  body.ain-mapmode:has(.side.max) .ain-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ain-chat, .ain-busy i, .ain-mic[aria-pressed="true"] { animation: none; } .ain-fab { transition: none; } }
@media print { .ain-fab, .ain-chat { display: none !important; } }

/* Farm watch, the agent (farmwatch.js): a header button and its own pane in place of the chat */
.ain-watchbtn { position: relative; }
.ain-head .ain-watchbtn[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }
.ain-watchbtn[data-n]::after { content: attr(data-n); position: absolute; top: 3px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #FFD166; color: #2A1F00; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ain-watch { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ain-watch[hidden], .ain-body[hidden] { display: none; }
.ain-wtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ain-wtop b { font-size: 15px; }
.ain-intro, .ain-muted { margin: 0; color: var(--ain-ink3); font-size: 13px; }
.ain-wmsg { background: var(--ain-soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ain-w { border: 1px solid var(--ain-line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ain-wh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ain-wh a { text-decoration: none; }
.ain-when { font-size: 12px; }
.ain-working { display: flex; align-items: center; gap: 5px; color: var(--ain-ink2); font-size: 13px; }
.ain-working i { width: 7px; height: 7px; border-radius: 50%; background: var(--ain-accent); animation: ain-dots 1s infinite ease-in-out; }
.ain-working i:nth-child(2) { animation-delay: .15s; } .ain-working i:nth-child(3) { animation-delay: .3s; }
.ain-noalert { margin: 0; font-size: 13px; color: var(--ain-link); }
.ain-alert { border-inline-start: 4px solid var(--lv); background: var(--ain-soft); border-radius: 10px; padding: 8px 10px; }
.ain-alert h4 { margin: 8px 0 2px; font-size: 12px; color: var(--ain-ink2); text-transform: none; }
.ain-alert ul { margin: 0; padding-inline-start: 18px; font-size: 13px; }
.ain-alert li { margin: 2px 0; }
.ain-alhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ain-lv { background: var(--lv); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.ain-altext { margin: 6px 0 0; }
.ain-dotlv { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; }
.ain-src { display: block; margin-top: 8px; color: var(--ain-ink3); font-size: 11px; }
.ain-src a { color: var(--ain-link); }
.ain-log2 summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ain-link); padding: 4px 0; }
.ain-steps { list-style: none; margin: 4px 0 0; padding: 0; border-inline-start: 2px solid var(--ain-line); }
.ain-steps li { position: relative; padding: 4px 0 6px; padding-inline-start: 14px; font-size: 12.5px; display: flex; flex-direction: column; }
.ain-steps li::before { content: ''; position: absolute; inset-inline-start: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--ain-surface); border: 2px solid var(--ain-accent); }
.ain-steps li.k-tool::before { background: var(--ain-accent); }
.ain-steps li.bad::before { border-color: var(--ain-err); background: var(--ain-err); }
.ain-sk { font-weight: 700; font-size: 11px; color: var(--ain-ink2); text-transform: uppercase; letter-spacing: .02em; }
.ain-why { color: var(--ain-ink3); font-style: italic; }
.ain-ms { color: var(--ain-ink3); font-size: 10.5px; }
.ain-past { margin: 2px 0 0; padding-inline-start: 16px; font-size: 12px; }
.ain-wact { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }

/* Line icons from icons.js (used instead of emoji) */
.i-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }