/*!
 * WSP Chat – Bageri design. Figma "Bageri" → Chat window/Default (98:527) and Chat window/Variant2 (98:564).
 * Loads on top of WSP Chat's behaviour-only base stylesheet (chat.css); the neutral default design is off.
 * Fonts are self-hosted (assets/fonts, SIL Open Font License) — nothing is requested from Google Fonts.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens (shared with the FAQ pages' stylesheet) ───────────────────────── */
:root {
  --wsp-chat-bg: #fbf5e4;            /* drawer + thread column */
  --wsp-chat-surface: #fdfaf1;       /* input, answer bubble */
  --wsp-chat-primary: #095c9a;       /* blue: buttons, question bubble, badge, headings */
  --wsp-chat-on-primary: #fdfaf1;
  --wsp-chat-text: #000000;
  --wsp-chat-muted: #4a5560;
  --wsp-chat-link: #000000;
  --wsp-chat-font: "Roboto", system-ui, sans-serif;
  --wsp-chat-heading-font: "Anton", Impact, "Arial Narrow", sans-serif;
  --wsp-chat-drawer-width: 600px; /* desktop: at most 600 px; the base stylesheet caps it at 100vw and makes it full width under 480 px */
  --wsp-chat-radius: 20px;
  --wsp-chat-radius-sm: 10px;
  --wsp-chat-pad: 20px;
  --wsp-chat-faq-width: 1240px;      /* FAQ pages: inner column, padding included (bageri-faq.css) */
}

/* ── Drawer shell ───────────────────────────────────────────────────────────── */
/* The shadow only while open: a closed drawer sits just off the right edge and its spread would show as a grey strip. */
.wsp-chat-drawer.is-open { box-shadow: 0 10px 30px 30px rgba(0, 0, 0, 0.15); }
.wsp-chat-drawer {
  background: var(--wsp-chat-bg);
  color: var(--wsp-chat-text);
  font-family: var(--wsp-chat-font);
  font-size: 16px;
  line-height: 1.3;
  padding: var(--wsp-chat-pad);
  gap: 20px;
}
/* Default (no conversation yet): mascot + badge and the form are one centred group, 30 px apart.
   Centred with auto margins, not justify-content: on a short screen the group then overflows downwards only and
   the drawer scrolls, with the top kept 50 px from the edge (equal top/bottom padding keeps tall screens centred). */
.wsp-chat-drawer:not(.is-conversing) { justify-content: flex-start; gap: 30px; overflow-y: auto; padding-top: 50px; padding-bottom: 50px; }
.wsp-chat-drawer:not(.is-conversing) .wsp-chat-drawer__body { flex: 0 0 auto; margin-top: auto; }
.wsp-chat-drawer:not(.is-conversing) .wsp-chat-drawer__form { width: 334px; max-width: 100%; margin: 0 auto auto; }

/* Close: not in the design, kept for keyboard/screen-reader users — small, blue, no chrome. */
.wsp-chat-drawer__close {
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--wsp-chat-primary);
  font: inherit; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.wsp-chat-drawer__close:hover, .wsp-chat-drawer__close:focus-visible { background: rgba(9, 92, 154, 0.12); outline: none; }

/* ── Welcome (Frame 28 + badge) ─────────────────────────────────────────────── */
.wsp-chat-drawer__welcome { padding: 0; }
/* 282 px as designed, but free to grow to the form's 334 px when a translator (Google Translate,
   WPML) puts a longer text in the badge — the badge then wraps instead of spilling out of its box. */
.wsp-chat-drawer__hello { width: auto; min-width: min(282px, 100%); max-width: min(334px, 100%); gap: 0; }
.wsp-chat-drawer__mascot { display: block; width: 226px; max-width: 80%; height: auto; }
.wsp-chat-drawer__badge {
  position: relative;
  width: 100%; max-width: 100%;
  padding: 10px;
  text-align: center;
  background: var(--wsp-chat-primary);
  color: var(--wsp-chat-on-primary);
  font-family: var(--wsp-chat-heading-font);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  white-space: normal; text-wrap: balance; overflow-wrap: break-word;
  text-transform: uppercase;
  border-radius: 5px;
  filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));
}
/* Without a mascot (image removed in Settings) the badge gets its speech-bubble tail from CSS. */
.wsp-chat-drawer__badge:first-child::before {
  content: ""; position: absolute; bottom: calc(100% - 1px); left: 50%; margin-left: -10px;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid var(--wsp-chat-primary);
}
@media (max-width: 420px) { .wsp-chat-drawer__badge { font-size: 26px; white-space: normal; } }

/* ── Thread (Variant2) ──────────────────────────────────────────────────────── */
.wsp-chat-drawer__thread { gap: 20px; padding: 8px 0 8px; border-radius: 20px; } /* the close button's room is kept above it (chat.css) */
.wsp-chat-drawer.is-conversing .wsp-chat-drawer__thread { scrollbar-color: rgba(9, 92, 154, 0.35) transparent; }

