/* ZAAI Assistent — chattwidgeten på desktop (från 2026-09-23).
   Förlagan är mockupen i ZAAI Kundportal (stil-lab/chatt-widget.html): en svart
   cirkel som fjädrar ut till ett chattfönster, med rörelser uppmätta i OpenAI:s
   ChatKit. Visas bara från 1280 px; mobil och tablet behåller den äldre widgeten
   i index.html tills vidare. */
.zw-hornet {
  --zw-fg: #252525;
  --zw-dampad: #666a78;
  --zw-yta: #fff;
  --zw-mutad: #f1f1f1;
  --zw-kant: #e7e6e5;
  --zw-fokus: #249bff;
  --zw-shimmer: linear-gradient(120deg, #8b5cf6 0%, #c084fc 50%, #e879a8 100%);
  --zw-bredd: min(384px, calc(100vw - 32px));
  --zw-hojd: min(620px, calc(100dvh - 48px));
  --ck-enter: cubic-bezier(0.19, 1, 0.22, 1);
  --ck-exit-snappy: cubic-bezier(0.65, 0, 0.4, 1);
  --zw-fjader: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483001;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--zw-fg);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1280px) {
  .zw-hornet { display: block; }
  #zaai-bubble, #zaai-panel { display: none !important; }
}
.zw-hornet *, .zw-hornet *::before, .zw-hornet *::after { box-sizing: border-box; }
.zw-hornet button { font: inherit; margin: 0; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.zw-hornet p, .zw-hornet h2, .zw-hornet ol, .zw-hornet ul { margin: 0; padding: 0; }
.zw-hornet ol, .zw-hornet ul { list-style: none; }
.zw-hornet [hidden] { display: none !important; }
.zw-hornet :focus-visible { outline: 2px solid var(--zw-fokus); outline-offset: 2px; }

/* Ytan: cirkel ↔ fönster. Stängning glider ut, öppning fjädrar. */
.zw-yta {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: #B1D8F2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  transform-origin: bottom right;
  will-change: width, height;
  transition: width .35s ease-out, height .35s ease-out, border-radius .35s ease-out, background-color .3s ease-out, transform .2s ease-out;
}
.zw-yta.is-oppen {
  width: var(--zw-bredd);
  height: var(--zw-hojd);
  border-radius: 24px;
  background-color: var(--zw-yta);
  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);
  transition: width .5s var(--zw-fjader), height .5s var(--zw-fjader), border-radius .5s var(--zw-fjader), background-color .3s ease-out, transform .2s ease-out;
}
.zw-yta:not(.is-oppen):hover { transform: scale(1.05); }
.zw-yta:not(.is-oppen):active { transform: scale(.96); }

.zw-bubbla {
  position: absolute; right: 0; bottom: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: all .3s var(--zw-fjader);
}
/* Den allmänna knappnollställningen (.zw-hornet button) väger tyngre och
   ärver den mörka färgen, och sajtens mobilstil krymper ikonen. */
