/* /Layout/MainLayout.razor.rz.scp.css */
/* Bund-navigationens styling er flyttet til den globale wwwroot/css/app.css
   (klasser .alma-bottom-bar / .alma-bottom-nav-inner / .alma-bottom-nav-item),
   da bund-navigationen nu er en MudBlazor MudAppBar og deler visuel stil med
   toppens MudAppBar (.alma-top-bar) samme sted. Denne fil er bevidst tom for
   at undgå dobbelt-definerede/konfliktende scoped-CSS-regler.

   Top/bund "blur-gradient"-fade-effekten i MudMainContent (.alma-main-fade-top /
   .alma-main-fade-bottom) ligger også i app.css, da den skal overlejre @Body's
   indhold på tværs af alle sider uafhængigt af MainLayout's CSS-scope. */
/* /Pages/Parterapi/Accepter.razor.rz.scp.css */
/* ── Side-wrapper (ingen baggrundsbillede) ── */
.ac-page[b-428719iuav] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ac-scroll[b-428719iuav] {
    position: relative;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--alma-topbar-height) + env(safe-area-inset-top) + 20px) 16px calc(80px + env(safe-area-inset-bottom)) 16px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.ac-content[b-428719iuav] {
    width: 100%;
    max-width: 480px;
    margin: auto 0;
}

.ac-status[b-428719iuav] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 16px;
}

.ac-heading[b-428719iuav] {
    font-weight: 600;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.ac-text[b-428719iuav] {
    color: var(--mud-palette-text-secondary);
    max-width: 360px;
    margin: 0;
}

.ac-goto-btn[b-428719iuav] {
    margin-top: 8px;
}
/* /Pages/Parterapi/Index.razor.rz.scp.css */
/* ── Side-wrapper (ingen baggrundsbillede) ── */
.pt-page[b-14zka43rab] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Scrollbart indholds-område */
.pt-scroll[b-14zka43rab] {
    position: relative;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--alma-topbar-height) + env(safe-area-inset-top) + 20px) 16px calc(80px + env(safe-area-inset-bottom)) 16px;
    display: flex;
    justify-content: center;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
    box-sizing: border-box;
}

.pt-scroll[b-14zka43rab]::-webkit-scrollbar { width: 4px; }
.pt-scroll[b-14zka43rab]::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-default); border-radius: 4px; }

.pt-content[b-14zka43rab] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Kort til upsell/invite/pending — bruger delt .is-card klasse fra app.css. */

/* Advarsel under e-mail-feltet når brugeren prøver at invitere sig selv */
.pt-self-invite-warning[b-14zka43rab] {
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    margin-top: 6px;
    text-align: center;
}

/* Dialog-wrapper (svarer til .sv-dialog-wrapper) — holder dialogen centreret
   og sørger for at flex: 1 + min-height: 0 tillader indre scroll at fungere. */
.pt-dialog-wrapper[b-14zka43rab] {
    position: relative;
    width: 100%;
    max-width: 720px;
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Chat-dialog (når partner er koblet til) — samme stil som selvudvikling.
   NB: MudPaper er en selvstændig komponent — dens rod-div får ikke denne
   sides scope-attribut, så vi skal bruge ::deep. Uden ::deep får boksen ingen
   flex/overflow-styling, hvorfor beskedlisten ikke kan scrolle internt. */
[b-14zka43rab] .pt-dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    background: transparent !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────
   Mobil: chat-boksen fylder fuld bredde — ingen sidemargin, ingen kant.
   PC/stor skærm er ikke påvirket (kun ændret under 600px).
   ───────────────────────────────────── */
@media (max-width: 600px) {
    /* Kun selve chat-dialog-wrapperen får fuld bredde — negativ margin
       modsvarer .pt-scroll's 16px sidepadding, så andre kort (invite/upsell)
       i .pt-content beholder deres normale margin. */
    .pt-dialog-wrapper[b-14zka43rab] {
        max-width: none;
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
    }

}

.pt-messages[b-14zka43rab] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

.pt-messages[b-14zka43rab]::-webkit-scrollbar { width: 5px; }
.pt-messages[b-14zka43rab]::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-default); border-radius: 4px; }
.pt-messages[b-14zka43rab]::-webkit-scrollbar-track { background: transparent; }