/* ── Form ───────────────────────────────────────────────────────────────────── */
.wsp-chat-drawer__form { gap: 20px; padding: 8px 0; }
.wsp-chat-drawer__input,
.wsp-chat-section__input {
  background: var(--wsp-chat-surface);
  color: var(--wsp-chat-text);
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-family: var(--wsp-chat-font);
  font-size: 15px;
  line-height: 1.3;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
  --wsp-chat-input-min: 97px;
}
.wsp-chat-drawer:not(.is-conversing) .wsp-chat-drawer__input { --wsp-chat-input-min: 179px; }
.wsp-chat-drawer__input::placeholder, .wsp-chat-section__input::placeholder { color: var(--wsp-chat-primary); opacity: 1; }
.wsp-chat-drawer__input:focus, .wsp-chat-section__input:focus { outline: 2px solid var(--wsp-chat-primary); outline-offset: 2px; }

.wsp-chat-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 25px;
  border: 0; border-radius: 99px;
  background: var(--wsp-chat-primary);
  color: var(--wsp-chat-on-primary);
  font-family: var(--wsp-chat-font); font-weight: 700; font-size: 15px; line-height: 27px;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.wsp-chat-btn:hover { background: #0a6ab2; }
.wsp-chat-btn:focus-visible { outline: 2px solid var(--wsp-chat-text); outline-offset: 2px; }

.wsp-chat-drawer__actions { gap: 20px; align-items: stretch; }
/* Right column: 154 px, 46 px tall; "+ STÄLL EN NY FRÅGA" top-left, "VANLIGA FRÅGOR" bottom-right (Figma 112:372). */
/* min-width, not width: a translated (longer) label widens the column, and the row wraps below the button if needed. */
.wsp-chat-drawer__links { width: auto; min-width: 154px; height: 46px; justify-content: space-between; align-items: stretch; gap: 0; }
.wsp-chat-drawer:not(.is-conversing) .wsp-chat-drawer__links { justify-content: center; }
/* A single link (no FAQ page set) sits vertically centred against the button instead of at the top. */
.wsp-chat-drawer__links > :only-child { margin-top: auto; margin-bottom: auto; }
.wsp-chat-drawer__new, .wsp-chat-drawer__faq {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--wsp-chat-font); font-weight: 700; font-size: 15px; line-height: 27px;
  text-transform: uppercase; color: var(--wsp-chat-primary); text-decoration: none; white-space: nowrap;
}
.wsp-chat-drawer__new { text-align: left; }
.wsp-chat-drawer__faq { text-align: right; }
.wsp-chat-drawer__new:hover, .wsp-chat-drawer__faq:hover,
.wsp-chat-drawer__new:focus-visible, .wsp-chat-drawer__faq:focus-visible { text-decoration: underline; outline: none; }

/* ── Bubbles ────────────────────────────────────────────────────────────────── */
/* Question bubble, as the Figma: 17 px bold at 130 %, 10/15 px padding, 7 px corners with a 20 px top-right one, no stroke. */
.wsp-chat-q {
  max-width: 90%;
  background: var(--wsp-chat-primary);
  color: #ffffff;
  border-radius: 7px 20px 7px 7px;
  padding: 10px 15px;
  font-weight: 700; font-size: 17px; line-height: 1.3;
  overflow-wrap: anywhere;
}
.wsp-chat-answer { max-width: 100%; background: var(--wsp-chat-surface); color: var(--wsp-chat-text); border-radius: 20px; padding: 30px; }
.wsp-chat-answer--thinking { max-width: 95%; padding: 18px 22px; color: var(--wsp-chat-primary); }
.wsp-chat-status { font-size: 14px; color: var(--wsp-chat-muted); }

