/* DIF Ledelsesassistent — demo UI styling.
   Colour tokens and type live here so the live demo is easy to tweak on a projector. */
:root {
  /* Designkoncept 2026's three colours: DIF Rød, Creme and Gul. DIF Rød carries accents,
     graphics and the Send fill (white on it is 4.94:1); the deeper red is for small text and
     clears 4.5:1 on white, creme, gul and red tints. */
  --dif-red: #E2001A;
  --dif-red-deep: #C8001A;
  --dif-red-press: #B80017;
  --dif-red-dark: #AA233A;  /* Designkoncept's Mørkerød: the suggestion hover (white on it is 6.97:1) */
  --ink: #2C373E;
  --ink-60: #5F676E;  /* 5.27:1 on the paper; the old #6A727A falls below 4.5:1 on it */
  --ink-40: #9AA0A6;
  --ink-20: #B7BcC0;
  --paper: #EDEDE7;   /* Creme, the chat's ground since 10 Sep 2026 */
  --gul: #FFEC9B;     /* the document tile and the skabelon marker */
  --surface: #FFFFFF;
  --line: #E6E5DE;
  --line-soft: #EEECE7;

  /* Tool / source accent colours (one per capability, from the ring palette). */
  --c-search: #007BC0;
  --c-guide: #009534;
  --c-forms: #F8B321;
  --c-recruit: #E2003D;

  /* DIF geometry: cards and surfaces sit square (2px just takes the aliasing off the corner),
     while controls are full pills — radius 100px set per control, like dif.dk's CTAs. */
  --r-xs: 2px;   /* markers, tiny badges */
  --r-sm: 2px;   /* citations, tags */
  --r-md: 2px;   /* cards */
  --r-lg: 4px;   /* composer, message bubble */

  /* The only shadow in the UI — a single purposeful lift on hover, not ambient glow. */
  --lift: 0 1px 2px rgba(44,55,62,0.05), 0 4px 14px rgba(44,55,62,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; }
body {
  font-family: "DIF", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible keyboard focus on every control (WCAG 2.4.7 AA). Pointer users keep the existing hover
   states; only keyboard focus draws the ring. The composer keeps its own :focus-within treatment. */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

@keyframes difRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Citations, download cards and referrals are appended only once the answer has finished
   streaming — seconds after the text arrived — so they fade up instead of snapping in. */
@media (prefers-reduced-motion: no-preference) {
  .citations, .form-card, .referral-card { animation: difRise .36s ease-out both; }
}
@keyframes difPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes difCaret { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
@keyframes difThink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.difScroll::-webkit-scrollbar { width: 10px; }
.difScroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--paper); }

.app { height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }

/* ---- Header ---- */
.topbar { display: flex; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.brand { display: flex; gap: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.17; }
/* The brand line is set in DIF's text face, as it is on dif.dk; the stencil stays a display
   face for the hero. Both headers read from here — the panel overrides only its metrics. */
.brand-title { font-family: var(--fontDIF, "DIF"), sans-serif; margin: 0; }
.brand-sub { letter-spacing: 0.02em; }
.topbar-right { align-items: center; }
.btn-reset { font: inherit; cursor: pointer; transition: border-color .15s, color .15s; }
.btn-reset:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Layout ---- */
.main { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.conversation { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* ---- Empty / welcome state ---- */
/* Centered start (Claude/ChatGPT pattern): hero, pitch, composer and suggestions sit together
   in the middle; the composer element itself is moved in here by app.js while the state shows. */
.empty { margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
/* dif.dk's eyebrow pattern: small bold caps with a hairline rule underneath ("DANMARKS
   IDRÆTSFORBUND" over the stencil headline) — reproduced here as the brand's own device. */
.hero-eyebrow { margin: 0 0 24px; padding-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); }
/* DIF's own display face, self-hosted on the assistant origin (the chat iframe cannot
   reach the host page's fonts). Same /font/ path convention and token name as dif.dk,
   so `var(--fontDIFStencil)` reads the same in both codebases. */
@font-face {
  font-family: "DIF Stencil";
  font-style: normal;
  font-weight: 700;
  src: url(/font/DIF-Stencil-Bold.woff) format("woff"),
       url(/font/DIF-Stencil-Bold.ttf) format("truetype");
  font-display: swap;
}
/* DIF's text face, the one dif.dk sets everything in: 400 for copy, 600 for titles and
   labels, 700 for the brand line and headings. The same files dif.dk serves, on the
   assistant origin (the chat iframe cannot reach the host page's fonts). Fredoka is gone
   with it: dif.dk has no rounded face anywhere, and the Google Fonts request it needed was
   the one third-party call the chat page made. */
@font-face {
  font-family: "DIF";
  font-style: normal;
  font-weight: 400;
  src: url(/font/DIF-Regular.woff) format("woff"),
       url(/font/DIF-Regular.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DIF";
  font-style: normal;
  font-weight: 600;
  src: url(/font/DIF-Semibold.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "DIF";
  font-style: normal;
  font-weight: 700;
  src: url(/font/DIF-Bold.woff) format("woff"),
       url(/font/DIF-Bold.ttf) format("truetype");
  font-display: swap;
}
:root { --fontDIFStencil: "DIF Stencil"; --fontDIF: "DIF"; }

/* Marketing-scale hero in dif.dk's voice: their DIF Stencil display face, tight lines
   (the text face stands in while the stencil loads). */
.hero {
  font-family: var(--fontDIFStencil, "DIF Stencil"), "DIF", sans-serif;
  font-weight: 700; font-size: 50px;
  line-height: 1.06; letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0 0 20px; text-wrap: balance;
}
.hero .accent {
  color: var(--dif-red);
}
/* dif.dk's textured stencil fill: the accent word's letterforms clip a window onto ink ground
   woven with red threads (image generated in app.js). Plain red above is the no-JS fallback. */
.hero .accent.threaded {
  background-color: var(--ink);
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 18px; line-height: 1.65; color: var(--ink-60);
  margin: 0 0 26px; max-width: 700px;
  text-wrap: balance;
}
/* The selling points sit in one strip of three cells split by hairlines — dif.dk card language:
   flat white squares on the grey ground, no border, caps titles in the action red.
   The titles run one to three lines, so each cell is a subgrid sharing the strip's two rows:
   every body starts on the same line no matter how tall its title is. */
.sellpoints { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(760px, 100%); margin: 0 0 32px; background: var(--surface); border-radius: var(--r-md); }
.sellpoint {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px;
  align-content: start; padding: 22px 22px 24px; text-align: left;
}
.sellpoint + .sellpoint { border-left: 1px solid var(--line-soft); }
.sellpoint-title {
  font-weight: 600; font-size: 18px; line-height: 1.15;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--dif-red); margin: 0;
  text-wrap: balance;
}
.sellpoint-body {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-60);
  text-wrap: pretty;
}
.suggestions { display: flex; }
.suggestion { text-align: left; background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 12px; }
.suggestion:hover,
.suggestion:focus-visible {
  border-color: var(--ink-40);
  box-shadow: var(--lift);
}

/* ---- Transcript ---- */
.transcript { max-width: 720px; margin: 0 auto; padding: 28px 28px 8px; }
.msg { margin-bottom: 26px; animation: difRise .2s ease-out; }

.msg-user { display: flex; flex-direction: column; align-items: flex-end; }
.msg-user .bubble {
  max-width: 82%; background: var(--surface); color: var(--ink);
  padding: 11px 15px; border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  font-size: 15.5px; line-height: 1.5; white-space: pre-wrap;
}
.cpr-warning {
  margin-bottom: 6px; font-size: 12px; color: var(--dif-red-deep);
  background: rgba(226,0,26,0.08); border: 1px solid rgba(226,0,26,0.2);
  border-radius: var(--r-sm); padding: 4px 10px; max-width: 82%;
}

/* Tool chips read as labelled tags, not pills — and the marker is the same small rounded
   square used in the KILDER rail, so one accent-mark system runs through the whole UI. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
  border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
}
.chip .chip-dot { width: 7px; height: 7px; border-radius: var(--r-xs); }
.chip.running .chip-dot { animation: difPulse 1s ease-in-out infinite; }

.thinking { display: inline-flex; align-items: center; gap: 5px; padding: 6px 2px; }
.thinking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-20); animation: difThink 1.2s ease-in-out infinite; }
.thinking-dot:nth-child(2) { animation-delay: .16s; }
.thinking-dot:nth-child(3) { animation-delay: .32s; }
.thinking-label { margin-left: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-60); }

.answer, .bubble, .source-title, .source-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.answer { font-size: 16px; font-weight: 400; line-height: 1.5625; color: var(--ink); }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer p { margin: 0 0 16px; }
.answer h2, .answer h3, .answer h4 {
  font-weight: 600; letter-spacing: normal;
  line-height: 1.2; color: var(--ink); margin: 1em 0 0;
}
.answer h2 { font-size: 24px; }
.answer h3 { font-size: 22.4px; }
.answer h4 { font-size: 20.8px; }
.answer ul, .answer ol { margin: 0 0 16px; padding-left: 25px; }
.answer li { margin: 0; line-height: inherit; }
.answer ul li::marker { color: var(--dif-red); }
.answer ol li::marker { color: var(--dif-red-deep); }
.answer a, .draft-body a { color: var(--dif-red-deep); font-weight: 400; text-decoration: underline; }
.answer strong, .draft-body strong { font-weight: 600; }
/* Slim caret that rides at the end of the streaming text with a soft pulse (not a hard blink). */
.caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.16em;
  margin-left: 2px; border-radius: 1px; background: var(--dif-red);
  animation: difCaret 1.1s ease-in-out infinite;
}

.citations { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.citation {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-60);
  border: 1px solid var(--line); background: var(--surface); padding: 4px 9px; border-radius: var(--r-sm);
  max-width: 100%; overflow-wrap: anywhere;
}
.citation-link { text-decoration: none; transition: border-color .15s; }
.citation-link:hover { border-color: var(--dif-red); }

/* Inline citation markers in the answer ([1]) -> small red superscript numbers. */
.answer .cite-ref, .draft-body .cite-ref {
  font-size: .68em; font-weight: 700; color: var(--dif-red-deep);
  vertical-align: super; line-height: 0; margin: 0 1px;
}
/* Numbered badge shown on each cited source (citation chip + form card). */
.cite-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-xs);
  background: rgba(226,0,26,0.1); color: var(--dif-red-deep);
  font-size: 11px; font-weight: 700; flex: none;
}
.form-title .cite-num { margin-right: 7px; vertical-align: 1px; }

/* ---- Form download card ---- */
/* No left accent stripe — the Gul document tile carries the "skabelon" colour instead,
   so the card stays a clean rectangle rather than the stripe-flagged AI default. */
.form-card {
  margin-top: 16px; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; max-width: 460px;
}
.form-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--gul);
  color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.form-body { flex: 1; min-width: 0; }
