/* ═══════════════════════════════════════════════════════════════════════════
 * Agri-RAG Advisor — compact modern agricultural advisory UI
 * v4 fixes: no giant page card, no nested composer borders, less empty space.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --agri-soil: 28 45% 38%;
  --agri-maize: 43 92% 55%;
  --agri-sky: 197 66% 45%;
  --agri-success: 142 48% 29%;
  --agri-shadow: 145 36% 12%;
  --stop-icon-color: hsl(var(--primary));
  --loading-cursor-color: hsl(var(--primary));
  --loading-cursor-size: 1rem;
  --loading-cursor-animation: agriPulse 1.2s ease-in-out infinite;
}

* { box-sizing: border-box; }

html,
body {
  font-family: var(--font-sans) !important;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(circle at top left, hsl(var(--accent) / 0.55), transparent 28rem),
    radial-gradient(circle at 92% 5%, hsl(var(--primary) / 0.10), transparent 30rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.62));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(115deg, transparent 0 42%, hsl(var(--primary) / 0.10) 42% 43%, transparent 43% 100%),
    linear-gradient(65deg, transparent 0 48%, hsl(var(--agri-maize) / 0.12) 48% 49%, transparent 49% 100%);
  background-size: 180px 180px, 220px 220px;
}

#root,
main,
[role="main"] {
  position: relative;
  z-index: 1;
}

::selection {
  background: hsl(var(--primary) / 0.24);
  color: inherit;
}

/* ── About link: keep the Chainlit readme entry, but make it product-facing ─ */
.agri-about-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 2rem !important;
  padding: 0.38rem 0.72rem !important;
  border: 1px solid hsl(var(--primary) / 0.16) !important;
  border-radius: 999px !important;
  background: hsl(var(--card) / 0.72) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px hsl(var(--agri-shadow) / 0.06) !important;
  backdrop-filter: blur(10px) !important;
}

.agri-about-link::before {
  content: "ⓘ";
  font-size: 0.92rem;
  color: hsl(var(--primary));
}

.agri-about-link:hover {
  background: hsl(var(--secondary) / 0.88) !important;
  border-color: hsl(var(--primary) / 0.28) !important;
}

/* ── Page rhythm: product-like, but not one huge card ───────────────────── */
.agri-ui-ready main,
.agri-ui-ready [role="main"] {
  padding-top: clamp(0.75rem, 2vh, 1.35rem) !important;
}

.agri-ui-ready main > div,
.agri-ui-ready [role="main"] > div {
  max-width: 1040px !important;
  margin-inline: auto !important;
}

/* If an older patch accidentally tagged the whole page, neutralise it. */
.agri-welcome-shell:has(textarea),
.agri-welcome-shell:has(form) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Welcome block: card only around the actual markdown message ────────── */
.agri-welcome-shell {
  max-width: 920px !important;
  margin: 0.35rem auto 0.9rem !important;
  padding: 1.05rem 1.2rem !important;
  border: 1px solid hsl(var(--border) / 0.72) !important;
  border-radius: 1.25rem !important;
  background:
    linear-gradient(135deg, hsl(var(--card) / 0.98), hsl(var(--secondary) / 0.45)) !important;
  box-shadow: 0 16px 38px hsl(var(--agri-shadow) / 0.08) !important;
  backdrop-filter: blur(10px) !important;
}

.agri-welcome-shell h1,
.agri-welcome-shell h2,
.agri-welcome-shell h3,
.agri-welcome-shell h4 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  letter-spacing: -0.035em !important;
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.agri-welcome-shell p {
  margin-block: 0.48rem !important;
}

/* ── Message readability ───────────────────────────────────────────────── */
.cl-message,
[class*="MessageItem"] {
  animation: agriFadeIn 0.22s ease-out;
}

.prose,
[class*="Markdown"],
[class*="MessageContent"] {
  line-height: 1.62 !important;
}

.prose h1,
.prose h2,
.prose h3,
[class*="Markdown"] h1,
[class*="Markdown"] h2,
[class*="Markdown"] h3 {
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
}

.prose h3:not(.agri-welcome-shell h3),
[class*="Markdown"] h3:not(.agri-welcome-shell h3) {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.15rem !important;
  padding-top: 0.7rem;
  border-top: 1px solid hsl(var(--border) / 0.7);
}

.prose h3:not(.agri-welcome-shell h3)::before,
[class*="Markdown"] h3:not(.agri-welcome-shell h3)::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
}

.prose blockquote,
[class*="Markdown"] blockquote {
  border-left-color: hsl(var(--primary)) !important;
  background: hsl(var(--secondary) / 0.62);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1rem;
}

code,
.cl-citation,
[class*="citation"] code {
  font-family: var(--font-mono) !important;
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.10) !important;
  padding: 0.12em 0.52em !important;
  border-radius: 0.45rem !important;
  font-size: 0.86em !important;
  font-weight: 600 !important;
  border: 1px solid hsl(var(--primary) / 0.16) !important;
}

sub {
  color: hsl(var(--muted-foreground));
}

/* ── Controls ──────────────────────────────────────────────────────────── */
button,
[role="button"] {
  border-radius: calc(var(--radius) - 0.25rem) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease !important;
}

button:hover,
[role="button"]:hover {
  transform: translateY(-1px);
}

textarea,
input {
  border-radius: calc(var(--radius) - 0.25rem) !important;
}

textarea:focus,
input:focus,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid hsl(var(--ring) / 0.20) !important;
  outline-offset: 2px !important;
}

/* Make Chainlit action buttons look like compact advisory chips/cards. */
main [class*="action"] button,
main [class*="Action"] button,
[role="main"] [class*="action"] button,
[role="main"] [class*="Action"] button {
  min-height: 2.65rem !important;
  padding: 0.62rem 0.85rem !important;
  border: 1px solid hsl(var(--primary) / 0.18) !important;
  background: hsl(var(--card) / 0.94) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 8px 22px hsl(var(--agri-shadow) / 0.07) !important;
  font-weight: 700 !important;
}

/* ── Composer: compact white input, one border only ────────────────────── */
.agri-chat-form {
  max-width: 980px !important;
  margin-inline: auto !important;
  padding-bottom: 0.45rem !important;
}

.agri-chat-composer {
  min-height: 58px !important;
  max-height: 112px !important;
  border-radius: 1.2rem !important;
  border: 1px solid hsl(var(--border) / 0.88) !important;
  background: hsl(var(--card) / 0.98) !important;
  box-shadow: 0 14px 34px hsl(var(--agri-shadow) / 0.10) !important;
  backdrop-filter: blur(12px) !important;
}

.agri-chat-composer:focus-within {
  border-color: hsl(var(--primary) / 0.42) !important;
  box-shadow:
    0 14px 34px hsl(var(--agri-shadow) / 0.10),
    0 0 0 4px hsl(var(--primary) / 0.10) !important;
}

/* Stop nested containers from showing multiple rings/borders. */
.agri-chat-composer .agri-chat-composer,
.agri-chat-form .agri-chat-composer .agri-chat-composer {
  min-height: unset !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

.agri-chat-textarea {
  min-height: 36px !important;
  max-height: 120px !important;
  padding-block: 0.45rem !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.98rem !important;
  line-height: 1.45 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.agri-chat-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

.agri-chat-textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.82) !important;
}

.agri-chat-form button,
.agri-chat-composer button {
  box-shadow: none !important;
}

.agri-chat-form button[type="submit"],
.agri-chat-form button[aria-label*="Send"],
.agri-chat-composer button[type="submit"],
.agri-chat-composer button[aria-label*="Send"] {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  border-radius: 0.85rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 9px 22px hsl(var(--primary) / 0.20) !important;
}

.agri-chat-form + div,
.agri-chat-form ~ div:last-child,
form:has(textarea) + div,
form:has(textarea) ~ div:last-child {
  color: hsl(var(--muted-foreground) / 0.75) !important;
  font-size: 0.8rem !important;
}

/* ── Chainlit/custom-element map polish ─────────────────────────────────── */
.agri-map-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.25rem);
  background: hsl(var(--card) / 0.96);
  box-shadow: 0 18px 45px hsl(var(--agri-shadow) / 0.12);
}

.agri-map-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.8);
  background: linear-gradient(135deg, hsl(var(--secondary) / 0.92), hsl(var(--accent) / 0.72));
}

.agri-map-title {
  font-weight: 800;
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
}

.agri-map-subtitle {
  margin-top: 0.15rem;
  font-size: 0.84rem;
  color: hsl(var(--muted-foreground));
}

.agri-map-canvas {
  height: min(52vh, 460px);
  min-height: 340px;
  width: 100%;
  overflow: hidden;
}

.agri-map-footer {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem 1.05rem;
  background: hsl(var(--card) / 0.94);
}

.agri-map-spacer { flex: 1 1 auto; }

.agri-map-btn {
  border: 1px solid hsl(var(--primary) / 0.3);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  font-weight: 800;
  padding: 0.62rem 0.98rem;
  border-radius: 0.85rem;
  box-shadow: 0 10px 28px hsl(var(--primary) / 0.18);
}

.agri-map-btn.secondary {
  background: hsl(var(--card));
  color: hsl(var(--primary));
}

.agri-map-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.agri-map-coords {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.10);
  border: 1px solid hsl(var(--primary) / 0.16);
  padding: 0.46rem 0.72rem;
  border-radius: 999px;
}

