/* Chat window of spokz.net (chat-widget.js). Uses the colours of styles.css. */
.szc-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 62px; height: 62px; border-radius: 50%; border: 0; padding: 0;
  background: var(--grad); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(11, 99, 229, .38);
  /* No delay and no fill on the entrance: a browser that does not run the animation
     (paused timeline, some in-app browsers) still shows the button. */
  animation: szc-in .7s cubic-bezier(.2, .9, .3, 1.35), szc-float 4.5s ease-in-out 1.5s infinite;
  -webkit-tap-highlight-color: transparent;
}
.szc-btn::before, .szc-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(26, 140, 255, .6); pointer-events: none;
  animation: szc-ring 2.6s ease-out 1.2s infinite;
}
.szc-btn::after { animation-delay: 2.5s; }
.szc-btn svg { width: 30px; height: 30px; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.szc-btn:hover svg, .szc-btn:focus-visible svg { transform: rotate(-10deg) scale(1.1); }
.szc-btn .szc-dots circle { animation: szc-dot 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.szc-btn .szc-dots circle:nth-child(2) { animation-delay: .2s; }
.szc-btn .szc-dots circle:nth-child(3) { animation-delay: .4s; }
.szc-btn.szc-on { animation: none; }
.szc-btn.szc-on::before, .szc-btn.szc-on::after { display: none; }
.szc-badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #ff3b5c; color: #fff; font: 700 12px/22px var(--font);
  box-shadow: 0 0 0 2px #fff; animation: szc-pop .35s ease;
}
.szc-teaser {
  position: fixed; right: 94px; bottom: 30px; z-index: 900; max-width: 250px;
  background: #fff; color: var(--text); border: 1px solid var(--line);
  border-radius: 18px 18px 4px 18px; padding: 10px 14px; text-align: left;
  font: 14px/1.4 var(--font); box-shadow: var(--shadow-lg); cursor: pointer;
  animation: szc-pop .45s cubic-bezier(.2, .9, .3, 1.3);
}
.szc-panel {
  position: fixed; right: 20px; bottom: 94px; z-index: 901;
  width: 370px; height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px; border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(19, 33, 58, .22);
  transform-origin: bottom right; animation: szc-open .28s cubic-bezier(.2, .9, .3, 1.15);
  font-family: var(--font);
}
.szc-panel[hidden], .szc-teaser[hidden], .szc-badge[hidden] { display: none; }
.szc-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; background: var(--grad); color: #fff; }
.szc-mark { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; flex: none; }
.szc-mark svg { width: 22px; height: 22px; }
.szc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.szc-who strong { font-size: 16px; }
.szc-sub { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.szc-online { width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; animation: szc-live 2s infinite; }
.szc-fresh, .szc-close {
  border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 34px; height: 34px;
  border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; flex: none;
}
.szc-fresh { font-size: 17px; }
.szc-fresh:hover, .szc-close:hover { background: rgba(255, 255, 255, .28); }
.szc-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; }
.szc-msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; animation: szc-msg .25s ease; }
.szc-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.szc-msg a { color: inherit; text-decoration: underline; }
.szc-bot { align-self: flex-start; background: #fff; color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.szc-person { align-self: flex-start; background: #fff; color: var(--text); border: 1px solid #b9d3fb; border-bottom-left-radius: 5px; }
.szc-me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.szc-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--blue); margin-bottom: 2px; }
.szc-quick { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 7px; max-width: 94%; margin: 2px 0 4px; }
.szc-chip {
  border: 1px solid #b9d3fb; background: #fff; color: var(--blue); border-radius: 999px; padding: 8px 13px;
  font: 600 13.5px/1.25 var(--font); text-align: left; cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 99, 229, .08); transition: background .15s, color .15s, transform .15s, box-shadow .15s;
  animation: szc-msg .3s ease backwards;
}
.szc-chip:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(11, 99, 229, .25); outline: none; }
.szc-chip:active { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (hover: hover) {   /* a lift on mouse hover only: on a phone a tap would leave it stuck */
  .szc-chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 99, 229, .25); }
}
.szc-info { align-self: center; font-size: 12.5px; color: var(--muted); text-align: center; padding: 2px 10px; }
.szc-error { color: #a3122a; }
.szc-typing { display: flex; gap: 5px; padding: 13px 15px; }
.szc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: szc-dot 1.2s ease-in-out infinite; }
.szc-typing i:nth-child(2) { animation-delay: .15s; }
.szc-typing i:nth-child(3) { animation-delay: .3s; }
.szc-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; position: relative; }
.szc-input {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  font: 14.5px/1.4 var(--font); color: var(--text); background: var(--soft); max-height: 120px; outline: none;
}
.szc-input:focus { border-color: #9cc0f8; background: #fff; }
.szc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.szc-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--grad); color: #fff; cursor: pointer; display: grid; place-items: center; }
.szc-send svg { width: 20px; height: 20px; }
.szc-foot { padding: 6px 12px 10px; font-size: 11.5px; color: var(--muted); text-align: center; background: #fff; }
.szc-foot a { color: var(--muted); }

@media (max-width: 520px) {
  .szc-panel { inset: 0; width: auto; height: 100dvh; border-radius: 0; border: 0; bottom: auto; animation: none; }
  .szc-input { font-size: 16px; }   /* below 16px iPhones zoom in on the field */
  .szc-locked .szc-btn { display: none; }
  .szc-locked body { overflow: hidden; }
  /* Android 12+ stretches the whole page when a drag hits an edge; with the chat open that
     looked like the chat breathing. No stretch and no scroll chaining while it is open. */
  .szc-locked, .szc-locked body { overscroll-behavior: none; }
  .szc-panel { overscroll-behavior: none; touch-action: pan-y; }
  .szc-teaser { right: 88px; max-width: calc(100vw - 110px); }
}

@keyframes szc-in { from { transform: scale(0) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes szc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes szc-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes szc-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes szc-pop { from { transform: scale(.6) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes szc-open { from { transform: scale(.85) translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes szc-msg { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes szc-live { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 143, .7); } 70% { box-shadow: 0 0 0 7px rgba(62, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 224, 143, 0); } }

@media (prefers-reduced-motion: reduce) {
  .szc-btn::before, .szc-btn::after { display: none; }
}