.wsp-chat-answer__inner { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.wsp-chat-answer__inner > :first-child { margin-top: 0; }
.wsp-chat-answer__inner > :last-child { margin-bottom: 0; }
/* The design separates blocks with an empty 16 px line (≈ 21 px at line-height 1.3). */
.wsp-chat-answer__inner p { margin: 0 0 1.3em; }
.wsp-chat-answer__inner h1, .wsp-chat-answer__inner h2, .wsp-chat-answer__inner h3,
.wsp-chat-answer__inner h4, .wsp-chat-answer__inner h5, .wsp-chat-answer__inner h6 {
  font-family: var(--wsp-chat-font); font-weight: 700; color: var(--wsp-chat-primary); line-height: 1.2; margin: 1.4em 0 0.6em;
}
.wsp-chat-answer__inner h1 { font-size: 24px; line-height: 1.3; margin: 0 0 30px; }
.wsp-chat-answer__inner h1 + h2 { margin-top: 0; }
.wsp-chat-answer__inner h2 { font-size: 18px; line-height: 1.2; margin: 1.3em 0 10px; }
.wsp-chat-answer__inner h3, .wsp-chat-answer__inner h4 { font-size: 16px; }
.wsp-chat-answer__inner strong { font-weight: 700; }
.wsp-chat-answer__inner ul, .wsp-chat-answer__inner ol { margin: 0 0 1.3em; padding-left: 1.5em; }
/* A lead-in line directly above a list ("Du får praktisk träning i:") sits tight on it, as in the design. */
.wsp-chat-answer__inner p + ul, .wsp-chat-answer__inner p + ol { margin-top: -1.3em; }
.wsp-chat-answer__inner li { margin: 0; }
.wsp-chat-answer__inner a { color: var(--wsp-chat-text); text-decoration: underline; text-underline-position: from-font; }
.wsp-chat-answer__inner a:hover { color: var(--wsp-chat-primary); }
.wsp-chat-answer__inner code { font-size: 0.9em; background: rgba(9, 92, 154, 0.08); padding: 0.1em 0.3em; border-radius: 4px; }
.wsp-chat-answer__inner pre { background: rgba(9, 92, 154, 0.08); padding: 12px; border-radius: 10px; margin: 0 0 1em; }
.wsp-chat-answer__inner pre code { background: none; padding: 0; }
.wsp-chat-answer__inner blockquote { margin: 0 0 1em; padding-left: 12px; border-left: 3px solid var(--wsp-chat-primary); }
.wsp-chat-answer__inner hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 1em 0; }
.wsp-chat-answer__table { margin: 0 0 1em; }
.wsp-chat-answer__inner th, .wsp-chat-answer__inner td { padding: 6px 10px; border: 1px solid rgba(0, 0, 0, 0.12); text-align: left; vertical-align: top; }
.wsp-chat-answer__inner th { background: rgba(9, 92, 154, 0.08); color: var(--wsp-chat-primary); }
.wsp-chat-task__box { display: inline-block; width: 0.9em; height: 0.9em; border: 1.5px solid var(--wsp-chat-primary); border-radius: 3px; margin-right: 0.4em; vertical-align: -0.1em; }
.wsp-chat-task.is-done .wsp-chat-task__box { background: var(--wsp-chat-primary); }
.wsp-chat-answer--error { background: #fff0e6; color: #8a2a00; }

/* Sources + follow-ups: no frames in the design; the design's colours and type. */
.wsp-chat-answer__sources, .wsp-chat-answer__followups { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(9, 92, 154, 0.18); }
.wsp-chat-answer__sources-title, .wsp-chat-answer__followups-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wsp-chat-primary); margin-bottom: 8px; }
.wsp-chat-answer__sources ul { margin: 0; padding-left: 1.2em; }
.wsp-chat-answer__sources a { color: var(--wsp-chat-text); font-size: 14px; overflow-wrap: anywhere; }
.wsp-chat-answer__followups-list { gap: 8px; }
.wsp-chat-answer__followup {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wsp-chat-bg); border: 1px solid var(--wsp-chat-primary); color: var(--wsp-chat-primary);
  border-radius: 99px; padding: 7px 14px 7px 10px; font: inherit; font-size: 14px; text-align: left; line-height: 1.25;
}
.wsp-chat-answer__followup:hover, .wsp-chat-answer__followup:focus-visible { background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); outline: none; }
.wsp-chat-answer__followup-icon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: currentColor; position: relative; }
.wsp-chat-answer__followup-icon::before { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--wsp-chat-bg); font-weight: 700; font-size: 13px; }
.wsp-chat-answer__followup:hover .wsp-chat-answer__followup-icon::before { color: var(--wsp-chat-primary); }

/* ── Optional pieces (inline section / launcher) — the design's colours and type ─ */
.wsp-chat-section { background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); padding: 48px 20px; font-family: var(--wsp-chat-font); }
.wsp-chat-section__inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.wsp-chat-section__content { flex: 1 1 420px; }
.wsp-chat-section__title { font-family: var(--wsp-chat-heading-font); font-weight: 400; font-size: 36px; text-transform: uppercase; margin: 0 0 20px; color: inherit; }
.wsp-chat-section__form { gap: 16px; }
.wsp-chat-section__send { align-self: flex-start; background: var(--wsp-chat-surface); color: var(--wsp-chat-primary); }
.wsp-chat-section__art { flex: 0 1 300px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.wsp-chat-section__image { display: block; max-width: 226px; height: auto; }
.wsp-chat-section__badge { display: inline-block; max-width: 282px; padding: 10px 14px; background: #fcbc00; color: var(--wsp-chat-primary); border-radius: 5px; font-family: var(--wsp-chat-heading-font); font-size: 24px; line-height: 1.2; text-align: center; text-transform: uppercase; text-decoration: none; filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25)); }

.wsp-chat-launcher {
  gap: 10px; padding: 12px 22px; border: 0; border-radius: 5px;
  background: #fcbc00; color: var(--wsp-chat-primary);
  font-family: var(--wsp-chat-heading-font); font-size: 20px; text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.wsp-chat-launcher__icon { display: none; }
.wsp-chat-launcher__image { width: 40px; height: 40px; object-fit: contain; }

/* ── Keyboard focus (WCAG 2.4.7): a visible ring where the hover style alone was the only cue ──── */
.wsp-chat-drawer__close:focus-visible, .wsp-chat-drawer__new:focus-visible, .wsp-chat-drawer__faq:focus-visible,
.wsp-chat-answer__followup:focus-visible, .wsp-chat-launcher:focus-visible { outline: 2px solid var(--wsp-chat-primary); outline-offset: 2px; }