/* ─── Chattens delade CSS ────────────────────────────────────────────────
   Meddelandebubblorna, frågekortet (B44) och avataren — allt som chattkärnan
   i wwwroot/js/chat-widget.js renderar. Utklippt ur main.css så att BÅDA
   skalen kan ladda den:

     KC  Pages/Shared/_Layout.cshtml            (utöver main.css)
     RC  Pages/AdminPortal/_AdminPortalLayout.cshtml

   AdminPortal-layouten har ingen egen stylesheet alls — all dess CSS ligger
   i ett inline <style>-block — och kunde alltså inte nå de här reglerna
   innan utbrytningen.

   Reglerna är FLYTTADE, inte omskrivna. Lägg inget skalspecifikt här: det
   hör hemma i respektive layout.
   ──────────────────────────────────────────────────────────────────────── */

/* Bubbeltypografin stod i main.css:s delade typografilistor tillsammans med
   halva kundsajten. Listorna lämnades där; bubblan får sin deklaration här
   i stället, så RC ser likadant ut utan att dra in main.css.
   Fallback-stacken är inte kosmetik: bara kundsajten laddar Kumbh Sans som
   @font-face, så utan den föll AdminPortal-chatten till webbläsarens
   serif-default. */
.current-chat-layout-wrapper__body-message-bubble {
    font-family: "Kumbh Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19.6px;
}

@media (min-width: 1024px) {
    .current-chat-layout-wrapper__body-message-bubble {
        font-size: 16px;
        line-height: 22.4px;
    }
}


.chat__avatar-wrapper {
    display: flex;
    width: 39px;
    height: 39px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2.127px solid #512355
}

    .chat__avatar-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        object-fit: cover
    }

.current-chat.is-empty .current-chat-layout-wrapper__body-message {
    justify-content: center
}

.current-chat.is-empty .current-chat-layout-wrapper__body-message .chat__avatar {
    display: none
}

.current-chat.is-empty .current-chat-layout-wrapper__body-message-bubble {
    flex: 0 1 auto;
    max-width: 560px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--color-text);
    font-size: 21px;
    line-height: 29.4px
}

.current-chat-layout-wrapper__body-message {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 16px;
    align-self: stretch;
    min-width: 0
}

.current-chat-layout-wrapper__body-message--from-kelly {
    justify-content: flex-start
}

    .current-chat-layout-wrapper__body-message--from-kelly .current-chat-layout-wrapper__body-message-bubble {
        border-radius: 24px 24px 24px 6px;
        background: rgba(var(--brand-primary-rgb), .1490196078);
        color: rgba(2, 8, 23, .8);
        flex-direction: column;
    }

.current-chat-layout-wrapper__body-message-bubble {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
    flex: 0 1 auto;
    width: fit-content;
    border-radius: 24px 24px 6px 24px;
    background: #efefef;
    color: rgba(2, 8, 23, .8);
    max-width: 656px;
    overflow-wrap: anywhere
}

/* Flerfrågeformuläret (B44) skickar en rad per fråga. Bubblan sätts med
   textContent, så utan pre-line kollapsar raderna till en enda lång rad. */
.current-chat-layout-wrapper__body-message-bubble.is-multiline {
    white-space: pre-line;
}

/* ─── Kellys svar: markdown inuti bubblan ────────────────────────────────────
   Servern renderar modellens markdown till HTML (MarkdownToHtml i
   ApiControllers/Shared/ChatPostControllerBase.cs) och bubblan får den som
   innerHTML. Utan reglerna nedan ärver det innehållet dokumentets defaultskala
   — en h2 blir 32px mitt i en 16px-bubbla, listor får 40px indrag och tabeller
   blir kolumner utan linjer. Det här blocket är den skalan, uttryckt i
   bubblans egna mått.

   Två saker att känna till innan du ändrar här:

   1. Bubblan är en flexbox (för frågekortet i B44). Markdown vill ha normalt
      blockflöde — marginalkollaps, tabeller som får egen bredd. Därför slår
      :has() nedan om just de bubblor som bär markdown till display:block.
      Frågekortsbubblan innehåller bara .chat-elicitation och matchas inte, så
      den ligger kvar som flex och rörs inte av det här blocket.
   2. Alla färger kommer ur --brand-primary-rgb, den variabel varje white label
      faktiskt sätter i sin customer-theme.css. Inga --brand-primary-tint-*
      här: de är låsta till standardtemats lila i theme-base.css och skulle
      krocka med en kund som har en blå profil. Hårdkoda aldrig en färg här. */

