/* ---------------------------------------------------------------------------
 * AI shopping assistant.
 *
 * Its own stylesheet rather than more lines in rebuild.css: the widget is
 * fixed-position chrome that sits above every template, and it needs to be
 * removable in one line if the client ever turns the assistant off.
 *
 * Uses the theme's tokens, with fallbacks, so it still looks right if it is
 * ever loaded on a page where rebuild.css is not.
 * ------------------------------------------------------------------------ */

.rai{
  --rai-ink:var(--ink,#241A1F);
  --rai-ink2:var(--ink-2,#5C5057);
  --rai-line:var(--line,#EDE4DA);
  --rai-hot:var(--hot,#B4145A);
  --rai-soft:var(--hot-soft,#FCEBF2);
  --rai-card:var(--card,#FFFFFF);
  --rai-cream:var(--cream,#FBF6F0);
  position:fixed; right:18px; bottom:18px; z-index:9999;
  font-family:var(--body,'Poppins',system-ui,sans-serif);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}

/* ------------------------------------------------------------------ launcher */

.rai__launch{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border:0; border-radius:999px;
  background:var(--rai-hot); color:#fff; cursor:pointer;
  font:600 14px/1 var(--body,'Poppins',system-ui,sans-serif);
  box-shadow:var(--sh-2,0 2px 4px rgba(58,38,28,.06),0 14px 30px -12px rgba(58,38,28,.22));
  transition:transform .15s ease, background .15s ease;
}
.rai__launch:hover{background:var(--hot-2,#8E0F47); transform:translateY(-1px)}
.rai__launch:focus-visible{outline:2px solid var(--rai-ink); outline-offset:2px}
.rai.is-open .rai__launch{display:none}

/* --------------------------------------------------------------------- panel */

.rai__panel{
  width:min(384px, calc(100vw - 32px));
  height:min(580px, calc(100vh - 110px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--rai-card); color:var(--rai-ink);
  border:1px solid var(--rai-line); border-radius:var(--r-lg,16px);
  box-shadow:var(--sh-3,0 4px 10px rgba(58,38,28,.08),0 28px 60px -20px rgba(58,38,28,.34));
}
.rai__panel[hidden]{display:none}

.rai__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px 12px 16px;
  background:var(--rai-hot); color:#fff;
}
.rai__headtxt{display:flex; flex-direction:column; gap:1px; min-width:0}
.rai__headtxt b{font:600 14.5px/1.2 var(--body,'Poppins',system-ui,sans-serif)}
.rai__headtxt span{font-size:11.5px; opacity:.82}
.rai__x{
  background:transparent; border:0; color:#fff; cursor:pointer;
  font-size:26px; line-height:1; padding:0 2px; opacity:.85;
}
.rai__x:hover{opacity:1}
.rai__x:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* ----------------------------------------------------------------------- log */

.rai__log{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 14px 6px; display:flex; flex-direction:column; gap:11px;
  background:var(--rai-cream);
}

.rai__msg{max-width:88%; font-size:13.5px; line-height:1.55}
.rai__msg p{margin:0 0 7px}
.rai__msg p:last-child{margin-bottom:0}

.rai__msg--bot{
  align-self:flex-start; background:var(--rai-card);
  border:1px solid var(--rai-line); border-radius:4px 13px 13px 13px;
  padding:11px 13px; color:var(--rai-ink);
  box-shadow:var(--sh-1,0 1px 2px rgba(58,38,28,.05));
}
.rai__msg--me{
  align-self:flex-end; background:var(--rai-hot); color:#fff;
  border-radius:13px 4px 13px 13px; padding:10px 13px;
}

/* Typing dots */
.rai__msg.is-thinking{padding:13px}
.rai__dots{display:inline-flex; gap:4px}
.rai__dots i{
  width:6px; height:6px; border-radius:50%; background:var(--rai-ink2); opacity:.4;
  animation:rai-b 1.1s infinite ease-in-out;
}
.rai__dots i:nth-child(2){animation-delay:.16s}
.rai__dots i:nth-child(3){animation-delay:.32s}
@keyframes rai-b{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:.9}}
@media (prefers-reduced-motion:reduce){
  .rai__dots i{animation:none}
  .rai__launch{transition:none}
}

/* --------------------------------------------------------------------- chips */

.rai__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.rai__chip{
  border:1px solid var(--rai-line); background:var(--rai-cream);
  color:var(--rai-ink2); border-radius:999px; cursor:pointer;
  padding:6px 11px; font:500 11.5px/1.3 var(--body,'Poppins',system-ui,sans-serif);
  text-align:left;
}
.rai__chip:hover{border-color:var(--rai-hot); color:var(--rai-hot); background:var(--rai-soft)}
.rai__chip:focus-visible{outline:2px solid var(--rai-hot); outline-offset:1px}

/* --------------------------------------------------------------- product cards */

.rai__cards{display:flex; flex-direction:column; gap:7px; margin-top:10px}
.rai__card{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  border:1px solid var(--rai-line); border-radius:var(--r-ctl,8px);
  background:var(--rai-cream); padding:7px 8px 7px 7px;
}
.rai__cardimg{display:block; flex:none; line-height:0}
.rai__cardimg img{
  width:46px; height:46px; object-fit:cover; border-radius:6px;
  background:#fff; border:1px solid var(--rai-line);
}
.rai__cardb{display:flex; flex-direction:column; gap:1px; min-width:0}
.rai__cardn{
  font:600 12.5px/1.3 var(--body,'Poppins',system-ui,sans-serif);
  color:var(--rai-ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rai__cardn:hover{color:var(--rai-hot)}
.rai__cardm{font-size:11.5px; color:var(--rai-ink2)}
.rai__cardd{font-size:10.5px; font-weight:600; color:var(--star,#1F7A4D)}

.rai__add{
  flex:none; border:1px solid var(--rai-hot); background:var(--rai-hot); color:#fff;
  border-radius:999px; cursor:pointer; padding:6px 13px;
  font:600 11.5px/1 var(--body,'Poppins',system-ui,sans-serif);
}
.rai__add:hover:not(:disabled){background:var(--hot-2,#8E0F47)}
.rai__add:disabled{background:transparent; color:var(--rai-ink2); border-color:var(--rai-line); cursor:default}
.rai__add:focus-visible{outline:2px solid var(--rai-ink); outline-offset:2px}

/* --------------------------------------------------------------- cart summary */

.rai__cart{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:8px 10px;
  border:1px dashed var(--rai-line); border-radius:var(--r-ctl,8px);
  background:#fff; font-size:12px; color:var(--rai-ink2);
}
.rai__go{
  font-weight:600; font-size:11.5px; color:#fff; background:var(--rai-hot);
  text-decoration:none; padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.rai__go:hover{background:var(--hot-2,#8E0F47)}

/* ---------------------------------------------------------------------- form */

.rai__form{
  display:flex; gap:7px; padding:10px 11px;
  border-top:1px solid var(--rai-line); background:var(--rai-card);
}
.rai__in{
  flex:1 1 auto; min-width:0;
  border:1px solid var(--rai-line); border-radius:999px;
  padding:10px 14px; font:400 13px/1.3 var(--body,'Poppins',system-ui,sans-serif);
  color:var(--rai-ink); background:var(--rai-cream);
}
.rai__in:focus{outline:none; border-color:var(--rai-hot); background:#fff}
.rai__send{
  flex:none; width:38px; height:38px; border:0; border-radius:50%;
  background:var(--rai-hot); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.rai__send:hover:not(:disabled){background:var(--hot-2,#8E0F47)}
.rai__send:disabled{opacity:.45; cursor:default}
.rai__send:focus-visible{outline:2px solid var(--rai-ink); outline-offset:2px}

.rai__foot{
  padding:0 13px 10px; font-size:10.5px; line-height:1.4;
  color:var(--ink-3,#736068); background:var(--rai-card); text-align:center;
}

/* -------------------------------------------------------------------- mobile */

@media (max-width:600px){
  .rai{right:12px; bottom:12px; left:12px; align-items:stretch}
  .rai__launch{align-self:flex-end}
  /* Full-height sheet - a 580px panel floating on a small screen looks lost,
     and the on-screen keyboard eats half of it. */
  .rai__panel{
    position:fixed; inset:0; width:100%; height:100%;
    border:0; border-radius:0;
  }
  .rai__log{padding-bottom:10px}
  .rai__msg{max-width:92%}
}

/* ---------------------------------------------------------------- link cards */
/* A reply with nowhere to go is a dead end. These are the next step. */
.rai__links{display:flex; flex-direction:column; gap:7px; margin-top:10px}
.rai__link{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:10px; text-decoration:none;
  border:1px solid var(--rai-hot); border-radius:var(--r-ctl,8px);
  background:var(--rai-soft); padding:9px 10px 9px 12px;
}
.rai__link:hover{background:var(--rai-hot)}
.rai__link:hover .rai__linkt,
.rai__link:hover .rai__linkb{color:#fff}
.rai__link:hover .rai__linkgo{background:#fff; color:var(--rai-hot)}
.rai__link:focus-visible{outline:2px solid var(--rai-ink); outline-offset:2px}
.rai__linkt{
  grid-column:1; font:600 12.5px/1.3 var(--body,'Poppins',system-ui,sans-serif);
  color:var(--rai-hot);
}
.rai__linkb{
  grid-column:1; font-size:11px; line-height:1.4; color:var(--rai-ink2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rai__linkgo{
  grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap;
  background:var(--rai-hot); color:#fff; border-radius:999px;
  padding:5px 12px; font:600 11px/1 var(--body,'Poppins',system-ui,sans-serif);
}