/* ==========================================================================
   Seenbless Pharma - site assistant widget
   --------------------------------------------------------------------------
   Loaded after style.css, so it inherits --brand / --accent and whatever the
   admin panel has set them to. Kept in its own file because the widget is the
   one piece of the front end that is optional: drop the partial and this
   stylesheet and nothing else changes.
   ========================================================================== */

/* The call / back-to-top stack moves up to make room for the launcher. */
.floaters{bottom:86px}

.chat{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:900;
  font-family:var(--font);
}

/* The panel, the badge and the typing dots are all laid out with flex or grid,
   which beats the browser default of display:none for [hidden]. Without this
   they would all be on screen before the script ever runs. */
.chat [hidden]{display:none!important}

/* ------------------------------------------------------------- 1 launcher */
.chat__launcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:56px;
  padding:0 20px 0 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-lt,#274a9b));
  color:#fff;
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(15,42,107,.32);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.chat__launcher:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,42,107,.38)}
.chat__launcher:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.chat__launcher-icon{display:inline-flex}
.chat__launcher-icon svg{width:26px;height:26px;fill:currentColor}
.chat__launcher-icon--close{display:none}
.chat.is-open .chat__launcher-icon--open{display:none}
.chat.is-open .chat__launcher-icon--close{display:inline-flex}
.chat.is-open .chat__launcher-text{display:none}
.chat.is-open .chat__launcher{padding:0;width:56px;justify-content:center}

.chat__badge{
  position:absolute;top:-2px;right:-2px;
  min-width:20px;height:20px;padding:0 6px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--accent);
  color:#fff;font-size:11px;font-weight:700;line-height:1;
}