/* Besked-wrappers i selvudvikling-stil — flex-kolonne med bobler og tidsstempel */
.pt-message-ai-wrapper[b-14zka43rab] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pt-message-user-wrapper[b-14zka43rab] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 12px;
}

.pt-timestamp[b-14zka43rab] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

.pt-message-ai-wrapper .pt-timestamp[b-14zka43rab]   { margin-left: 4px; }
.pt-message-user-wrapper .pt-timestamp[b-14zka43rab] { margin-right: 4px; text-align: right; }

/* Badge over Alma-bobler der er en formidlet/tilpasset besked fra partneren (formidler-model) */
.pt-relay-badge[b-14zka43rab] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 0 4px 2px;
}

/* NB: MudPaper/MudText er selvstændige komponenter — deres rod-element får IKKE
   denne sides scope-attribut, så vi skal bruge ::deep for at række ind i dem.
   Uden ::deep matcher disse regler intet, og bublerne mister farve/form. */
[b-14zka43rab] .pt-bubble { border-radius: 16px; max-width: 78%; }

[b-14zka43rab] .pt-bubble-ai {
    background: var(--mud-palette-dark-lighten) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 16px 16px 16px 0 !important;
    color: #fff !important;
}

[b-14zka43rab] .pt-bubble-user {
    background: var(--mud-palette-primary) !important;
    border-radius: 16px 16px 0 16px !important;
    color: #fff !important;
}

[b-14zka43rab] .pt-bubble-ai .mud-typography { color: #fff !important; }
[b-14zka43rab] .pt-bubble-user-text { color: #fff !important; }

.pt-input-bar[b-14zka43rab] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    background: transparent;
}

/* Plain input-felt (erstatter MudTextField for at undgå Mud JS blur-fejl) */
.pt-text-input[b-14zka43rab] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 24px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.pt-text-input[b-14zka43rab]::placeholder { color: var(--mud-palette-text-disabled); }

.pt-text-input:hover:not(:disabled)[b-14zka43rab] { border-color: var(--mud-palette-primary-hover); }

.pt-text-input:focus[b-14zka43rab] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary-hover);
}

.pt-text-input:disabled[b-14zka43rab] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.pt-send-btn[b-14zka43rab] {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.pt-send-btn:hover:not(:disabled)[b-14zka43rab] { opacity: 0.88; transform: scale(1.05); }
.pt-send-btn:disabled[b-14zka43rab] { opacity: 0.35; cursor: not-allowed; }

/* ── Trin 2: Gensend / Annuller knapper (inline side-om-side) ── */
.pt-step2-actions[b-14zka43rab] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16px;
}

.pt-resend-btn[b-14zka43rab],
.pt-cancel-btn[b-14zka43rab] {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pt-resend-btn[b-14zka43rab] {
    background: transparent;
    color: var(--mud-palette-primary);
    border: 1.5px solid var(--mud-palette-primary);
}

.pt-resend-btn:hover:not(:disabled)[b-14zka43rab] {
    background: var(--mud-palette-primary-hover);
}

.pt-cancel-btn[b-14zka43rab] {
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border: 1.5px solid var(--mud-palette-lines-default);
}

.pt-cancel-btn:hover:not(:disabled)[b-14zka43rab] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-primary);
}

.pt-resend-btn:disabled[b-14zka43rab],
.pt-cancel-btn:disabled[b-14zka43rab] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Session-header (vist når partner er koblet til) ── */
.pt-session-header[b-14zka43rab] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 4px;
}

/* Badge med partner-ikon + navn */
.pt-partner-badge[b-14zka43rab] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 40px;
    padding: 6px 14px 6px 10px;
    width: fit-content;
}

.pt-partner-name[b-14zka43rab] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.01em;
}

