/* Chat button: Intercom Messenger, click-to-load (templates/partials/chat.html, js/chat.js, web/intercom.py;
   docs/components.md "Chat button"). Linked by base.html only when the chat is on (INTERCOM_APP_ID set, public page).
   Fixed lower right where Intercom's own launcher would sit (right/bottom 20 px + the safe-area inset; chat.js passes the
   same 20/20 as horizontal/vertical_padding, so the Messenger opens right above it). A 56 px round button; from 1680
   a pill with the label "Chat med os", where it sits in the empty margin beside the 1240 px container (768-1679 the
   pill would cover the right edge of the reading column: looked at 2026-10-28). Below the header (z-index), hidden
   while the drawer is open and without JS. */
.gp-chat {
  position: fixed; z-index: calc(var(--z-header) - 10);
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;   /* only the button and the message take clicks: the box itself never covers the page */
}
.gp-chat > * { pointer-events: auto; }
.gp-chat[hidden], html:not(.js) .gp-chat, body.nav-open .gp-chat { display: none; }

.gp-chat__button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 999px;
  background: var(--gp-action); color: var(--gp-action-text);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 3px rgba(5, 38, 76, .16), 0 10px 24px -6px rgba(5, 38, 76, .38);
  transition: background-color .15s ease, transform .15s ease;
}
.gp-chat__button:hover { background: var(--gp-action-hover); }
.gp-chat__button:active { transform: translateY(1px); }
.gp-chat__button:focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 3px; }
.gp-chat__button .icon { color: currentColor; }
.gp-chat__label { display: none; }
.gp-chat__spinner { display: none; }

/* loading (chat.js: .is-loading + aria-busy): the bubble turns into the spinner; the click is ignored meanwhile */
.gp-chat.is-loading .gp-chat__button { cursor: progress; }
.gp-chat.is-loading .gp-chat__icon { display: none; }
.gp-chat.is-loading .gp-chat__spinner { display: inline-block; animation: gp-chat-spin 1s linear infinite; }
@keyframes gp-chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gp-chat.is-loading .gp-chat__spinner { animation: none; }
  .gp-chat__button { transition: none; }
}

/* unread messages (Intercom onUnreadCountChange) while the Messenger is closed */
.gp-chat__badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--gp-surface-dark); color: var(--gp-on-dark); box-shadow: 0 0 0 2px var(--gp-page);
  font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
}
.gp-chat__badge[hidden] { display: none; }

/* the load error: a small card above the button with the phone number and the e-mail address */
.gp-chat__error {
  position: relative; max-width: min(320px, calc(100vw - 40px)); margin: 0; padding: 14px 44px 14px 16px;
  border-radius: var(--gp-radius-button); background: var(--gp-page); color: var(--gp-ink);
  box-shadow: var(--gp-shadow-header); font-size: 15px; line-height: 22px;
}
.gp-chat__error[hidden] { display: none; }
.gp-chat__error p { margin: 0; }
.gp-chat__error a { color: var(--gp-action); text-decoration: underline; text-underline-offset: 2px; }
.gp-chat__dismiss {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--gp-ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.gp-chat__dismiss:hover { background: rgba(5, 38, 76, .06); }
.gp-chat__dismiss:focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 0; }

/* the end of the page: the footer's last row (legal links, language chooser) ends above the button, never under it
   (24 px of its own + 56 + 20 + the inset). Also right for INTERCOM_LOAD=page: Intercom's launcher sits there too. */
.gp-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1680px) {
  .gp-chat__button { width: auto; padding: 0 22px 0 18px; }
  .gp-chat__label { display: inline; }
}

@media print { .gp-chat { display: none !important; } }