.current-chat-layout-wrapper__body-message-bubble:has(> p, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > table, > blockquote, > pre, > hr) {
    display: block;
    gap: 0;
    line-height: 1.55;
    /* Bubblan är width:fit-content, och en tabell med width:max-content skulle
       annars dra HELA bubblan bredare än chattkolumnen — tabellens max-width
       räknas mot bubblans egen bredd, som i sin tur följer tabellen. min-width:0
       låter bubblan krympa som flex-item igen, så kedjan bryts och det blir
       tabellen som scrollar i stället för bubblan som svämmar över. */
    min-width: 0;
    /* Bubblans egna ton-steg. Namngivna här så tabell, citat och linjer drar
       ur samma palett i stället för att var och en hitta på ett eget värde. */
    --chat-md-line: rgba(var(--brand-primary-rgb), .2);
    --chat-md-line-soft: rgba(var(--brand-primary-rgb), .11);
    --chat-md-zebra: rgba(var(--brand-primary-rgb), .05);
    --chat-md-head: rgba(var(--brand-primary-rgb), .13);
    --chat-md-ink: rgba(2, 8, 23, .92);
    --chat-md-ink-soft: rgba(2, 8, 23, .6);
}

/* Första och sista blocket ska ligga an mot bubblans padding, inte lägga en
   extra marginal ovanpå den. :is() höjer specificiteten över elementreglerna
   nedan, som annars vinner. */
.current-chat-layout-wrapper__body-message-bubble > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, pre, hr):first-child {
    margin-top: 0;
}

.current-chat-layout-wrapper__body-message-bubble > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, pre, hr):last-child {
    margin-bottom: 0;
}

/* Rubriker. Skalan är bubblans, inte sidans: h2 ligger strax över brödtexten
   och h3 knappt över den. Det räcker för hierarki på 656 px och håller
   rubriken från att bli ett eget stycke i sig. */
.current-chat-layout-wrapper__body-message-bubble h1,
.current-chat-layout-wrapper__body-message-bubble h2,
.current-chat-layout-wrapper__body-message-bubble h3,
.current-chat-layout-wrapper__body-message-bubble h4,
.current-chat-layout-wrapper__body-message-bubble h5,
.current-chat-layout-wrapper__body-message-bubble h6 {
    color: var(--chat-md-ink);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 22px 0 8px;
}

.current-chat-layout-wrapper__body-message-bubble h1,
.current-chat-layout-wrapper__body-message-bubble h2 {
    font-size: 20px;
    line-height: 1.3;
}

.current-chat-layout-wrapper__body-message-bubble h3 {
    font-size: 17px;
    line-height: 1.35;
    margin-top: 18px;
}

.current-chat-layout-wrapper__body-message-bubble h4,
.current-chat-layout-wrapper__body-message-bubble h5,
.current-chat-layout-wrapper__body-message-bubble h6 {
    font-size: 15px;
    line-height: 1.4;
    margin-top: 16px;
}

/* Ett långt svar är sektioner, inte löptext. Hårstrecket är det som gör dem
   läsbara som sektioner utan att kosta lika mycket tomrum som ren luft skulle
   göra — och det behövs: modellens svar har nästan alltid brödtext med feta
   inledningsord ("**Brand** – registrerad självrisk ..."), och en rubrik som
   bara är fet och någon punkt större drunknar bland dem. Strecket säger "ny
   sektion" oavsett hur lika rubrik och fet brödtext råkar se ut.

   Gäller både h2 och h3 därför att modellen väljer nivå fritt: en del svar har
   en h2-titel och h3-sektioner, andra bara h2:or. Utan h3 här blir de vanliga
   svaren helt utan sektionsmarkering.

   Tonen kommer ur --brand-primary-rgb med låg alpha, så den är läsbar i alla
   fyra white labels utan att bli ett kontrastproblem. */
