/* The closed chat: what w.js needs to show the bubble (src/widget/skall.ts). Lives inside a Shadow DOM on the customer's site.
   The rest of the chat is design/widget.css, which comes with w-chat.js. The look follows A-JOB's chatbot demo (chosen by
   Benjamin 4 Nov 2026).
   Colour variables on .sw, set by widget.js (svarlySettFarge) from the customer's colour:
   --k      customer colour as it is: the border of the closed bubble
   --kt     text on --k. White when it gives 3:1, else ink
   --kd     customer colour for small text: visitor messages, send button, form button, the logo's initial.
            Same as --k, or darkened (lightened under ink) until --kdt reaches 4.5:1
   --kdt    text on --kd
   --kkant  customer colour as a line or letter on white (3:1), ink when the colour is too light */

.sw { --k:#111214; --kt:#fff; --kd:#111214; --kdt:#fff; --kkant:#111214;
  --sw-grå:#F3F1EC; --sw-lys:#FBFAF7; --sw-linje:#E2DCD1; --sw-skille:#EEE9E0; --sw-tekst:#16171A; --sw-svak:#67635C; --sw-gronn:#2F7D4A;
  position:fixed; right:20px; bottom:20px; z-index:2147483000; font-family:inherit; font-size:15px; line-height:1.5; color:var(--sw-tekst); }
.sw * { box-sizing:border-box; }
.sw [hidden] { display:none !important; }
.sw-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Bubble: the customer's logo on white, with a border in their colour. The tight corner at the bottom right is the same
   as on the visitor's messages in the chat, so the square reads as a chat. White and not a tint of the colour, since many
   logos have a white box of their own. At most 64 px high: the consent banner on a-job.no leaves room for that. */
.sw-boble { width:60px; height:60px; padding:0; border:2px solid var(--k); border-radius:18px 18px 5px 18px; background:#fff; color:var(--kkant); display:grid; place-items:center; cursor:pointer; font:inherit; font-size:26px; font-weight:700; line-height:1; box-shadow:0 10px 24px -10px rgba(23,21,18,.4), 0 2px 6px rgba(23,21,18,.08); margin-left:auto; transition:transform .15s, box-shadow .15s; }
.sw-boble:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(23,21,18,.45), 0 3px 8px rgba(23,21,18,.1); }
.sw-boble img { display:block; width:36px; height:36px; object-fit:contain; }
.sw-boble svg { width:26px; height:26px; }
.sw-boble:focus-visible, .sw button:focus-visible, .sw input:focus-visible, .sw a:focus-visible { outline:2px solid var(--sw-tekst); outline-offset:2px; }