.agri-map-help,
.agri-map-status {
  width: 100%;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.agri-map-error {
  width: 100%;
  border: 1px solid hsl(var(--destructive) / 0.28);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  padding: 0.65rem 0.8rem;
  border-radius: 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.leaflet-container { font-family: var(--font-sans) !important; }

.leaflet-control-layers,
.leaflet-bar a,
.leaflet-bar a:hover {
  border-radius: 0.75rem !important;
  border-color: hsl(var(--border)) !important;
}

.leaflet-control-attribution {
  font-size: 9px !important;
  padding: 2px 6px !important;
  background-color: hsl(var(--card) / 0.84) !important;
  color: hsl(var(--muted-foreground)) !important;
  backdrop-filter: blur(8px);
}

.leaflet-control-attribution a {
  color: hsl(var(--primary)) !important;
}


/* v10 map-focus fix: leave room for Chainlit's fixed composer when scrolling. */
.agri-map-card {
  scroll-margin-top: 84px;
  scroll-margin-bottom: 190px;
  margin-bottom: 1.25rem;
}

.agri-map-canvas {
  scroll-margin-top: 84px;
  scroll-margin-bottom: 190px;
}

.agri-ui-ready main,
.agri-ui-ready [role="main"] {
  scroll-padding-top: 84px !important;
  scroll-padding-bottom: 190px !important;
}

/* ── Scrollbar polish ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.45);
  background-clip: padding-box;
}

@keyframes agriFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes agriPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.88); }
}

@media (min-width: 900px) {
  .agri-chat-form { margin-top: 0.8rem !important; }
}

@media (max-width: 720px) {
  .agri-ui-ready main,
  .agri-ui-ready [role="main"] { padding-top: 0.5rem !important; }
  .agri-welcome-shell {
    margin-top: 0.45rem !important;
    padding: 0.95rem !important;
    border-radius: 1rem !important;
  }
  .agri-chat-form { max-width: calc(100vw - 1rem) !important; }
  .agri-chat-composer {
    min-height: 56px !important;
    border-radius: 1rem !important;
  }
  .agri-map-header,
  .agri-map-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .agri-map-spacer { display: none; }
  .agri-map-btn,
  .agri-map-coords {
    width: 100%;
    text-align: center;
  }
  .agri-map-canvas { height: 360px; }
}

/* ── v6 refinements: clearer location-first flow and About link ─────────── */
.agri-welcome-shell strong:first-child {
  color: hsl(var(--primary));
}

.agri-location-confirm {
  border: 1px solid hsl(var(--primary) / 0.16) !important;
  border-radius: 1rem !important;
  background: hsl(var(--secondary) / 0.42) !important;
  padding: 0.75rem 0.9rem !important;
}

.agri-chat-textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.88) !important;
}

@media (max-width: 760px) {
  .agri-welcome-shell {
    margin-inline: 0.75rem !important;
    padding: 0.95rem !important;
  }

  main [class*="action"] button,
  main [class*="Action"] button,
  [role="main"] [class*="action"] button,
  [role="main"] [class*="Action"] button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── v7 map behaviour fix: no jump-back after location/question ────────── */
.agri-map-canvas {
  height: min(44vh, 360px) !important;
  min-height: 280px !important;
}

.agri-map-confirmed {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.9rem 1rem !important;
  background: hsl(var(--secondary) / 0.55) !important;
  box-shadow: 0 10px 24px hsl(var(--agri-shadow) / 0.08) !important;
}

.agri-map-confirmed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  font-weight: 900;
  box-shadow: 0 8px 18px hsl(var(--primary) / 0.18);
}

/* ── v8 map scroll behaviour: focus new map once, keep active chat visible ─ */
.agri-map-confirmed-body {
  flex: 1 1 auto;
  min-width: 0;
}

.agri-map-change-btn {
  margin-left: auto;
  white-space: nowrap;
  padding-inline: 0.85rem !important;
}

@media (max-width: 720px) {
  .agri-map-confirmed {
    align-items: stretch !important;
  }

  .agri-map-change-btn {
    width: 100%;
    margin-left: 0;
  }
}

.agri-map-card-modern {
  overflow: hidden !important;
}

.agri-map-header-compact {
  padding: 0.95rem 1.05rem !important;
}

.agri-map-stage {
  position: relative;
  min-height: 440px;
  background: hsl(var(--muted) / 0.35);
}

.agri-map-stage .agri-map-canvas {
  height: min(58vh, 520px) !important;
  min-height: 440px !important;
}

.agri-map-search-panel {
  position: absolute;
  z-index: 500;
  top: 0.85rem;
  left: 0.85rem;
  width: min(520px, calc(100% - 6.3rem));
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border) / 0.78);
  border-radius: 1rem;
  background: hsl(var(--card) / 0.96);
  box-shadow: 0 18px 38px hsl(var(--agri-shadow) / 0.14);
  backdrop-filter: blur(12px);
}

.agri-map-stepper {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.76rem;
  font-weight: 800;
  color: hsl(var(--muted-foreground));
}

.agri-map-stepper span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.28rem 0.52rem;
  border: 1px solid hsl(var(--border) / 0.8);
  border-radius: 999px;
  background: hsl(var(--secondary) / 0.55);
}

.agri-map-stepper span.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.10);
  border-color: hsl(var(--primary) / 0.22);
}

.agri-google-search-wrap {
  display: grid;
  gap: 0.42rem;
}

.agri-google-autocomplete,
.agri-google-autocomplete > * {
  width: 100% !important;
  max-width: 100% !important;
}

.agri-google-autocomplete gmp-place-autocomplete,
.agri-google-autocomplete gmp-basic-place-autocomplete,
.agri-google-pac {
  width: 100% !important;
  min-height: 48px !important;
}