.form-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.form-meta { font-size: 12px; color: var(--ink-60); margin-top: 2px; }
.form-parent { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-parent:hover { color: var(--ink); }
.form-hent {
  text-decoration: none; border: 1px solid var(--ink); color: var(--ink);
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 100px; flex: none;
  transition: background .15s, color .15s;
}
.form-hent:hover { background: var(--ink); color: var(--surface); }

/* ---- Feedback (FK-12) ---- */
/* The secondary/ghost button from the design system, at meta size: quiet, flat, no icon. */
.feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.feedback-q { font-size: 12px; color: var(--ink-60); margin-right: 2px; }
.feedback-btn {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  color: var(--ink-60); background: var(--surface); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: var(--r-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.feedback-btn:hover { border-color: var(--ink); color: var(--ink); }
.feedback-btn.chosen { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.feedback-btn:disabled { cursor: default; }
.feedback-btn:disabled:not(.chosen) { opacity: .5; }

/* The contact card. dif.dk's medarbejder card turned into a row so it fits the widget: the
   photo disc left, name in the display face, role, then phone and email as the page's red
   links. Several people stack as rows inside one hairline container; no nested cards. */
.referral-card {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); max-width: 520px;
}
.referral-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; }
.referral-row.expandable {
  cursor: pointer;
  --unfold-panel: translateY(-1px) scaleY(.45);
  --unfold-cover: translateY(0px);
  --unfold-color: var(--ink);
}
.referral-row + .referral-row { border-top: 1px solid var(--line-soft); }
.referral-photo {
  flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--line-soft); display: flex; align-items: center; justify-content: center;
}
.referral-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.referral-photo-logo { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.referral-photo-logo img { object-fit: contain; padding: 9px 0; }
.referral-monogram {
  font-weight: 600; font-size: 20px; letter-spacing: 0.02em;
  color: var(--ink-60);
}
.referral-text { min-width: 0; flex: 1; padding-top: 2px; overflow-wrap: anywhere; }
.referral-heading { position: relative; }
.referral-heading.expandable { padding-right: 36px; }
.referral-name {
  font-weight: 600; font-size: 21.08px; line-height: 1.36;
  letter-spacing: normal; color: var(--ink); overflow-wrap: anywhere;
}
.referral-lead { font-size: 14px; line-height: 1.5; color: var(--ink); padding: 14px 18px 0; }
.referral-lead + .referral-row { padding-top: 12px; }
.referral-role { font-size: 13px; font-weight: 400; line-height: 1.615; color: var(--ink); margin-top: 2px; }
.referral-dept { font-size: 13px; font-weight: 600; line-height: 1.615; color: var(--ink); }
.referral-contact { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; margin-top: 10px; }
.referral-contact a {
  font-size: 16px; font-weight: 400; line-height: 1.75;
  color: var(--dif-red-deep); text-decoration: none;
  overflow-wrap: anywhere;
}
.referral-contact a:hover { text-decoration: underline; }
.referral-contact a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
/* The larger detail icon unfolds with card hover, keyboard focus or expanded details. */
.referral-photo-cell { flex: none; }
.referral-info {
  position: absolute; top: -8px; right: -10px;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  display: grid; place-items: center;
  border-radius: 4px; border: 0; background: transparent; color: var(--unfold-color);
  cursor: pointer; transition: color .18s ease;
}
.referral-info svg { width: 32px; height: 32px; overflow: visible; pointer-events: none; }
.referral-info svg rect { fill: var(--surface); }
.referral-info svg g { transform-box: view-box; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.referral-unfold-panel { transform-origin: 16px 14px; transform: var(--unfold-panel); }
.referral-unfold-cover { transform: var(--unfold-cover); }
.referral-info:focus-visible, .referral-info[aria-expanded="true"] {
  --unfold-panel: translateY(1px) scaleY(1);
  --unfold-cover: translateY(-2px);
  --unfold-color: var(--dif-red-deep);
}
@media (hover: hover) {
  .referral-row.expandable:hover:not(:has(.referral-contact a:hover)) {
    --unfold-panel: translateY(1px) scaleY(1);
    --unfold-cover: translateY(-2px);
    --unfold-color: var(--dif-red-deep);
  }
}
.referral-info:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.referral-description { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 10px 0 0; max-width: 48ch; }
@media (max-width: 400px) {
  .referral-row { gap: 12px; padding: 14px; }
  .referral-photo { width: 52px; height: 52px; }
  .referral-monogram { font-size: 17px; }
}

/* The red "KLADDE" label and the divider under the header carry the accent — no side stripe. */
.draft-card {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; max-width: 560px;
}
.draft-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft);
}
.draft-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--c-recruit); }
.draft-copy {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-60);
  font: inherit; font-size: 12px; padding: 5px 13px; border-radius: 100px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.draft-copy:hover { border-color: var(--ink); color: var(--ink); }