.current-chat-layout-wrapper__body-message-bubble * ~ :is(h2, h3) {
    border-top: 1px solid var(--chat-md-line-soft);
    padding-top: 18px;
}

/* ... men en rubrik direkt under en annan rubrik är ingen ny sektion — det är
   en titel med sin första underrubrik. Strecket där skulle skära av dem. */
.current-chat-layout-wrapper__body-message-bubble :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3) {
    border-top: 0;
    padding-top: 0;
}

.current-chat-layout-wrapper__body-message-bubble p {
    margin: 0 0 12px;
}

/* Listor. 40px default-indrag äter en sjättedel av en mobilbubbla; 22/24 px
   räcker för att markören ska läsa som en markör. */
.current-chat-layout-wrapper__body-message-bubble ul,
.current-chat-layout-wrapper__body-message-bubble ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.current-chat-layout-wrapper__body-message-bubble ol {
    padding-left: 24px;
}

.current-chat-layout-wrapper__body-message-bubble li {
    margin: 0 0 7px;
    padding-left: 2px;
}

.current-chat-layout-wrapper__body-message-bubble li:last-child {
    margin-bottom: 0;
}

.current-chat-layout-wrapper__body-message-bubble li > ul,
.current-chat-layout-wrapper__body-message-bubble li > ol {
    margin: 7px 0 0;
}

.current-chat-layout-wrapper__body-message-bubble li::marker {
    color: rgba(var(--brand-primary-rgb), .72);
    font-weight: 600;
}

/* Tabeller. display:block + width:max-content är det som gör att en bred
   tabell SCROLLAR i sidled i stället för att pressas ihop till oläsliga
   kolumner i en mobilbubbla — utan det bröts "1 000 000 kr" över tre rader.
   max-width:100% håller själva bubblan kvar inom sin bredd. */
.current-chat-layout-wrapper__body-message-bubble table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 4px 0 14px;
    font-size: 14px;
    line-height: 1.45;
    /* Bubblans overflow-wrap:anywhere bryter annars mitt i belopp. */
    overflow-wrap: normal;
    /* En tabell som scrollar utan synlig scrollbar ser ut som en avhuggen
       tabell. Tunn, tonad list gör att det syns att det finns mer åt höger. */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-primary-rgb), .35) transparent;
}

.current-chat-layout-wrapper__body-message-bubble table::-webkit-scrollbar {
    height: 6px;
}

.current-chat-layout-wrapper__body-message-bubble table::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(var(--brand-primary-rgb), .35);
}

.current-chat-layout-wrapper__body-message-bubble thead th {
    background: var(--chat-md-head);
    color: var(--chat-md-ink);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    padding: 9px 12px;
    border-bottom: 1px solid var(--chat-md-line);
}

.current-chat-layout-wrapper__body-message-bubble td {
    padding: 9px 12px;
    border-top: 1px solid var(--chat-md-line-soft);
    vertical-align: top;
}

.current-chat-layout-wrapper__body-message-bubble tbody tr:first-child td {
    border-top: 0;
}

.current-chat-layout-wrapper__body-message-bubble tbody tr:nth-child(2n) {
    background: var(--chat-md-zebra);
}

.current-chat-layout-wrapper__body-message-bubble th:first-child,
.current-chat-layout-wrapper__body-message-bubble td:first-child {
    padding-left: 14px;
}

/* Rundade hörn på själva tabellinnehållet (syns i respektive ände när man
   scrollat dit) — radien sitter på hörncellerna, inte på scrollfönstret. */
.current-chat-layout-wrapper__body-message-bubble thead th:first-child {
    border-top-left-radius: 10px;
}

