/* ==========================================================================
   MREMBO NATURALS — WEBSITE ASSISTANT
   --------------------------------------------------------------------------
   Built on the existing design tokens. Every selector is scoped under
   .mn- or #mn-, so nothing here can reach the rest of the site.

   The panel is deliberately quiet: cream on white, a single green launcher,
   no bouncing badge and no auto-open. It should read as a concierge standing
   politely to one side, not a pop-up demanding attention.
   ========================================================================== */

/* ==========================================================================
   LAUNCHER
   ========================================================================== */

.mn-launch{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:160;
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.86rem;
  color:#FFFFFF; background:var(--green); border:0; cursor:pointer;
  padding:0.85rem 1.35rem; border-radius:999px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.65);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mn-launch:hover{ transform:translateY(-3px); background:#000000; }
.mn-launch:focus-visible{ outline:3px solid var(--turmeric); outline-offset:3px; }
.mn-launch .mn-leaf{ flex:none; width:20px; height:20px; color:var(--turmeric); }
.mn-launch .mn-leaf svg{ width:20px; height:20px; }
.mn-launch.is-open .mn-launch-text{ display:none; }
.mn-launch.is-open{ padding:0.85rem; }

/* The sample-request button already lives bottom-right on catalog pages.
   Sit above it rather than on top of it. */
body:has(.req-fab.on) .mn-launch{ bottom:5.2rem; }

@media (max-width:600px){
  .mn-launch{ right:1rem; bottom:1rem; padding:0.8rem 1.1rem; font-size:0.8rem; }
  body:has(.req-fab.on) .mn-launch{ bottom:4.8rem; }
}

/* ==========================================================================
   PANEL
   ========================================================================== */

.mn-panel{
  position:fixed; right:1.4rem; bottom:5.6rem; z-index:161;
  width:min(390px, calc(100vw - 2.8rem));
  height:min(560px, calc(100vh - 8rem));
  background:var(--cream); border:0; border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(97,64,2,0.55);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(0.98);
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.9,.28,1);
}
.mn-panel.open{ opacity:1; transform:none; }

/* ---- THE PANEL MUST NOT EXIST FOR THE MOUSE WHILE IT IS CLOSED ----
   `display:flex` above is a class selector, which outranks the browser's own
   [hidden]{display:none}. Without the rule below, setting panel.hidden = true
   changes nothing: the closed panel stays laid out at position:fixed with
   z-index 161 and opacity 0, and silently eats every click behind it —
   roughly a quarter of the viewport on desktop and almost all of it on a
   phone, where the panel is full-screen.

   [hidden] is (0,2,0) and beats .mn-panel at (0,1,0), so the attribute is
   authoritative again. Keep both rules if you ever restyle this panel. */
.mn-panel[hidden]{ display:none; }

/* Belt and braces. During the 220ms close transition the panel is still
   displayed but no longer .open, and it should not be catching clicks then
   either. This also protects against any future rule reintroducing a display
   value that outranks [hidden]. */
.mn-panel:not(.open){ pointer-events:none; }
.mn-panel.open{ pointer-events:auto; }
@media (prefers-reduced-motion:reduce){
  .mn-panel{ transition:none; transform:none; }
}
@media (max-width:600px){
  /* Full-height sheet on a phone: a floating card would be unusable. */
  .mn-panel{
    right:0; left:0; bottom:0; top:0;
    width:100%; height:100%; max-height:none; border-radius:0; border:0;
  }
}

.mn-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.1rem; background:var(--green); color:#FFFFFF; flex:none;
}
.mn-id{ display:flex; align-items:center; gap:0.7rem; min-width:0; }
.mn-avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:rgba(245,227,192,0.14); border:0;
  display:flex; align-items:center; justify-content:center; color:var(--turmeric);
}
.mn-avatar svg{ width:19px; height:19px; }
.mn-name{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.92rem; }
.mn-role{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.62rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--turmeric-soft);
  opacity:0.85; margin-top:0.1rem;
}
.mn-close{
  flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:rgba(245,227,192,0.14); border:0;
  color:#FFFFFF; font-size:1.25rem; line-height:1;
}
.mn-close:hover{ background:rgba(245,227,192,0.26); }
.mn-close:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }

/* ==========================================================================
   CONVERSATION
   ========================================================================== */

