/* ==========================================================================
   Chat widget — the "Spør om Marcus" launcher in the bottom-right corner
   and the panel it opens. Present on the front page and all four project
   pages; the markup is built by chat-widget.js, so this stylesheet is the
   only place the look is defined.

   Colours come from the site's own --token-* variables, which
   theme-toggle.js rewrites on <body> when the appearance changes — so the
   widget follows LYS/MØRK without knowing the toggle exists. Type follows
   the same three sizes as the rest of the site: 18px headings, 16px/1.6
   body, 14px labels.

   The corner is free: the appearance picker sits at the top right and
   scrolls with the page, so nothing else lives down here.
   ========================================================================== */

.chatw {
  --cw-paper: var(--token-520d2e3b-0e8d-44c4-9def-6dead0a14a09, #e6e6ea);
  --cw-card: var(--token-efe52457-0798-421a-a43d-7626270e2f62, #f4f4f6);
  --cw-border: var(--token-b0e8a66a-44db-44c4-a7ba-ed8a67dcacad, #e4e4f1);
  --cw-border-soft: var(--token-6c6119a4-5ee9-4e38-94a2-c60081d8bafe, #dadae7);
  --cw-muted-soft: var(--token-a6b9dd68-a1cb-491e-bd6a-fb24b574eb34, #85858f);
  --cw-muted: var(--token-b819ff3b-80ad-45f2-8389-6a403046bb14, #656572);
  --cw-ink: var(--token-43464fc0-8f12-4214-bfdd-fa0c6aa29267, #141415);
  --cw-font: 'Inter Display', 'Inter Display Placeholder', sans-serif;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  font-family: var(--cw-font);
  color: var(--cw-ink);
}

@media (min-width: 810px) {
  .chatw {
    right: 24px;
    bottom: 24px;
  }
}

/* ---------- Launcher ---------- */

.chatw__launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  background: var(--cw-card);
  backdrop-filter: blur(9px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  font: inherit;
  font-size: 16px;
  line-height: 1.4em;
  color: var(--cw-ink);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chatw__launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(0, 0, 0, 0.12);
}

.chatw__launch:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 2px;
}

.chatw__launch svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatw.is-open .chatw__launch {
  display: none;
}

/* ---------- Panel ---------- */

.chatw__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px));
  border: 1px solid var(--cw-border);
  border-radius: 20px;
  background: var(--cw-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.14);
  transform-origin: bottom right;
}

/* ---------- Phones ----------

   A full-screen sheet rather than a floating card, and sized to the
   *visual* viewport rather than to vh.

   That distinction is the whole fix. On iOS the keyboard shrinks the
   visual viewport but leaves 100vh at its full value, so a panel measured
   in vh keeps its height and puts its lower half behind the keyboard.
   Safari then scrolls the page to reveal the focused field, which drags
   the panel's header off the top of the screen — the visitor is left
   looking at an empty middle with no title and no way back. chat-widget.js
   writes the visual viewport's height and offset into --cw-vh and --cw-vtop
   and keeps them current; the fallbacks here are what a browser without
   visualViewport gets. */
@media (max-width: 520px) {
  .chatw {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  /* The wrapper spans the width down here, so it must not swallow taps
     meant for the page behind it. Its two children take them back. */
  .chatw,
  .chatw.is-open {
    pointer-events: none;
  }

  .chatw__launch,
  .chatw__panel {
    pointer-events: auto;
  }

  .chatw.is-open {
    top: var(--cw-vtop, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--cw-vh, 100%);
  }

  .chatw__panel {
    width: 100%;
    height: 100%;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .chatw__launch {
    float: right;
  }
}

.chatw:not(.is-open) .chatw__panel {
  display: none;
}

.chatw.is-open .chatw__panel {
  animation: chatw-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* A full-screen sheet slides up; it has no corner to grow out of. */
@media (max-width: 520px) {
  .chatw.is-open .chatw__panel {
    animation: chatw-up 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  @keyframes chatw-up {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}

@keyframes chatw-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatw.is-open .chatw__panel {
    animation: none;
  }

  .chatw__launch {
    transition: none;
  }
}

/* ---------- Header ---------- */

.chatw__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: none;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--cw-border);
}

.chatw__title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--cw-ink);
}

.chatw__sub {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4em;
  color: var(--cw-muted-soft);
}

.chatw__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 1px solid var(--cw-border-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--cw-muted);
  cursor: pointer;
}

.chatw__close:hover {
  color: var(--cw-ink);
}

.chatw__close:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 2px;
}

.chatw__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Log ---------- */

.chatw__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overscroll-behavior: contain;
}

.chatw__intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6em;
  color: var(--cw-muted);
}

/* The label says what the pills are, so a visitor doesn't read them as
   something the page is claiming. The group holds it 8px above the pills,
   inside the log's own 16px rhythm. */
.chatw__suggest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatw__suggest-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.4em;
  color: var(--cw-muted-soft);
}

/* Pills that wrap. The panel is 348px wide inside its padding, so two pills
   fit on a line only while each question stays around 22 characters — past
   that they break one-per-line and the edge goes ragged. The questions are
   written to that budget; keep them short if you reword them. */
.chatw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chatw__chip {
  padding: 8px 12px;
  border: 1px solid var(--cw-border-soft);
  border-radius: 999px;
  background: var(--cw-paper);
  font: inherit;
  font-size: 14px;
  line-height: 1.4em;
  color: var(--cw-ink);
  text-align: left;
  cursor: pointer;
}

.chatw__chip:hover {
  border-color: var(--cw-muted-soft);
}

.chatw__chip:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 2px;
}

/* A visitor's own question reads as a card in the page's own language; the
   answer is set as plain running text, because that is what it is. */
.chatw__msg {
  font-size: 16px;
  line-height: 1.6em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chatw__msg--user {
  align-self: flex-end;
  max-width: 85%;
  padding: 10px 14px;
  border: 1px solid var(--cw-border);
  border-radius: 16px 16px 4px 16px;
  background: var(--cw-paper);
  color: var(--cw-ink);
}

.chatw__msg--bot {
  color: var(--cw-muted);
}

.chatw__msg--error {
  padding: 10px 14px;
  border: 1px solid var(--cw-border-soft);
  border-radius: 12px;
  background: var(--cw-paper);
  font-size: 14px;
  color: var(--cw-muted);
}

/* Three dots while the first token is on its way. */
.chatw__wait {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 26px;
}

.chatw__wait i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cw-muted-soft);
  animation: chatw-blink 1.2s infinite ease-in-out both;
}

.chatw__wait i:nth-child(2) {
  animation-delay: 0.15s;
}

.chatw__wait i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chatw-blink {
  0%, 80%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatw__wait i {
    animation: none;
    opacity: 0.5;
  }
}

/* ---------- Composer ---------- */

.chatw__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--cw-border);
}

.chatw__input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--cw-border-soft);
  border-radius: 12px;
  background: var(--cw-paper);
  font: inherit;
  font-size: 16px;
  line-height: 1.4em;
  color: var(--cw-ink);
  resize: none;
}

.chatw__input::placeholder {
  color: var(--cw-muted-soft);
}

.chatw__input:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: -1px;
}

.chatw__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--cw-ink);
  color: var(--cw-card);
  cursor: pointer;
}

.chatw__send:disabled {
  background: var(--cw-border-soft);
  color: var(--cw-muted-soft);
  cursor: default;
}

.chatw__send:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 2px;
}

.chatw__send svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatw__foot {
  flex: none;
  margin: 0;
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.4em;
  color: var(--cw-muted-soft);
}

.chatw__foot a {
  color: inherit;
}