.agri-map-fallback-loading,
.agri-map-search-note {
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.agri-map-search-note.warn {
  color: hsl(var(--destructive));
}

.agri-map-search-fallback {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.agri-map-search-input {
  min-width: 0 !important;
  width: 100% !important;
  height: 48px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 0.85rem !important;
  padding: 0 0.78rem !important;
  font: inherit !important;
  outline: none !important;
}

.agri-map-search-input:focus {
  border-color: hsl(var(--primary) / 0.55) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}

.agri-map-search-clear {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.8rem !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.agri-map-search-btn {
  min-height: 44px !important;
  white-space: nowrap;
  box-shadow: none !important;
}

.agri-map-results {
  display: grid;
  gap: 0.42rem;
  max-height: 220px;
  overflow: auto;
}

.agri-map-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  border: 1px solid hsl(var(--border) / 0.9);
  border-radius: 0.85rem;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: 0.62rem 0.7rem;
  text-align: left;
  cursor: pointer;
}

.agri-map-result:hover {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.06);
}

.agri-map-result-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.agri-map-result-type {
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  text-transform: capitalize;
}

.agri-map-result-empty {
  border: 1px solid hsl(var(--border));
  border-radius: 0.85rem;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  padding: 0.68rem 0.74rem;
  font-size: 0.84rem;
}

.agri-map-floating-gps {
  position: absolute;
  z-index: 500;
  left: 0.85rem;
  bottom: 0.9rem;
  border: 1px solid hsl(var(--primary) / 0.26) !important;
  border-radius: 999px !important;
  background: hsl(var(--card) / 0.96) !important;
  color: hsl(var(--primary)) !important;
  padding: 0.58rem 0.88rem !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 28px hsl(var(--agri-shadow) / 0.13) !important;
  backdrop-filter: blur(12px);
}

.agri-map-save-sheet {
  position: absolute;
  z-index: 500;
  right: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  max-width: min(620px, calc(100% - 2rem));
  padding: 0.68rem;
  border: 1px solid hsl(var(--border) / 0.78);
  border-radius: 1rem;
  background: hsl(var(--card) / 0.96);
  box-shadow: 0 18px 38px hsl(var(--agri-shadow) / 0.14);
  backdrop-filter: blur(12px);
}

.agri-map-save-title {
  font-weight: 850;
  color: hsl(var(--foreground));
}

.agri-map-save-subtitle {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.agri-map-footer-compact {
  padding: 0.65rem 1rem 0.85rem !important;
}

.leaflet-control-layers {
  max-width: min(240px, 74vw);
}

.leaflet-control-zoom {
  margin-top: 6.2rem !important;
}

@media (max-width: 760px) {
  .agri-map-stage {
    min-height: 520px;
  }

  .agri-map-stage .agri-map-canvas {
    min-height: 520px !important;
  }

  .agri-map-search-panel {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: calc(100% - 1.2rem);
    padding: 0.65rem;
  }

  .agri-map-search-fallback {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .agri-map-search-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .agri-map-save-sheet {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    max-width: none;
    align-items: stretch;
    flex-direction: column;
  }

  .agri-map-floating-gps {
    left: 0.6rem;
    bottom: 8.4rem;
  }

  .agri-map-save-sheet .agri-map-btn {
    width: 100%;
  }

  .agri-map-save-subtitle {
    max-width: none;
  }

  .leaflet-control-zoom {
    margin-top: 8.8rem !important;
  }
}
/* Google Places dropdown must sit above Chainlit and Leaflet overlays. */
.pac-container {
  z-index: 999999 !important;
  border: 1px solid hsl(var(--border) / 0.9) !important;
  border-radius: 0.9rem !important;
  margin-top: 0.35rem !important;
  overflow: hidden !important;
  box-shadow: 0 18px 38px hsl(var(--agri-shadow) / 0.18) !important;
  font-family: var(--font-sans) !important;
}

.pac-item {
  padding: 0.65rem 0.8rem !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

.pac-item:hover,
.pac-item-selected {
  background: hsl(var(--primary) / 0.08) !important;
}

.pac-item-query {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: hsl(var(--foreground)) !important;
}

.pac-matched {
  color: hsl(var(--primary)) !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FINAL COMPACT MAP OVERRIDE
 * Google type-ahead search, compact overlay, visible zoom controls.
 * Keep this inside stylesheet.css; do not append separate map CSS files.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-map-stage {
  position: relative !important;
  min-height: 440px !important;
  background: hsl(var(--muted) / 0.25) !important;
}

.agri-map-stage .agri-map-canvas {
  height: min(58vh, 520px) !important;
  min-height: 440px !important;
}

.agri-map-search-panel,
.agri-map-search-panel-compact {
  position: absolute !important;
  z-index: 1200 !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  width: min(390px, calc(100% - 5.4rem)) !important;
  display: grid !important;
  gap: 0.38rem !important;
  padding: 0.55rem !important;
  border: 1px solid hsl(var(--border) / 0.78) !important;
  border-radius: 0.95rem !important;
  background: hsl(var(--card) / 0.96) !important;
  box-shadow: 0 14px 30px hsl(var(--agri-shadow) / 0.13) !important;
  backdrop-filter: blur(12px) !important;
}

/* Hide older stepper if an old element is still cached. */
.agri-map-stepper {
  display: none !important;
}

.agri-map-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
  align-items: center !important;
}

.agri-map-search-input {
  min-width: 0 !important;
  width: 100% !important;
  height: 42px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 0.78rem !important;
  padding: 0 0.7rem !important;
  font: inherit !important;
  font-size: 0.93rem !important;
  outline: none !important;
}

.agri-map-search-input:focus {
  border-color: hsl(var(--primary) / 0.55) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}

.agri-map-search-clear {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.76rem !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer !important;
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

.agri-map-search-note {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

.agri-map-search-note.warn {
  color: hsl(var(--destructive)) !important;
}

.agri-map-results,
.agri-google-predictions {
  display: grid !important;
  gap: 0.34rem !important;
  max-height: 210px !important;
  overflow: auto !important;
}

.agri-map-result {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.12rem !important;
  width: 100% !important;
  border: 1px solid hsl(var(--border) / 0.9) !important;
  border-radius: 0.74rem !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  padding: 0.52rem 0.62rem !important;
  text-align: left !important;
  cursor: pointer !important;
}

.agri-map-result:hover {
  border-color: hsl(var(--primary) / 0.35) !important;
  background: hsl(var(--primary) / 0.06) !important;
}

.agri-map-result-main {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 850 !important;
  color: hsl(var(--foreground)) !important;
}

.agri-map-result-secondary {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.76rem !important;
}

.agri-map-result-empty {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.74rem !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--muted-foreground)) !important;
  padding: 0.55rem 0.62rem !important;
  font-size: 0.78rem !important;
}

.agri-map-floating-gps {
  position: absolute !important;
  z-index: 900 !important;
  left: 0.75rem !important;
  bottom: 0.82rem !important;
  border: 1px solid hsl(var(--primary) / 0.26) !important;
  border-radius: 999px !important;
  background: hsl(var(--card) / 0.96) !important;
  color: hsl(var(--primary)) !important;
  padding: 0.52rem 0.82rem !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 28px hsl(var(--agri-shadow) / 0.13) !important;
  backdrop-filter: blur(12px) !important;
}

.agri-map-save-sheet {
  position: absolute !important;
  z-index: 900 !important;
  right: 0.75rem !important;
  bottom: 0.75rem !important;
  display: flex !important;
  gap: 0.65rem !important;
  align-items: center !important;
  max-width: min(560px, calc(100% - 2rem)) !important;
  padding: 0.6rem !important;
  border: 1px solid hsl(var(--border) / 0.78) !important;
  border-radius: 0.95rem !important;
  background: hsl(var(--card) / 0.96) !important;
  box-shadow: 0 16px 34px hsl(var(--agri-shadow) / 0.14) !important;
  backdrop-filter: blur(12px) !important;
}

.agri-map-save-title {
  font-weight: 850 !important;
  color: hsl(var(--foreground)) !important;
}

.agri-map-save-subtitle {
  max-width: 300px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.76rem !important;
}

.agri-map-footer-compact {
  padding: 0.62rem 1rem 0.78rem !important;
}

.leaflet-control-layers {
  max-width: min(230px, 72vw) !important;
}

.leaflet-control-zoom {
  margin: 0 0.75rem 5.6rem 0 !important;
}

.leaflet-bottom.leaflet-right .leaflet-control-zoom {
  margin-bottom: 5.6rem !important;
}

@media (max-width: 760px) {
  .agri-map-stage {
    min-height: 520px !important;
  }

  .agri-map-stage .agri-map-canvas {
    min-height: 520px !important;
  }

  .agri-map-search-panel,
  .agri-map-search-panel-compact {
    top: 0.6rem !important;
    left: 0.6rem !important;
    width: calc(100% - 1.2rem) !important;
    padding: 0.55rem !important;
  }

  .agri-map-save-sheet {
    left: 0.6rem !important;
    right: 0.6rem !important;
    bottom: 0.6rem !important;
    max-width: none !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .agri-map-floating-gps {
    left: 0.6rem !important;
    bottom: 8.1rem !important;
  }

  .agri-map-save-sheet .agri-map-btn {
    width: 100% !important;
  }

  .agri-map-save-subtitle {
    max-width: none !important;
  }

  .leaflet-control-zoom {
    margin: 0 0.6rem 8rem 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PHASE 1 PROPOSAL-ALIGNED UI — CustomElement version
 * RDST-inspired landing, advisory cards, context chips, and evidence styling.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-card {
  max-width: 980px;
  margin: 0.35rem auto 1rem;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid hsl(var(--border) / 0.72);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 90% 8%, hsl(var(--agri-maize) / 0.23), transparent 18rem),
    radial-gradient(circle at 5% 6%, hsl(var(--primary) / 0.12), transparent 18rem),
    linear-gradient(135deg, hsl(var(--card) / 0.98), hsl(var(--secondary) / 0.38));
  box-shadow: 0 20px 50px hsl(var(--agri-shadow) / 0.10);
  overflow: hidden;
  position: relative;
}

.agri-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background-image:
    linear-gradient(90deg, hsl(var(--primary) / 0.32) 1px, transparent 1px),
    linear-gradient(0deg, hsl(var(--primary) / 0.25) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(120deg, transparent 0 30%, #000 55%, transparent 100%);
}

.agri-hero-topline {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.3rem 0.68rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 999px;
  background: hsl(var(--card) / 0.78);
  color: hsl(var(--primary));
  font-size: 0.78rem;
  font-weight: 850;
  box-shadow: 0 10px 24px hsl(var(--agri-shadow) / 0.06);
}

.agri-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
}

.agri-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.05rem;
}

.agri-hero-copy h2 {
  margin: 0 !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
  color: hsl(var(--foreground));
}

.agri-hero-lead {
  max-width: 640px;
  margin: 0.7rem 0 0 !important;
  color: hsl(var(--primary));
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800;
  line-height: 1.35;
}

.agri-hero-text {
  max-width: 690px;
  margin: 0.55rem 0 0 !important;
  color: hsl(var(--muted-foreground));
  line-height: 1.58;
}

.agri-flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.agri-flow-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid hsl(var(--border) / 0.78);
  border-radius: 999px;
  background: hsl(var(--card) / 0.82);
  color: hsl(var(--foreground));
  font-size: 0.82rem;
  font-weight: 800;
}

.agri-hero-visual {
  position: relative;
  min-height: 230px;
  border: 1px solid hsl(var(--primary) / 0.15);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--primary) / 0.12), transparent 5rem),
    linear-gradient(145deg, hsl(var(--primary) / 0.08), hsl(var(--agri-maize) / 0.18));
  overflow: hidden;
  box-shadow: inset 0 0 0 1px hsl(var(--card) / 0.45);
}

.agri-field-grid {
  position: absolute;
  inset: 1.1rem;
  border-radius: 1rem;
  opacity: 0.62;
  background-image:
    linear-gradient(30deg, hsl(var(--primary) / 0.22) 1px, transparent 1px),
    linear-gradient(110deg, hsl(var(--agri-soil) / 0.16) 1px, transparent 1px);
  background-size: 32px 32px, 42px 42px;
  transform: perspective(420px) rotateX(54deg) rotateZ(-12deg) translateY(26px);
}

.agri-orbit {
  position: absolute;
  width: 190px;
  height: 190px;
  border: 2px dashed hsl(var(--primary) / 0.24);
  border-radius: 999px;
  top: 18px;
  right: 28px;
  transform: rotate(-22deg);
}

.agri-orbit::after {
  content: "🛰";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: hsl(var(--card) / 0.9);
  box-shadow: 0 10px 25px hsl(var(--agri-shadow) / 0.10);
}

.agri-visual-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  background: hsl(var(--card) / 0.86);
  color: hsl(var(--primary));
  font-weight: 950;
  box-shadow: 0 14px 30px hsl(var(--agri-shadow) / 0.10);
  backdrop-filter: blur(10px);
}

.chip-one { left: 18px; top: 28px; }
.chip-two { right: 38px; bottom: 34px; }
.chip-three { left: 42%; bottom: 18px; }

.agri-capability-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.05rem;
}

.agri-capability-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  min-height: 6.2rem;
  padding: 0.78rem;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: 1rem;
  background: hsl(var(--card) / 0.84);
  box-shadow: 0 10px 24px hsl(var(--agri-shadow) / 0.05);
}

.agri-capability-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.75rem;
  background: hsl(var(--primary) / 0.10);
}

.agri-capability-card strong {
  display: block;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  line-height: 1.15;
}

.agri-capability-card span {
  display: block;
  margin-top: 0.22rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.35;
}

/* Location confirmation card */
.agri-location-card {
  max-width: 860px;
  margin: 0.45rem auto 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 1.2rem;
  background:
    linear-gradient(135deg, hsl(var(--card) / 0.96), hsl(var(--primary) / 0.07));
  box-shadow: 0 16px 38px hsl(var(--agri-shadow) / 0.08);
}