.draft-body { font-size: 14.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }

/* ---- Composer ---- */
.composer-wrap { flex: none; padding: 14px 28px 18px; background: var(--paper); border-top: 1px solid var(--line); }
.composer-inner { max-width: 720px; margin: 0 auto; }
/* While the empty state shows, the composer sits inline in the centered stack: no bar chrome,
   and it grows into a tall box — question at the top, Send anchored bottom-right. */
.conversation.centered { position: relative; overflow: hidden; }
.conversation.centered .scroll { position: relative; z-index: 1; }
/* dif.dk's signature red motion threads: dense skeins rooted in the bottom edge, rising in
   lazy waves and loops and diving back below the screen, drawn generatively on a canvas in
   the bottom-right corner of the start screen. Purely decorative; app.js removes the canvas
   when a conversation starts. */
.hero-threads {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: min(50vw, 860px); height: min(40vh, 380px);
  pointer-events: none;
}
.conversation.centered .composer-wrap {
  border-top: none; background: transparent; padding: 0;
  width: min(680px, 100%);
}
.conversation.centered .disclaimer { flex: none; position: relative; z-index: 1; /* Soft paper glow so the line stays readable on top of the thread graphic. */
  text-shadow: 0 0 8px var(--paper), 0 0 4px var(--paper), 0 0 2px var(--paper); }