.mn-log{
  flex:1; overflow-y:auto; padding:1.1rem 1rem 0.4rem;
  display:flex; flex-direction:column; gap:0.7rem;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}

.mn-msg{ display:flex; }
.mn-msg.mn-me{ justify-content:flex-end; }
.mn-bubble{
  max-width:88%; padding:0.75rem 0.95rem; border-radius:14px;
  font-size:0.88rem; line-height:1.6;
}
.mn-bot .mn-bubble{
  background:var(--white); border:0; color:var(--ink);
  border-bottom-left-radius:5px;
}
.mn-me .mn-bubble{
  background:var(--green); color:#FFFFFF; border-bottom-right-radius:5px;
}
.mn-bubble strong{ font-weight:600; }
.mn-bubble em{ font-family:'Quicksand', sans-serif; font-style:normal; }

/* thinking indicator */
.mn-dots{ display:inline-flex; gap:4px; padding:0.15rem 0; }
.mn-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--neutral); opacity:0.45;
  animation:mnDot 1.1s infinite ease-in-out;
}
.mn-dots i:nth-child(2){ animation-delay:.16s; }
.mn-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes mnDot{ 0%,60%,100%{ transform:translateY(0); opacity:.35 } 30%{ transform:translateY(-4px); opacity:.9 } }
@media (prefers-reduced-motion:reduce){ .mn-dots i{ animation:none; } }

/* ==========================================================================
   STARTERS AND ACTIONS
   ========================================================================== */

.mn-starters{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0.1rem 0 0.3rem; }
.mn-chip{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.76rem;
  background:var(--white); border:0; color:var(--ink);
  padding:0.44rem 0.85rem; border-radius:999px; cursor:pointer; text-align:left;
  transition:border-color .15s ease, background-color .15s ease;
}
.mn-chip:hover{ border-color:#F5E3C0; background:var(--cream-2); }
.mn-chip:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }

.mn-actions{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0 0 0.3rem; }
.mn-act{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.76rem;
  background:var(--green-soft); border:0; color:#000000;
  padding:0.44rem 0.85rem; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.mn-act:hover{ background:#FFFFFF; transform:translateY(-1px); }
.mn-act:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }
.mn-act-primary{ background:var(--green); border-color:var(--green); color:#FFFFFF; }
.mn-act-primary:hover{ background:#000000; }
.mn-act-link{ background:var(--cream-2); border-color:var(--line); color:var(--ink); }
.mn-act-link:hover{ background:#FFFFFF; }

/* ==========================================================================
   INPUT
   ========================================================================== */

.mn-form{
  flex:none; display:flex; gap:0.5rem; align-items:center;
  padding:0.8rem 1rem 0.5rem; background:var(--white);
}
.mn-form input{
  flex:1; min-width:0; font-family:'Quicksand', sans-serif; font-size:0.88rem;
  color:var(--ink); background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:0.65rem 1rem;
}
.mn-form input:focus{ outline:2px solid var(--turmeric); outline-offset:1px; border-color:var(--turmeric); }
.mn-form input::placeholder{ color:#000000; }
.mn-send{
  flex:none; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--green); border:0; color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
}
.mn-send svg{ width:17px; height:17px; }
.mn-send:hover{ background:#000000; }
.mn-send:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }

.mn-foot{
  flex:none; margin:0; padding:0.15rem 1rem 0.8rem; background:var(--white);
  font-size:0.68rem; line-height:1.5; color:var(--neutral);
}

/* Visually hidden, still read by screen readers. */
.mn-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ==========================================================================
   TOUCH TARGETS
   --------------------------------------------------------------------------
   On a phone the chips and action buttons are the primary controls, so they
   need a comfortable target rather than the compact desktop size. 44px is
   the widely used minimum for a reliable thumb tap.
   ========================================================================== */
@media (max-width:600px){
  .mn-chip, .mn-act{
    min-height:44px; padding:0.7rem 1rem; font-size:0.82rem;
    display:inline-flex; align-items:center;
  }
  .mn-close{ width:44px; height:44px; font-size:1.4rem; }
  .mn-send{ width:44px; height:44px; }
  .mn-send svg{ width:19px; height:19px; }
  .mn-form input{ padding:0.8rem 1rem; font-size:16px; } /* 16px stops iOS zooming on focus */
  .mn-log{ padding:1rem 0.9rem 0.4rem; }
  .mn-bubble{ max-width:92%; }
}