/* Krise-banner — vises øverst i session-header ved krisedetektion */
.pt-crisis-banner[b-14zka43rab] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-error-hover);
    border: 1px solid var(--mud-palette-error);
    border-radius: 12px;
    padding: 8px 14px;
}

/* ── Besked-rækker i chat ── */
.pt-msg-row[b-14zka43rab] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    max-width: 100%;
}

/* Almas beskeder: venstrejusteret */
.pt-msg-alma[b-14zka43rab] {
    align-items: flex-start;
}

/* Brugerens egne beskeder: højrejusteret */
.pt-msg-me[b-14zka43rab] {
    align-items: flex-end;
}

/* Tidsstempel under boble */
.pt-msg-time[b-14zka43rab] {
    font-size: 0.68rem !important;
    color: var(--mud-palette-text-disabled) !important;
    padding: 0 4px;
    line-height: 1;
}

/* ── Typing-animation (tre prikker) ── */
.pt-typing-dots[b-14zka43rab] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 18px;
}

.pt-typing-dots span[b-14zka43rab] {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover);
    animation: pt-bounce-b-14zka43rab 1.2s ease-in-out infinite;
}

.pt-typing-dots span:nth-child(1)[b-14zka43rab] { animation-delay: 0s; }
.pt-typing-dots span:nth-child(2)[b-14zka43rab] { animation-delay: 0.2s; }
.pt-typing-dots span:nth-child(3)[b-14zka43rab] { animation-delay: 0.4s; }

@keyframes pt-bounce-b-14zka43rab {
    0%, 80%, 100% { transform: translateY(0);   opacity: 0.50; }
    40%            { transform: translateY(-7px); opacity: 1.00; }
}

/* ── Tom tilstand (ingen beskeder endnu) ── */
.pt-empty-state[b-14zka43rab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 0;
}

/* ── MudStepper: skjul Previous/Next-knapperne ──
   Brugeren skal ikke kunne hoppe mellem trin manuelt — state drives af invite-flow. */
[b-14zka43rab] .mud-stepper-nav,
[b-14zka43rab] .mud-stepper-nav-buttons,
[b-14zka43rab] .mud-stepper-action-bar,
[b-14zka43rab] .mud-stepper-actions {
    display: none !important;
}

/* ── Mobil: skjul stepper-labels så kun cirkler/tal vises ──
   På smalle skærme er stepperen bredere end skærmen og bliver afskåret. */
