/* Againcart Support Chat
   Every selector is prefixed .acsc so nothing collides with the theme, and the
   layout-critical declarations are forced -- themes like Journal3 ship very
   broad rules for a, ul and img that would otherwise win. */

.acsc {
  --acsc-color: #25d366;
  position: fixed !important;
  bottom: 20px;
  z-index: 9990;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
}

.acsc.acsc-right { right: 20px; }
.acsc.acsc-left  { left: 20px; }

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

.acsc .acsc-launcher {
  display: flex !important;
  align-items: center;
  margin: 0 0 0 auto !important;
  padding: 0 18px 0 14px !important;
  height: 52px;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--acsc-color) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.acsc.acsc-left .acsc-launcher { margin: 0 auto 0 0 !important; }

.acsc .acsc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.acsc .acsc-launcher svg { flex: 0 0 auto; display: block; }
.acsc .acsc-launcher-text { white-space: nowrap; margin-left: 8px; }

.acsc.is-open .acsc-launcher-text { display: none; }
.acsc.is-open .acsc-launcher { width: 52px; padding: 0 !important; justify-content: center; }

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

.acsc .acsc-panel {
  width: 320px;
  max-width: calc(100vw - 40px);
  margin: 0 0 12px 0 !important;
  border-radius: 14px;
  background: #fff !important;
  color: #26313d !important;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .26);
  animation: acsc-in .18s ease-out;
}

@keyframes acsc-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acsc .acsc-head {
  display: flex !important;
  align-items: flex-start;
  padding: 16px 14px 14px 16px !important;
  background: var(--acsc-color) !important;
  color: #fff !important;
}

.acsc .acsc-head-text { flex: 1 1 auto; min-width: 0; }
.acsc .acsc-head-text strong { display: block; font-size: 15px; font-weight: 600; color: #fff !important; }
.acsc .acsc-head-text span { display: block; margin-top: 3px; font-size: 12.5px; color: #fff !important; opacity: .92; }

.acsc .acsc-close {
  flex: 0 0 auto;
  margin: 0 0 0 10px !important;
  padding: 2px !important;
  border: 0 !important;
  background: none !important;
  color: #fff !important;
  opacity: .85;
  cursor: pointer;
}

.acsc .acsc-close:hover { opacity: 1; background: none !important; }
.acsc .acsc-close svg { display: block; }

.acsc .acsc-body { max-height: 58vh; overflow-y: auto; }

.acsc .acsc-note {
  margin: 0 !important;
  padding: 12px 16px !important;
  background: #fff8e6;
  border-bottom: 1px solid #f1e4c3;
  font-size: 12.5px;
  color: #7a5c15 !important;
}

/* ---- agents ------------------------------------------------------------ */

.acsc .acsc-agents { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.acsc .acsc-agents li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.acsc .acsc-agents li + li { border-top: 1px solid #eef1f4; }

.acsc .acsc-agent {
  display: flex !important;
  align-items: center;
  width: auto !important;
  padding: 12px 16px !important;
  color: #26313d !important;
  text-decoration: none !important;
  background: none !important;
  transition: background .12s ease;
}

.acsc .acsc-agent:hover,
.acsc .acsc-agent:focus { background: #f5f7f9 !important; color: #26313d !important; text-decoration: none !important; }

.acsc .acsc-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 12px;
}

.acsc .acsc-avatar img {
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  border-radius: 50%;
  object-fit: cover;
  display: block !important;
}

.acsc .acsc-initial {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dfe5ea;
  color: #4b5a68 !important;
  font-size: 17px;
  font-weight: 600;
}

.acsc .acsc-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2eb872;
}

.acsc .acsc-agent.is-offline .acsc-dot { background: #b3bcc4; }
.acsc .acsc-agent.is-offline .acsc-avatar img,
.acsc .acsc-agent.is-offline .acsc-initial { filter: grayscale(1); opacity: .75; }

.acsc .acsc-agent-text { flex: 1 1 auto; min-width: 0; }
.acsc .acsc-agent-text strong { display: block; font-size: 14px; font-weight: 600; color: #26313d !important; }
.acsc .acsc-role { display: block; font-size: 12px; color: #6b7885 !important; }
.acsc .acsc-state { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #2eb872 !important; }
.acsc .acsc-agent.is-offline .acsc-state { color: #98a3ad !important; }

.acsc .acsc-wa { flex: 0 0 auto; margin-left: 10px; color: var(--acsc-color); }
.acsc .acsc-agent.is-offline .acsc-wa { color: #c3cbd2; }

/* ---- extra links ------------------------------------------------------- */

.acsc .acsc-links {
  display: flex !important;
  flex-wrap: wrap;
  padding: 12px 16px 14px !important;
  border-top: 1px solid #eef1f4;
  background: #fafbfc;
}

.acsc .acsc-link {
  margin: 4px 8px 4px 0 !important;
  padding: 6px 12px !important;
  border: 1px solid #dde3e8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #3a4753 !important;
  font-size: 12.5px;
  text-decoration: none !important;
}

.acsc .acsc-link:hover { border-color: var(--acsc-color) !important; color: var(--acsc-color) !important; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 767px) {
  .acsc.acsc-desktop-only { display: none !important; }

  /* Pin both edges so the panel can never run past the viewport, whichever
     side the launcher sits on. */
  .acsc,
  .acsc.acsc-right,
  .acsc.acsc-left { left: 14px; right: 14px; bottom: 14px; }

  .acsc .acsc-launcher { height: 48px; padding: 0 16px 0 12px !important; font-size: 14px; }
  .acsc.is-open .acsc-launcher { width: 48px; }
  .acsc .acsc-panel { width: 100%; max-width: calc(100vw - 28px); }
  .acsc .acsc-body { max-height: 52vh; }
}