.agri-location-card.warning {
  border-color: hsl(var(--destructive) / 0.24);
  background:
    linear-gradient(135deg, hsl(var(--card) / 0.96), hsl(var(--destructive) / 0.06));
}

.agri-location-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 10px 24px hsl(var(--primary) / 0.18);
}

.agri-location-title {
  color: hsl(var(--foreground));
  font-weight: 900;
  letter-spacing: -0.02em;
}

.agri-location-name {
  margin-top: 0.18rem;
  color: hsl(var(--primary));
  font-weight: 850;
}

.agri-location-meta {
  margin-top: 0.28rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.86rem;
}

.agri-location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.agri-location-chips span {
  display: inline-flex;
  padding: 0.28rem 0.55rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-size: 0.75rem;
  font-weight: 800;
}

/* Advisory response cards */
.agri-answer-card {
  max-width: 920px;
  margin: 0.35rem auto 0.85rem;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: 1.25rem;
  background: hsl(var(--card) / 0.96);
  box-shadow: 0 18px 44px hsl(var(--agri-shadow) / 0.08);
  overflow: hidden;
}

.agri-answer-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.72);
  background:
    radial-gradient(circle at 95% 0%, hsl(var(--agri-maize) / 0.18), transparent 14rem),
    linear-gradient(135deg, hsl(var(--secondary) / 0.68), hsl(var(--card) / 0.96));
}

.agri-answer-eyebrow {
  color: hsl(var(--primary));
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agri-answer-header h3 {
  margin: 0.1rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.22rem !important;
  letter-spacing: -0.025em;
}

.agri-answer-header h3::before {
  display: none !important;
}

.agri-confidence-pill {
  white-space: nowrap;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.agri-confidence-pill.high {
  color: hsl(142 48% 29%);
  background: hsl(142 48% 29% / 0.10);
  border-color: hsl(142 48% 29% / 0.18);
}

.agri-confidence-pill.medium {
  color: hsl(43 92% 34%);
  background: hsl(43 92% 55% / 0.16);
  border-color: hsl(43 92% 45% / 0.20);
}

.agri-confidence-pill.low {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  border-color: hsl(var(--destructive) / 0.22);
}

.agri-answer-section {
  padding: 0.95rem 1.1rem;
  border-top: 1px solid hsl(var(--border) / 0.56);
}

.agri-answer-section:first-of-type {
  border-top: 0;
}

.agri-section-title {
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.agri-summary-section p {
  margin: 0 !important;
  color: hsl(var(--foreground));
  font-size: 1rem;
  line-height: 1.58;
}

.agri-recommendation-list {
  display: grid;
  gap: 0.7rem;
}

.agri-rec-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: 1rem;
  background: hsl(var(--secondary) / 0.32);
}

.agri-rec-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.72rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 950;
}

.agri-rec-body strong {
  display: block;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

.agri-rec-body p {
  margin: 0.35rem 0 0 !important;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

.agri-rec-body p span {
  color: hsl(var(--foreground));
  font-weight: 850;
}

.agri-rec-body blockquote {
  margin: 0.55rem 0 0 !important;
  padding: 0.6rem 0.75rem !important;
  border-left: 3px solid hsl(var(--primary)) !important;
  border-radius: 0.75rem !important;
  background: hsl(var(--card) / 0.72) !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.88rem;
}

.agri-source-chip {
  display: inline-flex;
  max-width: 100%;
  margin-top: 0.55rem;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.09);
  color: hsl(var(--primary));
  font-size: 0.76rem;
  font-weight: 800;
}

.agri-context-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.agri-context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.34rem 0.62rem;
  border: 1px solid hsl(var(--primary) / 0.14);
  border-radius: 999px;
  background: hsl(var(--primary) / 0.07);
  color: hsl(var(--foreground));
  font-size: 0.78rem;
  font-weight: 800;
}

.agri-context-list {
  margin: 0.75rem 0 0 !important;
  padding-left: 1.15rem !important;
  color: hsl(var(--muted-foreground));
}

.agri-context-list li {
  margin: 0.3rem 0;
}

.agri-context-list strong {
  color: hsl(var(--foreground));
}

.agri-uncertainty-section {
  background: hsl(var(--agri-maize) / 0.08);
}

.agri-uncertainty-section p {
  margin: 0 !important;
  color: hsl(var(--muted-foreground));
}

.agri-citation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.agri-citation-list code {
  white-space: normal !important;
}

.agri-answer-footer {
  padding: 0.7rem 1.1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.76rem;
  background: hsl(var(--muted) / 0.32);
  border-top: 1px solid hsl(var(--border) / 0.56);
}

@media (max-width: 860px) {
  .agri-hero-grid {
    grid-template-columns: 1fr;
  }

  .agri-hero-visual {
    min-height: 170px;
  }

  .agri-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .agri-hero-card,
  .agri-answer-card,
  .agri-location-card {
    margin-inline: 0.65rem;
    border-radius: 1.05rem;
  }

  .agri-capability-grid {
    grid-template-columns: 1fr;
  }

  .agri-answer-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .agri-rec-card {
    grid-template-columns: 1fr;
  }

  .agri-location-card {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * USER-FRIENDLY AGENT PROGRESS
 * Plain-language activity card shown while the advisor is reasoning.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-agent-progress-card {
  max-width: 760px;
  margin: 0.35rem auto 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.82rem;
  align-items: start;
  padding: 0.82rem 0.95rem;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 94% 12%, hsl(var(--agri-maize) / 0.16), transparent 12rem),
    linear-gradient(135deg, hsl(var(--card) / 0.96), hsl(var(--primary) / 0.06));
  box-shadow: 0 14px 34px hsl(var(--agri-shadow) / 0.08);
}

.agri-agent-progress-card.running {
  animation: agriFadeIn 0.22s ease-out;
}

.agri-agent-progress-card.done {
  border-color: hsl(var(--primary) / 0.14);
  background: hsl(var(--card) / 0.88);
  box-shadow: 0 10px 24px hsl(var(--agri-shadow) / 0.05);
}

.agri-agent-progress-card.error {
  border-color: hsl(var(--destructive) / 0.24);
  background: linear-gradient(135deg, hsl(var(--card) / 0.96), hsl(var(--destructive) / 0.06));
}

.agri-agent-progress-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 950;
  box-shadow: 0 10px 22px hsl(var(--primary) / 0.18);
}

.agri-agent-progress-card.error .agri-agent-progress-icon {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.agri-agent-spinner {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid hsl(var(--primary-foreground) / 0.35);
  border-top-color: hsl(var(--primary-foreground));
  animation: agriSpin 0.9s linear infinite;
}

.agri-agent-progress-title {
  color: hsl(var(--foreground));
  font-weight: 950;
  letter-spacing: -0.02em;
}

.agri-agent-progress-subtitle {
  margin-top: 0.12rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.86rem;
  line-height: 1.4;
}

.agri-agent-step-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.32rem;
  margin-top: 0.62rem;
}

.agri-agent-step-track span {
  height: 0.42rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  position: relative;
}

.agri-agent-step-track span.done,
.agri-agent-step-track span.active {
  background: hsl(var(--primary) / 0.24);
}

.agri-agent-step-track span.active::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: hsl(var(--primary));
  animation: agriProgressSweep 1.45s ease-in-out infinite;
}

.agri-agent-context-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.6rem;
}

.agri-agent-context-line span,
.agri-agent-tool-row span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.28rem 0.52rem;
  border: 1px solid hsl(var(--primary) / 0.14);
  border-radius: 999px;
  background: hsl(var(--primary) / 0.07);
  color: hsl(var(--foreground));
  font-size: 0.74rem;
  font-weight: 800;
}

.agri-agent-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.62rem;
}

.agri-agent-progress-meta {
  margin-top: 0.45rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.74rem;
}

/* Optional compact status near composer while the card is active. */
body:has(.agri-agent-progress-card.running) .agri-chat-form::before {
  content: "Advisor is checking context, EO/weather signals, and grounded evidence…";
  display: inline-flex;
  width: fit-content;
  max-width: min(92vw, 720px);
  margin: 0 auto 0.45rem;
  padding: 0.34rem 0.68rem;
  border: 1px solid hsl(var(--primary) / 0.16);
  border-radius: 999px;
  background: hsl(var(--card) / 0.92);
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px hsl(var(--agri-shadow) / 0.07);
}

@keyframes agriSpin {
  to { transform: rotate(360deg); }
}

@keyframes agriProgressSweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 720px) {
  .agri-agent-progress-card {
    margin-inline: 0.65rem;
    grid-template-columns: 1fr;
  }

  .agri-agent-progress-icon {
    width: 2rem;
    height: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SYNCED PROGRESS FIX
 * Progress card is temporary, synced to actual backend events, and removed
 * before the final advisory response is shown.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-agent-progress-card.done {
  display: none !important;
}

.agri-agent-step-track {
  display: none !important;
}

.agri-agent-live-row {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  margin-top: 0.55rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid hsl(var(--primary) / 0.14);
  border-radius: 999px;
  background: hsl(var(--primary) / 0.07);
  color: hsl(var(--muted-foreground));
  font-size: 0.74rem;
  font-weight: 850;
}

.agri-agent-live-row .active-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 0 hsl(var(--primary) / 0.45);
  animation: agriLivePulse 1.2s ease-in-out infinite;
}

@keyframes agriLivePulse {
  0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.35); }
  70% { box-shadow: 0 0 0 7px hsl(var(--primary) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SINGLE PROGRESS PANEL FIX
 * Avoid duplicate progress cards and remove technical/backend wording.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-agent-live-row {
  display: none !important;
}

.agri-agent-progress-card.done {
  display: none !important;
}

.agri-agent-step-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.32rem !important;
  margin-top: 0.62rem !important;
}

.agri-agent-step-track span {
  height: 0.42rem !important;
  border-radius: 999px !important;
  background: hsl(var(--muted)) !important;
  overflow: hidden !important;
  position: relative !important;
}

.agri-agent-step-track span.done,
.agri-agent-step-track span.active {
  background: hsl(var(--primary) / 0.24) !important;
}

.agri-agent-step-track span.active::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-100%) !important;
  background: hsl(var(--primary)) !important;
  animation: agriProgressSweep 1.45s ease-in-out infinite !important;
}