.composer { display: flex; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--ink); box-shadow: var(--lift); }
.composer-input { min-width: 0; border: none; outline: none; font: inherit; color: var(--ink); background: transparent; resize: none; overflow-y: auto; line-height: 1.5; max-height: 168px; }
/* Explicit placeholder colour so it clears 4.5:1 (WCAG AA) instead of the faint browser default;
   opacity:1 stops Firefox from dimming it below the contrast we just set. */
.composer-input::placeholder { color: var(--ink-60); opacity: 1; }
/* dif.dk CTA: full pill in DIF Rød, label only; the white label clears 4.5:1 on it.
   (The trailing-arrow stroke dif.dk draws on its CTAs was tried and dropped,
   9 Sep 2026: it read as clutter in the chat.) */
.btn-send { flex: none; display: inline-flex; align-items: center; color: var(--surface); border: none; font: inherit; cursor: pointer; }
.btn-send:hover, .btn-send:focus-visible { background: var(--dif-red-press); }
.btn-send:active { transform: scale(0.97); }
.btn-send:disabled { opacity: .5; cursor: default; }

.ai-disclosure {
  margin: 12px auto 0; max-width: 720px; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.45; color: var(--ink-60); text-align: center;
}

/* ---- Sources rail ---- */
.sources { width: 312px; flex: none; background: var(--surface); border-left: 1px solid var(--line); flex-direction: column; }
/* Hidden on the start screen; the first question slides it in from the right (GSAP). */
.sources-head { padding: 21px 22px 14px; border-bottom: 1px solid var(--line); flex: none; }
.sources-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; color: var(--ink-60); }
.sources-sub { font-size: 12px; color: var(--ink-60); margin-top: 4px; }
.sources-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }

