/* The chat itself: everything that comes with w-chat.js, on top of design/widget-boble.css (the variables, the bubble and
   the greeting). Lives inside a Shadow DOM on the customer's site. The look follows A-JOB's chatbot demo (chosen by
   Benjamin 4 Nov 2026): white header with a status line, warm grey answers, the customer's colour on the visitor's
   messages, the send button, the form button and the bubble's border. */

/* Panel */
.sw-panel { display:none; flex-direction:column; width:380px; height:600px; max-height:min(80vh,600px); background:#fff; border-radius:18px; box-shadow:0 28px 70px -22px rgba(23,21,18,.5), 0 0 0 1px rgba(23,21,18,.06); overflow:hidden; transform-origin:bottom right; }
.sw.apen .sw-panel { display:flex; margin-bottom:0; animation:sw-inn .18s ease-out; }
.sw.apen .sw-boble { display:none; }
@keyframes sw-inn { from { opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes sw-fram { from { opacity:0; transform:translateY(4px); } }

/* Header: white, round logo, the name with «Svarer nå» under it, and a chevron that closes */
.sw-topp { position:relative; z-index:1; display:flex; align-items:center; gap:12px; padding:14px 10px 14px 16px; background:#fff; border-bottom:1px solid var(--sw-skille); transition:box-shadow .2s; }
.sw-panel.sw-rullet .sw-topp { box-shadow:0 8px 16px -14px rgba(23,21,18,.35); }
.sw-logo { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; overflow:hidden; background:var(--kd); color:var(--kdt); font-size:15px; font-weight:600; line-height:1; }
.sw-logo:has(img) { background:#fff; padding:5px; box-shadow:inset 0 0 0 1px var(--sw-skille); }
.sw-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.sw-logo.person { padding:0; background:var(--sw-grå); box-shadow:none; animation:sw-fram .3s ease-out; }
.sw-logo.person img { object-fit:cover; }
.sw-tittel { flex:1; min-width:0; display:flex; flex-direction:column; }
/* Up to two lines before anything is cut: the button beside it takes room on a phone. */
.sw-navn { font-size:15px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:break-word; }
/* The name takes focus when a page opens the chat on a phone (for a screen reader); it is no control, so no ring. */
.sw-navn:focus { outline:none; }
.sw-status { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; line-height:1.4; color:var(--sw-gronn); }
.sw-status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.sw-lukk, .sw-prikker { width:36px; height:36px; border:0; background:transparent; color:var(--sw-svak); border-radius:10px; cursor:pointer; display:grid; place-items:center; flex:none; transition:background-color .12s, color .12s; }
.sw-lukk:hover, .sw-prikker:hover { background:var(--sw-grå); color:var(--sw-tekst); }
.sw-lukk svg, .sw-prikker svg { width:22px; height:22px; }
/* The menu behind the three dots: a small white card over the log, with room for a thumb. The items are .sw-navknapp. The
   dots and the chevron stand a little closer, so the name keeps its room. */
.sw-prikker + .sw-lukk { margin-left:-8px; }
.sw-meny { position:absolute; top:100%; right:10px; display:grid; min-width:190px; padding:5px; background:#fff; border-radius:16px; box-shadow:0 14px 34px -14px rgba(23,21,18,.4), 0 0 0 1px rgba(23,21,18,.06); }
.sw-meny button { height:44px; padding:0 11px; color:var(--sw-tekst); }

/* Messages */
.sw-logg { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 16px 12px; display:flex; flex-direction:column; gap:12px; }
.sw-melding { max-width:88%; padding:11px 14px; border-radius:16px; overflow-wrap:anywhere; }
.sw-melding a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sw-bot { align-self:flex-start; background:var(--sw-grå); border-bottom-left-radius:4px; }
.sw-meg { align-self:flex-end; background:var(--kd); color:var(--kdt); border-bottom-right-radius:4px; }
/* Answers with paragraphs and short lists (the bot uses lists when they make the answer easier to read) */
.sw-melding p { margin:0; }
.sw-melding p + p, .sw-melding p + ul, .sw-melding ul + p { margin-top:8px; }
.sw-melding ul { margin:4px 0 0; padding-left:20px; }
.sw-melding li + li { margin-top:3px; }
/* Sources: small, quiet links under the answer */
.sw-kilder { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:8px; font-size:12.5px; line-height:1.45; }
.sw-kilder a { color:var(--sw-svak); text-decoration:underline; text-decoration-color:#C9C2B6; text-underline-offset:3px; }
.sw-kilder a:hover { color:var(--sw-tekst); text-decoration-color:currentColor; }
/* Suggestions: outlined pills that sit just above the input while the log is short */
.sw-forslag { display:flex; flex-wrap:wrap; gap:8px; align-self:stretch; margin-top:auto; }
.sw-forslag button, .sw-hurtigsvar button { border:1px solid var(--sw-linje); background:var(--sw-lys); border-radius:16px; padding:8px 13px; font:inherit; font-size:13.5px; font-weight:500; line-height:1.35; text-align:start; cursor:pointer; color:var(--sw-tekst); transition:border-color .12s; }
.sw-forslag button:hover, .sw-hurtigsvar button:hover { border-color:var(--sw-tekst); }
/* Quick replies: the same pills right under the latest answer, on the visitor's side, since a click sends the text
   as their message. Close to the answer they belong to; they wrap on a phone and fade in once the answer is done. */
.sw-hurtigsvar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; align-self:flex-end; max-width:88%; margin-top:-4px; animation:sw-fram .25s ease-out; }
.sw-skriver { align-self:flex-start; background:var(--sw-grå); border-radius:16px; border-bottom-left-radius:4px; padding:14px 16px; display:flex; gap:5px; }
.sw-skriver span { width:7px; height:7px; border-radius:50%; background:#B9B2A6; animation:sw-prikk 1.2s infinite; }
.sw-skriver span:nth-child(2) { animation-delay:.15s; } .sw-skriver span:nth-child(3) { animation-delay:.3s; }
@keyframes sw-prikk { 50% { opacity:.25; } }

/* A human joins: system lines, and the person's messages with a small round photo */
.sw-system { align-self:center; display:flex; align-items:center; justify-content:center; gap:8px; max-width:90%; margin:4px 0 0; font-size:12.5px; line-height:1.4; color:var(--sw-svak); text-align:center; }
.sw-system b { color:var(--sw-tekst); font-weight:600; }
.sw-puls { position:relative; width:7px; height:7px; border-radius:50%; background:var(--sw-gronn); flex:none; }
.sw-puls::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:sw-puls 1.5s ease-out infinite; }
@keyframes sw-puls { from { transform:scale(1); opacity:.45; } to { transform:scale(2.8); opacity:0; } }
.sw-pakoblet { flex-direction:column; gap:6px; margin:8px 0 4px; animation:sw-fram .3s ease-out; }
.sw-avatar { width:26px; height:26px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center; background:var(--kd); color:var(--kdt); font-size:12px; font-weight:700; line-height:1; }
.sw-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.sw-pakoblet .sw-avatar { width:40px; height:40px; font-size:16px; }
.sw-fra { align-self:flex-start; display:flex; align-items:flex-end; gap:8px; max-width:calc(88% + 34px); }
.sw-fra > .sw-melding, .sw-fra > .sw-skriver { max-width:none; min-width:0; }

/* Live chat (del 3, the approved sketch docs/skisser/live-chat, 5 Nov 2026).
   «Snakk med en person» in the header, when someone is free: the quick-reply pill, a little lower. */
.sw-person { flex:none; min-height:32px; max-width:92px; padding:5px 10px; border:1px solid var(--sw-linje); border-radius:14px; background:var(--sw-lys); color:var(--sw-tekst); font:inherit; font-size:13px; font-weight:500; line-height:1.15; cursor:pointer; transition:border-color .12s; }
.sw-person:hover { border-color:var(--sw-tekst); }
/* The button is on two lines, so the name beside it stays whole with the three dots there too. */
@media (max-width:420px) {
  .sw-topp { gap:8px; }
}
/* The narrowest phones: the button takes the logo's place, so a short name stays on one line. */
@media (max-width:340px) {
  .sw-logo:has(~ .sw-person:not([hidden])) { display:none; }
}
/* Busy with an answer: what is sent now waits its turn. */
.sw-send[aria-disabled="true"] { opacity:.55; cursor:progress; }
/* The person in the header: initials when there is no photo, in the customer colour like .sw-avatar */
.sw-logo.person.initialer { background:var(--kd); color:var(--kdt); font-size:14px; font-weight:700; }
/* Waiting for a person: the bot's line, and a small pulse under it */
.sw-venter { margin-top:-4px; }
/* The person's messages: the first name above the first message in a row */
.sw-fra-inn { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
/* The row has the width limit: 88% of a column that is as wide as its text would wrap a short message too early. */
.sw-fra-inn > .sw-melding { max-width:none; }
.sw-avsender { font-size:12px; line-height:1.3; color:var(--sw-svak); padding-left:4px; }
.sw-fra .sw-avatar { margin-bottom:1px; }
/* «Harald skriver …» beside the dots */
.sw-skriver-tekst { align-self:center; font-size:12.5px; color:var(--sw-svak); white-space:nowrap; }
.sw-fra.skriver { align-items:center; }
/* Open and close on the new designs (widget.ts): the panel fades out, and the bubble comes softly back. On a PC «Kort»
   grows up into the chat: the header rises from where the card was, the rest follows under it. --ph is the panel's height;
   64px is the card's height and 40px the difference in width (340 against 380). */
.sw.lukker .sw-panel { animation:sw-ut .14s ease-in both; }
@keyframes sw-ut { to { opacity:0; transform:translateY(8px) scale(.98); } }
.sw.tilbake .sw-boble { animation:sw-boble-inn .2s ease-out; }
@keyframes sw-boble-inn { from { opacity:0; transform:scale(.92); } }
.sw.fra-kort { --ph:min(80vh,600px); }
.sw.fra-kort.tilbake .sw-boble { animation:none; }
.sw.fra-kort.apen .sw-panel { animation:sw-kort-inn .32s cubic-bezier(.2,.8,.2,1) backwards; }
.sw.fra-kort.apen:not(.lukker) .sw-lukk svg { animation:sw-snu .32s cubic-bezier(.2,.8,.2,1) backwards; }
.sw.fra-kort.apen .sw-topp { animation:sw-topp-inn .32s cubic-bezier(.2,.8,.2,1) backwards; }
.sw.fra-kort.lukker .sw-panel { animation:sw-kort-ut .24s cubic-bezier(.4,0,.6,1) forwards; }
.sw.fra-kort.lukker .sw-topp { animation:sw-topp-ut .24s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes sw-topp-inn { from { padding-left:56px; } }
@keyframes sw-topp-ut { to { padding-left:56px; } }
@keyframes sw-kort-inn {
  from { transform:translateY(calc(var(--ph) - 64px)); clip-path:inset(0 0 calc(var(--ph) - 64px) 40px round 16px); box-shadow:0 28px 70px -22px rgba(23,21,18,.5), 0 0 0 1px rgba(23,21,18,.06); }
  to { transform:none; clip-path:inset(0 0 0 0 round 18px); }
}
@keyframes sw-kort-ut {
  from { transform:none; clip-path:inset(0 0 0 0 round 18px); }
  to { transform:translateY(calc(var(--ph) - 64px)); clip-path:inset(0 0 calc(var(--ph) - 64px) 40px round 16px); }
}
@keyframes sw-snu { from { transform:rotate(180deg); } }
/* Contact form in the chat, in a grey bubble. Navn full width, E-post and Telefon side by side (stacked on a phone).
   The labels are read by screen readers and shown as placeholders. Sent, it stays as a receipt. */
.sw-skjema { align-self:stretch; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; background:var(--sw-grå); border-radius:16px; border-bottom-left-radius:4px; }
.sw-skjema > * { grid-column:1 / -1; }
.sw-skjema > .sw-felt:has(input[type="email"]):has(+ .sw-felt), .sw-skjema > .sw-felt:has(input[type="tel"]) { grid-column:auto; }
.sw-skjema b { font-weight:600; }
.sw-skjema b + p { margin-top:-6px; }
.sw-skjema p { margin:0; color:var(--sw-svak); font-size:14px; line-height:1.45; }
.sw-felt { display:grid; min-width:0; }
.sw-felt input { width:100%; min-width:0; height:42px; border:1px solid #D3CDC1; border-radius:10px; padding:0 12px; font:inherit; font-size:15px; color:var(--sw-tekst); background:#fff; }
.sw-felt input::placeholder { color:#716D66; opacity:1; }
.sw-felt input:focus { outline:none; border-color:var(--sw-tekst); }
.sw-knapp { justify-self:start; height:38px; margin-top:4px; padding:0 20px; border:0; border-radius:99px; background:var(--kd); color:var(--kdt); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.sw-knapp:hover { filter:brightness(.94); }
.sw-knapp:disabled { opacity:.6; cursor:progress; }
.sw-ok { display:none; }
.sw-skjema.sendt { display:flex; flex-direction:column; gap:4px; }
.sw-skjema.sendt .sw-ok { display:flex; align-items:center; gap:8px; font-weight:600; }
.sw-skjema.sendt .sw-ok i { width:20px; height:20px; border-radius:50%; background:var(--sw-gronn); color:#fff; display:grid; place-items:center; font-style:normal; flex:none; }
.sw-skjema.sendt .sw-ok i svg { display:block; width:13px; height:13px; }
.sw-skjema.sendt p { margin:0; padding-left:28px; color:var(--sw-tekst); }
.sw-feil { align-self:stretch; font-size:13px; color:var(--sw-svak); text-align:center; padding:0 8px; }
.sw-skjema .sw-skjemafeil { color:#B42318; font-size:13px; }
.sw-skjema .sw-personvern { font-size:12.5px; line-height:1.4; }
.sw-felt input[aria-invalid="true"] { border-color:#B42318; }
/* Invalid and focused: the red border doubles, so focus still shows */
.sw-felt input[aria-invalid="true"]:focus { box-shadow:0 0 0 1px #B42318; }

/* The robot check (Turnstile) on the Svarly host. Keeps its size while it works in the background, and is only
   shown when Cloudflare asks the visitor to click. */
.sw-robot { height:0; overflow:hidden; margin:0 12px; }
.sw-robot.vis { height:auto; margin-bottom:8px; }
.sw-robot iframe { display:block; width:100%; height:70px; border:0; }

/* Input and footer */
.sw-inn { display:flex; align-items:flex-end; gap:8px; margin:0 12px; padding:7px 7px 7px 14px; border:1px solid var(--sw-linje); border-radius:14px; background:var(--sw-lys); transition:border-color .12s; }
.sw-inn:focus-within { border-color:var(--sw-tekst); }
.sw-inn textarea, .sw-inn input { flex:1; min-width:0; border:0; outline:none; resize:none; font:inherit; font-size:15px; line-height:1.45; padding:7px 0; max-height:96px; background:transparent; color:var(--sw-tekst); }
.sw-inn textarea::placeholder { color:#716D66; opacity:1; }
.sw-send { width:36px; height:36px; border-radius:10px; border:0; background:var(--kd); color:var(--kdt); display:grid; place-items:center; cursor:pointer; flex:none; }
.sw-send svg { width:18px; height:18px; }
/* Under the input: that the answers come from AI (with the privacy link), then the bottom line */
.sw-fot { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 12px 11px; font-size:12px; line-height:1.35; color:#716D66; font-family:"Instrument Sans", system-ui, sans-serif; text-align:center; }
.sw-ai { margin:0; }
.sw-ai a, .sw-personvern a { color:inherit; text-decoration:underline; text-decoration-color:#C9C2B6; text-underline-offset:2px; }
.sw-ai a:hover, .sw-personvern a:hover { color:var(--sw-tekst); text-decoration-color:currentColor; }
.sw-levert { display:flex; align-items:center; gap:6px; }
.sw-levert a { color:inherit; text-decoration:none; display:flex; align-items:center; gap:6px; }
.sw-levert a:hover { color:var(--sw-tekst); }
.sw-levert svg { display:block; width:12px; height:12px; }
/* A-JOB's mark, as in the chatbot demo's bottom line */
.sw-levert .sw-ajob { width:19px; opacity:.75; }

/* «Chatten avsluttes» (approved sketch docs/skisser/regler, 7 Nov 2026): one screen inside the chat, in the chatbot's own
   colours, in the place of the log, the input and the footer. The header stays, with the way to close. */
.sw-panel.avslutter .sw-logg, .sw-panel.avslutter .sw-robot, .sw-panel.avslutter .sw-inn, .sw-panel.avslutter .sw-fot, .sw-panel.avslutter .sw-prikker, .sw-panel.avslutter .sw-person, .sw-panel.avslutter .sw-meny { display:none; }
.sw-avslutt { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:18px; padding:18px 18px 16px; }
.sw-avslutt h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.sw-avslutt h2:focus { outline:none; }
/* What a person wrote last, as it stood in the chat. A long message scrolls inside the box, so the heading that has the
   focus and the stars stay on a small phone's screen. flex:none: a box that scrolls would otherwise shrink to nothing. */
.sw-sitat { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; max-height:min(150px, 27vh); overflow-y:auto; overscroll-behavior:contain; }
.sw-sitat:focus-visible { outline:2px solid var(--sw-tekst); outline-offset:2px; }
.sw-sitat .sw-melding { max-width:100%; }
.sw-avslutt-ny { margin:0; font-size:14px; font-weight:500; }
.sw-sporsmal { margin:0; padding:0; border:0; min-width:0; display:grid; gap:8px; }
.sw-sporsmal legend { padding:0; margin-bottom:8px; font-weight:500; }
/* The choices are real radio buttons over the whole of each label, without a look of their own. */
.sw-stjerner { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.sw-stjerner label { position:relative; display:grid; place-items:center; height:44px; border-radius:10px; cursor:pointer; }
.sw-stjerner input, .sw-janei input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.sw-stjerner svg { width:36px; height:36px; border-radius:8px; fill:none; stroke:var(--sw-svak); stroke-width:1.4; stroke-linejoin:round; transition:fill .1s, stroke .1s; }
/* The chosen star and all before it (.paa, avslutning.ts), and on a PC the ones under the mouse. The stars before the one
   under the mouse need :has(): a rule of their own, so a browser without it only loses that, and nothing more. */
.sw-stjerner label.paa svg { fill:var(--kd); stroke:var(--kd); }
@media (hover:hover) {
  .sw-stjerner label:hover svg { fill:var(--kd); stroke:var(--kd); }
  .sw-stjerner label:has(~ label:hover) svg { fill:var(--kd); stroke:var(--kd); }
  .sw-janei label:hover span { border-color:var(--sw-tekst); }
  .sw-valgknapp:hover { border-color:var(--sw-tekst); }
}
.sw-stjerner input:focus-visible ~ svg, .sw-janei input:focus-visible + span { outline:2px solid var(--sw-tekst); outline-offset:1px; }
.sw-skala { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--sw-svak); }
.sw-janei { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sw-janei label { position:relative; border-radius:10px; cursor:pointer; }
.sw-janei span { display:grid; place-items:center; height:42px; border:1px solid var(--sw-linje); border-radius:10px; background:#fff; font-weight:500; transition:border-color .12s, background-color .12s, color .12s; }
.sw-janei input:checked + span { background:var(--kd); border-color:var(--kd); color:var(--kdt); }
.sw-avslutt-feil { margin:0; color:#B42318; font-size:13px; }
.sw-avslutt-knapper { display:grid; gap:8px; margin-top:auto; }
.sw-avslutt-knapper .sw-knapp, .sw-valgknapp { justify-self:stretch; height:42px; margin:0; padding:0 16px; border-radius:99px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.sw-avslutt-knapper .sw-knapp[aria-disabled="true"], .sw-valgknapp[aria-disabled="true"] { opacity:.6; cursor:progress; }
.sw-valgknapp { border:1px solid var(--sw-linje); background:#fff; color:var(--sw-tekst); transition:border-color .12s; }

/* «Utvid chatvindu», on a PC: wider, and as high as the window, for long answers. The screen that ends the chat keeps its
   width. The rule for a phone below comes after this one and wins. */
.sw.sw-bred .sw-panel { width:min(680px, calc(100vw - 40px)); height:calc(100vh - 40px); max-height:none; }
.sw.sw-bred .sw-avslutt { padding-inline:max(18px, calc(50% - 190px)); }

/* Mobile, upright or on its side (a touch screen less than 520 px high): full screen. widget.js sets --sw-vh and
   --sw-top from visualViewport, so the input stays above the keyboard. The same query is in src/widget/widget.ts. */
@media (max-width:520px), (pointer:coarse) and (max-height:520px) {
  .sw.apen:not(.innebygd) { top:var(--sw-top, 0px); right:0; bottom:auto; left:0; height:var(--sw-vh, 100dvh); }
  .sw.apen .sw-panel { width:100%; height:100%; max-height:none; border-radius:0; margin:0; }
  .sw:not(.innebygd) .sw-topp { padding-top:max(14px, env(safe-area-inset-top)); padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  .sw:not(.innebygd) .sw-logg { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .sw:not(.innebygd) .sw-robot, .sw:not(.innebygd) .sw-inn { margin-left:max(12px, env(safe-area-inset-left)); margin-right:max(12px, env(safe-area-inset-right)); }
  .sw:not(.innebygd) .sw-fot { padding-bottom:max(11px, env(safe-area-inset-bottom)); }
  .sw:not(.innebygd) .sw-avslutt { padding-inline:max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); padding-bottom:max(16px, env(safe-area-inset-bottom)); }
  /* The keyboard takes the room: the notice stays, the bottom line goes. */
  .sw.sw-tastatur .sw-fot { padding-bottom:8px; }
  .sw.sw-tastatur .sw-levert { display:none; }
  .sw-inn textarea, .sw-inn input, .sw-felt input { font-size:16px; }
  .sw-skjema > .sw-felt:has(input[type="email"]):has(+ .sw-felt), .sw-skjema > .sw-felt:has(input[type="tel"]) { grid-column:1 / -1; }
}

/* Booking in the chat: the time picker (approved sketch 5 Nov 2026, booking-skisse). The same grey bubble as the
   contact form (.sw-skjema), full width, under the answer that offered it. One step at a time in the same bubble; the
   form and the receipt take its place there, like the contact form does. */
.sw-booking { align-self:stretch; padding:14px; background:var(--sw-grå); border-radius:16px; border-bottom-left-radius:4px; animation:sw-fram .25s ease-out; }
.sw-booking:focus, .sw-steg:focus, .sw-booking > form:focus, .sw-skjema.sendt:focus { outline:none; }
.sw-steg { display:flex; flex-direction:column; gap:12px; animation:sw-fram .2s ease-out; }
.sw-stegtopp { display:flex; flex-direction:column; gap:1px; }
.sw-stegtopp b { font-weight:600; }
.sw-stegtopp p { margin:0; color:var(--sw-svak); font-size:14px; line-height:1.45; }

/* Choices: the quick-reply pill (.sw-hurtigsvar button), on white so it lifts off the grey bubble like the form's fields.
   Meeting type wraps; days in two columns, times in four, so the eye can run down a column. */
.sw-valg { display:grid; gap:8px; }
.sw-valg.form { display:flex; flex-wrap:wrap; }
.sw-valg.dager { grid-template-columns:1fr 1fr; }
.sw-valg.tider { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.sw-valg button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:0; border:1px solid var(--sw-linje); background:#fff; border-radius:16px; padding:8px 13px; font:inherit; font-size:13.5px; font-weight:500; line-height:1.35; color:var(--sw-tekst); cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; transition:border-color .12s, background-color .12s, color .12s; }
.sw-valg.form button { padding:8px 16px 8px 12px; }
.sw-valg button:hover { border-color:var(--sw-tekst); }
/* Chosen: the customer's colour, the same as the visitor's own messages */
.sw-valg button[aria-pressed="true"] { background:var(--kd); border-color:var(--kd); color:var(--kdt); }
.sw-valg button svg { display:block; width:17px; height:17px; flex:none; color:var(--sw-svak); }
.sw-valg button[aria-pressed="true"] svg { color:inherit; }
.sw-notat { margin:0; font-size:13px; line-height:1.4; color:var(--sw-svak); }

/* Whose times these are, and «Velg en annen» under it. The customer's own text may be long and have long words. */
.sw-ansvarlig { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-bottom:10px; border-bottom:1px solid var(--sw-linje); }
.sw-ansvarlig p { max-width:100%; margin:0; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.sw-ansvarlig .sw-navknapp.sw-fram { height:28px; margin:0 0 -4px -6px; padding:0 2px 0 6px; }
/* The others: one per line, the name over what they have responsibility for */
.sw-valg.folk { grid-template-columns:minmax(0, 1fr); }
.sw-valg.folk button { flex-direction:column; align-items:flex-start; gap:1px; padding:9px 14px; white-space:normal; text-align:left; }
.sw-valg.folk button b { font-weight:600; }
.sw-valg.folk button span { font-size:13px; font-weight:400; color:var(--sw-svak); overflow-wrap:anywhere; }
.sw-valg.folk button[aria-pressed="true"] span { color:inherit; }

/* Back and More days: the same pill without the frame, so the choices stay the loudest thing in the bubble */
.sw-stegnav { display:flex; align-items:center; gap:8px; margin:-4px -4px -6px; }
.sw-navknapp { display:inline-flex; align-items:center; gap:2px; height:32px; border:0; background:transparent; border-radius:16px; padding:0 10px 0 4px; font:inherit; font-size:13.5px; font-weight:500; line-height:1; color:var(--sw-svak); cursor:pointer; transition:background-color .12s, color .12s; }
.sw-navknapp:hover { background:rgba(23,21,18,.06); color:var(--sw-tekst); }
.sw-navknapp svg { display:block; width:16px; height:16px; flex:none; }
.sw-navknapp.sw-fram { margin-left:auto; padding:0 4px 0 10px; }

/* While the free times are fetched: the day grid as placeholders */
.sw-plass { height:37px; border-radius:16px; background:#E6E1D7; animation:sw-vent 1.1s ease-in-out infinite; }
.sw-plass:nth-child(2n) { animation-delay:.12s; }
@keyframes sw-vent { 50% { opacity:.45; } }

/* The form, inside the picker's bubble: .sw-skjema without its own bubble */
.sw-booking > .sw-skjema { padding:0; background:none; border-radius:0; animation:sw-fram .2s ease-out; }
/* One field per line, on PC too: the email is where the invitation goes and must be readable whole, the phone is
   required for a phone meeting, and «Company (optional)» does not fit a half line in English. */
.sw .sw-booking > form.sw-skjema > .sw-felt:has(input) { grid-column:1 / -1; }
.sw-handling { display:flex; align-items:center; gap:6px; margin-top:4px; }
.sw-handling .sw-knapp { margin-top:0; }

/* The receipt: .sw-skjema.sendt, as for the contact form, with the time on its own line */
.sw-skjema.sendt { animation:sw-fram .25s ease-out; }
.sw-skjema.sendt .sw-nar { font-weight:500; }

/* No animation on a full redraw (a step drawn again in another language) */
.sw.sw-stille *, .sw.sw-stille { animation:none !important; transition:none !important; }

/* iPhone zooms in on a field whose text is smaller than 16 px, and the chat's send button slides out of view. On touch
   and narrow screens (also a tablet, which the full-screen query above leaves out) every field the visitor types in is
   16 px. Last in the file, so it wins over the fields' own sizes. */
@media (max-width:760px), (pointer:coarse) {
  .sw input, .sw textarea, .sw select { font-size:16px; }
}