body:has(.agri-agent-progress-card.running) .agri-chat-form::before {
  content: "Preparing advisory with available farm context and evidence…" !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSE POLISHING RULES UI
 * Distinguishes advisory, context-only, insufficient evidence, and scope notes.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-answer-context_only .agri-answer-header {
  background:
    radial-gradient(circle at 95% 0%, hsl(var(--agri-sky) / 0.15), transparent 14rem),
    linear-gradient(135deg, hsl(var(--secondary) / 0.62), hsl(var(--card) / 0.96));
}

.agri-answer-context_only .agri-answer-eyebrow {
  color: hsl(var(--agri-sky));
}

.agri-answer-insufficient_evidence .agri-answer-header,
.agri-scope-card .agri-answer-header {
  background:
    radial-gradient(circle at 95% 0%, hsl(var(--muted) / 0.36), transparent 14rem),
    linear-gradient(135deg, hsl(var(--card) / 0.98), hsl(var(--secondary) / 0.38));
}

.agri-scope-card {
  max-width: 760px;
}

.agri-scope-card .agri-summary-section p {
  color: hsl(var(--muted-foreground));
}

.agri-answer-context_only .agri-source-chip {
  background: hsl(var(--agri-sky) / 0.09);
  color: hsl(var(--agri-sky));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FIRST-SCREEN LAYOUT POLISH
 * Compact launch hero, reduced top whitespace, visible capability cards, and
 * less overlap with the fixed composer.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Reduce unused top space in the main Chainlit scroll area. Selectors are broad
   enough to work across Chainlit minor DOM changes while avoiding normal cards. */
main,
main > div,
[class*="scroll"],
[class*="conversation"],
[class*="messages"] {
  scroll-padding-bottom: 9.5rem !important;
}

.agri-hero-card-compact,
.agri-hero-card {
  max-width: min(1040px, calc(100vw - 2rem)) !important;
  margin: clamp(0.25rem, 1.6vh, 0.9rem) auto 8.8rem !important;
  padding: clamp(0.78rem, 1.5vw, 1.05rem) !important;
  border-radius: 1.2rem !important;
}

.agri-hero-card-compact .agri-hero-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(210px, 0.58fr) !important;
  gap: clamp(0.8rem, 1.7vw, 1.15rem) !important;
  margin-top: 0 !important;
}

.agri-hero-card-compact .agri-hero-copy {
  min-width: 0 !important;
}

.agri-hero-card-compact .agri-hero-topline {
  margin-bottom: 0.62rem !important;
  min-height: 1.78rem !important;
  padding: 0.22rem 0.58rem !important;
  font-size: 0.74rem !important;
}

.agri-hero-card-compact .agri-brand-mark {
  width: 1.18rem !important;
  height: 1.18rem !important;
}

.agri-hero-card-compact .agri-hero-copy h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.65rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.07em !important;
  margin-top: 0 !important;
}

.agri-hero-card-compact .agri-hero-lead {
  max-width: 690px !important;
  margin: 0.58rem 0 0 !important;
  font-size: clamp(1rem, 1.65vw, 1.22rem) !important;
  line-height: 1.28 !important;
}

.agri-hero-card-compact .agri-hero-text {
  max-width: 720px !important;
  margin: 0.48rem 0 0 !important;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem) !important;
  line-height: 1.45 !important;
}

.agri-hero-card-compact .agri-flow-strip {
  margin-top: 0.72rem !important;
  gap: 0.45rem !important;
}

.agri-hero-card-compact .agri-flow-strip span {
  min-height: 2rem !important;
  padding: 0.32rem 0.62rem !important;
  font-size: 0.78rem !important;
}

.agri-hero-card-compact .agri-hero-visual {
  min-height: 180px !important;
  align-self: stretch !important;
  border-radius: 1rem !important;
}

.agri-hero-card-compact .agri-field-grid {
  inset: 0.8rem !important;
  background-size: 28px 28px, 36px 36px !important;
}

.agri-hero-card-compact .agri-orbit {
  width: 145px !important;
  height: 145px !important;
  top: 18px !important;
  right: 18px !important;
}

.agri-hero-card-compact .agri-orbit::after {
  right: 10px !important;
  top: 10px !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.agri-hero-card-compact .agri-visual-chip {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.85rem !important;
  font-size: 0.9rem !important;
}

.agri-hero-card-compact .chip-one { left: 1rem !important; top: 1.35rem !important; }
.agri-hero-card-compact .chip-two { right: 1rem !important; bottom: 1rem !important; }
.agri-hero-card-compact .chip-three { left: 42% !important; bottom: 0.85rem !important; }

.agri-capability-grid-compact,
.agri-hero-card-compact .agri-capability-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  margin-top: 0.82rem !important;
}

.agri-hero-card-compact .agri-capability-card {
  min-height: 4.45rem !important;
  padding: 0.62rem !important;
  border-radius: 0.86rem !important;
  gap: 0.5rem !important;
}

.agri-hero-card-compact .agri-capability-icon {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 0.64rem !important;
  font-size: 0.96rem !important;
}

.agri-hero-card-compact .agri-capability-card strong {
  font-size: 0.82rem !important;
}

.agri-hero-card-compact .agri-capability-card span {
  margin-top: 0.14rem !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
}

/* Slightly reduce visual dominance of the fixed composer on launch */
.agri-chat-form {
  max-width: min(1040px, calc(100vw - 2rem)) !important;
}

.agri-chat-input-wrap {
  min-height: 6.3rem !important;
  border-radius: 1.55rem !important;
}

.agri-chat-input textarea,
.agri-chat-input [contenteditable="true"] {
  min-height: 3.1rem !important;
  font-size: 0.98rem !important;
}

/* Keep bottom content visible above the composer */
.agri-hero-card-compact::after {
  content: "";
  display: block;
  height: 0.01px;
}