.sources-empty { margin-top: 30px; text-align: center; color: var(--ink-60); font-size: 13px; line-height: 1.6; padding: 0 14px; }
.sources-empty .ph { width: 36px; height: 36px; border-radius: var(--r-md); border: 1.5px dashed #E0E0DA; margin: 0 auto 12px; }

.source-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 10px; animation: difRise .2s ease-out; }
.source-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.source-card-link:hover { border-color: #D8D8D2; background: var(--surface); box-shadow: var(--lift); }
.source-card-link:hover .source-title { text-decoration: underline; text-underline-offset: 2px; }
.source-kind { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
/* The inset ring keeps the pale Gul "skabelon" marker visible on the creme card. */
.source-kind .sq { width: 7px; height: 7px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px rgba(44,55,62,0.25); }
.source-kind .label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-60); text-transform: uppercase; }
.source-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.source-meta { font-size: 11.5px; color: var(--ink-60); margin-top: 4px; }
.source-dl {
  display: inline-block; margin-top: 10px; text-decoration: none; font-size: 12px; font-weight: 600;
  color: var(--ink); border: 1px solid #E0E0DA; padding: 5px 13px; border-radius: 100px;
  transition: background .15s, color .15s;
}
.source-dl:hover { background: var(--ink); color: var(--surface); }

/* Honour reduced-motion: no caret pulse, no entrance animations (text is revealed instantly in JS). */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .msg, .source-card { animation: none; }
  .btn-send, .suggestion, .embedded .btn-send { transition: none; }
  .referral-info, .referral-info svg g { transition: none; }
}