@media (max-width: 600px) {
    [b-14zka43rab] .mud-stepper-nav-text,
    [b-14zka43rab] .mud-step-label-content,
    [b-14zka43rab] .mud-step-label-text,
    [b-14zka43rab] .mud-step-label-label {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────
   Dynamiske forslags-chips (issue #752)
   Åbne, refleksions-orienterede invitationer under Almas seneste svar.
   Visuelt tydeligt sekundære — brugeren skal ikke føle sig tvunget til at klikke.
   Samme design-sprog som Selvudvikling's .suggested-reply-chip, med pt-præfiks
   for konsistens med resten af denne sides klasser.
   ───────────────────────────────────────────── */
.pt-suggested-replies[b-14zka43rab] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 4px 0.75rem;
    justify-content: flex-start;
}

.pt-suggested-reply-chip[b-14zka43rab] {
    background: transparent;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
}

.pt-suggested-reply-chip:hover[b-14zka43rab] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    transform: translateY(-1px);
}

.pt-suggested-reply-chip:active[b-14zka43rab] {
    transform: translateY(0);
}

/* Mobil: chips forbliver letlæselige og tappable på smalle skærme */
@media (max-width: 600px) {
    .pt-suggested-reply-chip[b-14zka43rab] {
        font-size: 0.8125rem;
        padding: 0.45rem 1rem;
    }
}
/* /Pages/Selvudvikling/Index.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   Side-wrapper (ingen baggrundsbillede — bruger tema-baggrund)
   ───────────────────────────────────────────── */
.sv-page[b-f3io6mt36k] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    padding-top: calc(var(--alma-topbar-height) + env(safe-area-inset-top));
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────
   Dialog wrapper
   ───────────────────────────────────────────── */
.sv-dialog-wrapper[b-f3io6mt36k] {
    position: relative;
    width: 100%;
    max-width: 720px;
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
}

/* ─────────────────────────────────────────────
   Chat-boks — MudPaper med tema-farver
   ───────────────────────────────────────────── */
/* NB: MudPaper er en selvstændig komponent — dens rod-div får ikke denne
   sides scope-attribut, så vi skal bruge ::deep. Uden ::deep får boksen ingen
   flex/overflow-styling, hvorfor beskedlisten ikke kan scrolle internt. */
[b-f3io6mt36k] .sv-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────
   Mobil: chat-boksen fylder fuld bredde — ingen sidemargin, ingen kant.
   PC/stor skærm er ikke påvirket (kun ændret under 600px).
   ───────────────────────────────────── */
@media (max-width: 600px) {
    .sv-page[b-f3io6mt36k] {
        padding-left: 0;
        padding-right: 0;
    }

    .sv-dialog-wrapper[b-f3io6mt36k] {
        max-width: 100%;
    }

}

/* ─────────────────────────────────────────────
   Besked scroll-område
   ───────────────────────────────────────────── */
.sv-messages[b-f3io6mt36k] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

.sv-messages[b-f3io6mt36k]::-webkit-scrollbar {
    width: 5px;
}

.sv-messages[b-f3io6mt36k]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

.sv-messages[b-f3io6mt36k]::-webkit-scrollbar-track {
    background: transparent;
}

/* ─────────────────────────────────────────────
   Chat-bobler
   ───────────────────────────────────────────── */
/* NB: MudPaper/MudText er selvstændige komponenter — deres rod-element får IKKE
   denne sides scope-attribut, så vi skal bruge ::deep for at række ind i dem.
   Uden ::deep matcher disse regler intet, og bublerne mister farve/form. */
[b-f3io6mt36k] .sv-bubble {
    border-radius: 16px;
    max-width: 80%;
}

[b-f3io6mt36k] .sv-bubble-ai {
    background: var(--mud-palette-dark-lighten) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 16px 16px 16px 0 !important;
    color: #fff !important;
}

[b-f3io6mt36k] .sv-bubble-user {
    background: var(--mud-palette-primary) !important;
    border-radius: 16px 16px 0 16px !important;
    color: #fff !important;
}

/* MudText indeni bobler */
[b-f3io6mt36k] .sv-bubble-ai .mud-typography {
    color: #fff !important;
}

[b-f3io6mt36k] .sv-bubble-user-text {
    color: #fff !important;
}

/* ─────────────────────────────────────────────
   Input-bar nederst i boksen
   ───────────────────────────────────────────── */
.sv-input-bar[b-f3io6mt36k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    background: transparent;
}

/* Plain input-felt (erstat MudTextField for at undgå Mud JS blur-fejl) */
.sv-text-input[b-f3io6mt36k] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 24px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.sv-text-input[b-f3io6mt36k]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.sv-text-input:hover:not(:disabled)[b-f3io6mt36k] {
    border-color: var(--mud-palette-primary-hover);
}

.sv-text-input:focus[b-f3io6mt36k] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary-hover);
}

.sv-text-input:disabled[b-f3io6mt36k] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

/* Rund send-knap */
.sv-send-btn[b-f3io6mt36k] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.sv-send-btn:hover:not(:disabled)[b-f3io6mt36k] {
    opacity: 0.88;
    transform: scale(1.05);
}

.sv-send-btn:disabled[b-f3io6mt36k] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────
   Besked-wrappers & alma-label
   ───────────────────────────────────────────── */
.sv-message-ai-wrapper[b-f3io6mt36k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1px;
    color: var(--mud-palette-primary);
}

.sv-message-user-wrapper[b-f3io6mt36k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 1px;
}

.sv-timestamp[b-f3io6mt36k] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

.sv-message-ai-wrapper .sv-timestamp[b-f3io6mt36k] {
    margin-left: 4px;
}

.sv-message-user-wrapper .sv-timestamp[b-f3io6mt36k] {
    text-align: right;
    margin-right: 4px;
}

