/* ==========================================================================
   HITCO — product assistant
   Floating launcher, anchored to the inline-end so it mirrors in RTL.
   ========================================================================== */

.asst{
  position:fixed;
  inset-block-end:22px;
  inset-inline-end:22px;
  z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
[dir="rtl"] .asst{align-items:flex-start}

/* ------------------------------------------------------------- launcher */
.asst__launch{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px 12px 14px;
  border-radius:999px;
  background:var(--c-ink);color:#fff;
  box-shadow:0 10px 30px -10px rgba(14,31,39,.5);
  font-size:var(--t-sm);font-weight:700;
  transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
[dir="rtl"] .asst__launch{padding:12px 14px 12px 20px}
.asst__launch:hover{background:var(--c-primary-deep);transform:translateY(-2px)}
.asst__launch-icon{
  inline-size:28px;block-size:28px;border-radius:50%;
  background:var(--c-green);
  display:grid;place-items:center;flex:none;
}
.asst__launch-icon svg{inline-size:16px;block-size:16px;stroke-width:1.8}
.asst.is-open .asst__launch{display:none}

@media (max-width:520px){
  .asst{inset-inline:14px;inset-block-end:14px;align-items:stretch}
  .asst__launch{justify-content:center}
}

/* ---------------------------------------------------------------- panel */
.asst__panel{
  inline-size:min(390px, calc(100vw - 32px));
  max-block-size:min(620px, calc(100vh - 110px));
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:14px;
  box-shadow:0 24px 60px -22px rgba(14,31,39,.4);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.asst__panel[hidden]{display:none}

.asst__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;
  background:var(--c-ink);color:#fff;
}
.asst__head h2{font-size:var(--t-base);color:#fff;margin:0 0 2px;line-height:1.3}
.asst__head p{font-size:var(--t-xs);color:rgba(255,255,255,.62);margin:0;line-height:1.4}
.asst__close{
  flex:none;inline-size:30px;block-size:30px;border-radius:6px;
  display:grid;place-items:center;color:rgba(255,255,255,.75);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.asst__close:hover{background:rgba(255,255,255,.12);color:#fff}
.asst__close svg{inline-size:17px;block-size:17px}

/* ------------------------------------------------------------------ log */
.asst__log{
  flex:1;overflow-y:auto;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--c-paper);
  overscroll-behavior:contain;
}
.asst__msg{
  max-inline-size:88%;
  padding:10px 14px;border-radius:12px;
  font-size:var(--t-sm);line-height:1.65;
}
.asst__msg p{margin:0}
.asst__msg--bot{
  align-self:flex-start;
  background:var(--c-surface);border:1px solid var(--c-line);
  color:var(--c-body);
  border-start-start-radius:4px;
}
.asst__msg--user{
  align-self:flex-end;
  background:var(--c-primary);color:#fff;
  border-end-end-radius:4px;
}

/* result cards */
.asst__hits{display:flex;flex-direction:column;gap:6px;align-self:stretch}
.asst__hit{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:var(--c-surface);border:1px solid var(--c-line);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.asst__hit:hover{border-color:var(--c-primary);background:var(--c-primary-soft)}
.asst__hit img{
  inline-size:38px;block-size:38px;object-fit:contain;flex:none;
  background:var(--c-wash);border-radius:6px;padding:3px;
}
.asst__hit-txt{display:flex;flex-direction:column;min-inline-size:0;gap:1px}
/* "N more products" — links out to the filtered listing. */
.asst__more{
  align-self:stretch;text-align:center;
  padding:7px 10px;border-radius:8px;
  font-size:var(--t-xs);font-weight:700;color:var(--c-primary);
  border:1px dashed var(--c-line);
}
.asst__more:hover{border-color:var(--c-primary);background:var(--c-primary-soft)}
.asst__hit-name{
  font-size:var(--t-xs);font-weight:700;color:var(--c-ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.asst__hit-sub{font-size:11px;color:var(--c-muted);line-height:1.3}

/* suggestion chips */
.asst__chips{display:flex;flex-wrap:wrap;gap:6px}
.asst__chip{
  font-size:var(--t-xs);padding:6px 12px;border-radius:999px;
  border:1px solid var(--c-line-strong);color:var(--c-body);background:var(--c-surface);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.asst__chip:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-soft)}

/* typing indicator */
.asst__typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.asst__typing i{
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--c-muted);
  animation:asst-bounce 1.1s infinite ease-in-out;
}
.asst__typing i:nth-child(2){animation-delay:.15s}
.asst__typing i:nth-child(3){animation-delay:.3s}
@keyframes asst-bounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.asst__typing i{animation:none;opacity:.6}}

/* --------------------------------------------------------- disclaimer */
.asst__disclaimer{
  padding:9px 18px;
  font-size:11px;line-height:1.5;color:var(--c-muted);
  background:var(--c-wash);
  border-block-start:1px solid var(--c-line);
  margin:0;
}

/* ---------------------------------------------------------------- form */
.asst__form{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;
  border-block-start:1px solid var(--c-line);
  background:var(--c-surface);
}
.asst__input{
  flex:1;min-inline-size:0;
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--c-line-strong);background:var(--c-paper);
  font-size:var(--t-sm);color:var(--c-ink);
}
.asst__input:focus{outline:none;border-color:var(--c-primary);background:var(--c-surface)}
.asst__send{
  flex:none;inline-size:38px;block-size:38px;border-radius:50%;
  background:var(--c-primary);color:#fff;display:grid;place-items:center;
  transition:background var(--dur-1) var(--ease)}
.asst__send:hover{background:var(--c-primary-deep)}
.asst__send:disabled{background:var(--c-line-strong);cursor:not-allowed}
.asst__send svg{inline-size:16px;block-size:16px}
[dir="rtl"] .asst__send svg{transform:scaleX(-1)}

.sr-only{
  position:absolute;inline-size:1px;block-size:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}