@media (max-width: 900px) {
  .agri-hero-card-compact .agri-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .agri-hero-card-compact .agri-hero-visual {
    display: none !important;
  }

  .agri-hero-card-compact .agri-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .agri-hero-card-compact,
  .agri-hero-card {
    max-width: calc(100vw - 1rem) !important;
    margin-top: 0.2rem !important;
    margin-bottom: 8.2rem !important;
    padding: 0.78rem !important;
  }

  .agri-hero-card-compact .agri-hero-copy h2 {
    font-size: clamp(1.9rem, 12vw, 2.6rem) !important;
  }

  .agri-hero-card-compact .agri-capability-grid {
    grid-template-columns: 1fr !important;
  }

  .agri-hero-card-compact .agri-capability-card {
    min-height: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SAFE LOCATION + ATTACH RESET
 * Uses the supported landing CustomElement button for location and restores
 * Chainlit's native attachment control.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-flow-strip button.agri-flow-action,
.agri-flow-strip span {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 2rem !important;
  padding: 0.32rem 0.62rem !important;
  border: 1px solid hsl(var(--border) / 0.78) !important;
  border-radius: 999px !important;
  background: hsl(var(--card) / 0.82) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px hsl(var(--agri-shadow) / 0.05) !important;
}

.agri-flow-strip button.agri-flow-action:hover {
  background: hsl(var(--primary) / 0.08) !important;
  border-color: hsl(var(--primary) / 0.30) !important;
  color: hsl(var(--primary)) !important;
}

/* Reset any previous upload-icon hacks so the native Chainlit attachment icon
   remains visible and clickable. */
.agri-crop-photo-button,
button[aria-label*="Attach" i],
button[aria-label*="Upload" i],
label[aria-label*="Attach" i],
label[aria-label*="Upload" i] {
  color: inherit !important;
}

.agri-crop-photo-button svg,
.agri-crop-photo-button img,
button[aria-label*="Attach" i] svg,
button[aria-label*="Upload" i] svg,
label[aria-label*="Attach" i] svg,
label[aria-label*="Upload" i] svg {
  opacity: 1 !important;
}

.agri-crop-photo-button::before,
.agri-crop-photo-button::after,
button[aria-label*="Attach" i]::before,
button[aria-label*="Attach" i]::after,
button[aria-label*="Upload" i]::before,
button[aria-label*="Upload" i]::after,
label[aria-label*="Attach" i]::before,
label[aria-label*="Attach" i]::after,
label[aria-label*="Upload" i]::before,
label[aria-label*="Upload" i]::after {
  content: none !important;
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LAUNCH SPACING + DUPLICATE LOCATION ACTION FIX
 * Removes extra vertical gap after landing hero once the duplicated native
 * "Set farm location" action is no longer shown.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-card-compact,
.agri-hero-card {
  margin-bottom: clamp(1.1rem, 3.2vh, 2.2rem) !important;
}

/* Keep enough scroll padding for normal chat responses, but do not force a
   large blank area under the first landing card. */
main,
main > div,
[class*="scroll"],
[class*="conversation"],
[class*="messages"] {
  scroll-padding-bottom: 7.6rem !important;
}

/* If an old cached native launch action is still rendered, pull it closer to
   the hero and make it compact. New sessions should not show it at all. */
main [class*="action"] button,
main [class*="Action"] button {
  min-height: 2.25rem !important;
  padding: 0.44rem 0.72rem !important;
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  .agri-hero-card-compact,
  .agri-hero-card {
    margin-bottom: 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RIGHT VISUAL CHIPS + LOADING CURSOR FIX
 * - Keeps Sources / AI / Satellite readable.
 * - Prevents AI and Satellite from overlapping.
 * - Hides Chainlit's green loading cursor globally using documented variables.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the Chainlit loading cursor/dot everywhere. This keeps your custom
   progress card visible because that is a separate custom element. */
:root {
  --loading-cursor-color: transparent;
  --loading-cursor-size: 0rem;
  --loading-cursor-animation: none;
}

.loading-cursor {
  background-color: transparent !important;
  color: transparent !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

/* Right hero visual panel chips.
   These were originally square chips for RAG/EO. They are now compact pills
   so Sources and Satellite fit without overflow. */
.agri-hero-card .agri-hero-visual .agri-visual-chip {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 3rem !important;
  min-width: 4.1rem !important;
  max-width: 6.8rem !important;
  padding: 0 0.82rem !important;
  border-radius: 1rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Sources chip: top-left */
.agri-hero-card .agri-hero-visual .chip-one {
  left: 1.05rem !important;
  top: 1.35rem !important;
  min-width: 5.15rem !important;
}

/* Satellite chip: bottom-right, wider because the label is longer */
.agri-hero-card .agri-hero-visual .chip-two {
  right: 1.05rem !important;
  bottom: 1.05rem !important;
  left: auto !important;
  min-width: 6.05rem !important;
  max-width: 6.25rem !important;
  padding-inline: 0.78rem !important;
}

/* AI chip: bottom-left/centre but separated from Satellite */
.agri-hero-card .agri-hero-visual .chip-three {
  left: 4.25rem !important;
  right: auto !important;
  bottom: 1.05rem !important;
  min-width: 4.25rem !important;
  max-width: 4.4rem !important;
  padding-inline: 0.68rem !important;
}

/* Keep the small orbit/bug chip separate from the text chips */
.agri-hero-card .agri-hero-visual .agri-orbit-chip,
.agri-hero-card .agri-hero-visual .orbit-chip {
  z-index: 3 !important;
}

/* Responsive tuning for narrower hero cards */
@media (max-width: 1120px) {
  .agri-hero-card .agri-hero-visual .agri-visual-chip {
    height: 2.75rem !important;
    font-size: 0.78rem !important;
    padding-inline: 0.62rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-one {
    min-width: 4.75rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-two {
    min-width: 5.55rem !important;
    max-width: 5.75rem !important;
    right: 0.75rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-three {
    left: 3.45rem !important;
    min-width: 3.8rem !important;
    max-width: 4rem !important;
  }
}

@media (max-width: 980px) {
  .agri-hero-card .agri-hero-visual .chip-two {
    right: 0.55rem !important;
    min-width: 5.25rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-three {
    left: 2.9rem !important;
  }
}

/* On very small screens, the visual panel usually stacks; keep all labels safe. */
@media (max-width: 720px) {
  .agri-hero-card .agri-hero-visual .agri-visual-chip {
    font-size: 0.74rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-two {
    min-width: 5.1rem !important;
  }

  .agri-hero-card .agri-hero-visual .chip-three {
    left: 2.4rem !important;
  }
}

/* ── Replace Chainlit default footer disclaimer ─────────────────────────── */
.watermark {
  text-align: center !important;
}

.watermark,
.watermark * {
  font-size: 0 !important;
  line-height: 0 !important;
}

.watermark::after {
  content: "Advice is evidence-guided, but field conditions vary. Verify important decisions before acting.";
  display: block !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  color: hsl(var(--muted-foreground) / 0.78) !important;
  font-weight: 500 !important;
  padding-top: 0.25rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ANIMATED SATELLITE ORBIT
 * Adds a moving satellite around the right hero visual ring.
 * Also keeps Sources / AI / Satellite chips readable and non-overlapping.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-visual {
  position: relative !important;
}

/* Existing dashed ring: keep it as the visible path, but remove the old
   static satellite pseudo-element so only the animated satellite is shown. */
.agri-hero-visual .agri-orbit {
  width: 190px !important;
  height: 190px !important;
  top: 18px !important;
  right: 28px !important;
  border: 2px dashed hsl(var(--primary) / 0.24) !important;
  border-radius: 999px !important;
  transform: rotate(-22deg) !important;
  z-index: 2 !important;
}

.agri-hero-visual .agri-orbit::after {
  content: none !important;
  display: none !important;
}

/* This wrapper rotates around the same centre as the dashed ring. */
.agri-hero-visual .agri-orbit-track {
  position: absolute !important;
  width: 190px !important;
  height: 190px !important;
  top: 18px !important;
  right: 28px !important;
  border-radius: 999px !important;
  transform-origin: center center !important;
  animation: agriOrbitSpin 18s linear infinite !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Satellite badge positioned on the orbit circumference. */
.agri-hero-visual .agri-orbit-satellite {
  position: absolute !important;
  top: -1rem !important;
  left: 50% !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid hsl(var(--border) / 0.72) !important;
  background: hsl(var(--card) / 0.94) !important;
  color: hsl(var(--primary)) !important;
  box-shadow:
    0 10px 25px hsl(var(--agri-shadow) / 0.12),
    0 0 0 6px hsl(var(--card) / 0.32) !important;
  backdrop-filter: blur(10px) !important;
}

.agri-hero-visual .agri-orbit-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  animation: agriOrbitCounterSpin 18s linear infinite !important;
}

/* Pause the animation on hover so the panel still feels calm and readable. */
.agri-hero-visual:hover .agri-orbit-track,
.agri-hero-visual:hover .agri-orbit-icon {
  animation-play-state: paused !important;
}

/* Keep the right-panel labels as compact pills. */
.agri-hero-visual .agri-visual-chip {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 3rem !important;
  min-width: 4.1rem !important;
  max-width: 6.8rem !important;
  padding: 0 0.82rem !important;
  border-radius: 1rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  z-index: 5 !important;
}

.agri-hero-visual .chip-one {
  left: 1.05rem !important;
  top: 1.35rem !important;
  min-width: 5.15rem !important;
}

.agri-hero-visual .chip-two {
  right: 1.05rem !important;
  bottom: 1.05rem !important;
  left: auto !important;
  min-width: 6.05rem !important;
  max-width: 6.25rem !important;
  padding-inline: 0.78rem !important;
}

.agri-hero-visual .chip-three {
  left: 4.25rem !important;
  right: auto !important;
  bottom: 1.05rem !important;
  min-width: 4.25rem !important;
  max-width: 4.4rem !important;
  padding-inline: 0.68rem !important;
}

@keyframes agriOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes agriOrbitCounterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .agri-hero-visual .agri-orbit-track,
  .agri-hero-visual .agri-orbit-icon {
    animation: none !important;
  }
}

@media (max-width: 1120px) {
  .agri-hero-visual .agri-visual-chip {
    height: 2.75rem !important;
    font-size: 0.78rem !important;
    padding-inline: 0.62rem !important;
  }

  .agri-hero-visual .chip-one {
    min-width: 4.75rem !important;
  }

  .agri-hero-visual .chip-two {
    min-width: 5.55rem !important;
    max-width: 5.75rem !important;
    right: 0.75rem !important;
  }

  .agri-hero-visual .chip-three {
    left: 3.45rem !important;
    min-width: 3.8rem !important;
    max-width: 4rem !important;
  }
}

@media (max-width: 860px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 150px !important;
    height: 150px !important;
    top: 10px !important;
    right: 22px !important;
  }

  .agri-hero-visual .agri-orbit-satellite {
    width: 2.05rem !important;
    height: 2.05rem !important;
    top: -0.82rem !important;
  }
}

@media (max-width: 720px) {
  .agri-hero-visual .agri-visual-chip {
    font-size: 0.74rem !important;
  }

  .agri-hero-visual .chip-two {
    min-width: 5.1rem !important;
  }

  .agri-hero-visual .chip-three {
    left: 2.4rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ORBIT POSITION FIX
 * Keeps the animated satellite ring clear of Sources / AI / Satellite chips.
 * Add this at the end so it overrides earlier orbit settings.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-visual .agri-orbit,
.agri-hero-visual .agri-orbit-track {
  width: 132px !important;
  height: 132px !important;
  top: 18px !important;
  right: 54px !important;
}

/* Keep the visible dashed path calm and behind the moving satellite. */
.agri-hero-visual .agri-orbit {
  z-index: 2 !important;
  border-width: 2px !important;
  opacity: 0.88 !important;
}

/* Satellite badge: smaller so its lowest point does not touch the chips. */
.agri-hero-visual .agri-orbit-satellite {
  width: 2rem !important;
  height: 2rem !important;
  top: -0.72rem !important;
  box-shadow:
    0 8px 20px hsl(var(--agri-shadow) / 0.12),
    0 0 0 5px hsl(var(--card) / 0.28) !important;
}

.agri-hero-visual .agri-orbit-icon {
  font-size: 0.92rem !important;
}

/* Keep Sources away from the ring. */
.agri-hero-visual .chip-one {
  left: 1.05rem !important;
  top: 1.35rem !important;
  min-width: 5.15rem !important;
  z-index: 6 !important;
}

/* Keep bottom chips as labels below the orbit path, not covering it. */
.agri-hero-visual .chip-three {
  left: 4.2rem !important;
  bottom: 1.05rem !important;
  min-width: 4.25rem !important;
  z-index: 6 !important;
}

.agri-hero-visual .chip-two {
  right: 1.05rem !important;
  bottom: 1.05rem !important;
  min-width: 6.05rem !important;
  z-index: 6 !important;
}

/* On narrower panels, shrink the orbit a little more to keep the same clearance. */
@media (max-width: 1120px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 122px !important;
    height: 122px !important;
    top: 16px !important;
    right: 48px !important;
  }

  .agri-hero-visual .agri-orbit-satellite {
    width: 1.9rem !important;
    height: 1.9rem !important;
    top: -0.66rem !important;
  }
}

@media (max-width: 860px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 112px !important;
    height: 112px !important;
    top: 12px !important;
    right: 38px !important;
  }

  .agri-hero-visual .chip-three {
    left: 3.2rem !important;
  }

  .agri-hero-visual .chip-two {
    right: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ORBIT CENTERING FIX
 * Moves the animated satellite ring into the open centre-right space so it
 * does not sit under the Sources chip or collide with AI/Satellite chips.
 * Add this at the end so it overrides earlier orbit settings.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-visual .agri-orbit,
.agri-hero-visual .agri-orbit-track {
  width: 118px !important;
  height: 118px !important;
  top: 44px !important;
  right: 76px !important;
}

/* Keep the ring visible but subtle. */
.agri-hero-visual .agri-orbit {
  z-index: 2 !important;
  border-width: 2px !important;
  opacity: 0.9 !important;
}

/* Slightly smaller satellite badge so the orbit remains clean. */
.agri-hero-visual .agri-orbit-satellite {
  width: 1.95rem !important;
  height: 1.95rem !important;
  top: -0.68rem !important;
  box-shadow:
    0 8px 20px hsl(var(--agri-shadow) / 0.12),
    0 0 0 5px hsl(var(--card) / 0.28) !important;
}

.agri-hero-visual .agri-orbit-icon {
  font-size: 0.9rem !important;
}

/* Keep the Sources chip on top-left, with clear horizontal separation from orbit. */
.agri-hero-visual .chip-one {
  left: 1.05rem !important;
  top: 1.35rem !important;
  min-width: 5.15rem !important;
  z-index: 6 !important;
}

/* Keep bottom labels below the orbit path. */
.agri-hero-visual .chip-three {
  left: 4.25rem !important;
  bottom: 1.05rem !important;
  min-width: 4.25rem !important;
  z-index: 6 !important;
}

.agri-hero-visual .chip-two {
  right: 1.05rem !important;
  bottom: 1.05rem !important;
  min-width: 6.05rem !important;
  z-index: 6 !important;
}

/* Narrower panels: shrink and move slightly right to preserve clearance. */
@media (max-width: 1120px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 110px !important;
    height: 110px !important;
    top: 42px !important;
    right: 66px !important;
  }

  .agri-hero-visual .agri-orbit-satellite {
    width: 1.85rem !important;
    height: 1.85rem !important;
    top: -0.62rem !important;
  }
}

@media (max-width: 860px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 104px !important;
    height: 104px !important;
    top: 36px !important;
    right: 54px !important;
  }

  .agri-hero-visual .chip-three {
    left: 3.2rem !important;
  }

  .agri-hero-visual .chip-two {
    right: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ORBIT CLEAR SOURCES FIX
 * Moves the animated orbit further right so Sources does not overlap it.
 * Keep this block at the very end of stylesheet.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-visual .agri-orbit,
.agri-hero-visual .agri-orbit-track {
  width: 112px !important;
  height: 112px !important;
  top: 46px !important;
  right: 38px !important;
}

/* Keep the ring subtle and behind the satellite/chips. */
.agri-hero-visual .agri-orbit {
  z-index: 2 !important;
  border-width: 2px !important;
  opacity: 0.9 !important;
}

/* Keep the satellite badge compact so it does not collide with labels. */
.agri-hero-visual .agri-orbit-satellite {
  width: 1.9rem !important;
  height: 1.9rem !important;
  top: -0.62rem !important;
  box-shadow:
    0 8px 20px hsl(var(--agri-shadow) / 0.12),
    0 0 0 5px hsl(var(--card) / 0.28) !important;
}

.agri-hero-visual .agri-orbit-icon {
  font-size: 0.88rem !important;
}

/* Keep the Sources chip fixed on the left and above the ring visually. */
.agri-hero-visual .chip-one {
  left: 1.05rem !important;
  top: 1.35rem !important;
  min-width: 5.15rem !important;
  z-index: 6 !important;
}

/* Bottom chips remain below the orbit path. */
.agri-hero-visual .chip-three {
  left: 4.25rem !important;
  bottom: 1.05rem !important;
  min-width: 4.25rem !important;
  z-index: 6 !important;
}

.agri-hero-visual .chip-two {
  right: 1.05rem !important;
  bottom: 1.05rem !important;
  min-width: 6.05rem !important;
  z-index: 6 !important;
}

@media (max-width: 1120px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 104px !important;
    height: 104px !important;
    top: 44px !important;
    right: 34px !important;
  }

  .agri-hero-visual .agri-orbit-satellite {
    width: 1.82rem !important;
    height: 1.82rem !important;
    top: -0.58rem !important;
  }
}

@media (max-width: 860px) {
  .agri-hero-visual .agri-orbit,
  .agri-hero-visual .agri-orbit-track {
    width: 98px !important;
    height: 98px !important;
    top: 38px !important;
    right: 30px !important;
  }

  .agri-hero-visual .chip-three {
    left: 3.2rem !important;
  }

  .agri-hero-visual .chip-two {
    right: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LANDING HERO v13 — prominent location CTA without stretching right visual
 * Keep this block at the end of stylesheet.css so it overrides older rules.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-hero-card-compact .agri-hero-grid {
  align-items: start !important;
}

.agri-hero-card-compact .agri-hero-visual {
  align-self: start !important;
  width: 100% !important;
  height: clamp(220px, 21vw, 250px) !important;
  min-height: clamp(220px, 21vw, 250px) !important;
  max-height: 250px !important;
}

.agri-location-cta-row {
  width: 100% !important;
  margin-top: 1rem !important;
}

.agri-location-primary-cta {
  appearance: none !important;
  width: 100% !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1rem 1.15rem !important;
  border-radius: 1.1rem !important;
  border: 1px solid hsl(var(--primary) / 0.26) !important;
  background:
    radial-gradient(circle at 4% 20%, hsl(var(--agri-maize) / 0.24), transparent 10rem),
    linear-gradient(135deg, hsl(var(--agri-maize) / 0.28), hsl(var(--primary) / 0.13)) !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow:
    0 16px 38px hsl(var(--primary) / 0.13),
    inset 0 1px 0 hsl(var(--card) / 0.72) !important;
}

.agri-location-primary-cta:hover {
  transform: translateY(-2px) !important;
  border-color: hsl(var(--primary) / 0.42) !important;
  box-shadow:
    0 20px 46px hsl(var(--primary) / 0.17),
    inset 0 1px 0 hsl(var(--card) / 0.78) !important;
}

.agri-location-primary-cta:active {
  transform: translateY(0) !important;
}

.agri-location-cta-main {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  min-width: 0 !important;
}

.agri-location-cta-icon {
  width: 2.85rem !important;
  height: 2.85rem !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0.95rem !important;
  background: hsl(var(--card) / 0.92) !important;
  box-shadow: 0 9px 22px hsl(var(--agri-shadow) / 0.10) !important;
  font-size: 1.35rem !important;
}

.agri-location-cta-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.agri-location-cta-copy strong {
  display: block !important;
  color: hsl(var(--foreground)) !important;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

.agri-location-cta-copy span {
  display: block !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: clamp(0.8rem, 1vw, 0.92rem) !important;
  line-height: 1.32 !important;
}

.agri-location-cta-arrow {
  width: 2.4rem !important;
  height: 2.4rem !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: hsl(var(--primary) / 0.13) !important;
  color: hsl(var(--primary)) !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
}

/* Keep the right visual balanced after the CTA became taller. */
.agri-hero-card-compact .agri-hero-visual .agri-orbit,
.agri-hero-card-compact .agri-hero-visual .agri-orbit-track {
  width: 118px !important;
  height: 118px !important;
  top: 42px !important;
  right: 36px !important;
}

.agri-hero-card-compact .agri-hero-visual .chip-one {
  top: 1.25rem !important;
  left: 1rem !important;
}

.agri-hero-card-compact .agri-hero-visual .chip-three {
  bottom: 1rem !important;
  left: 4.2rem !important;
}

.agri-hero-card-compact .agri-hero-visual .chip-two {
  bottom: 1rem !important;
  right: 1rem !important;
}

@media (max-width: 900px) {
  .agri-location-primary-cta {
    min-height: 68px !important;
  }
}

@media (max-width: 620px) {
  .agri-location-primary-cta {
    align-items: flex-start !important;
    padding: 0.9rem !important;
    border-radius: 1rem !important;
  }

  .agri-location-cta-arrow {
    width: 2.1rem !important;
    height: 2.1rem !important;
  }

  .agri-location-cta-icon {
    width: 2.45rem !important;
    height: 2.45rem !important;
    border-radius: 0.82rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * vNext map picker visibility + satellite-default polish
 * Keeps the search panel below Chainlit's fixed top bar after auto-scroll.
 * ═══════════════════════════════════════════════════════════════════════════ */
.agri-map-card-modern {
  scroll-margin-top: 126px !important;
}

.agri-map-card-modern .agri-map-stage {
  border-top: 1px solid hsl(var(--border) / 0.55) !important;
}

.agri-map-card-modern .agri-map-search-panel,
.agri-map-card-modern .agri-map-search-panel-compact {
  top: 0.9rem !important;
  left: 0.9rem !important;
  z-index: 1600 !important;
}

.agri-map-card-modern .leaflet-control-layers {
  margin-top: 0.9rem !important;
}

@media (max-width: 760px) {
  .agri-map-card-modern {
    scroll-margin-top: 104px !important;
  }

  .agri-map-card-modern .agri-map-search-panel,
  .agri-map-card-modern .agri-map-search-panel-compact {
    top: 0.7rem !important;
    left: 0.7rem !important;
    width: calc(100% - 1.4rem) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * MAP PICKER ORGANISATION — compact map-first layout
 * Removes the separate title/header space and keeps Save visible above fold.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-map-card-location-picker {
  max-width: 980px !important;
  margin: 0.35rem auto 0.9rem !important;
  overflow: hidden !important;
}

.agri-map-card-location-picker .agri-map-stage-location-picker {
  min-height: min(58vh, 520px) !important;
  height: min(58vh, 520px) !important;
  background: hsl(var(--muted) / 0.22) !important;
}

.agri-map-card-location-picker .agri-map-stage-location-picker .agri-map-canvas {
  min-height: 100% !important;
  height: 100% !important;
}

/* Search stays top-left as the main instruction. */
.agri-map-card-location-picker .agri-map-search-panel,
.agri-map-card-location-picker .agri-map-search-panel-compact {
  top: 0.72rem !important;
  left: 0.72rem !important;
  width: min(390px, calc(100% - 6rem)) !important;
  z-index: 1300 !important;
}

/* Keep the Save action visible at the top-right, beside the layer button. */
.agri-map-card-location-picker .agri-map-save-sheet {
  top: 0.72rem !important;
  right: 4.9rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1250 !important;
  max-width: min(480px, calc(100% - 31.5rem)) !important;
  min-width: 300px !important;
  padding: 0.5rem 0.55rem !important;
  border-radius: 0.95rem !important;
}

.agri-map-card-location-picker .agri-map-save-title {
  font-size: 0.84rem !important;
  line-height: 1.1 !important;
}

.agri-map-card-location-picker .agri-map-save-subtitle {
  max-width: 240px !important;
  font-size: 0.74rem !important;
}

.agri-map-card-location-picker .agri-map-save-sheet .agri-map-btn {
  min-height: 2.65rem !important;
  padding: 0.58rem 0.9rem !important;
  white-space: nowrap !important;
}

/* Give Leaflet controls space so they don't sit under Save/search panels. */
.agri-map-card-location-picker .leaflet-top.leaflet-right {
  top: 0.72rem !important;
  right: 0.72rem !important;
}

.agri-map-card-location-picker .leaflet-control-layers {
  margin-top: 0 !important;
  margin-right: 0 !important;
}

.agri-map-card-location-picker .leaflet-control-zoom {
  margin: 0 0.75rem 0.75rem 0 !important;
}

.agri-map-card-location-picker .leaflet-bottom.leaflet-right .leaflet-control-zoom {
  margin-bottom: 0.75rem !important;
}

/* GPS remains visible, but does not compete with Save. */
.agri-map-card-location-picker .agri-map-floating-gps {
  left: 0.72rem !important;
  bottom: 0.72rem !important;
  z-index: 1100 !important;
}

/* Footer only appears for loading/errors after this component update. */
.agri-map-card-location-picker .agri-map-footer-minimal {
  padding: 0.45rem 0.75rem !important;
  min-height: 0 !important;
}

/* Medium widths: stack Save below search so nothing overlaps. */
@media (max-width: 980px) {
  .agri-map-card-location-picker .agri-map-stage-location-picker {
    min-height: 540px !important;
    height: 540px !important;
  }

  .agri-map-card-location-picker .agri-map-search-panel,
  .agri-map-card-location-picker .agri-map-search-panel-compact {
    width: min(390px, calc(100% - 1.4rem)) !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet {
    top: 6.7rem !important;
    left: 0.72rem !important;
    right: 4.9rem !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Small screens: make the two controls full-width and keep Save near the top. */
@media (max-width: 640px) {
  .agri-map-card-location-picker {
    margin-inline: 0.65rem !important;
  }

  .agri-map-card-location-picker .agri-map-stage-location-picker {
    min-height: 560px !important;
    height: 560px !important;
  }

  .agri-map-card-location-picker .agri-map-search-panel,
  .agri-map-card-location-picker .agri-map-search-panel-compact {
    top: 0.6rem !important;
    left: 0.6rem !important;
    right: 0.6rem !important;
    width: auto !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet {
    top: 6.85rem !important;
    left: 0.6rem !important;
    right: 0.6rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet .agri-map-btn {
    width: 100% !important;
  }

  .agri-map-card-location-picker .agri-map-floating-gps {
    bottom: 0.6rem !important;
    left: 0.6rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LAPTOP-FIRST MAP LAUNCH FIX
 * Put the map closer to the top on first launch and reduce vertical pressure
 * so the whole picker is visible above the fixed composer on common laptops.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-map-card-location-picker {
  margin-top: -0.15rem !important;
  scroll-margin-top: 64px !important;
}

.agri-map-card-location-picker .agri-map-stage-location-picker {
  height: min(54vh, 470px) !important;
  min-height: min(54vh, 470px) !important;
}

.agri-map-card-location-picker .agri-map-stage-location-picker .agri-map-canvas {
  height: 100% !important;
  min-height: 100% !important;
}

@media (max-height: 820px) and (min-width: 720px) {
  .agri-map-card-location-picker {
    margin-top: -0.35rem !important;
    scroll-margin-top: 56px !important;
  }

  .agri-map-card-location-picker .agri-map-stage-location-picker {
    height: min(50vh, 410px) !important;
    min-height: 380px !important;
  }

  .agri-map-card-location-picker .agri-map-search-panel,
  .agri-map-card-location-picker .agri-map-search-panel-compact {
    top: 0.58rem !important;
    left: 0.58rem !important;
    width: min(360px, calc(100% - 5.4rem)) !important;
  }

  .agri-map-card-location-picker .agri-map-search-input {
    height: 38px !important;
    font-size: 0.9rem !important;
  }

  .agri-map-card-location-picker .agri-map-search-note {
    font-size: 0.72rem !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet {
    top: 0.58rem !important;
    right: 4.55rem !important;
    max-width: min(440px, calc(100% - 30rem)) !important;
    padding: 0.45rem 0.5rem !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet .agri-map-btn {
    min-height: 2.35rem !important;
    padding: 0.45rem 0.75rem !important;
  }

  .agri-map-card-location-picker .agri-map-floating-gps {
    bottom: 0.58rem !important;
    left: 0.58rem !important;
    padding: 0.46rem 0.72rem !important;
  }

  .agri-map-card-location-picker .leaflet-bottom.leaflet-right .leaflet-control-zoom,
  .agri-map-card-location-picker .leaflet-control-zoom {
    margin-bottom: 0.55rem !important;
    margin-right: 0.55rem !important;
  }
}

@media (max-width: 980px) and (max-height: 820px) {
  .agri-map-card-location-picker .agri-map-stage-location-picker {
    height: min(54vh, 430px) !important;
    min-height: 405px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * SAVE LOCATION BUTTON POLISH
 * Keep the selected-pin action inside the map card and away from layer button.
 * ═══════════════════════════════════════════════════════════════════════════ */

.agri-map-card-location-picker .agri-map-save-sheet {
  top: 0.62rem !important;
  right: 4.7rem !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: min(420px, calc(100% - 31rem)) !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.42rem 0.42rem 0.42rem 0.72rem !important;
  border-radius: 1rem !important;
  border: 1px solid hsl(var(--primary) / 0.18) !important;
  background: hsl(var(--card) / 0.92) !important;
  box-shadow: 0 14px 30px hsl(var(--agri-shadow) / 0.12) !important;
  backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

.agri-map-card-location-picker .agri-map-save-title {
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.agri-map-card-location-picker .agri-map-save-subtitle {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.7rem !important;
  line-height: 1.15 !important;
}

.agri-map-card-location-picker .agri-map-save-sheet .agri-map-btn {
  min-height: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 0.78rem !important;
  border-radius: 0.78rem !important;
  white-space: nowrap !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px hsl(var(--primary) / 0.18) !important;
}

/* On narrower screens, place Save below the search panel instead of squeezing it. */
@media (max-width: 1120px) {
  .agri-map-card-location-picker .agri-map-save-sheet {
    top: 5.95rem !important;
    left: 0.62rem !important;
    right: 4.7rem !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .agri-map-card-location-picker .agri-map-save-sheet {
    top: 6.8rem !important;
    left: 0.6rem !important;
    right: 0.6rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.55rem !important;
  }

  .agri-map-card-location-picker .agri-map-save-subtitle {
    max-width: none !important;
  }

  .agri-map-card-location-picker .agri-map-save-sheet .agri-map-btn {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LANDING HERO TOP-SPACING FIX
 * Reduce the blank space between the fixed top bar and the landing hero.
 * Keeps mobile spacing safe while making laptop first-view more compact.
 * ═══════════════════════════════════════════════════════════════════════════ */
.agri-ui-ready main,
.agri-ui-ready [role="main"] {
  padding-top: 0.15rem !important;
}

.agri-ui-ready main > div,
.agri-ui-ready [role="main"] > div {
  padding-top: 0 !important;
}

.agri-hero-card.agri-hero-card-compact {
  margin-top: -1.25rem !important;
  margin-bottom: 0.65rem !important;
}

@media (min-width: 900px) and (max-height: 850px) {
  .agri-hero-card.agri-hero-card-compact {
    margin-top: -2.15rem !important;
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  .agri-hero-card.agri-hero-card-compact {
    margin-top: -2.75rem !important;
  }
}

@media (max-width: 720px) {
  .agri-ui-ready main,
  .agri-ui-ready [role="main"] {
    padding-top: 0.45rem !important;
  }

  .agri-hero-card.agri-hero-card-compact {
    margin-top: 0.25rem !important;
  }
}