/* ─────────────────────────────────────────────
   Skeleton loader
   ───────────────────────────────────────────── */
@keyframes sv-shimmer-b-f3io6mt36k {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.sv-skeleton-wrapper[b-f3io6mt36k] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0;
    animation: sv-fade-in-b-f3io6mt36k 0.2s ease;
}

@keyframes sv-fade-in-b-f3io6mt36k {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade-out når skeleton erstattes af rigtige beskeder */
.sv-messages-loaded[b-f3io6mt36k] {
    animation: sv-fade-in-b-f3io6mt36k 0.25s ease;
}

.sv-skeleton-bubble[b-f3io6mt36k] {
    border-radius: 16px;
    background: linear-gradient(
        90deg,
        var(--mud-palette-action-default-hover) 0%,
        var(--mud-palette-lines-default) 40%,
        var(--mud-palette-action-default-hover) 80%
    );
    background-size: 800px 100%;
    animation: sv-shimmer-b-f3io6mt36k 1.4s ease-in-out infinite;
}

/* AI-boble (venstrejusteret, bredere) */
.sv-skeleton-ai[b-f3io6mt36k] {
    align-self: flex-start;
    height: 68px;
    width: 72%;
    border-radius: 16px 16px 16px 0;
}

/* User-boble (højrejusteret, smallere) */
.sv-skeleton-user[b-f3io6mt36k] {
    align-self: flex-end;
    height: 44px;
    width: 44%;
    border-radius: 16px 16px 0 16px;
}

/* Lille timestamp-linje under skeleton-boble */
.sv-skeleton-ts[b-f3io6mt36k] {
    height: 10px;
    width: 88px;
    border-radius: 6px;
    background: var(--mud-palette-action-default-hover);
    margin-top: 4px;
}

.sv-skeleton-ai-row[b-f3io6mt36k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.sv-skeleton-user-row[b-f3io6mt36k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

/* ─────────────────────────────────────────────
   Dynamiske svarforslag (chip-knapper)
   Vises under Almas seneste besked når hun stillede et direkte spørgsmål.
   ───────────────────────────────────────────── */
.suggested-replies[b-f3io6mt36k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.75rem;
    justify-content: flex-start;
}

.suggested-reply-chip[b-f3io6mt36k] {
    background: var(--mud-palette-secondary);
    border: none;
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    font-size: 0.875rem;
    color: var(--mud-palette-secondary-text);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.suggested-reply-chip:hover[b-f3io6mt36k] {
    opacity: 0.85;
    transform: translateY(-1px);
}

.suggested-reply-chip:active[b-f3io6mt36k] {
    transform: translateY(0);
    opacity: 1;
}

/* 'Skriv mit eget svar'-chip — subtil outline-variant */
.suggested-reply-chip.own-answer[b-f3io6mt36k] {
    background: transparent;
    border: 1.5px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.suggested-reply-chip.own-answer:hover[b-f3io6mt36k] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    opacity: 1;
}

/* ─────────────────────────────────────────────
   Humaniserede status-beskeder
   Erstatter kolde spinner-/fejl-tekster med
   varme, menneskelige beskeder fra Alma.
   ───────────────────────────────────────────── */
.humanized-status-message[b-f3io6mt36k] {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    padding: 0.5rem 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-size: 0.9rem;
}

.humanized-status-message.visible[b-f3io6mt36k] {
    opacity: 1;
}

/* Offline/status beskeder i chat-listen (IsHumanizedStatus = true) */
[b-f3io6mt36k] .sv-bubble-status {
    font-style: italic;
    opacity: 0.75;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Rings-panelet (profilering/tilknytning) er flyttet til Shared/DevelopmentRingsPanel
   og bruges nu på /min-udvikling i stedet for her. Se DevelopmentRingsPanel.razor.css. */
/* /Pages/Subscription/VælgAbonnement.razor.rz.scp.css */
/* ── Side-wrapper (ingen baggrundsbillede) ── */
.va-page[b-y81839vfhj] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.va-scroll[b-y81839vfhj] {
    position: relative;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--alma-topbar-height) + env(safe-area-inset-top) + 20px) 16px calc(80px + env(safe-area-inset-bottom)) 16px;
    box-sizing: border-box;
}

.va-content[b-y81839vfhj] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ─────────────────────────────────────────────
   Kort-layout
   ───────────────────────────────────────────── */
.va-cards[b-y81839vfhj] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 8px;
}

.va-card[b-y81839vfhj] {
    position: relative;
    flex: 1 1 260px;
    max-width: 320px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.va-card-featured[b-y81839vfhj] {
    border: 2px solid var(--mud-palette-primary);
}

.va-badge[b-y81839vfhj] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    white-space: nowrap;
}

.va-card-name[b-y81839vfhj] {
    font-weight: 700;
    margin: 0 0 4px;
}

.va-card-price[b-y81839vfhj] {
    font-weight: 800;
    margin-bottom: 4px;
}

.va-gnist-note[b-y81839vfhj] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.va-card-tagline[b-y81839vfhj] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 16px;
}

.va-card-features[b-y81839vfhj] {
    margin: 0 0 20px;
    flex-grow: 1;
    background: transparent !important;
}

/* ─────────────────────────────────────────────
   Pill-knap
   ───────────────────────────────────────────── */
.va-pill-btn[b-y81839vfhj] {
    border-radius: 9999px !important;
    margin-top: auto;
}

.va-footnote[b-y81839vfhj] {
    color: var(--mud-palette-text-secondary);
    text-align: center;
    margin-top: 24px;
    display: block;
}

/* ─────────────────────────────────────────────
   Responsive — stabil kolonne på mobil
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .va-cards[b-y81839vfhj] {
        flex-direction: column;
        align-items: center;
    }
    .va-card[b-y81839vfhj] {
        max-width: 420px;
        width: 100%;
    }
}
/* /Shared/AlmaLoader.razor.rz.scp.css */
.alma-loader-wrapper[b-gz7muhdrph] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 96px 0;
}

