/* ==========================================================================
   AGRIYANA — Raitha Mitra
   ರೈತ ಮಿತ್ರ, "the farmer's friend"

   The in-page assistant. Named in Kannada because the business is in Mandya
   and that is the language its farmers actually use — the site is English-only
   for now (see TODO), but the assistant's NAME is not a translation problem,
   it is the brand.

   Two shapes, one component:
     desktop   a floating panel anchored bottom-right, 396px wide
     phone     a full-height sheet, because a 320px bubble on a 375px screen is
               a keyboard with no room for the conversation above it

   It is not a language model and does not pretend to be. It matches intent
   against the real catalogue in products.js and answers from real config, so
   every number it prints — price, delivery threshold, guarantee term — is the
   same number the rest of the site prints. See req/js/raitha.js.

   Loads after micro.css and before mobile.css, so mobile.css stays last.
   ========================================================================== */

/* ==================================================================== launcher */

/* A disc that opens into a pill on approach.

   The first version was a permanent 56px pill carrying the name and a
   strapline — a large, loud, immovable object parked over the bottom-right of
   every page, which on a phone covered the last card in a grid. At rest it is
   now a 60px disc, which is enough to be findable and little enough to ignore;
   the name arrives on hover or focus, where it is actually being read. */
.rm-fab {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: var(--z-overlay);

  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  overflow: hidden;

  /* a lit edge on the brand green, so it reads as a raised object rather than
     a flat coloured circle */
  background:
    radial-gradient(120% 120% at 30% 12%, color-mix(in srgb, var(--brand) 62%, #fff) 0%, transparent 58%),
    var(--brand);
  color: var(--brand-fg);
  box-shadow:
    0 2px 6px rgba(10, 40, 24, .28),
    0 14px 30px -8px rgba(10, 40, 24, .42),
    inset 0 1px 0 rgba(255, 255, 255, .26);

  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;

  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out),
              gap var(--dur-2) var(--ease-soil),
              padding var(--dur-2) var(--ease-soil);
}
.rm-fab:hover,
.rm-fab:focus-visible {
  gap: var(--s-3);
  padding-right: var(--s-6);
  transform: translateY(-2px);
  box-shadow:
    0 3px 8px rgba(10, 40, 24, .3),
    0 20px 40px -10px rgba(10, 40, 24, .5),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.rm-fab:active { transform: translateY(0) scale(.96); }

.rm-fab-mark {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
}
.rm-fab-mark .ico { width: 27px; height: 27px; stroke-width: 1.6; }

/* the label is clipped to zero at rest and opens with the button */
.rm-fab-text {
  display: grid;
  line-height: 1.1;
  text-align: left;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--dur-2) var(--ease-soil), opacity var(--dur-1) var(--ease-out);
}
.rm-fab:hover .rm-fab-text,
.rm-fab:focus-visible .rm-fab-text { max-width: 160px; opacity: 1; }
.rm-fab-text b { font-size: var(--t-sm); font-weight: 800; }
.rm-fab-text span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 3px;
}

/* a finger has no hover, so on touch the label never opens and the disc is
   the whole control — which is the right size for a thumb anyway */
@media (hover: none), (pointer: coarse) {
  .rm-fab { height: 60px; }
  .rm-fab-text { display: none; }
}

/* a single slow pulse on the mark, so the launcher reads as available rather
   than as a static badge. One ring, not a loop — a permanently pulsing button
   is an anxiety generator. */
.rm-fab-ping {
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-fg);
  opacity: 0;
  pointer-events: none;
}
.rm-fab.is-new .rm-fab-ping { animation: rm-ping 2.4s var(--ease-out) 3; }
@keyframes rm-ping {
  0%   { transform: scale(.9); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* the launcher steps aside while the panel is open */
.rm-fab[aria-expanded='true'] { opacity: 0; pointer-events: none; transform: scale(.85); }

/* Left over from the pill version, which needed to shrink because it carried
   text. The disc does not, and the padding-right here was re-opening the
   collapsed state — it measured 51px wide instead of 60 and looked squashed. */
@media (max-width: 560px) {
  .rm-fab { height: 56px; }
  .rm-fab-mark { width: 56px; height: 56px; }
  .rm-fab-ping { width: 56px; height: 56px; }
}

/* ==================================================================== panel */

.rm-panel {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: calc(var(--z-overlay) + 1);

  display: flex;
  flex-direction: column;
  width: min(396px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 108px));

  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xl);

  /* closed: nudged down and scaled a hair, so opening reads as unfolding from
     the launcher rather than appearing */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-soil),
              visibility 0s linear var(--dur-2);
}
.rm-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* --- head ------------------------------------------------------------- */
.rm-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--forest-900);
  color: #F2EFE4;
  flex: none;
}
.rm-head-mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--sprout-400);
}
.rm-head-txt { display: grid; line-height: 1.15; min-width: 0; flex: 1; }
.rm-head-txt b { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; letter-spacing: var(--tr-snug); }
.rm-head-txt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9DB3A4;
  margin-top: 3px;
}
.rm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sprout-500); flex: none; }

.rm-head .icon-btn { color: #F2EFE4; flex: none; }
.rm-head .icon-btn:hover { background: rgba(255, 255, 255, .12); }

/* --- log -------------------------------------------------------------- */
.rm-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  scrollbar-width: thin;
  background:
    radial-gradient(70% 40% at 100% 0%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 70%),
    var(--bg);
}

.rm-msg { display: flex; gap: var(--s-3); align-items: flex-start; max-width: 100%; }
.rm-msg-mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}
.rm-msg-mark .ico { width: 16px; height: 16px; }

