/* Kundtjänstmall — chattfönster (ZAAI-chattwidgetens stil) + motor.
   Användning: <div class="ks" data-sekvens="<namn>" style="--ks-bild:url(...)"></div>
   plus kundtjanst-mall.js och kundtjanst-sekvenser.js. Se README.md i samma mapp. */
.ks {
  --ease: cubic-bezier(.2,0,0,1);
  position: relative;
  aspect-ratio: 920 / 505;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--ks-bild, #cfd3c4) var(--ks-bild-pos, center 62%) / cover no-repeat;
}
.ks *, .ks *::before, .ks *::after { box-sizing: border-box; margin: 0; }
.ks-chatt {
  --fg: #252525; --dampad: #666a78; --mutad: #f1f1f1; --kant: #e7e6e5;
  position: absolute;
  left: 50%; top: 5%;
  transform: translateX(-50%);
  width: 340px; height: 64%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 12px 32px -8px rgb(0 0 0 / .18), 0 32px 64px -24px rgb(0 0 0 / .22);
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--fg);
}
.ks-huvud { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; }
.ks-huvud .ks-namn { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.ks-huvud .ks-online { width: 6px; height: 6px; border-radius: 50%; background: #2fb36a; }
.ks-huvud .ks-ikoner { margin-left: auto; display: flex; gap: 2px; color: rgb(37 37 37 / .5); }
.ks-huvud .ks-ikoner span { width: 28px; height: 28px; display: grid; place-items: center; }
.ks-flode {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px; padding: 4px 16px 12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.ks-flode > * { flex-shrink: 0; }
.ks-fraga {
  align-self: flex-end; margin-left: 40px;
  border-radius: 18px; background: var(--mutad);
  padding: 7px 14px; font-size: 13.5px; line-height: 20px;
  animation: ks-upp 700ms cubic-bezier(.19,1,.22,1) both;
}
.ks-svar { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 21px; animation: ks-upp 600ms cubic-bezier(.19,1,.22,1) both; }
.ks-avatar {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #ececec; color: #666;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 500; line-height: 1;
}
.ks-kvitto, .ks-prickar { margin-left: 31px; }
.ks-kvitto {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(0,0,0,.09); border-radius: 12px;
  padding: 9px 12px; font-size: 12.5px;
  animation: ks-upp 600ms cubic-bezier(.19,1,.22,1) both;
}
.ks-kvitto b { font-weight: 500; }
/* Loggan för verktyget som utförde åtgärden (kvitto.verktyg) */
.ks-verktyg { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0,0,0,.09); display: grid; place-items: center; background: #fff; }
.ks-verktyg img { width: 16px; height: 16px; object-fit: contain; }
/* App-ikoner (fylld bakgrund, t.ex. PostNord) fyller hela rutan med rutans rundning */
.ks .ks-nod img.ks-app, .ks .ks-verktyg img.ks-app { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ks-verktyg:has(img.ks-app) { border-color: transparent; }
.ks-kvitto small { display: block; font-size: 11.5px; color: #8e8e8e; margin-top: 1px; }
.ks-badge { margin-left: auto; font-size: 11.5px; font-weight: 500; color: #1f7a4a; background: #e6f6ec; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ks-prickar { display: flex; gap: 4px; padding: 6px 0; }
.ks-prickar span { width: 7px; height: 7px; border-radius: 50%; background: var(--fg); opacity: .15; animation: zw-prick 1s ease infinite; }
.ks-prickar span:nth-child(2) { animation-delay: 200ms; }
.ks-prickar span:nth-child(3) { animation-delay: 400ms; }
@keyframes zw-prick { 0%, 100% { opacity: .15; } 20% { opacity: .4; } }
@keyframes ks-upp { from { opacity: 0; transform: translateY(8px); } }
.ks-fot { flex-shrink: 0; padding: 0 10px 10px; }
.ks-komp {
  position: relative; border-radius: 22px; border: 1px solid var(--kant);
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .04), 0 2px 5px rgb(0 0 0 / .04);
  padding: 11px 48px 11px 15px; font-size: 13.5px; line-height: 20px; min-height: 44px;
  color: var(--fg);
}
.ks-komp .ks-plats { color: rgb(102 106 120 / .7); }
.ks-komp .ks-skriv:not(:empty) + .ks-plats { display: none; }
.ks-komp .ks-skriv:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 14px; background: #333; vertical-align: -2px; margin-left: 1px; animation: ks-blink 1s steps(1) infinite; }
.ks-skicka {
  position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #111;
  background: #fff;
  border: 1px solid var(--kant);
  box-shadow: 0 1px 3px rgb(0 0 0 / .08);
  transition: transform .16s var(--ease);
}
.ks-skicka.tryck { transform: scale(.9); }

/* Motorn under chatten */
.ks-motor {
  position: absolute; left: 50%; bottom: 5.5%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ks-steg { position: relative; display: flex; gap: 22px; }
.ks-steg::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 50%;
  border-top: 1px dashed rgba(255,255,255,.85);
}
.ks-nod {
  position: relative;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: #6b6b6b;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: background .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease), color .24s var(--ease);
}
.ks-nod img { width: 17px; height: 17px; opacity: .55; transition: opacity .24s var(--ease); }
.ks-nod svg { width: 17px; height: 17px; }
.ks-nod.aktiv { background: #fff; color: #202020; transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.14); }
.ks-nod.aktiv img, .ks-nod.klar img { opacity: 1; }
.ks-nod.klar { background: rgba(255,255,255,.95); color: #202020; }
.ks-nod.klar::after {
  content: ""; position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: #2fb36a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 6.2l1.7 1.7L8.6 4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px #fff;
  animation: ks-pop .3s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes ks-pop { from { transform: scale(.4); opacity: 0; } }
.ks-status {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(40,40,40,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; letter-spacing: -.005em;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.ks-status.byter, .ks-status.vilar { opacity: 0; transform: translateY(3px); }
.ks-status .ks-snurra { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; border-top-color: transparent; animation: ks-snurr .8s linear infinite; }
.ks-status.klar .ks-snurra { border: 0; width: 7px; height: 7px; background: #5ee39a; animation: none; }
@keyframes ks-snurr { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ks-fraga, .ks-svar, .ks-kvitto, .ks-nod.klar::after { animation: none; }
  .ks-nod, .ks-status { transition: none; }
}

@keyframes ks-blink { 50% { opacity: 0; } }

/* Liten variant (.ks.ks-liten) — samma innehåll och rörelse, byggd i naturlig storlek för små ytor
   (t.ex. Lösningar-menyn, ca 368×440) i stället för att skala ner hela mallen. Fyller sin förälder. */
.ks.ks-liten { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }
.ks-liten .ks-chatt { top: 22px; width: 312px; height: 296px; border-radius: 20px; }
.ks-liten .ks-huvud { height: 40px; padding: 0 10px 0 14px; }
.ks-liten .ks-huvud .ks-namn { font-size: 12.5px; }
.ks-liten .ks-huvud .ks-ikoner span { width: 24px; height: 24px; }
.ks-liten .ks-flode { gap: 10px; padding: 4px 14px 10px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
.ks-liten .ks-fraga { margin-left: 32px; border-radius: 16px; padding: 6px 12px; font-size: 12.5px; line-height: 18px; }
.ks-liten .ks-svar { gap: 8px; font-size: 12.5px; line-height: 19px; }
.ks-liten .ks-avatar { width: 20px; height: 20px; font-size: 10.5px; }
.ks-liten .ks-kvitto, .ks-liten .ks-prickar { margin-left: 28px; }
.ks-liten .ks-kvitto { gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12px; }
.ks-liten .ks-kvitto small, .ks-liten .ks-badge { font-size: 11px; }
.ks-liten .ks-badge { padding: 2px 8px; }
.ks-liten .ks-verktyg { width: 24px; height: 24px; border-radius: 7px; }
.ks-liten .ks-verktyg img { width: 14px; height: 14px; }
.ks-liten .ks-prickar span { width: 6px; height: 6px; }
.ks-liten .ks-fot { padding: 0 8px 8px; }
.ks-liten .ks-komp { border-radius: 19px; padding: 9px 42px 9px 13px; font-size: 12.5px; line-height: 18px; min-height: 38px; }
.ks-liten .ks-komp .ks-skriv:not(:empty)::after { height: 13px; }
.ks-liten .ks-skicka { right: 5px; bottom: 5px; width: 28px; height: 28px; }
.ks-liten .ks-motor { bottom: 20px; gap: 10px; }
.ks-liten .ks-steg { gap: 16px; }
.ks-liten .ks-steg::before { left: 16px; right: 16px; }
.ks-liten .ks-nod { width: 32px; height: 32px; border-radius: 8px; }
.ks-liten .ks-nod img, .ks-liten .ks-nod svg { width: 15px; height: 15px; }
.ks-liten .ks-nod.klar::after { width: 11px; height: 11px; background-size: 11px; }
.ks-liten .ks-status { font-size: 11px; padding: 5px 11px; }