/* ---- Narrow widths: drop the sources rail, the chips carry the context inline ---- */
@media (max-width: 880px) {
  .sources { display: none; }
  .hero { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .sellpoints { grid-template-columns: 1fr; }
  .sellpoint { grid-row: auto; grid-template-rows: auto auto; row-gap: 6px; padding: 18px 20px; }
  .sellpoint + .sellpoint { border-left: none; border-top: 1px solid var(--line-soft); }
  /* On narrow screens the centered column fills the width — the threads would sit behind text. */
  .conversation.centered .hero-threads { display: none; }
}

@media (max-width: 600px) {
  .transcript { padding: 16px 14px 8px; }
  .composer-wrap { padding: 10px 14px 14px; }
}

/* DIF scales its contact-card rem values at phone widths while article copy remains 16px. */
@media (max-width: 560px) {
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px 12px; padding-block: 10px; }
  .brand { flex: 1 1 170px; min-width: 0; }
  .brand-text { min-width: 0; }
  .topbar-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

  .answer h2 { font-size: 21px; }
  .answer h3 { font-size: 19.6px; }
  .answer h4 { font-size: 18.2px; }
  .answer p { margin-bottom: 14px; }
  .answer ul, .answer ol { margin-bottom: 14px; }

  .referral-name { font-size: 18.445px; }
  .referral-role { font-size: 11.375px; }
  .referral-dept { font-size: 11.375px; }
  .referral-contact a { font-size: 14px; }
}

/* ---------- Panel chrome (the BP-4 "Centreret bund" mock) ----------
   The chat's one look, standalone and framed alike (embed-panel.js puts .embedded on
   <html> on every page view, and .framed only inside the launcher's iframe): compact
   header, optional notice, welcome bubble instead of the hero, footer disclaimer. The
   standalone-only adjustments — the page's reading column and its rail — sit at the end
   of this block under `.embedded:not(.framed)`. */
.embedded .main { position: relative; }
.embedded .sources { display: none; }
.embedded .btn-panel.btn-panel-kilder { display: inline-flex; }
.embedded.sources-open .sources {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 30;
}
@media (min-width: 880px) {
  .embedded .btn-panel.btn-panel-kilder { display: inline-flex; }
  .embedded.sources-open .sources {
    display: flex;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 312px;
    max-width: none;
    z-index: auto;
  }
}
/* The header takes the standalone topbar's own chrome — white on the chat's paper, under the
   app's standard hairline — so the two cannot drift apart; only its metrics are the panel's.
   Everything on it was white for the dark fill it used to have, so it all inverted with it. */