.alma-loader-circle[b-gz7muhdrph] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
}

.alma-loader-ring[b-gz7muhdrph] {
    width: 180px !important;
    height: 180px !important;
}

.alma-loader-ring svg[b-gz7muhdrph] {
    width: 180px !important;
    height: 180px !important;
}

.alma-loader-inner[b-gz7muhdrph] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
    max-width: 80%;
}

.alma-loader-text[b-gz7muhdrph] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.alma-loader-pct[b-gz7muhdrph] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}
/* /Shared/DevelopmentTrackCard.razor.rz.scp.css */
.dtc-track[b-wtqw3zo81s] {
    padding: 4px 0;
}

.dtc-track-spaced[b-wtqw3zo81s] {
    margin-bottom: 20px;
}

.dtc-track-header[b-wtqw3zo81s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtc-progress-wrap[b-wtqw3zo81s] {
    width: 100%;
}
/* /Shared/Dialogs/TopUpDialog.razor.rz.scp.css */
.topup-option[b-4pg6jbej1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.95rem;
}

.topup-option:hover[b-4pg6jbej1q] {
    border-color: var(--mud-palette-primary);
}

.topup-option--active[b-4pg6jbej1q] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.topup-option-label[b-4pg6jbej1q] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.topup-option-pris[b-4pg6jbej1q] {
    color: var(--mud-palette-primary);
    font-weight: 700;
}
/* /Shared/Dialogs/WelcomeDisclaimerDialog.razor.rz.scp.css */
[b-e0ehv23cp0] .welcome-disclaimer-dialog .mud-dialog {
    border-radius: 8px !important;
    max-width: 480px;
}

.wdd-content[b-e0ehv23cp0] {
    text-align: center;
    padding: 16px 8px 8px;
}

.wdd-title[b-e0ehv23cp0] {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 1.6rem !important;
}

.wdd-section-text[b-e0ehv23cp0] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    text-align: center;
}

.wdd-crisis-box[b-e0ehv23cp0] {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
}