/* Closed with unread messages: a count on the bubble with a white ring. Red, or the customer colour when they chose it. */
.sw-boble { position:relative; }
.sw-ulest { position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#D92D20; color:#fff; box-shadow:0 0 0 2px #fff; display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; animation:sw-merke .25s cubic-bezier(.2,.9,.3,1.3) both; }
.sw.merke-firma .sw-ulest { background:var(--kd); color:var(--kdt); }
@keyframes sw-merke { from { transform:scale(.4); opacity:0; } }

/* The other designs of the closed chat (approved sketch docs/skisser/chatboble, 6 Nov 2026). .sw-boble alone is «Firkant». */
.sw-boble-logo { flex:none; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#fff; }
/* «Kort»: the closed header of the chat, which grows up into the chat when it opens */
.sw-boble.sw-kort { width:340px; height:auto; display:flex; align-items:center; gap:12px; padding:14px 16px; border:0; border-radius:16px; color:#171512; font-size:15px; font-weight:400; line-height:1.5; text-align:left; box-shadow:0 28px 70px -22px rgba(23,21,18,.5), 0 0 0 1px rgba(23,21,18,.06); }
.sw-boble.sw-kort:hover { box-shadow:0 30px 70px -20px rgba(23,21,18,.55), 0 0 0 1px rgba(23,21,18,.08); }
.sw-kort .sw-boble-logo { width:34px; height:34px; background:var(--kd); color:var(--kdt); font-size:14px; font-weight:600; }
.sw-kort .sw-boble-logo:has(img) { background:#fff; box-shadow:inset 0 0 0 1px var(--sw-skille); }
.sw-boble.sw-kort img { width:100%; height:100%; padding:4px; }
.sw-boble-navn { flex:1; min-width:0; display:flex; flex-direction:column; }
.sw-boble-navn b { font-size:15px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-boble-navn small { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; line-height:1.4; color:var(--sw-gronn); }
.sw-boble-navn small::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sw-boble-pil { flex:none; width:10px; height:10px; margin:0 4px 0 2px; border-right:2px solid #8F8A82; border-bottom:2px solid #8F8A82; transform:rotate(-135deg) translate(-2px,-2px); }
.sw-boble-prikk { display:none; position:absolute; right:2px; bottom:2px; width:13px; height:13px; border-radius:50%; background:var(--sw-gronn); box-shadow:0 0 0 2.5px #fff; }
.sw-kort .sw-ulest { position:static; flex:none; box-shadow:none; }
/* «Pille med tekst»: the customer colour, the logo and their own words */
.sw-boble.sw-pille { width:auto; max-width:calc(100vw - 40px); height:52px; display:flex; align-items:center; gap:10px; padding:0 22px 0 8px; border:0; border-radius:26px; background:var(--kd); color:var(--kdt); font-size:15px; font-weight:600; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(23,21,18,.45), 0 2px 6px rgba(23,21,18,.08); }
.sw-boble.sw-pille:hover { box-shadow:0 16px 30px -12px rgba(23,21,18,.5), 0 3px 8px rgba(23,21,18,.1); }
.sw-pille .sw-boble-logo { width:36px; height:36px; color:var(--kkant); font-size:16px; font-weight:700; }
.sw-boble.sw-pille img { width:24px; height:24px; }
.sw-boble-tekst { min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
/* «Rund»: the classic chat button in the customer colour */
.sw-boble.sw-rund { border:0; border-radius:50%; background:var(--k); color:var(--kt); }
.sw-boble.sw-rund:hover { box-shadow:0 16px 30px -12px rgba(23,21,18,.5), 0 3px 8px rgba(23,21,18,.1); }
.sw-boble.sw-rund svg { width:28px; height:28px; margin-top:2px; }
.sw-rund .sw-ulest { top:-4px; right:-4px; }
/* Narrower than 480 px, or a phone on its side: «Kort» is the logo in a round button with a green dot, and «Rund» a little
   smaller. The card's heavy shadow on hover stays with the card. */
@media (max-width:479.98px), (pointer:coarse) and (max-height:520px) {
  .sw-boble.sw-kort { width:56px; height:56px; justify-content:center; gap:0; padding:0; border-radius:50%; }
  .sw-boble.sw-kort, .sw-boble.sw-kort:hover { box-shadow:0 10px 24px -10px rgba(23,21,18,.45), 0 2px 6px rgba(23,21,18,.08), 0 0 0 1px rgba(23,21,18,.06); }
  .sw-kort .sw-boble-logo { width:32px; height:32px; }
  .sw-kort .sw-boble-logo:has(img) { box-shadow:none; }
  .sw-boble.sw-kort img { padding:0; }
  .sw-boble-navn, .sw-boble-pil { display:none; }
  .sw-boble-prikk { display:block; }
  .sw-kort .sw-ulest { position:absolute; top:-5px; right:-5px; box-shadow:0 0 0 2px #fff; }
  .sw-boble.sw-rund { width:56px; height:56px; }
  .sw-boble.sw-rund svg { width:26px; height:26px; }
}
/* «Med hilsen»: «Firkant», and a small white speech bubble above it, once per visit, after about 3 seconds. The proactive
   message is the same speech bubble, over any of the designs. Out of the flow, so .sw stays the size of the bubble and takes
   no clicks from the page beside it. Up to a tablet it stands in the bubble's strip instead, as the card below does. */
.sw-hilsen { position:absolute; right:0; bottom:calc(100% + 12px); width:max-content; max-width:256px; background:#fff; color:var(--sw-tekst); border-radius:16px 16px 4px 16px; box-shadow:0 14px 34px -14px rgba(23,21,18,.4), 0 0 0 1px rgba(23,21,18,.06); animation:sw-hilsen-inn .4s cubic-bezier(.2,.8,.2,1) both; }
.sw-hilsen.borte { animation:sw-hilsen-ut .16s ease-in both; }
.sw-hilsen-tekst { display:block; width:100%; margin:0; padding:12px 38px 12px 14px; border:0; border-radius:inherit; background:none; color:inherit; font:inherit; font-size:14px; line-height:1.45; text-align:start; overflow-wrap:anywhere; cursor:pointer; }
.sw-hilsen-tekst span { display:block; }
.sw-hilsen-lukk { position:absolute; top:6px; right:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:transparent; color:#8F8A82; display:grid; place-items:center; cursor:pointer; transition:background-color .12s, color .12s; }
.sw-hilsen-lukk:hover { background:var(--sw-grå); color:var(--sw-tekst); }
.sw-hilsen-lukk svg { width:14px; height:14px; }
@keyframes sw-hilsen-inn { from { opacity:0; transform:translateY(6px); } }
@keyframes sw-hilsen-ut { to { opacity:0; transform:translateY(4px); } }
/* Focus on the closed chat: a white ring inside the dark one, so it shows on dark and light sites alike. */
.sw .sw-boble:focus-visible { box-shadow:0 0 0 2px #fff, 0 10px 24px -10px rgba(23,21,18,.4); }
.sw .sw-hilsen button:focus-visible { box-shadow:0 0 0 2px #fff; }

/* The chat's file is on its way, or did not come: a small white card over the bubble, in the corner when there is none.
   Out of the flow, like the greeting. The close button is the greeting's. */
.sw-last { position:absolute; right:0; bottom:calc(100% + 12px); display:grid; gap:10px; width:max-content; max-width:min(280px, calc(100vw - 40px)); padding:12px 38px 12px 14px; background:#fff; color:var(--sw-tekst); border-radius:16px 16px 4px 16px; box-shadow:0 14px 34px -14px rgba(23,21,18,.4), 0 0 0 1px rgba(23,21,18,.06); font-size:14px; line-height:1.45; animation:sw-hilsen-inn .2s ease-out; }
.sw-last:focus { outline:none; }
.sw-last p { margin:0; }
.sw-prov { justify-self:start; height:36px; padding:0 16px; border:0; border-radius:99px; background:var(--kd); color:var(--kdt); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.sw-prov:hover { filter:brightness(.94); }
/* Up to a tablet a consent banner on the page may stand right over the bubble, with its buttons at the bottom. The card
   stays in the bubble's own strip, over the bubble, on one row: the bubble has been pressed, and comes back when the card
   goes. */
@media (max-width:820px), (pointer:coarse) and (max-height:520px) {
  /* Only in the widget (:host): the app loads this file too, for its previews, which keep the bubble above the button.
     The speech bubble the same way: over the bubble, at most two lines, the whole text still the button's name. A press on
     it opens the chat, and the bubble is there again when it is closed. */
  :host .sw-hilsen { position:fixed; z-index:1; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); display:flex; align-items:center; min-height:60px; max-width:min(400px, calc(100vw - 40px)); }
  :host .sw-hilsen-tekst { padding:8px 38px 8px 14px; line-height:1.3; }
  :host .sw-hilsen-tekst span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  :host .sw-hilsen-lukk { top:calc(50% - 13px); }
  :host .sw-last { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; max-width:calc(100vw - 40px); min-height:56px; padding:6px 38px 6px 14px; line-height:1.3; }
  :host .sw-last .sw-hilsen-lukk { top:calc(50% - 13px); }
  :host .sw-prov { flex:none; }
}

/* Mobile: above the phone's own edges. The same query is in design/widget.css and src/widget/widget.ts. */
@media (max-width:520px), (pointer:coarse) and (max-height:520px) {
  .sw:not(.innebygd) { right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) {
  .sw *, .sw *::before, .sw *::after { animation:none !important; transition:none !important; }
}