.embedded .topbar {
  height: auto;
  padding: 12px 14px; align-items: center; gap: 10px;
  min-width: 0;
}
.embedded .brand { align-items: center; min-width: 0; }
.embedded .brand-text { min-width: 0; }
/* Designkoncept 2026's display face, DIF Regular, in sentence case with tight leading. */
.embedded .brand-title {
  font-weight: 400; font-size: 20px; line-height: 1.05; letter-spacing: 0.01em;
  color: var(--ink);
  overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal;
}
/* At phone width 20px caps beside the 44px header buttons broke the word mid-way. */
@media (max-width: 560px) {
  .embedded .brand-title { font-size: 16px; letter-spacing: 0; }
}
/* --ink-60 on --paper is 4.5:1, which 11.5px text needs. */
.embedded .brand-sub { font-size: 11.5px; line-height: 1.55; color: var(--ink-60); white-space: normal; }
.embedded .topbar-right {
  display: flex; gap: 8px; flex: none; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end; max-width: 100%;
}
.embedded .btn-panel {
  width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.embedded .btn-panel:hover { background: rgba(44, 55, 62, 0.16); }
.embedded .btn-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.embedded .btn-panel svg { width: 15px; height: 15px; }
.embedded .ai-disclosure { display: none; }
.embedded .btn-reset {
  background: rgba(44, 55, 62, 0.08); border: 0; color: var(--ink);
  font-size: 12px; height: 32px; padding: 0 12px; border-radius: 8px;
}
.embedded .btn-reset:hover { background: rgba(44, 55, 62, 0.16); color: var(--ink); }

/* Transcript state: the standalone page's 28px insets and 720px column shrink to the
   panel's 14px chat inset. The composer band must stay visually identical to the opening
   (empty) state — same transparent background, no border, same 14px inset and bottom gap —
   so the input area does not appear to jump when the first message is sent. */
.embedded .transcript { padding: 16px 14px 8px; max-width: none; }
.embedded .conversation:not(.centered) .composer-wrap {
  padding: 4px 14px 10px; background: transparent; border-top: none; width: auto;
}
.embedded .conversation:not(.centered) .composer-inner { max-width: none; }

/* A light neutral band above the warmer chat background, matching the reference. */
.embedded .panel-notice {
  background: #F6F6F3; color: var(--ink); font-size: 12px; line-height: 1.4;
  padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.embedded .panel-notice-text { flex: 1; }
.embedded .panel-notice-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.embedded .panel-notice-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.embedded .panel-notice-close {
  flex: none; border: 0; background: none; cursor: pointer; padding: 2px;
  color: var(--ink-60); line-height: 0; border-radius: 6px;
}
.embedded .panel-notice-close:hover { color: var(--ink-60); }
.embedded .panel-notice-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.embedded .panel-notice-close svg { width: 13px; height: 13px; }
.embedded .panel-notice-pop { position: relative; align-self: center; }
.embedded .panel-notice-tip {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin-inline: auto;
  width: 260px; z-index: 20; background: var(--line-soft); color: var(--ink); font-size: 12px; line-height: 1.4;
  padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(44, 55, 62, 0.25);
}
.embedded .panel-notice-pop:hover .panel-notice-tip,
.embedded .panel-notice-pop:focus-within .panel-notice-tip,
.embedded .panel-notice-pop.open .panel-notice-tip { display: block; }

/* Compact empty state: welcome bubble + suggestions, composer pinned at the bottom. */
.embedded .hero, .embedded .hero-eyebrow, .embedded .hero-sub,
.embedded .sellpoints, .embedded .hero-threads { display: none; }
.embedded .empty {
  justify-content: flex-start; align-items: stretch; text-align: left;
  padding: 16px 14px 14px; gap: 10px; max-width: none;
}
.embedded .welcome-bubble {
  order: 0; align-self: flex-start; max-width: 88%;
  background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 14px;
}
/* White pills sit just above the composer, without visible resting outlines.
   Hover and keyboard focus retain the Mørkerød fill. */
.embedded .empty .suggestions {
  order: 1; flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  width: 100%; gap: 8px; margin-top: auto;
}
.embedded .empty .composer-wrap { order: 2; margin-top: 0; }
.embedded .suggestion {
  font-size: 13px; border: 1px solid transparent; border-radius: 100px; padding: 8px 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.embedded .suggestion:hover, .embedded .suggestion:focus-visible {
  background: var(--dif-red-dark); color: var(--surface); border-color: var(--dif-red-dark); box-shadow: none;
}

/* Three-class selectors: the centered empty state's own `.conversation.centered .composer`
   rules (column layout, min-height 118, Send under the input) would otherwise outrank
   the compact one-row pill the panel wants. The 24px radius is a full pill at one row and
   rounds only the corners once the question grows to more lines, so the text never runs
   under the curve; Send stays on the bottom row. */
.embedded .conversation .composer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  flex-direction: row; gap: 8px;
  padding: 4px 4px 4px 16px; align-items: flex-end; min-height: 0;
}
/* the autosize script grows the input one row per line up to max-height, then it scrolls */
.embedded .conversation .composer-input { font-size: 14px; min-height: 0; padding: 8px 0; flex: 1; }
.embedded .conversation .btn-send { align-self: flex-end; margin-top: 0; }
.embedded .btn-send {
  padding: 10px 20px; background: var(--dif-red); font-weight: 700; font-size: 13.5px; border-radius: 100px;
  transition: background .15s, transform .05s;
}
/* The centered state pins the disclaimer directly on .conversation (full width), so its
   own padding is its inset: 14px sides = the same inset as the bubbles and rows. In the
   transcript state it sits inside the already-inset composer band, so no side padding. */
.embedded .conversation .disclaimer {
  font-size: 10.5px; color: var(--ink-60); text-align: left;
  margin: 0; padding: 0 14px 10px;
}
/* 14px above / 0 below inside the wrap (whose 10px bottom padding supplies the same
   bottom gap the centered state's own 10px disclaimer padding gives). */
.embedded .conversation:not(.centered) .disclaimer { padding: 14px 0 0; }
/* The line's parts: text · "Om assistenten". The button is a text link because it opens
   something in the app; the padding keeps its touch target near 24px without growing the
   line, and its own min sizes beat the coarse-pointer 44px rule below by specificity. */
.embedded .disclaimer-sep { padding: 0 5px; color: var(--ink-40); }
.embedded .about-link {
  background: none; border: 0; margin: -6px 0; padding: 6px 0; font: inherit; font-weight: 600;
  color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  min-height: 0; min-width: 0; border-radius: 2px;
}
.embedded .about-link:hover { color: var(--ink); }

/* ---- "Om assistenten" (art. 50) ---- */
/* A native <dialog>: centered card, and a bottom sheet under 560px. Padding sits on the
   inner blocks, so a click that reaches the dialog element itself is a click outside. */
.about {
  border: 0; padding: 0; background: var(--surface); color: var(--ink);
  width: min(440px, calc(100vw - 40px)); max-height: calc(100dvh - 48px);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(44, 55, 62, 0.28);
}
.about[open] { display: flex; flex-direction: column; }
.about::backdrop { background: rgba(44, 55, 62, 0.38); }
.about-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; flex: none; }
.about-head h2 { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; }
.about-body { padding: 0 20px 20px; overflow-y: auto; min-height: 0; }
.about-body section + section { margin-top: 16px; }
.about-body h3 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); }
.about-body p { margin: 0; font-size: 14px; line-height: 1.5; }
.about-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-foot a { color: var(--dif-red-deep); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .about { margin: auto 0 0; width: 100%; max-width: none; max-height: 85dvh; border-radius: 16px 16px 0 0; }
}
@keyframes aboutFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aboutRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .about[open] { animation: aboutRise .18s ease-out; }
  .about[open]::backdrop { animation: aboutFade .16s ease-out; }
}