.wdd-crisis-title[b-e0ehv23cp0] {
    font-weight: 700;
    color: var(--mud-palette-error);
}

[b-e0ehv23cp0] .mud-dialog-actions {
    justify-content: center !important;
}

[b-e0ehv23cp0] .wdd-accept-btn {
    border-radius: 9999px !important;
    background: linear-gradient(
        135deg,
        var(--alma-gradient-start),
        var(--alma-gradient-end)
    ) !important;
    color: #fff !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 12px 40px !important;
    margin-top: 8px;
    min-width: 200px;
}

[b-e0ehv23cp0] .wdd-accept-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}
/* /Shared/Dialogs/WelcomeNameDialog.razor.rz.scp.css */
[b-m7nk2rrhmd] .welcome-name-dialog .mud-dialog {
    border-radius: 8px !important;
    max-width: 400px;
}

.wnd-content[b-m7nk2rrhmd] {
    text-align: center;
    padding: 16px 8px 8px;
}

.wnd-title[b-m7nk2rrhmd] {
    font-weight: 700;
    margin-bottom: 8px;
}

.wnd-subtitle[b-m7nk2rrhmd] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

[b-m7nk2rrhmd] .wnd-save-btn {
    border-radius: 9999px !important;
    background: linear-gradient(
        135deg,
        var(--alma-gradient-start),
        var(--alma-gradient-end)
    ) !important;
    color: #fff !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    margin-top: 8px;
}

[b-m7nk2rrhmd] .wnd-save-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}
/* /Shared/Dialogs/WhoIsAlmaDialog.razor.rz.scp.css */
[b-7w72zu8ukf] .who-is-alma-dialog .mud-dialog {
    max-width: 860px;
}

.who-is-alma-title[b-7w72zu8ukf] {
    font-weight: 700;
}

.who-is-alma-content[b-7w72zu8ukf] {
    padding: 8px 4px 16px;
}

.who-is-alma-section[b-7w72zu8ukf] {
    margin-bottom: 8px;
}

.section-title[b-7w72zu8ukf] {
    font-weight: 700;
    margin-bottom: 4px;
}

.section-subtitle[b-7w72zu8ukf] {
    color: var(--mud-palette-primary);
    font-style: italic;
    margin-bottom: 12px;
}

.section-body[b-7w72zu8ukf] {
    color: var(--mud-palette-text-secondary);
}

[b-7w72zu8ukf] .alma-card {
    padding: 20px;
    height: 100%;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

[b-7w72zu8ukf] .alma-card--privacy {
    border-color: var(--mud-palette-primary-hover);
    background: var(--mud-palette-primary-hover);
}

[b-7w72zu8ukf] .card-icon {
    font-size: 2rem !important;
}

.card-title[b-7w72zu8ukf] {
    font-weight: 600;
}

.alma-steps[b-7w72zu8ukf] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alma-step[b-7w72zu8ukf] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.alma-step-number[b-7w72zu8ukf] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--alma-gradient-start), var(--alma-gradient-end));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.alma-step-content[b-7w72zu8ukf] {
    flex: 1;
}

.who-is-alma-cta[b-7w72zu8ukf] {
    padding: 16px 0 8px;
}
/* /Shared/PageHeader.razor.rz.scp.css */
.alma-page-header[b-tgxd8ee4js] {
    padding: 20px 16px 16px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Centerer indholdet på større skærme, venstrestillet på mobil */
.alma-page-header-inner[b-tgxd8ee4js] {
    max-width: 680px;
    margin-inline: auto;
    text-align: left;
}

@media (min-width: 768px) {
    .alma-page-header-inner[b-tgxd8ee4js] {
        text-align: center;
    }
}

/* Overskrift — tema-farvet, fed, MudBlazor-agtig */
.alma-page-title[b-tgxd8ee4js] {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Subtitle — dæmpet brødtekst under overskriften, tema-farvet */
.alma-page-subtitle[b-tgxd8ee4js] {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
}

@media (min-width: 768px) {
    .alma-page-subtitle[b-tgxd8ee4js] {
        margin-inline: auto;
    }
}