.current-chat-layout-wrapper__body-message-bubble thead th:last-child {
    border-top-right-radius: 10px;
}

.current-chat-layout-wrapper__body-message-bubble tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.current-chat-layout-wrapper__body-message-bubble tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.current-chat-layout-wrapper__body-message-bubble th:last-child,
.current-chat-layout-wrapper__body-message-bubble td:last-child {
    padding-right: 14px;
}

.current-chat-layout-wrapper__body-message-bubble blockquote {
    margin: 14px 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid rgba(var(--brand-primary-rgb), .38);
    color: var(--chat-md-ink-soft);
}

.current-chat-layout-wrapper__body-message-bubble blockquote > :last-child {
    margin-bottom: 0;
}

.current-chat-layout-wrapper__body-message-bubble hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--chat-md-line-soft);
    margin: 20px 0;
}

.current-chat-layout-wrapper__body-message-bubble strong,
.current-chat-layout-wrapper__body-message-bubble b {
    font-weight: 700;
    color: var(--chat-md-ink);
}

.current-chat-layout-wrapper__body-message-bubble a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.current-chat-layout-wrapper__body-message-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(var(--brand-primary-rgb), .09);
}

.current-chat-layout-wrapper__body-message-bubble pre {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--brand-primary-rgb), .07);
    overflow-x: auto;
}

.current-chat-layout-wrapper__body-message-bubble pre code {
    padding: 0;
    background: none;
}

/* I en mobilbubbla är det luften som kostar mest. Rubrikerna behåller sin
   hierarki men tar ett snäpp mindre plats, och tabellen får mindre cellpadding
   så fler kolumner ryms innan den måste scrollas. */
@media (max-width: 640px) {
    .current-chat-layout-wrapper__body-message-bubble h1,
    .current-chat-layout-wrapper__body-message-bubble h2 {
        font-size: 18px;
    }

    .current-chat-layout-wrapper__body-message-bubble h3 {
        font-size: 16.5px;
    }

    .current-chat-layout-wrapper__body-message-bubble h1,
    .current-chat-layout-wrapper__body-message-bubble h2,
    .current-chat-layout-wrapper__body-message-bubble h3,
    .current-chat-layout-wrapper__body-message-bubble h4,
    .current-chat-layout-wrapper__body-message-bubble h5,
    .current-chat-layout-wrapper__body-message-bubble h6 {
        margin-top: 18px;
    }

    .current-chat-layout-wrapper__body-message-bubble * ~ :is(h2, h3) {
        padding-top: 15px;
    }

    .current-chat-layout-wrapper__body-message-bubble ul,
    .current-chat-layout-wrapper__body-message-bubble ol {
        padding-left: 19px;
    }

    .current-chat-layout-wrapper__body-message-bubble th,
    .current-chat-layout-wrapper__body-message-bubble td {
        padding: 8px 10px;
    }
}

/* Svaret på ett frågekort skickas som ett vanligt meddelande — transporten,
   modellen och historiken behöver det — men renderas ALDRIG som bubbla:
   fråga→svar-blocket i kortet ovanför är presentationen. Noden ligger kvar
   dold därför att både cachehydreringen och serverhistoriken härleder kortets
   läge ur just den raden. display:none håller den också utanför
   tillgänglighetsträdet, så den läses inte upp två gånger. */
.current-chat-layout-wrapper__body-message.is-elicitation-answer {
    display: none;
}

/* Kompositen (B44): flikar kunden in ett fritt meddelande mitt i ett formulär
   följer de redan besvarade frågornas rader med som ETT meddelande, före den
   fria texten. Hela meddelandet står kvar i bubblan — det är transportens och
   historikens text, och den kortets läge härleds ur — men bara svansen syns.
   Svarsraderna står redan som fråga→svar i kortet ovanför. */
.current-chat-layout-wrapper__body-message-bubble .is-elicitation-carried {
    display: none;
}