.rm-bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: 16px 16px 16px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg);
  min-width: 0;
  overflow-wrap: anywhere;
}
.rm-bubble p { margin: 0; }
.rm-bubble p + p { margin-top: var(--s-3); }
.rm-bubble b { font-weight: 700; }
.rm-bubble a { color: var(--brand-ink); font-weight: 600; }

/* the visitor's own turn, mirrored and filled */
.rm-msg.is-me { flex-direction: row-reverse; }
.rm-msg.is-me .rm-bubble {
  border-radius: 16px 16px 5px 16px;
  background: var(--brand);
  border-color: transparent;
  color: var(--brand-fg);
}
.rm-msg.is-me .rm-msg-mark { background: var(--surface-2); color: var(--fg-muted); }

/* arrival: each message rises once. Not a typing simulation — the answer is
   computed instantly and pretending otherwise wastes the visitor's time. */
.rm-msg { animation: rm-in var(--dur-2) var(--ease-soil) both; }
@keyframes rm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rm-msg { animation: none; }
  .rm-panel { transition: opacity 1ms linear; }
  .rm-fab.is-new .rm-fab-ping { animation: none; }
}

/* --- typing indicator ---------------------------------------------------
   Three dots in a bubble the same shape as a real reply, so the answer lands
   in the space the indicator was already holding and nothing jumps. The pause
   is presentation, not latency — the answer is computed instantly — so it is
   capped in raitha.js and skipped entirely under reduced motion. */
.rm-bubble-typing { padding: var(--s-4) var(--s-4); }
.rm-dots { display: inline-flex; align-items: center; gap: 5px; }
.rm-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-faint);
  animation: rm-blink 1.25s var(--ease-in-out) infinite;
}
.rm-dots i:nth-child(2) { animation-delay: .16s; }
.rm-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rm-blink {
  0%, 62%, 100% { opacity: .28; transform: translateY(0); }
  28%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .rm-dots i { animation: none; opacity: .5; } }

/* --- product cards inside a reply -------------------------------------- */
.rm-cards { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.rm-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.rm-card:hover { border-color: var(--brand); background: var(--surface-2); }
.rm-card-img {
  width: 44px; height: 44px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  flex: none;
}
.rm-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rm-card-img .specimen svg { width: 54%; }
.rm-card-img .specimen-tag { display: none; }
.rm-card-txt { display: grid; gap: 1px; min-width: 0; }
.rm-card-txt b {
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-card-txt span { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-faint); }
.rm-card-price {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 4px;
}

/* --- quick replies ------------------------------------------------------

   These live INSIDE the log now, appended under the reply they belong to, so
   they scroll away with it. The old fixed rail sat between the log and the
   composer: it never scrolled, so a stale set stayed stuck to the bottom of
   the panel however far the conversation had moved on, and it shoved the
   input down whenever it grew.

   Indented to the width of the message column so they line up with the reply
   above rather than with the panel edge. */
.rm-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-left: calc(28px + var(--s-3));   /* clears the avatar column */
  margin-top: calc(var(--s-4) * -1 + 2px); /* sits close under its reply */
  animation: rm-in var(--dur-2) var(--ease-soil) both;
}
@media (prefers-reduced-motion: reduce) { .rm-opts { animation: none; } }
.rm-chip {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg-muted);
  border-radius: var(--r-pill);
  min-height: 34px;
  padding: 0 var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.rm-chip:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.rm-chip:active { transform: scale(.96); }

/* the way back to the suggestions after typing your own question. Dashed, so
   it reads as a control rather than as another suggestion. */
.rm-chip.is-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-style: dashed;
  color: var(--fg-subtle);
  background: transparent;
}
.rm-chip.is-more:hover { border-style: solid; color: var(--brand-ink); }
.rm-chip.is-more .ico { width: 14px; height: 14px; }

.rm-opts:empty { display: none; }

/* --- composer ----------------------------------------------------------- */
.rm-form {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: none;
}
.rm-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 108px;
  padding: 11px var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.4;
  resize: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rm-input::placeholder { color: var(--fg-faint); }
.rm-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--glow-brand); }

.rm-send {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-fg);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.rm-send:hover { background: var(--brand-hover); }
.rm-send:active { transform: scale(.93); }
.rm-send[disabled] { opacity: .4; pointer-events: none; }

.rm-foot {
  padding: 0 var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: center;
  flex: none;
  background: var(--surface);
}

/* ==================================================================== phone

   A floating bubble on a 375px screen leaves roughly 240px of conversation
   once the on-screen keyboard is up. Below 620px it becomes a real sheet:
   full width, full height, square top corners, and the launcher hides. */
@media (max-width: 620px) {
  .rm-panel {
    /* pinned on all four edges rather than sized with 100dvh: dvh and the
       real inner height disagree by the browser-chrome offset, which left a
       23px band of page showing above the sheet */
    inset: 0;
    width: 100%;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(24px);
  }
  .rm-panel.is-open { transform: none; }
  .rm-head { padding-top: max(var(--s-4), env(safe-area-inset-top)); }
  .rm-form { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
  .rm-log { padding-inline: var(--s-4); }
}

/* the buy bar on the product page and the launcher would otherwise stack */
@media (max-width: 979px) {
  .rm-fab { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Touch: the site's floor is 44px and the quick-reply chips are the control
   most likely to be used with a thumb, so they take it too. */
@media (pointer: coarse) {
  .rm-chip { min-height: 44px; padding-inline: var(--s-5); }
  .rm-card { grid-template-columns: 48px minmax(0, 1fr) auto; padding: var(--s-3); }
  .rm-card-img { width: 48px; height: 48px; }
}

/* ==================================================================== dark */
[data-theme='dark'] .rm-head { background: #041009; }
[data-theme='dark'] .rm-bubble { background: var(--surface); }
[data-theme='dark'] .rm-input { background: var(--surface-sunk); }