/* ---------------------------------------------------------------- 2 panel */
.chat__panel{
  position:absolute;
  right:0;
  bottom:70px;
  width:min(384px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 140px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg);
  box-shadow:0 30px 70px rgba(16,32,72,.24);
  animation:chat-in .22s var(--ease) both;
}
@keyframes chat-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.chat__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px 14px 16px;
  background:linear-gradient(135deg,var(--brand),var(--brand-lt,#274a9b));
  color:#fff;
  flex:none;
}
.chat__avatar{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.16);
}
.chat__avatar svg{width:22px;height:22px;fill:#fff}

.chat__head-text{min-width:0;flex:1}
.chat__title{
  margin:0;
  /* The site's heading rules colour every h2 with --ink; on the brand gradient
     that is unreadable, so the colour is restated here. */
  color:#fff;
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat__status{
  margin:2px 0 0;
  display:flex;align-items:center;gap:6px;
  min-width:0;
  font-size:11.5px;
  line-height:1.4;
  color:rgba(255,255,255,.82);
}
/* text-overflow works on the text box, not on the flex container that holds
   the status dot beside it. */
.chat__status-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__dot{
  width:7px;height:7px;flex:none;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:chat-pulse 2.4s infinite;
}
@keyframes chat-pulse{
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

.chat__icon-btn{
  width:32px;height:32px;flex:none;
  display:grid;place-items:center;
  border:0;border-radius:9px;
  background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  transition:background .18s var(--ease);
}
.chat__icon-btn:hover{background:rgba(255,255,255,.24)}
.chat__icon-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.chat__icon-btn svg{width:17px;height:17px;fill:currentColor}

/* ------------------------------------------------------------------ 3 log */
.chat__log{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 14px 4px;
  background:var(--tint);
  scrollbar-width:thin;
}
.chat__log::-webkit-scrollbar{width:8px}
.chat__log::-webkit-scrollbar-thumb{background:#cfd8e8;border-radius:8px}

.chat__row{display:flex;margin-bottom:12px}
.chat__row--user{justify-content:flex-end}

.chat__bubble{
  max-width:88%;
  padding:11px 14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--body);
  font-size:14.2px;
  line-height:1.62;
  box-shadow:var(--shadow-xs);
  overflow-wrap:anywhere;
}
.chat__row--bot  .chat__bubble{border-bottom-left-radius:6px}
.chat__row--user .chat__bubble{
  border-bottom-right-radius:6px;
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.chat__bubble p{margin:0 0 8px}
.chat__bubble p:last-child{margin-bottom:0}

.chat__list{margin:0 0 8px;padding-left:18px}
.chat__list:last-child{margin-bottom:0}
.chat__list li{margin:0 0 3px}

/* ------------------------------------------------------- 4 product cards */
.chat__cards{display:grid;gap:8px;margin-top:10px}
.chat__card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--tint);
  color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.chat__card:hover{border-color:var(--accent);background:var(--bg);color:var(--ink)}
.chat__card-img{
  width:46px;height:46px;flex:none;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}
.chat__card-body{display:grid;gap:1px;min-width:0}
.chat__card-name{font-weight:700;font-size:13.4px;line-height:1.35;color:var(--brand)}
.chat__card-meta{
  font-size:11.6px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.chat__card-pack{font-size:11.4px;font-weight:600;color:var(--accent)}

/* -------------------------------------------------------- 5 links & chips */
.chat__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chat__link{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--brand-10,rgba(15,42,107,.1));
  background:var(--brand-05,rgba(15,42,107,.05));
  font-size:12.2px;
  font-weight:600;
  color:var(--brand);
}
.chat__link:hover{background:var(--brand);border-color:var(--brand);color:#fff}

.chat__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px 2px}
.chat__chip{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  font-family:inherit;
  font-size:12.6px;
  font-weight:600;
  color:var(--brand);
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.chat__chip:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.chat__chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------ 6 lead form */
.chat__lead{
  display:grid;
  gap:8px;
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  box-shadow:var(--shadow-xs);
}
.chat__lead-title{
  margin:0;
  font-family:var(--font-head);
  font-size:13.6px;
  font-weight:700;
  color:var(--ink);
}
.chat__lead-input{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-family:inherit;
  font-size:13.6px;
  color:var(--ink);
  background:var(--tint);
}
.chat__lead-input:focus{outline:0;border-color:var(--brand);background:var(--bg);box-shadow:0 0 0 3px var(--brand-10,rgba(15,42,107,.1))}
.chat__lead-send{
  padding:10px 14px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-head);
  font-size:13.6px;
  font-weight:700;
  cursor:pointer;
  transition:filter .18s var(--ease)}
.chat__lead-send:hover{filter:brightness(1.07)}
.chat__lead-send:disabled{opacity:.6;cursor:default}
.chat__lead-note{margin:0;font-size:12px;color:var(--muted)}
.chat__lead-note.is-error{color:var(--red)}
.chat__lead-done{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(0,166,81,.28);
  border-radius:12px;
  background:rgba(0,166,81,.08);
  font-size:13.4px;
  font-weight:600;
  color:#0b7a41;
}

/* --------------------------------------------------------- 7 typing dots */
.chat__typing{
  display:flex;
  gap:4px;
  padding:0 20px 10px;
  background:var(--tint);
  flex:none;
}
.chat__typing span{
  width:7px;height:7px;
  border-radius:50%;
  background:#b6c1d6;
  animation:chat-bounce 1.2s infinite;
}
.chat__typing span:nth-child(2){animation-delay:.15s}
.chat__typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}

/* ------------------------------------------------------------ 8 composer */
.chat__form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--bg);
  flex:none;
}
.chat__input{
  flex:1;
  min-height:42px;
  max-height:120px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--tint);
  font-family:inherit;
  /* 16px keeps iOS Safari from zooming the page when the field is focused. */
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
  resize:none;
}
.chat__input:focus{outline:0;border-color:var(--brand);background:var(--bg);box-shadow:0 0 0 3px var(--brand-10,rgba(15,42,107,.1))}
.chat__input:disabled{opacity:.6}

.chat__send{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border:0;border-radius:12px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.chat__send:hover{background:var(--accent);transform:translateY(-1px)}
.chat__send:disabled{opacity:.5;cursor:default;transform:none}
.chat__send:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat__send svg{width:19px;height:19px;fill:currentColor}

.chat__legal{
  margin:0;
  padding:0 14px 11px;
  background:var(--bg);
  font-size:11.2px;
  line-height:1.5;
  color:var(--muted);
  flex:none;
}
.chat__legal a{font-weight:600}

/* ------------------------------------------------------------ 9 responsive */
@media (max-width:640px){
  .chat{right:12px;bottom:12px}
  .floaters{bottom:78px;right:12px}

  .chat__launcher{height:52px;padding:0 18px 0 14px;font-size:14px}
  .chat.is-open .chat__launcher{width:52px}

  /* On a phone the panel is a sheet, not a popover - a 380px card floating
     over a 360px viewport is unusable. */
  .chat__panel{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .chat.is-open .chat__launcher{display:none}
  .chat__bubble{max-width:90%;font-size:14.6px}
}

@media (max-width:640px) and (display-mode:browser){
  .chat__log{padding-top:14px}
}

@media (prefers-reduced-motion:reduce){
  .chat__panel{animation:none}
  .chat__dot,.chat__typing span{animation:none}
  .chat__launcher:hover,.chat__send:hover{transform:none}
}

@media print{
  .chat{display:none!important}
}