/* B44: chatten kan avsluta en tur med en fråga i stället för ett svar. Ett och
   samma frågekort renderas i fyra lägen inuti Kellys vanliga bubbla — aktivt
   (klickbara alternativ), besvarat (kompakt fråga→svar-block), delvis besvarat
   (samma block, efter en inflikning som bar med sig delsvaren) och låst
   (obesvarad tur som laddats om). Färgerna kommer uteslutande ur
   brand-variablerna (theme-base.css + white-labelns customer-theme.css), så
   kortet följer kundens tema utan egna värden. */
.chat-elicitation {
    position: relative; /* ankare för info-knappen i bubblans övre högra hörn */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.chat-elicitation__progress {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(2, 8, 23, .55);
}

/* B81: registrerat värde som informerar frågan utan att besvara den. Egen
   rad under frågan, inte en hover-ikon — gömd i hover var den i praktiken
   osynlig, och hela funktionen såg ut att inte göra något. */
.chat-elicitation__note {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 8, 23, .62);
}

/* B81: sektionsrubrik i RC:s långformulär ("redan känt" mot "behöver fyllas
   i"). Versal etikett som progressraden, inte en egen rubriknivå: den delar
   upp formuläret utan att konkurrera med frågorna om uppmärksamheten. */
.chat-elicitation__section {
    margin: 0;
    padding-top: 4px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(2, 8, 23, .55);
}

.chat-elicitation__section:not(:first-child) {
    padding-top: 12px;
    border-top: 1px solid rgba(2, 8, 23, .08);
}

/* Ett fält med ett registrerat värde är redan besvarat tills rådgivaren säger
   annat — dämpad markering, inte en varning. */
.chat-elicitation__field--known .chat-elicitation__freetext-input {
    background: rgba(2, 8, 23, .03);
}

/* B73/introsplitten: paketets intro har INGEN egen regel här längre. Kelly:s
   inledning ovanför frågorna är ett påstående, inte en del av frågan, och
   renderas som en vanlig Kelly-bubbla FÖRE kortet (appendKellyIntroMessage i
   chat-widget.js) — den ärver bubblans egen typografi inklusive
   markdownreglerna ovan, eftersom introt numera bär serverrenderad HTML
   (`introHtml`), och `is-multiline` ger den råa textvägen samma
   pre-line-radbrytning som den hade inuti kortet. */

.chat-elicitation__question {
    margin: 0;
    font-weight: 600;
}

/* Rader med en frågetext (formulärets rubrik eller blankettens fråga→svar-par)
   plus en valfri förklaring (Task 4/B44, omstylad i stilrundan 2026-09-24).
   Bara närvarande när frågan faktiskt bär en `info`-text — annars renderas
   frågenoden utan omslag. I blanketten ligger ikonen radvis (margin-left:auto
   skjuter den till högerkanten); i formuläret lyfts den till bubblans övre
   högra hörn via --corner. */
.chat-elicitation__question-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.chat-elicitation__info {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.chat-elicitation__info:hover,
.chat-elicitation__info:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(2, 8, 23, .18);
}

.chat-elicitation__info--corner {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
}

.chat-elicitation__info-glyph {
    display: block; /* inline-svg:ns baseline-luft bort — cirkeln centrerar */
}

/* Egen tooltip i stället för webbläsarens title (den var trög och ostylad):
   vit botten, Kellys primärfärg på text och kant, rundade hörn, mjuk skugga.
   Visas direkt på hover/fokus och hålls öppen av --open (klick/tap). */
.chat-elicitation__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: max-content;
    max-width: 260px;
    padding: 10px 14px;
    border: 1px solid var(--brand-primary);
    border-radius: 12px;
    background: #fff;
    color: var(--brand-primary);
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 8px 24px rgba(2, 8, 23, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
}