.zw-hornet .zw-bubbla { color: #fff; }
/* Stängd: den äldre shimmern rosa → ljusblå, mest ljusblå. Öppen: fönstrets egen yta. */
.zw-yta:not(.is-oppen) { background-image: linear-gradient(135deg, #e879a8 0%, #B1D8F2 55%, #B1D8F2 100%); }
.zw-hornet .zw-bubbla svg { flex: none; width: 24px; height: 24px; max-width: none; }
.zw-yta.is-oppen .zw-bubbla { opacity: 0; transform: scale(.5); filter: blur(4px); pointer-events: none; }

/* Fönstret har alltid full storlek; ytan runt klipper fram det. */
.zw-fonster {
  position: absolute; right: 0; bottom: 0;
  width: var(--zw-bredd); height: var(--zw-hojd);
  display: flex; flex-direction: column;
  opacity: 0; filter: blur(6px); transform: translateY(8px);
  pointer-events: none;
  transition: opacity .15s ease-out, filter .15s ease-out, transform .15s ease-out;
}
.zw-fonster.is-synlig {
  opacity: 1; filter: blur(0); transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s ease-out .12s, filter .3s ease-out .12s, transform .4s var(--zw-fjader) .12s;
}

.zw-huvud { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 48px; flex-shrink: 0; padding: 0 10px; }

/* Ikonknappar: grått lager som tonar in och växer från 96 %, 150 ms. */
.zw-ikon {
  position: relative;
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(37 37 37 / .72);
  transition: color 150ms ease, opacity 150ms ease;
}
.zw-ikon > * { position: relative; }
.zw-ikon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgb(0 0 0 / .08); opacity: 0; transform: scale(.96);
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.zw-ikon:hover { color: var(--zw-fg); }
.zw-ikon:hover::before { opacity: 1; transform: scale(1); }
.zw-ikon:active::before { background: rgb(0 0 0 / .12); transform: scale(.96); }
.zw-ny.is-dold { opacity: 0; pointer-events: none; }

.zw-flode {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 8px 16px 16px;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.zw-flode:hover { scrollbar-color: rgb(102 106 120 / .3) transparent; }

/* ---------- Startskärmen ---------- */
.zw-start { margin-top: auto; display: flex; flex-direction: column; }
.zw-rubrik { padding: 0 4px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; color: var(--zw-fg); }
.zw-ingress { margin-top: 8px !important; padding: 0 4px !important; font-size: 14px; line-height: 1.625; color: var(--zw-dampad); }
.zw-val { margin: 16px -4px 0 !important; display: flex; flex-direction: column; }

.zw-in { animation: zw-upp-10 700ms var(--ck-enter) var(--in, 0ms) both; }
.zw-fonster:not(.is-synlig) .zw-in { animation: none; opacity: 0; }
.zw-start.lamnar .zw-del { animation: zw-ned-10 250ms var(--ck-exit-snappy) var(--ut, 0ms) forwards; pointer-events: none; }
@keyframes zw-upp-10 { from { opacity: 0; transform: translateY(10px); } }
@keyframes zw-ned-10 { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }

.zw-rad {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px !important; border-radius: 12px;
  text-align: left; font-size: 15px; line-height: 1.45;
  color: rgb(37 37 37 / .72) !important;
  transition: color 250ms var(--ck-enter);
}
.zw-rad > * { position: relative; flex-shrink: 0; }
.zw-rad .zw-etikett { flex: 1; min-width: 0; }
.zw-rad::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #000; opacity: 0; transform: scale(.99);
  transition: opacity 250ms var(--ck-enter), transform 250ms var(--ck-enter);
}
.zw-rad:hover, .zw-rad:focus-visible { color: var(--zw-fg) !important; }
.zw-rad:hover::before, .zw-rad:focus-visible::before { opacity: .04; transform: scale(1); }
.zw-rad:active::before { opacity: .06; transform: scale(.99); }
.zw-rad-pil { opacity: 0; transition: opacity 250ms var(--ck-enter); }
.zw-rad:hover .zw-rad-pil, .zw-rad:focus-visible .zw-rad-pil { opacity: .4; }

/* ---------- Samtalet ---------- */
.zw-samtal { display: flex; flex-direction: column; gap: 20px; padding-top: 8px !important; animation: zw-tona-in 600ms ease both; }
.zw-samtal.lamnar { animation: zw-tona-ut 350ms ease forwards; }
@keyframes zw-tona-in { from { opacity: 0; } }
@keyframes zw-tona-ut { to { opacity: 0; } }

.zw-fraga {
  align-self: flex-end; margin-left: 48px;
  border-radius: 20px; background: var(--zw-mutad);
  padding: 8px 16px; font-size: 15px; line-height: 22px; color: var(--zw-fg);
  white-space: pre-line; overflow-wrap: anywhere;
}
.zw-fraga.forsta { animation: zw-upp-20 900ms var(--ck-enter) both; }
.zw-fraga.senare { animation: zw-upp-lang 900ms var(--ck-enter) both; }
@keyframes zw-upp-20 { from { opacity: 0; transform: translateY(20px); } }
@keyframes zw-upp-lang { from { transform: translateY(calc(var(--zw-hojd) * .25)); } }

.zw-svar { position: relative; }
.zw-svar-inre { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.zw-svar-inre.ny { animation: zw-upp-3 600ms var(--ck-enter) 400ms both; }
@keyframes zw-upp-3 { from { opacity: 0; transform: translateY(3px); } }
.zw-text {
  position: relative; width: 100%; overflow: hidden;
  font-size: 15px; line-height: 24px; color: var(--zw-fg);
  white-space: pre-line; overflow-wrap: anywhere;
}
.zw-text.fel { color: #b42318; }
.zw-tacke {
  position: absolute; left: 0; width: 300%; height: 24px; pointer-events: none;
  background: linear-gradient(to right, transparent 0 33.33%, var(--zw-yta) 66.66% 100%);
  transform: translateX(-66.66%);
  animation: zw-svep-rad 340ms linear forwards;
}
@keyframes zw-svep-rad { to { transform: translateX(0); } }

.zw-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.zw-knappar.ny {
  -webkit-mask-image: linear-gradient(to right, #000 33.33%, transparent 66.66%);
  mask-image: linear-gradient(to right, #000 33.33%, transparent 66.66%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: zw-tona-in 900ms ease both, zw-svep-mask 900ms ease both;
}
@keyframes zw-svep-mask {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.zw-lank {
  width: auto; height: auto;
  gap: 6px; padding: 6px 14px !important;
  border: 1px solid var(--zw-kant) !important;
  font-size: 14px; font-weight: 500; color: var(--zw-fg);
}
.zw-lank::before { background: rgb(0 0 0 / .04); }

/* Tre prickar, 8 px, pulserar 0,15 → 0,4 → 0,15 på 1 s, 200 ms isär. */
.zw-prickar { display: flex; width: fit-content; align-items: center; gap: 4px; padding: 8px 0; }
.zw-prickar span { width: 8px; height: 8px; border-radius: 999px; background: var(--zw-fg); opacity: .15; animation: zw-prick 1s ease infinite; }
.zw-prickar span:nth-child(2) { animation-delay: 200ms; }
.zw-prickar span:nth-child(3) { animation-delay: 400ms; }
@keyframes zw-prick { 0%, 100% { opacity: .15; } 20% { opacity: .4; } }
.zw-prickar.in { animation: zw-tona-in 600ms var(--ck-enter) 80ms both; }
.zw-prickar.ut { position: absolute; left: 0; top: 0; animation: zw-prickar-ut 500ms var(--ck-exit-snappy) forwards; }
@keyframes zw-prickar-ut { to { opacity: 0; transform: translateY(-5px); } }

/* ---------- Skrivfältet ---------- */
.zw-fot { flex-shrink: 0; padding: 0 12px 10px; }
.zw-komponent {
  position: relative; border-radius: 26px;
  border: 1px solid var(--zw-kant); background: var(--zw-yta);
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .04), 0 9px 9px rgb(0 0 0 / .012), 0 2px 5px rgb(0 0 0 / .04);
  transition: box-shadow 200ms ease;
}
.zw-komponent:focus-within {
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .04), 0 2px 12px rgb(0 0 0 / .04), 0 9px 9px rgb(0 0 0 / .012), 0 2px 5px rgb(0 0 0 / .06);
}
.zw-falt {
  display: block; width: 100%; resize: none; border: 0; background: transparent; margin: 0;
  font: inherit; font-size: 15px; line-height: 22px; color: var(--zw-fg);
  padding: 15px 52px 15px 18px;
  outline: none !important;
  transition: padding 200ms ease;
  scrollbar-width: none;
}
.zw-falt::placeholder { color: rgb(102 106 120 / .7); }
.zw-komponent.is-utfallt .zw-falt { padding: 14px 18px 52px 18px; }

/* Skickaknappen bär ZAAI:s shimmer; medan svaret kommer blir den grå med snurra. */
.zw-skicka {
  position: absolute !important; right: 8px; bottom: 8px;
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background-color: #c084fc !important; color: #fff !important;
  box-shadow: 0 2px 8px -2px rgb(139 92 246 / .5);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.zw-skicka::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--zw-shimmer); transition: opacity 150ms ease; }
.zw-skicka:hover { opacity: .9; }
.zw-skicka.is-vantar { background-color: rgb(0 0 0 / .05) !important; color: #8f8f8f !important; box-shadow: none; cursor: default; }
.zw-skicka.is-vantar::before { opacity: 0; }
.zw-skicka-pil, .zw-snurra-hallare { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.zw-skicka-pil { transition: all 300ms var(--zw-fjader); }
.zw-skicka.is-vantar .zw-skicka-pil { opacity: 0; transform: scale(.5) rotate(45deg); filter: blur(1px); }
.zw-snurra-hallare { opacity: 0; transition: opacity 150ms ease; }
.zw-skicka.is-vantar .zw-snurra-hallare { opacity: 1; transition-delay: 100ms; }
.zw-snurra { width: 16px; height: 16px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: zw-snurra 800ms linear infinite; }
@keyframes zw-snurra { to { transform: rotate(360deg); } }

.zw-disc { margin-top: 8px !important; text-align: center; font-size: 12px; color: rgb(102 106 120 / .7); }

@media (prefers-reduced-motion: reduce) {
  .zw-yta, .zw-yta.is-oppen { transition: background-color .2s ease-out !important; }
  .zw-yta:not(.is-oppen):hover, .zw-yta:not(.is-oppen):active { transform: none; }
  .zw-fonster, .zw-fonster.is-synlig { filter: none; transform: none; transition: opacity .2s ease-out; }
  .zw-in, .zw-fraga.forsta, .zw-fraga.senare, .zw-svar-inre.ny, .zw-knappar.ny, .zw-prickar.in { animation: zw-tona-in .2s ease-out both; }
  .zw-start.lamnar .zw-del, .zw-prickar.ut { animation: zw-tona-ut .2s ease-out forwards; }
  .zw-tacke { animation-duration: 1ms; }
  .zw-prickar span, .zw-snurra { animation: none; }
  .zw-falt { transition: none; }
}