/* ==========================================================================
   Kundechat (#kundechat), 18. oktober 2026. Chat-siden for chatten på
   nordiva.no: Oversikt, Ubesvarte, Samtaler og Kunnskap.

   Kortene, korthodet, rutenettet, periodevalget og merket er Lodds og deles
   med Hjem og Lager (lodd.css, :is(#skjerm-hjem, #skjerm-lager,
   #skjerm-kundechat)). Diagrammene er Lodds. Her står bare det som hører til
   denne siden, og alt står under #skjerm-kundechat, så ingen ny klasse
   kommer på toppnivå. Hvert mål er et token (skalaene i lodd-tokens.css).
   ========================================================================== */

#skjerm-kundechat .kort { margin: 0 0 var(--s-5); padding: var(--s-5); }
#skjerm-kundechat .kort.tett { padding: 0; }
#skjerm-kundechat .rutenett { align-items: stretch; }
#skjerm-kundechat .rutenett .kort { margin: 0; }
#skjerm-kundechat .faner { margin: 0 0 var(--s-5); }
#skjerm-kundechat .tittel { display: block; font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 500; overflow-wrap: anywhere; }
#skjerm-kundechat .under { display: block; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
#skjerm-kundechat .under a { color: var(--brand-tekst); }
#skjerm-kundechat .vokser { flex: 1 1 var(--kc-tekstbredde); min-width: 0; }

/* Periodevalget står øverst til høyre, utenfor kortene. */
#skjerm-kundechat .kc-verktoy { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin: 0 0 var(--s-4); }

/* Nøkkeltallene: fire i en rad, to under 760 px innhold, ett under 600 px. */
#skjerm-kundechat .nokkelrekke.kc-fire { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#skjerm-kundechat .nokkelrekke.kc-to { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--s-4); }
#skjerm-kundechat .nokkelrekke .nokkel .verdi { font-size: var(--t-6); line-height: var(--t-6-h); }
#skjerm-kundechat .nokkelrekke .nokkel .endring { display: block; }
#skjerm-kundechat .nokkelrekke .nokkel .endring .mono { color: var(--ink-2); }
#skjerm-kundechat .nokkelrekke > .seksjon-tom { grid-column: 1 / -1; }
@container innhold (max-width: 759px) {
  #skjerm-kundechat .rutenett { grid-template-columns: minmax(0, 1fr); }
  #skjerm-kundechat .nokkelrekke.kc-fire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  #skjerm-kundechat .nokkelrekke.kc-fire .nokkel + .nokkel { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
  #skjerm-kundechat .nokkelrekke.kc-fire { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  #skjerm-kundechat .nokkelrekke.kc-fire .nokkel + .nokkel { padding: var(--s-3) 0 0; border-top: 1px solid var(--line); }
}

#skjerm-kundechat .legende { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-3); }
#skjerm-kundechat .legende .mono { margin-left: var(--s-2); }
#skjerm-kundechat .kc-fot { margin: var(--s-4) 0 0; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
#skjerm-kundechat .kc-fot a { color: var(--brand-tekst); }
#skjerm-kundechat .kc-fot .mono { color: var(--ink-2); }
#skjerm-kundechat .kc-hjelp { margin: 0; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); }

/* Radene: ett spørsmål, en samtale eller et svar. En hårstrek mellom, ingen
   ramme, og knappene sitter til høyre (under teksten på smal flate). */
#skjerm-kundechat .kc-liste > :first-child { border-top: 0; }
#skjerm-kundechat .kc-ub,
#skjerm-kundechat .kc-sam { display: block; width: 100%; padding: var(--s-4) var(--s-5); border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; }
#skjerm-kundechat .kc-ub-topp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-5); }
#skjerm-kundechat .kc-ub-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
#skjerm-kundechat .kc-svar { margin: var(--s-3) 0 0; padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); font-size: var(--t-3); line-height: var(--t-3-h); white-space: pre-wrap; overflow-wrap: anywhere; }
#skjerm-kundechat .kc-sam { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); min-height: var(--s-8); cursor: pointer; }
#skjerm-kundechat .kc-sam .tittel { font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-kundechat .kc-sam:hover { background: var(--flate-2); }
}
#skjerm-kundechat .kc-merker { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }

/* Skjemaet for å legge inn et svar. Feltene er fylte flater uten egen ramme,
   og står på kortet de ligger i. */
#skjerm-kundechat .kc-skjema { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
#skjerm-kundechat .kort.kc-skjema { margin: 0 0 var(--s-5); }
#skjerm-kundechat .kc-felt { display: grid; gap: var(--s-2); }
#skjerm-kundechat .kc-felt .etikett { color: var(--ink-3); }
#skjerm-kundechat .kc-skjema .skrivefelt { width: 100%; min-height: var(--s-8); padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); resize: vertical; }
#skjerm-kundechat .kc-felt:focus-within .skrivefelt { background: var(--flate-3); }
#skjerm-kundechat .kc-skjema .feilmelding { margin: 0; }

#skjerm-kundechat .kc-sider { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: var(--s-5) 0 0; }

/* Én samtale: hodet, sammendraget og en rolig utskrift. Kunden står til
   venstre i den grå flaten, chatten til høyre i merkets svake fyll. */
#skjerm-kundechat .kc-hode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-5); }
#skjerm-kundechat .kc-hode .hva { font-size: var(--t-3); color: var(--ink-3); }
#skjerm-kundechat .kc-sammendrag p { margin: var(--s-2) 0 0; font-size: var(--t-3); line-height: var(--t-3-h); white-space: pre-wrap; overflow-wrap: anywhere; }
#skjerm-kundechat .kc-prat { display: flex; flex-direction: column; gap: var(--s-4); }
#skjerm-kundechat .kc-boble { display: grid; gap: var(--s-1); max-width: var(--kc-boble-bredde); padding: var(--s-4); border-radius: var(--r-3); }
#skjerm-kundechat .kc-boble p { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); white-space: pre-wrap; overflow-wrap: anywhere; }
#skjerm-kundechat .kc-boble.kunde { align-self: flex-start; background: var(--flate-2); }
#skjerm-kundechat .kc-boble.chat { align-self: flex-end; background: var(--brand-svak); }
#skjerm-kundechat .kc-hendelser { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }

/* Målene er tokens, satt her og ikke i en egen blokk et annet sted. */
#skjerm-kundechat { --kc-tekstbredde: 20rem; --kc-boble-bredde: 85%; }
@media (max-width: 599px) {
  #skjerm-kundechat .kc-boble { max-width: 100%; }
  #skjerm-kundechat .kc-ub-knapper { width: 100%; }
}