.chat-elicitation__info:hover .chat-elicitation__tooltip,
.chat-elicitation__info:focus-visible .chat-elicitation__tooltip,
.chat-elicitation__info--open .chat-elicitation__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-elicitation__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.chat-elicitation__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 18px;
    background: #fff;
    color: var(--brand-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.chat-elicitation__option-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.chat-elicitation__option-description {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    opacity: .75;
}

.chat-elicitation__option:hover:not(:disabled),
.chat-elicitation__option:focus-visible:not(:disabled),
.chat-elicitation__option.is-chosen {
    background: var(--brand-primary-surface-soft);
    border-color: var(--brand-primary);
}

/* allowFreeText: false är en presentationsflagga, inte en spärr — fritextfältet
   är fortfarande aktivt, alternativen får bara mer vikt. */
.chat-elicitation__options--preferred .chat-elicitation__option {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.chat-elicitation__options--preferred .chat-elicitation__option:hover:not(:disabled),
.chat-elicitation__options--preferred .chat-elicitation__option:focus-visible:not(:disabled),
.chat-elicitation__options--preferred .chat-elicitation__option.is-chosen {
    background: var(--brand-primary-dark, var(--brand-primary));
    border-color: var(--brand-primary-dark, var(--brand-primary));
}

/* "Something else"-raden: samma pillerform och samma brand-kant som
   alternativknapparna, så den läses som ett alternativ bland dem — men med ett
   fält att faktiskt skriva i. Visas bara när allowFreeText är true (flaggans
   enda konkreta styrning av presentationen) och aldrig på ett låst kort. */
.chat-elicitation__freetext {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 3px 3px 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 9999px;
    background: #fff;
    transition: border-color .15s ease;
}

.chat-elicitation__freetext:focus-within {
    border-color: var(--brand-primary);
}

/* Pillerformen hör till enradsfältet: ett par rader i en 9999px-radie ser ut
   som en tablett, och skicka-pilen hamnar mitt i luften. Så fort svaret har en
   radbrytning blir raden en ruta med toppjusterade fält. */
.chat-elicitation__freetext--multiline {
    align-items: flex-start;
    border-radius: 14px;
}

/* Långformuläret (B70): en ifylld fritext markeras som vald — samma
   brand-tonade yta och kant som en vald alternativknapp — eftersom den
   räknas som svar direkt, utan egen skicka-pil. */
.chat-elicitation__freetext--filled {
    background: var(--brand-primary-surface-soft);
    border-color: var(--brand-primary);
}

.chat-elicitation__freetext-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: rgba(2, 8, 23, .8);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    /* Fältet är ett <textarea> för att Shift+Enter ska ge en ny rad. Höjden
       sköts av autoGrow i js:en, så dra-handtaget bort och ett tak som låter
       fältet rulla i stället för att trycka ned resten av blanketten. */
    resize: none;
    overflow-y: auto;
    max-height: 132px;
}

.chat-elicitation__freetext-input:focus {
    outline: none;
}

.chat-elicitation__freetext-input::placeholder {
    color: rgba(2, 8, 23, .45);
}

.chat-elicitation__freetext-send {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--brand-primary);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.chat-elicitation__freetext-send:hover,
.chat-elicitation__freetext-send:focus-visible {
    background: var(--brand-primary-dark, var(--brand-primary));
}

.chat-elicitation__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.chat-elicitation__nav-button {
    padding: 4px 12px;
    border: 1px solid var(--brand-primary-border-soft);
    border-radius: 9999px;
    background: transparent;
    color: var(--brand-primary);
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.chat-elicitation__nav-button:hover:not(:disabled),
.chat-elicitation__nav-button:focus-visible:not(:disabled) {
    border-color: var(--brand-primary);
}

.chat-elicitation__cancel {
    padding: 4px 4px;
    border: 0;
    background: transparent;
    color: rgba(2, 8, 23, .55);
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    text-decoration: underline;
    cursor: pointer;
}

.chat-elicitation__hint {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 8, 23, .55);
}

/* Läge 3 — obesvarad tur som laddats om: kortet ser ut som i läge 1, men dämpat
   och oklickbart; konversationen kan ha gått vidare. */
.chat-elicitation--locked {
    opacity: .55;
}

.chat-elicitation__option:disabled,
.chat-elicitation__nav-button:disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* Läge 2 — besvarad: en ifylld blankett, inte ett formulär. */
.chat-elicitation--answered {
    gap: 8px;
}

/* Läge 4 — delvis besvarad: kortet passerades av ett fritt meddelande som bar
   med sig delsvaren. Samma blankett som läge 2 — svaren ÄR kundens och gick
   till modellen — men dämpad som läge 3, eftersom frågorna inte längre går att
   besvara. */
.chat-elicitation--partial {
    opacity: .75;
}

.chat-elicitation__pair {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-elicitation__pair-question {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: rgba(2, 8, 23, .55);
}

.chat-elicitation__pair-answer {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(2, 8, 23, .8);
}

.chat-elicitation__pair-answer.is-missing {
    font-weight: 400;
    font-style: italic;
    opacity: .6;
}

/* B70 — RC:s långformulär: alla frågor synliga på en gång i stället för
   kortets en-i-taget-navigering. Samma bubbla och pillerknappar som kortet,
   bara staplade som fält med ett gemensamt skicka-svar längst ned. */
.chat-elicitation--form {
    gap: 14px;
}

.chat-elicitation__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-elicitation__field + .chat-elicitation__field {
    padding-top: 14px;
    border-top: 1px solid var(--brand-primary-border-soft);
}

.chat-elicitation__submit {
    align-self: flex-start;
    padding: 8px 18px;
    border: 0;
    border-radius: 9999px;
    background: var(--brand-primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background .15s ease;
}

.chat-elicitation__submit:hover,
.chat-elicitation__submit:focus-visible {
    background: var(--brand-primary-dark, var(--brand-primary));
}


/* ─── Statusraden och skicka/avbryt-knappens två lägen ───────────────────────
   Låg id-scopad i main.css (#chat-status, #chat-send-message_djstop) och var
   därför osynlig för AdminPortal, som inte laddar main.css: rådgivarchatten
   fick varken "Kelly skriver"-indikator eller ett synligt stoppläge, och ett
   andra klick avbröt turen utan att något syntes. Reglerna är klass-scopade
   här i stället, så båda skalen får dem.

   Färgerna har fallback: AdminPortal sätter inga --brand-primary-variabler.
   Fallbackvärdena är standardtemats, så kundsajten ser likadan ut som förut. */
.chat-widget-status {
    min-height: 0;
    color: rgba(var(--brand-primary-dark-rgb, 62, 11, 67), .66);
    font-size: 12px;
    line-height: 16px;
    transition: min-height .18s ease, opacity .18s ease;
}

.chat-widget-status.is-loading {
    display: inline-flex;
    width: fit-content;
    min-height: 20px;
    align-items: center;
    padding-left: 2px;
}

.chat-widget-status.is-loading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--brand-primary-accent-muted, #b487b8);
    box-shadow: 13px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .46), 26px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .28);
    animation: chatTypingWave 1.2s ease-in-out infinite;
}

@keyframes chatTypingWave {
    0%, 100% {
        background-color: var(--brand-primary-accent-muted, #b487b8);
        box-shadow: 13px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .46), 26px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .28);
    }

    33% {
        background-color: rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .46);
        box-shadow: 13px 0 0 var(--brand-primary-accent-muted, #b487b8), 26px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .46);
    }

    66% {
        background-color: rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .28);
        box-shadow: 13px 0 0 rgba(var(--brand-primary-accent-muted-rgb, 180, 135, 184), .46), 26px 0 0 var(--brand-primary-accent-muted, #b487b8);
    }
}

/* Båda ikonerna ligger i markupen och växlas här, i stället för att knappens
   innehåll byggs om i JS. Samma sak för etiketten, där skalet har en. */
.chat-widget-send .chat-send-icon--stop,
.chat-widget-send.is-stopping .chat-send-icon--send,
.chat-widget-send .chat-send-label--stop,
.chat-widget-send.is-stopping .chat-send-label--send {
    display: none;
}

.chat-widget-send.is-stopping .chat-send-icon--stop,
.chat-widget-send.is-stopping .chat-send-label--stop {
    display: inline-block;
}