/* Standalone (not framed): the same panel look on the page's own column. The header keeps
   the panel's 14px inset, the chat sits in the 720px reading column, the AI disclosure
   (FK-08) stays, and on a wide screen the KILDER rail sits beside the chat as it always
   did, so the toggle is only needed below the breakpoint. */
.embedded:not(.framed) .ai-disclosure:not([hidden]) { display: block; }
.embedded:not(.framed) .empty,
.embedded:not(.framed) .transcript { max-width: 748px; margin: 0 auto; width: 100%; }
.embedded:not(.framed) .conversation:not(.centered) .composer-inner { max-width: 720px; margin: 0 auto; }
/* The start screen pins the line on .conversation at full width; standalone it aligns with
   the 748px column instead of sitting at the page's left edge. */
.embedded:not(.framed) .conversation.centered .disclaimer { max-width: 748px; margin: 0 auto; width: 100%; }
@media (min-width: 880px) {
  .embedded:not(.framed) .sources { display: flex; }
  .embedded:not(.framed) .btn-panel.btn-panel-kilder { display: none; }
}


/* Touch targets. `pointer: coarse` is the real signal and catches every touch device at any
   size; the width half is only for a mouse in a very narrow window. It has to stay clear of
   the embed panel's own 600px width, because that width changes at runtime: at max-width
   600px the panel matched until the rail widened it, so opening the rail resized the header
   buttons 44px → 32px and the header with them, 68px → 64px (7 Sep 2026). */
@media (pointer: coarse), (max-width: 560px) {
  button, .suggestion, .feedback-btn, .citation, .form-hent {
    min-height: 44px;
    min-width: 44px;
  }
}