/* Design System & Reset */
/* HAN-72: Variante-B Visual Refresh (ADR-9 Phase 1).
   Fonts (Source Serif 4, Source Sans 3, JetBrains Mono) liegen selbst-
   gehostet unter assets/fonts/; @font-face-Deklarationen in fonts.css.
   System-Font-Fallback greift, falls WOFF2 nicht geladen werden kann. */

:root {
    --font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* ── HAN-72 · Variante-B cc-Tokens (Figma Variable Set, ADR-9 Phase 1) ──
       Colors aus dem Figma-Variable-Set des Files Hanoda (fileKey
       3gc78BEboo2nG7xKwz9TA1). Referenz im Code als --cc-GROUP-VARIANT.
       Bestehende --color-* und --primary-* Tokens bleiben für Legacy-
       Komponenten erhalten; neue Variante-B-Styles nutzen --cc-*. */
    /* Core */
    --cc-primary: #0b4f8a;
    --cc-on-primary: #ffffff;
    --cc-primary-soft: #e5eff9;
    --cc-primary-border: #bcd4eb;
    --cc-text: #0e1a2b;
    --cc-text-soft: #3c4a5b;
    --cc-muted: #6b7a8c;
    --cc-surface: #ffffff;
    --cc-surface-alt: #ecf2f8;
    --cc-bg: #f5f7fa;
    --cc-hairline: #d6dde5;
    --cc-hairline-soft: #e6ebf0;
    /* Safe (grün) */
    --cc-safe: #1f7a4d;
    --cc-safe-soft: #e8f3ec;
    --cc-safe-border: #c3e0ce;
    /* Warn (gelb/orange) */
    --cc-warn-text: #8c4a00;
    --cc-warn-bg: #fff4e5;
    --cc-warn-border: #f5d9b0;
    /* HAN-77 · Error (rot) — semantisch getrennt von --cc-pii-medical
       (Medical-PII-Chips), gleiche Farbskala. Genutzt für die System-Error-
       Card im Chat-Verlauf bei /anonymize/-Preprocessing-Fehlern. */
    --cc-error: #dc2626;
    --cc-error-bg: #fadfdf;
    --cc-error-border: #f5b5b5;
    /* PII-Farben (pro Kategorie) */
    --cc-pii-person: #2c4bb1;
    --cc-pii-person-bg: #dfe3f3;
    --cc-pii-date: #8b5cf6;
    --cc-pii-date-bg: #ede4fe;
    --cc-pii-location: #ea580c;
    --cc-pii-location-bg: #fce1d0;
    --cc-pii-medical: #dc2626;
    --cc-pii-medical-bg: #fadfdf;
    --cc-pii-org: #6ca6c1;
    --cc-pii-org-bg: #e2edf3;
    /* HAN-72 · Figma 108:4 PII-Popover — weitere Kategorien für den Kategorie-
       Wechsel (AGE + OTHER). Die Token-Werte stammen aus dem Figma-Variable-Set. */
    --cc-pii-age: #a855f7;
    --cc-pii-age-bg: #f0defc;
    --cc-pii-other: #566ebb;
    --cc-pii-other-bg: #dfe4f2;
    /* Disabled-Button (Figma 93:108) */
    --cc-disabled: #9aaec4;

    /* Typography (cc/display, cc/body, cc/label, cc/mono) */
    --cc-display-l: 600 28px/34px var(--font-family);
    --cc-display-m: 600 24px/30px var(--font-family);
    --cc-body-m: 400 14px/22px var(--font-family);
    --cc-body-s: 400 13px/20px var(--font-family);
    --cc-body-s-medium: 500 13px/20px var(--font-family);
    --cc-button-m: 600 14px/20px var(--font-family);
    --cc-label-xs-sb: 600 12px/16px var(--font-family);
    --cc-label-xxs: 700 11px/14px var(--font-family);
    --cc-mono-xs-bold: 700 11px/14px var(--font-family-mono);
    --cc-label-xxs-tracking: 0.6px;  /* Figma letterSpacing=6, x0.1 umgerechnet */
    --cc-mono-xs-tracking: 0.8px;    /* Figma letterSpacing=8 */

    --primary-blue: #2C4BB1;
    --primary-blue-light: #566EBB;
    --bg-color: #FFFFFF;
    --light-gray: #F4F4F4;
    --text-main: #000;
    --text-muted: #6C757D;
    --accent-green: linear-gradient(180deg, #00D27A 0%, #566EBB 100%);
    --input-shadow: 0px 4px 20px 0px #0000001F;
    --border-color: #B8B8B8;
    --color-warning: #EBA749;
    --color-warning-bg: rgba(235, 167, 73, 0.15);
    --color-error: #D20000;
    --color-error-light: #F28888;
    --color-stroke: #E5E7EB;
    --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.12);
    --color-btn-primary: #25403B;
    --color-btn-secondary: #6CA6C1;

    /* PII Category Colors */
    --color-pii-person: #2C4BB1;
    --color-pii-person-bg: rgba(44, 75, 177, 0.15);
    --color-pii-date: #8B5CF6;
    --color-pii-date-bg: rgba(139, 92, 246, 0.15);
    --color-pii-age: #A855F7;
    --color-pii-age-bg: rgba(168, 85, 247, 0.15);
    --color-pii-location: #EA580C;
    --color-pii-location-bg: rgba(234, 88, 12, 0.15);
    --color-pii-organization: #6CA6C1;
    --color-pii-organization-bg: rgba(108, 166, 193, 0.15);
    --color-pii-medical: #DC2626;
    --color-pii-medical-bg: rgba(220, 38, 38, 0.15);
    --color-pii-other: #566EBB;
    --color-pii-other-bg: rgba(86, 110, 187, 0.15);

    /* HAN-27: DSM-Tokens (4px-Grid konform aus HAN-43) */
    --radius-pill: 24px;
    --radius-card: 16px;

    /* HAN-27: Success-Gruen fuer Copy-Feedback */
    --color-success: #22c55e;

    /* HAN-31: Breakpoint-Tokens (Single-Source-Doku; @media-Regeln nutzen
       hardcoded Werte, da CSS-Custom-Properties in @media-Queries per Spec
       nicht erlaubt sind). 4-Viewports-Grid gemaess Story-AC #1:
         Mobile  <834px   | Tablet  834-1279px
         Desktop 1280-1919px | Wide >=1920px
       Sub-Mobile-Polish-Breakpoints (576/640) sind explizite Touch-Target-
       Regeln und bleiben unterhalb von --bp-mobile-max erhalten. */
    --bp-mobile-max: 833px;
    --bp-tablet-min: 834px;
    --bp-tablet-max: 1279px;
    --bp-desktop-min: 1280px;
    --bp-desktop-max: 1919px;
    --bp-wide-min: 1920px;
}

/* HAN-31 (AC #6): Kontrast-Audit non-PII-Tokens (WCAG 2.1 AA).
   PII-Farben sind in HAN-43 bereits WCAG-AA-verifiziert und NICHT Scope.
   Findings (Ratios gegen Weiss, Normal-Text Min 4.5, Non-Text-UI Min 3.0):
     text-main (#000)             21.0   PASS
     text-muted (#6C757D)          4.69  PASS (white) / 4.26 FAIL auf light-gray
     primary-blue (#2C4BB1)        7.64  PASS
     primary-blue-light (#566EBB)  4.83  PASS
     color-error (#D20000)         5.61  PASS
     white auf color-btn-primary  11.2   PASS
     color-error-light (#F28888)   2.43  FAIL - nur subtle-bg, kein Text
     color-warning (#EBA749)       2.07  FAIL - Icons/Indikatoren (non-text)
     color-success (#22C55E)       2.28  FAIL - Copy-Feedback-Icon (non-text)
     white auf color-btn-secondary 2.67  FAIL - Anon-Edit-Button-Bg mit weiss
     border-color (#B8B8B8)        1.98  FAIL - Borders (non-text-UI, Min 3.0)
     color-stroke (#E5E7EB)        1.24  FAIL - subtle Trenner, non-critical
   Aktionen: Icons + Borders werden in HAN-31 NICHT angefasst (Design-System-
   Redesign liegt ausserhalb Story-Scope). Text-kritische FAILs (btn-secondary
   mit weissem Label) als Follow-up notiert. Kontrast-Matrix im sprint-showcase
   erfasst alle Paare visuell mit Pass/Fail-Badges. */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 1.6rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Followup 2026-04-27: padding-top:56px kompensiert die out-of-flow
       fixed TopBar (siehe .topbar Regel weiter unten). */
    padding-top: 56px;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.bottom-wrapper {
    position: sticky;
    bottom: 0;
    z-index: 100;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.active-state-chat .bottom-wrapper {
    flex: initial;
    /* HAN-27 fix: Wrapper selbst transparent — der opake Hintergrund
       kommt vom ::before und startet erst ab der Mitte des Input-Pills
       (22px von der Oberkante). So bleiben die oberen Pill-Ecken ueber
       dem Chat sichtbar, und ab Mitte-abwaerts deckt der BG alles bis
       zum Footer (inkl. Disclaimer) sauber ab. */
    background: transparent;
}

.active-state-chat .bottom-wrapper::before {
    content: '';
    position: absolute;
    top: 22px;  /* Halbe Hoehe des 44px Input-Pills */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    z-index: -1;
    pointer-events: none;
}

/* Sub-Mobile-Polish ≤576px: Input ist card-shape mit min-height 150px, also Mitte bei 75px. */
@media screen and (max-width: 576px) {
    .active-state-chat .bottom-wrapper::before {
        top: 75px;
    }
}

/* HAN-27: Disclaimer-Bar direkt unter dem Input (ChatGPT-Layout) — Text live aus /chat/status.
   Standardmaessig versteckt, nur im active-state-chat sichtbar. */
.disclaimer-bar {
    background: transparent;
    width: 100%;
    padding: 8px 16px 12px;
    display: none;
    justify-content: center;
    align-items: center;
}

.active-state-chat .disclaimer-bar {
    display: flex;
}

.disclaimer-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
    max-width: 768px;
    text-align: center;
    margin: 0;
}

/* JS-gesteuerte Ausblendung (kein disclaimer-Feld aus Backend) */
.disclaimer-bar.hidden,
.active-state-chat .disclaimer-bar.hidden {
    display: none;
}

/* Main Content Area */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    transition: all 0.5s ease;
}

/* main::-webkit-scrollbar {
    display: none;
} */

.active-state-landing main {
    justify-content: flex-end;
    /* Push heading up away from input */
}

.active-state-chat main {
    justify-content: flex-start;
    /* margin-top: auto; */
}

/* Landing State */
.hero-section {
    text-align: center;
    margin-bottom: 4.4rem;
    transition: opacity 0.3s ease;
}

.main-title {
    font-size: 3.2rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

/* Processing State */
.processing-section {
    width: 100%;
    max-width: 820px;
    padding: 60px 2rem 24px;
}

.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.5rem;
}

.skeleton-line {
    height: 16px;
    background-color: var(--light-gray);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-left: auto;
    width: 100%;
}

.skeleton-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.line-long {
    max-width: 260px;
}

.line-medium {
    max-width: 180px;
}

.line-short {
    max-width: 140px;
}

.status-text {
    color: var(--primary-blue);
    font-size: 1.4rem;
    line-height: 1.2;
    max-width: 260px;
    margin-left: auto;
}

/* Chat State */
.chat-section {
    width: 100%;
    padding-bottom: 24px;
    padding-top: 60px;
}

.messages-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}


.message {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

.message.user-message.editing {
    width: 100%;
}

.message.ai-message {
    margin-right: auto;
    margin-left: initial;
    max-width: 100%;
}

.message-content {
    background-color: var(--light-gray);
    padding: 1.2rem 1.6rem;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    font-size: 1.6rem;
    line-height: 1.4;
    position: relative;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: 100%;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: inherit;
    line-height: 1.3;
    font-size: 16px;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child {
    margin-top: 0;
}

.message-content p {
    margin-bottom: 1rem;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content ul {
    list-style-type: disc;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.message-content ol {
    list-style-type: decimal;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.message-content li {
    margin-bottom: 0.5rem;
}

.message-content li:last-child {
    margin-bottom: 0;
}

/* Handle paragraphs inside lists (loose lists) */
.message-content li>p {
    margin-bottom: 0.5rem;
}

.message-content li>p:last-child {
    margin-bottom: 0;
}

.message-content strong {
    font-weight: 700;
}


.anonymized-tag {
    color: var(--accent-green);
    font-weight: 400;
    background: var(--accent-green);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.delete-tag,
.btn-delete-confirm {
    background: var(--color-error-light);
    /* Slightly softer red for delete/warning states */
    color: white;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-confirm:hover {
    background: var(--color-error);
}


.ai-message .message-content {
    background: transparent;
    padding: 0;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
}

/* HAN-27: Copy/Action-Icons einheitlich rechts-aligned, per Hover sichtbar auf allen Bubbles */
.action-icons {
    display: flex;
    margin-top: 8px;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.message:hover .action-icons,
.message:focus-within .action-icons {
    opacity: 1;
    pointer-events: auto;
}

/* HAN-27: Copy-Feedback — beide Icons koexistieren, Toggle via .active.
   Im .active-Zustand: gruener Haken, keine Button-Hintergrund-Box. */
.icon-btn.copy-btn .check-icon {
    display: none;
    stroke: currentColor;
    fill: none;
}

.icon-btn.copy-btn.active .icon:not(.check-icon) {
    display: none;
}

.icon-btn.copy-btn.active .check-icon {
    display: block;
}

.icon-btn.copy-btn.active,
.icon-btn.copy-btn.active:hover,
.icon-btn.copy-btn.active:focus {
    color: var(--color-success);
    background-color: transparent;
    outline: none;
}

/* Focus-Ring nur bei Keyboard-Navigation (nicht nach Maus-Klick) */
.icon-btn.copy-btn:focus:not(:focus-visible) {
    outline: none;
}

.action-icons .btn-primary,
.action-icons .btn-delete-confirm {
    margin-left: 8px;
}

.action-icons .icon {
    width: 20px;
    height: 20px;
}

.action-icons .reload-btn .icon {
    width: 18px;
    height: 18px;
}

.action-icons .icon svg {
    fill: rgb(243, 243, 243);
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 4px;
    position: relative;
}

.icon-btn:hover {
    color: var(--text-main);
    background-color: #ebe8e8;
}

.icon-btn.active {
    color: var(--primary-blue);
    background-color: rgba(44, 75, 177, 0.1);
}

.icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.icon-btn.delete:hover {
    color: #FF4D4D;
    background-color: rgba(255, 77, 77, 0.1);
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 400;
    border: none;
    cursor: pointer;
}

.btn-sent {
    background-color: #838383;
    color: white;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 400;
    border: none;
    cursor: default;
    pointer-events: none;
}

.btn-secondary {
    background-color: #838383;
    color: white;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 400;
    border: none;
    cursor: pointer;
}


.message-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--text-main);
}

.message-warning-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--color-warning);
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    width: 100%;
    gap: 15px;
    /* Explicit gap between status and edit labels */
}

.message-status {
    font-size: 1.2rem;
    color: #566EBB;
    flex-shrink: 0;
}

.edit-label {
    font-size: 1.2rem;
    color: #838383;
    cursor: pointer;
    transition: color 0.2s;
    white-space: nowrap;
}

.edit-label:hover {
    color: var(--primary-blue);
}

/* Edit Mode Layout */
.edit-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-secondary {
    background-color: #8E8E93;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: #636366;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #1e3a8a;
}

/* History Styles */
.version-history {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s ease, opacity 0.3s ease, transform 0.4s ease;
    opacity: 0;
    width: 100%;
    transform: translateY(-5px);
}

.version-history.show {
    max-height: 500px;
    margin-bottom: 12px;
    opacity: 1;
    transform: translateY(0);
}

.previous-text-container {
    background-color: #F4F4F4;
    padding: 1.2rem 1.6rem;
    border-radius: 2.2rem;
    font-size: 1.6rem;
    line-height: 1.4;
    position: relative;
    text-align: justify;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    color: #838383;
}


.edit-textarea {
    width: 100%;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1.6rem;
    resize: none;
    background: transparent;
    color: var(--text-main);
    line-height: 1.4;
    padding: 0;
}

.icon-btn.active svg,
.icon-btn.active .icon svg {
    fill: var(--primary-blue);
}


/* Tooltip Styling */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #333;
    color: #fff;
    padding: 0.6rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Input Bar Transition Logic */
.input-container {
    width: 100%;
    max-width: 780px;
    padding: 0;
    z-index: 100;
    margin-bottom: auto;
    margin-inline: auto;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    /* HAN-27 fix: transparent damit Chat-Content beim Scrollen nicht hart abgeschnitten wird */
    background: transparent;
    position: relative;
}


/* Chat Position (Fixed bottom) */
/* HAN-27 fix: kein padding-bottom mehr — Disclaimer-Bar sitzt direkt unter dem Input
   (ChatGPT-Layout) statt durch 30px Gap getrennt. */

.scroll-bottom-btn {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: var(--input-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s ease;
    z-index: 101;
}

.scroll-bottom-btn:hover {
    background-color: var(--light-gray);
    color: var(--text-main);
}

.scroll-bottom-btn.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
}

/* HAN-27: Eingabefeld — Default Pill (44px) ↔ Expanded Card (mehrzeilig) */
.input-wrapper {
    background: white;
    border-radius: var(--radius-pill); /* 24px Default Pill */
    padding: 6px 6px 6px 20px;
    display: flex;
    align-items: center;
    box-shadow: var(--input-shadow);
    border: none; /* HAN-27: exakt 44px Höhe — Border weg, Shadow reicht für Definition */
    transition: border-radius 0.2s ease, padding 0.2s ease;
}

.input-wrapper.is-expanded {
    border-radius: var(--radius-card); /* 16px Card */
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
}

.input-wrapper.is-expanded #user-input {
    /* Column-Flexbox: flex-basis überschreibt sonst die per JS gesetzte height */
    flex: none;
    width: 100%;
}

#user-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1.6rem;
    resize: none;
    min-height: 24px; /* 1 Zeile bei line-height 24px */
    max-height: 240px; /* HAN-27: 10 Zeilen × 24px */
    padding: 0;
    color: var(--text-main);
    font-weight: 400;
    line-height: 24px;
    background: transparent;
    overflow-y: hidden;
}

#user-input:disabled {
    background: transparent;
    opacity: 1;
}

#user-input::placeholder {
    font-size: 1.6rem;
    color: #838383;
    font-weight: 400;
    line-height: 24px;
}

.send-button {
    background-color: var(--primary-blue);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 12px;
    transition: background-color 0.2s, opacity 0.2s;
    flex-shrink: 0;
    color: var(--color-white);
}

.input-wrapper.is-expanded .send-button {
    align-self: flex-end;
    margin-top: 8px;
    margin-left: 0;
}

/* HAN-27: Spinner-State (FR38) */
.send-button .spinner-icon {
    display: none;
}

.send-button.is-loading .arrow-icon {
    display: none;
}

.send-button.is-loading .spinner-icon {
    display: block;
    animation: spin 0.8s linear infinite;
}

.send-button.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Message States */
.user-message {
    transition: all 0.3s ease;
}

.user-message.is-draft .message-status {
    color: #566EBB;
}

.user-message.is-processing .message-status {
    color: var(--primary-blue);
    font-weight: 500;
}

.user-message.is-sent .message-status {
    color: #566EBB;
}

/* New Labels & Info */
.info-label {
    font-size: 1.2rem;
    padding: 4px 12px;
    border-radius: 999px;
    background: #F2F2F7;
    color: #8E8E93;
    display: inline-block;
}

.delete-info {
    background: #FF7678;
    color: #fff;
    font-weight: 400;
    margin-left: 8px;
}

.anonymized-sent-label {
    font-size: 1.2rem;
    color: #00D27A;
    margin-top: 8px;
    font-weight: 400;
}

/* Inline skeleton for subsequent messages */
.inline-skeleton {
    max-width: 65%;
    margin-left: auto;
    padding: 0;
}

.inline-skeleton .skeleton-container {
    margin-bottom: 1rem;
}

.inline-skeleton .status-text {
    margin-left: auto;
}


/* Footer & Logo */
.app-footer {
    background-color: var(--light-gray);
    border-top: 1px solid var(--border-color);
    font-size: 1.4rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.app-footer-inner {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-right-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
    display: block;
}

.copyright-text {
    color: var(--text-main);
    font-weight: 400;
    justify-self: center;
}

.footer-right {
    display: flex;
    gap: 24px;
}


.footer-right a {
    text-decoration: none;
    color: var(--primary-blue-light);
}

.footer-right a:hover {
    text-decoration: underline;
}

/* State Helpers */
.hidden {
    display: none !important;
}

/* Adjustment for Chat view when active */
.active-state-chat main {
    justify-content: flex-start;
    margin-top: initial;
}

/* Responsive */

/* Tablet (834–1279px) — gemaess HAN-31 Breakpoint-Grid (siehe --bp-tablet-min/max). */
@media screen and (min-width: 834px) and (max-width: 1279px) {
    .messages-container {
        max-width: 700px;
    }
}

/* Sub-Breakpoint ≤991px: Large-Mobile + Small-Tablet Layout-Anpassungen
   (Titel-Groesse, Footer-Grid, Container-Breiten). Bleibt als bewusste
   Sub-Regel erhalten, um Content auf 834-991 nicht zu stark zu stauchen. */
@media screen and (max-width: 991px) {
    .main-title {
        font-size: 2.8rem;
    }

    .hero-section {
        margin-bottom: 3rem;
    }

    .input-wrapper,
    .chat-section,
    .processing-section {
        max-width: 600px;
        margin-inline: auto;
    }

    .footer-right-wrapper {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .app-footer-inner {
        grid-template-columns: 1fr 2.3fr;
    }


    .message-content {
        text-align: initial;
    }

    .messages-container {
        padding: 0;
    }

    .processing-section {
        padding: 60px 0 20px;
    }

    .input-container {
        max-width: 600px;
    }
}

/* Mobile (<834px) — gemaess HAN-31 --bp-mobile-max. */
@media screen and (max-width: 833px) {
    .messages-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

/* Sub-Mobile-Polish ≤640px: Touch-Padding / Input-Breite fuer kleine Phones. */
@media screen and (max-width: 640px) {

    .messages-container {
        padding: 0 20px;
    }

    .processing-section {
        padding: 60px 20px 20px;
    }

    .input-container {
        width: calc(100% - 40px);
    }
}

/* Sub-Mobile-Polish ≤576px: Touch-Target-Spacing fuer iPhone-SE / kleine Android. */
@media screen and (max-width: 576px) {
    .input-wrapper {
        max-width: 100%;
        margin-inline: auto;
    }

    .input-container {
        margin-top: auto;
        margin-bottom: 30px;
        width: calc(100% - 40px);
    }

    .active-state-chat .input-container {
        margin-bottom: 0;

    }

    .input-container .input-wrapper {
        min-height: 150px;
        border-radius: 16px;
        align-items: flex-start;
    }

    .hero-section {
        margin-top: auto;
        margin-bottom: 0;
    }

    .chat-section {
        padding-top: 40px;
    }

    .processing-section {
        padding-top: 40px;
    }

    main {
        margin-top: auto;
    }

    .app-footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .footer-left {
        margin-bottom: 15px;
    }

    .message {
        max-width: 100%;
    }

}

/* ═══════════════════════════════════════════════════════════
   HAN-19: Anonymisierungs-Prüfansicht
   ═══════════════════════════════════════════════════════════ */

/* PII Span Base */
.pii-span {
    padding: 1px 4px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid;
    transition: filter 0.15s;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin: 1px 0;
}

.pii-span:hover {
    filter: brightness(0.88);
}

/* HAN-31 (AC #4): Sichtbarer Focus-Ring fuer Tastatur-Nav. Ueberschreibt
   die alte brightness-only-Focus-Regel, die SR-User orientierungslos liess. */
.pii-span:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    filter: brightness(0.88);
}

.pii-span .pii-placeholder {
    font-weight: 600;
    color: inherit;
}

/* PII placeholder inherits category color */
.pii-PERSON .pii-placeholder { color: var(--color-pii-person); }
.pii-DATE .pii-placeholder { color: var(--color-pii-date); }
.pii-AGE .pii-placeholder { color: var(--color-pii-age); }
.pii-LOCATION .pii-placeholder { color: var(--color-pii-location); }
.pii-ORGANIZATION .pii-placeholder { color: var(--color-pii-organization); }
.pii-MEDICAL .pii-placeholder { color: var(--color-pii-medical); }
.pii-OTHER .pii-placeholder { color: var(--color-pii-other); }

.pii-span .pii-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

/* PII Category Classes */
.pii-PERSON { background: var(--color-pii-person-bg); border-bottom-color: var(--color-pii-person); }
.pii-PERSON .pii-tag { color: var(--color-pii-person); }
.pii-DATE { background: var(--color-pii-date-bg); border-bottom-color: var(--color-pii-date); }
.pii-DATE .pii-tag { color: var(--color-pii-date); }
.pii-AGE { background: var(--color-pii-age-bg); border-bottom-color: var(--color-pii-age); }
.pii-AGE .pii-tag { color: var(--color-pii-age); }
.pii-LOCATION { background: var(--color-pii-location-bg); border-bottom-color: var(--color-pii-location); }
.pii-LOCATION .pii-tag { color: var(--color-pii-location); }
.pii-ORGANIZATION { background: var(--color-pii-organization-bg); border-bottom-color: var(--color-pii-organization); }
.pii-ORGANIZATION .pii-tag { color: var(--color-pii-organization); }
.pii-MEDICAL { background: var(--color-pii-medical-bg); border-bottom-color: var(--color-pii-medical); }
.pii-MEDICAL .pii-tag { color: var(--color-pii-medical); }
.pii-OTHER { background: var(--color-pii-other-bg); border-bottom-color: var(--color-pii-other); }
.pii-OTHER .pii-tag { color: var(--color-pii-other); }

/* PII Highlight in Original Text */
.pii-highlight {
    border-radius: 2px;
    padding: 0 2px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.pii-highlight.pii-highlight--active {
    animation: highlightPulse 0.6s ease;
}

@keyframes highlightPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pii-highlight-PERSON { background: var(--color-pii-person-bg); }
.pii-highlight-PERSON.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-person); }
.pii-highlight-DATE { background: var(--color-pii-date-bg); }
.pii-highlight-DATE.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-date); }
.pii-highlight-AGE { background: var(--color-pii-age-bg); }
.pii-highlight-AGE.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-age); }
.pii-highlight-LOCATION { background: var(--color-pii-location-bg); }
.pii-highlight-LOCATION.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-location); }
.pii-highlight-ORGANIZATION { background: var(--color-pii-organization-bg); }
.pii-highlight-ORGANIZATION.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-organization); }
.pii-highlight-MEDICAL { background: var(--color-pii-medical-bg); }
.pii-highlight-MEDICAL.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-medical); }
.pii-highlight-OTHER { background: var(--color-pii-other-bg); }
.pii-highlight-OTHER.pii-highlight--active { box-shadow: 0 0 0 2px var(--color-pii-other); }

/* System Message Container */
.message.system-message {
    margin-left: auto;
    max-width: 100%;
    width: 100%;
}

.message.system-message + .message.user-message,
.message.user-message + .message.system-message {
    margin-top: -8px;
}

.system-message .message-content {
    background: #FFFFFF;
    border-left: 4px solid var(--primary-blue);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 16px 20px;
    align-self: flex-start;
    width: 100%;
}

/* Initial Message Card (Gray variant of System Card) */
.message.initial-message {
    margin-left: auto;
    max-width: 100%;
    width: 100%;
}

.message.initial-message .message-content {
    background: #FFFFFF;
    border-left: 4px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 16px 20px;
    align-self: flex-start;
}

.initial-message .initial-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.initial-message .initial-header__text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
}

.initial-message .message-footer,
.initial-message .version-history {
    display: none;
}

/* HAN-27: .initial-message nutzt die globale Hover-Regel — Edit/Delete/Send
   bleiben jedoch immer aus, weil sie auf der Roh-Eingabe-Box irrefuehrend sind. */
.initial-message .action-icons .edit-btn,
.initial-message .action-icons .delete-btn,
.initial-message .action-icons .send-msg-btn,
.initial-message .action-icons .btn-primary {
    display: none;
}

.initial-message .message-text {
    font-size: 1.4rem;
    line-height: 1.6;
}

/* System Message Header */
.anon-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.anon-summary__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.anon-summary__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anon-summary__icon svg {
    width: 16px;
    height: 16px;
    fill: var(--primary-blue);
}

.anon-summary__text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.anon-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.anon-badge {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Indirect Identifier Hint — hidden per UX feedback */
.anon-indirect-hint {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.anon-indirect-hint .warning-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--text-muted);
}

/* Warning Boxes */
/* HAN-75 AC8 · Legacy-Warnings (Chat-History-Renderer aus anonymization.js,
   nicht Variante B) auf --cc-* Tokens migriert, gap auf 16 px. Keine
   hardcoded Hex-/RGBA-Werte mehr. */
.anon-warnings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}

.anon-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--cc-text);
}

.anon-warning .warning-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.anon-warning__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anon-warning__title {
    font-weight: 700;
}

.anon-warning--red {
    background: var(--cc-pii-medical-bg);
    border-left: 3px solid var(--cc-pii-medical);
}

.anon-warning--red .warning-icon { color: var(--cc-pii-medical); }

.anon-warning--orange {
    background: var(--cc-warn-bg);
    border-left: 3px solid var(--cc-warn-text);
}

.anon-warning--orange .warning-icon { color: var(--cc-warn-text); }

.anon-warning--yellow {
    background: var(--cc-warn-bg);
    border-left: 3px solid var(--cc-warn-text);
}

.anon-warning--yellow .warning-icon { color: var(--cc-warn-text); }

.anon-warning--gray {
    background: var(--cc-surface-alt);
    border-left: 3px solid var(--cc-muted);
}

.anon-warning--gray .warning-icon { color: var(--cc-muted); }

.anon-warning--resolved {
    opacity: 0.6;
}

.anon-warning__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.anon-warning__btn {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s;
}

.anon-warning__btn:hover { filter: brightness(0.9); }

.anon-warning__btn--remove {
    background: var(--cc-pii-medical-bg);
    color: var(--cc-pii-medical);
}

.anon-warning__btn--keep {
    background: var(--cc-surface-alt);
    color: var(--cc-muted);
}

/* Anonymized Text Area (editable) */
.anon-text-area {
    font-size: 1.4rem;
    line-height: 2.0;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    margin-bottom: 16px;
    transition: border-color 0.2s, background 0.2s;
    word-break: break-word;
    min-height: 60px;
    outline: none;
}

.anon-text-area:focus,
.anon-text-area.editing {
    border-color: var(--primary-blue);
    background: rgba(44, 75, 177, 0.02);
    cursor: text;
}

/* Action Buttons (Review) */
.anon-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.anon-btn-send {
    background-color: var(--color-btn-primary);
    color: white;
    border: none;
    padding: 0 20px;
    height: 36px;
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.anon-btn-send:hover { background-color: #1e3530; }
.anon-btn-send:active { background-color: #162b27; }
.anon-btn-send:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

.anon-btn-edit {
    background-color: var(--color-btn-secondary);
    color: white;
    border: none;
    padding: 0 20px;
    height: 36px;
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.anon-btn-edit:hover { background-color: #5a8fa8; }
.anon-btn-edit:active { background-color: #4f7f97; }

/* Popover */
.popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
}

.popover {
    position: fixed;
    z-index: 201;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 8px;
    min-width: 180px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.popover-header {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-stroke);
    margin-bottom: 4px;
}

.popover-header .orig-text {
    color: var(--text-main);
    font-size: 1.3rem;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    transition: background 0.1s;
    color: var(--primary-blue);
}

.popover-item:hover,
.popover-item:focus-visible {
    background: var(--light-gray);
    outline: none;
}

.popover-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Clinical/billing codes preserved (benchmark-viewer style) */
.code-preserved {
    background: rgba(108, 166, 193, 0.08);
    border: 1px dashed var(--color-btn-secondary);
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Orphanet inline warning (benchmark-viewer style) */
.orphanet-warning {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--color-pii-medical);
    border-radius: 3px;
    padding: 1px 4px;
    cursor: pointer;
    white-space: nowrap;
}

.orphanet-warning:hover {
    filter: brightness(0.88);
}

.orphanet-icon {
    font-size: 12px;
    margin-right: 2px;
}

/* Manual Tagging Toolbar */
.anon-tag-toolbar {
    position: absolute;
    z-index: 210;
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-stroke);
}

.anon-tag-toolbar__btn {
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    background: var(--light-gray);
    color: var(--text-main);
    white-space: nowrap;
}

.anon-tag-toolbar__btn:hover {
    filter: brightness(0.9);
}

.anon-tag-toolbar__btn[data-cat="PERSON"] { background: var(--color-pii-person-bg); color: var(--color-pii-person); }
.anon-tag-toolbar__btn[data-cat="DATE"] { background: var(--color-pii-date-bg); color: var(--color-pii-date); }
.anon-tag-toolbar__btn[data-cat="LOCATION"] { background: var(--color-pii-location-bg); color: var(--color-pii-location); }
.anon-tag-toolbar__btn[data-cat="ORGANIZATION"] { background: var(--color-pii-organization-bg); color: var(--color-pii-organization); }
.anon-tag-toolbar__btn[data-cat="MEDICAL"] { background: var(--color-pii-medical-bg); color: var(--color-pii-medical); }
.anon-tag-toolbar__btn[data-cat="OTHER"] { background: var(--color-pii-other-bg); color: var(--color-pii-other); }

/* HAN-26 Message Animation */
.message {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* HAN-26 Streaming Indicator */
.streaming-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.streaming-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    animation: pulse 1.4s ease-in-out infinite;
}

.streaming-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.streaming-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* HAN-19 Responsive — Mobile (<834px, HAN-31-harmonisiert). */
@media screen and (max-width: 833px) {
    .anon-actions {
        flex-direction: column;
    }

    .anon-btn-send,
    .anon-btn-edit {
        width: 100%;
        justify-content: center;
    }
}

/* Sub-Mobile-Polish ≤576px: Anon-Textarea + PII-Span Touch-Min-Height. */
@media screen and (max-width: 576px) {
    .anon-text-area {
        padding: 8px;
        font-size: 1.3rem;
    }

    .pii-span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .anon-btn-send,
    .anon-btn-edit {
        min-height: 44px;
    }
}

/* ============================================================
   HAN-29: Fehlermeldungen — Alltagssprache & Retry-Logik
   Values sourced 1:1 from tools/sprint-showcase.html (#han29).
   ============================================================ */

/* System-Message variants — applied to .message.system-message */
.system-message.status-error .message-content,
.system-message--error .message-content {
    background: rgba(242, 136, 136, 0.3); /* --color-error-light @ 0.3 */
    border-left: 4px solid var(--color-error);
}

.system-message.status-warning .message-content,
.system-message--warning .message-content {
    background: var(--color-warning-bg); /* rgba(235,167,73,0.15) */
    border-left: 4px solid var(--color-warning);
}

/* Inline-Error-Slot — placed under the textarea for TEXT_TOO_LONG.
   Horizontal padding matches the input-wrapper left-padding (20px) so
   the error text aligns with the textarea content. */
.inline-error-slot {
    padding: 4px 20px 0;
}

.inline-error {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--color-error);
    margin-top: 4px;
}

/* Word-counter over-limit styling — applied when wordCount > MAX_WORDS. */
.char-counter--over {
    color: var(--color-error);
}

/* ============================================================
   HAN-29 (revision): Top-Toast for transient errors
   — LLM_VENDOR_TIMEOUT, LLM_VENDOR_RATE_LIMITED,
     ANONYMIZATION_NER_TIMEOUT, INTERNAL_ERROR
   Persistent until Retry-Click or X-Close. Styled analogous to the
   maintenance.js LLM-banner but in error-red.
   ============================================================ */
/* HAN-72 · Toast sitzt unterhalb der TopBar (56px) und rechts von der
   Variante-B-Sidebar (296px Desktop). Figma 105:55: full-width Banner
   mit cc/pii/medical-bg, cc/text-Text, cc/pii/medical-Icon und ✕. */
.error-toast {
    position: fixed;
    top: 56px;
    left: 296px;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 20px;
    color: var(--cc-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Mobile (<834px): Sidebar ist Drawer (verborgen), Toast nimmt volle Breite ein. */
@media (max-width: 833px) {
    .error-toast {
        left: 0;
    }
}

/* Tablet+ (≥834px) mit collapsed Sidebar: Toast nimmt die volle Restbreite. */
@media (min-width: 834px) {
    body.sidebar-collapsed .error-toast {
        left: 0;
    }
}

/* Figma 105:55 · Error-Banner — bg cc/pii/medical-bg. */
.error-toast--error {
    background: var(--cc-pii-medical-bg);
    color: var(--cc-text);
}

.error-toast--warning {
    background: var(--cc-warn-bg);
    color: var(--cc-text);
}

.error-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cc-pii-medical);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.error-toast--warning .error-toast-icon {
    color: var(--cc-warn-text);
}

.error-toast-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* HAN-75: Komplett auf --cc-* Tokens — keine Hex-Werte oder Legacy-Vars mehr. */
.error-toast-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--cc-pii-medical);
    background: var(--cc-surface);
    color: var(--cc-pii-medical);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.error-toast-action:hover {
    background: var(--cc-pii-medical);
    color: var(--cc-on-primary);
}

.error-toast-action:focus-visible {
    outline: 2px solid var(--cc-pii-medical);
    outline-offset: 2px;
}

.error-toast-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--cc-pii-medical);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
}

.error-toast--warning .error-toast-close {
    color: var(--cc-warn-text);
}

.error-toast-close:hover {
    background: color-mix(in srgb, var(--cc-pii-medical) 12%, transparent);
}

.error-toast--warning .error-toast-close:hover {
    background: color-mix(in srgb, var(--cc-warn-text) 18%, transparent);
}

.error-toast-close:focus-visible {
    outline: 2px solid var(--cc-pii-medical);
    outline-offset: 2px;
}

.error-toast--warning .error-toast-close:focus-visible {
    outline-color: var(--cc-warn-text);
}

/* ==============================================================
   HAN-63: Sidebar, Sitzungen-Liste, Nav-Bar, Mobile-Drawer
   -------------------------------------------------------------- */

/* --- Sidebar-interner Token ---------------------------------------
   #838383 aus Figma (aih_sidebar) fuer den vertikalen Trennstrich — bewusst
   dunkler als --color-stroke (#E5E7EB) und --border-color (#B8B8B8). */

/* --- Nav-Bar (nur Mobile sichtbar — Desktop hat Logo+Toggle in Sidebar) --- */

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 8px 16px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--color-stroke);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.nav-logo-img {
    height: 18px;
    width: auto;
}

.nav-bar .nav-logo-img {
    height: 24px;
}

/* nav-icon-btn: 36x36, border-radius 50%, transparent, Hover --light-gray */
.nav-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease;
    padding: 0;
}

.nav-icon-btn:hover,
.nav-icon-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06);
}

.nav-icon-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.nav-icon-btn .icon {
    width: 20px;
    height: 20px;
    color: var(--text-main);
    stroke: currentColor;
}

/* --- Sidebar (Struktur aus Figma aih_sidebar, Masse aus DSM) ----
   Width/Paddings folgen unserem Design-System (260px Sidebar, 16px Paddings);
   die Figma-Pixel (300px / 24px) waren nur grobe Richtgroessen. */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--light-gray);
    /* Figma: vertikaler Separator rechts in #838383 (dunkler als --color-stroke) */
    border-right: 1px solid #838383;
    z-index: 60;
    transition: transform 0.25s ease-out;
}

/* Neue-Sitzung-Row: Icon + Label als klickbare Zeile (Figma-Pattern),
   kein vollbreiter Primary-Button mehr. Oberer Abstand matcht Nav-Bar-Hoehe +
   Padding, damit die Zeile nicht direkt an der Sidebar-Oberkante klebt. */
.sidebar-new-session {
    padding: 16px 12px 0;
    flex-shrink: 0;
}

.new-session-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 12px;
    background: transparent;
    color: var(--text-main);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease;
    text-align: left;
}

.new-session-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.new-session-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.new-session-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    flex-shrink: 0;
}

.new-session-btn__icon .icon {
    width: 16px;
    height: 16px;
    color: var(--text-main);
}

.new-session-btn__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Letzte Sitzungen"-Headline aus Figma (Bold, 12px) */
.sidebar-section-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--text-main);
    margin: 16px 16px 8px;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

/* Sidebar-Footer: 58px Hoehe (matcht app-footer).
   HAN-63: Info-Icon rechts, 16px horizontal Padding.
   HAN-66: Panic-Wipe-Button links vom Info-Icon, space-between rueckt beide
   Elemente an die Aussenkanten. */
.sidebar-footer {
    position: relative;
    height: 58px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* HAN-66: Panic-Wipe-Button (Icon + Label, rote Akzentfarbe als
   destructive-Indicator). Hover / focus-visible verstaerken den Rot-Ton, damit
   der Button nicht aus Versehen als normales Sidebar-Element wahrgenommen wird. */
.sidebar-wipe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-error);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sidebar-wipe-btn svg {
    width: 14px;
    height: 14px;
}

.sidebar-wipe-btn__label {
    white-space: nowrap;
}

.sidebar-wipe-btn:hover {
    background: rgba(210, 0, 0, 0.08);
    border-color: rgba(210, 0, 0, 0.2);
}

.sidebar-wipe-btn:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

.sidebar-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-info-btn svg {
    width: 16px;
    height: 16px;
}

.sidebar-info-btn:hover,
.sidebar-info-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}

.sidebar-info-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.sidebar-info-btn[aria-expanded="true"] {
    color: var(--primary-blue);
    background: rgba(44, 75, 177, 0.08);
}

/* Popover-Card oberhalb des Info-Buttons (rechts ausgerichtet) */
.sidebar-privacy-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 16px;
    left: 16px;
    max-width: 260px;
    background: var(--bg-color);
    border: 1px solid var(--color-stroke);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 65;
}

.sidebar-privacy-popover[hidden] {
    display: none;
}

.privacy-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    margin: 0;
}

/* HAN-72: Main-Content-Offset an neue Figma-Sidebar-Breite 296px angepasst
   (vorher 260px — HAN-63-Legacy). Der Main-Content-Bereich startet damit
   bündig an der rechten Sidebar-Kante, die TopBar wurde bereits aus dem
   .app-container herausgezogen und ist nicht von diesem Padding betroffen. */
.app-container {
    padding-left: 296px;
}

/* --- Session-List --------------------------------------------- */

.session-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background 0.12s ease;
}

.session-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.session-item--active {
    background: rgba(44, 75, 177, 0.1);
}

.session-item__label {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-item--active .session-item__label {
    color: var(--primary-blue);
    font-weight: 600;
}

/* --- HAN-65: Inline Rename-UI --------------------------------- */

/* Edit-Mode: Outline auf das gesamte Session-Item, damit der User sofort sieht,
   dass jetzt getippt wird. Hover/active bleibt visuell unterdrückt — wir
   kontrollieren den Zustand komplett vom contenteditable. */
.session-item--editing {
    background: var(--color-white);
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.session-item--editing:hover {
    background: var(--color-white);
}

/* Label im Edit-Mode: schaltet sich vom Button-Look auf ein editierbares
   Text-Feld um. overflow-x: auto (statt hidden) ist zentral: bei längerem
   Titel als Label-Breite scrollt der Browser automatisch den Caret ins
   Sichtfeld — sonst würde der Caret am Textende aus der Box rutschen und
   der User sieht nicht mehr, wo er tippt.
   Scrollbar wird über scrollbar-width: none versteckt (Firefox), in
   WebKit/Blink via ::-webkit-scrollbar weiter unten. */
/* HAN-65: Echter <input type="text"> ersetzt den Button während Edit.
   Vermeidet die bekannten <button>+contenteditable-Probleme in Firefox/Chrome
   (kein sichtbarer Caret, keine Pfeiltasten-Navigation, Space = Button-Click).
   Visuell identisch mit .session-item__label — selber flex-Slot, selbes
   Padding, Typographie, Farbe. */
.session-item__rename-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    border-radius: 0;
    /* Native Input-Selection-Highlighting funktioniert out-of-the-box — keine
       eigenen ::selection-Overrides nötig. */
}

.session-item__label[contenteditable="true"]::selection {
    background: rgba(44, 75, 177, 0.2);
}

/* Counter-Pill: rechts neben dem Label, nur während Edit-Mode sichtbar.
   Kompakt (10px font), damit er in schmale Sidebar passt, ohne den Titel
   zu verdecken. Ab Limit-Erreichen in Error-Rot. */
.session-item__counter {
    flex-shrink: 0;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

.session-item__counter--limit {
    background: rgba(210, 0, 0, 0.1);
    color: var(--color-error);
}

/* Inline-Fehler unter dem Session-Item (z.B. Quota-Error beim Rename).
   Nutzt die bestehende .inline-error-Klasse, überschreibt nur das Padding,
   damit er visuell zum Session-Item gehört statt zur Input-Area. */
.session-item__inline-error {
    padding: 4px 12px 6px;
    margin: 0;
}

.session-item__delete {
    padding: 6px;
    margin-right: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.session-item:hover .session-item__delete,
.session-item:focus-within .session-item__delete {
    opacity: 1;
}

.session-item__delete:hover {
    color: var(--color-error);
    background: rgba(210, 0, 0, 0.1);
}

/* --- Backdrop (nur im Mobile-Drawer-Mode sichtbar) ------------ */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 55;
    display: none;
}

/* --- Tablet+ (≥834px) Sidebar-Collapse via body.sidebar-collapsed -------- */

@media (min-width: 834px) {
    .app-container {
        transition: padding-left 0.25s ease-out;
    }

    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .app-container {
        padding-left: 0;
    }
}

/* --- Mobile-Drawer (<834px, HAN-31-harmonisiert) ------------------------
   Nav-Bar dient als sichtbarer Toggle-Anker (Sidebar-Top ist im Drawer versteckt
   bis der User auf den Hamburger klickt). */

@media (max-width: 833px) {
    .app-container {
        padding-left: 0;
    }

    .sidebar {
        width: 85vw;
        max-width: 320px;
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    /* Scroll-Lock wenn Drawer offen */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* --- Session-Replay (History-Rendering nach Sitzungs-Wechsel) - */

.message.session-replay .action-icons {
    display: none;
}

/* ==============================================================
   HAN-64: Auto-Titel, Delete-UX, Empty-State & Polishing
   -------------------------------------------------------------- */

/* --- Confirm-Dialog (alertdialog) ------------------------------ */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: confirm-backdrop-in 0.12s ease-out;
}

@keyframes confirm-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Figma 105:256 / 105:274 (Refresh 2026-04-27) · cc/surface bg, padding 28px,
   rounded 12px, shadow 0 12px 32px rgba(0,0,0,0.2), gap 12px column. */
.confirm-dialog {
    background: var(--cc-surface);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: confirm-dialog-in 0.15s ease-out;
}

@keyframes confirm-dialog-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Figma 105:257 / 105:275 · Source Sans 3 SemiBold 18/26 cc/text. */
.confirm-dialog__title {
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--cc-text);
    margin: 0;
}

/* Figma 105:258 / 105:276 · Source Sans 3 Regular 14/22 cc/text. */
.confirm-dialog__message {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--cc-text);
    margin: 0;
}

/* Figma 105:277 (Refresh 2026-04-27) · Acknowledgement-Card:
   bg cc/surface-alt, border cc/hairline, rounded 8, padding 12/14,
   gap 10, items-start. */
.confirm-dialog__ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cc-surface-alt);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--cc-text);
}

/* Figma 105:278 · Custom Checkbox: 18x18 cc/pii/medical bg + border, rounded 3,
   weisser Bold-Checkmark. Native checkbox visuell ersetzt — Klick + Focus
   bleiben auf dem nativen Element fuer A11y. */
.confirm-dialog__ack-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 3px;
    border: 1px solid var(--cc-hairline);
    background: var(--cc-surface);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.confirm-dialog__ack-checkbox:checked {
    background: #dc2626;
    border-color: #dc2626;
}

.confirm-dialog__ack-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.confirm-dialog__ack-checkbox:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.confirm-dialog__ack-text {
    user-select: none;
    flex: 1 1 auto;
    min-width: 0;
}

.confirm-dialog__btn[disabled],
.confirm-dialog__btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Figma 105:259 / 105:281 · justify-end, gap 8px, padding-top 4. */
.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

/* Figma 105:260+ / 105:282+ · padding 10/20, rounded 8, Source Sans 3
   SemiBold 14, items-center. Border 1px cc/hairline (cancel) bzw. solid bg. */
.confirm-dialog__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.confirm-dialog__btn--cancel {
    background: var(--cc-surface);
    color: var(--cc-text);
    border-color: var(--cc-hairline);
}

.confirm-dialog__btn--cancel:hover {
    background: var(--cc-surface-alt);
}

.confirm-dialog__btn--confirm {
    background: var(--color-btn-primary);
    color: #FFFFFF;
    border-color: var(--color-btn-primary);
}

.confirm-dialog__btn--confirm:hover {
    background: #1c302c;
}

.confirm-dialog__btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* HAN-64: Destructive-Variant — rote Primary-Action fuer unwiderrufliche
   Aktionen wie Sitzung loeschen. Kann auch ausserhalb des Confirm-Dialogs
   an Buttons angewandt werden (z.B. auf sprint-showcase.html). */
.btn--destructive {
    background: var(--color-error) !important;
    color: #FFFFFF !important;
    border-color: var(--color-error) !important;
}

.btn--destructive:hover {
    background: #b00000 !important;
    border-color: #b00000 !important;
}

.btn--destructive:focus-visible {
    outline-color: var(--color-error) !important;
}

/* --- Session-Item Warning-Highlight (Storage-Quota) ------------ */

.session-item--warning {
    background: var(--color-warning-bg) !important;
    position: relative;
}

.session-item--warning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-warning);
    border-radius: 2px 0 0 2px;
}

.session-item--warning .session-item__label {
    font-weight: 600;
}

/* --- Info-Toast-Variante (Delete-/Rename-/Wipe-Feedback) -------- */
/* HAN-75: auf --cc-* Tokens migriert — kein Hex-/Legacy-Var-Rest mehr. */

.error-toast--info {
    background: var(--cc-primary-soft);
    color: var(--cc-text);
}

.error-toast--info .error-toast-icon {
    color: var(--cc-primary);
}

.error-toast--info .error-toast-close {
    color: var(--cc-primary);
}

.error-toast--info .error-toast-close:hover {
    background: color-mix(in srgb, var(--cc-primary) 12%, transparent);
}

.error-toast--info .error-toast-close:focus-visible {
    outline-color: var(--cc-primary);
}

/* Reduced-motion: Confirm-Dialog- & Toast-Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .confirm-backdrop,
    .confirm-dialog {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   HAN-55 / HAN-79: PII-Consent-Dialog — blockierendes Modal beim
   App-Start. HAN-79 Redesign auf Variante-B-Tokens (--cc-*) +
   3-Card-Layout (Notwendig / Analyse / Modell-Verbesserung).
   Eigener Namespace (.consent-*), damit .confirm-* unberuehrt bleibt
   — der dort implementierte Backdrop-/ESC-Dismiss waere fuer den
   DSGVO-Consent unzulaessig.
   ══════════════════════════════════════════════════════════════════ */

.consent-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 26, 43, 0.55);  /* --cc-text mit Alpha */
    /* Hoeher als confirm-backdrop (1200), damit ein paralleler
       Confirm-Dialog (unwahrscheinlich, aber theoretisch moeglich)
       nicht den Consent ueberlagert. */
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: consent-backdrop-in 0.15s ease-out;
}

@keyframes consent-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.consent-dialog {
    background: var(--cc-surface);
    border-radius: 12px;
    /* Figma 56:134 shadow: 0 24px 48px 0 rgba(0,0,0,0.3) */
    box-shadow: 0 24px 48px 0 rgba(0, 0, 0, 0.3);
    /* AC10: max-width 560 px, zentriert. */
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    /* Figma: padding 36px, gap 24px zwischen Sections. */
    padding: 36px;
    color: var(--cc-text);
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: consent-dialog-in 0.18s ease-out;
}

@keyframes consent-dialog-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header: Icon-Box + Title + Subtitle ─────────────────────── */

.consent-dialog__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consent-dialog__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Figma 56:137: 44x44 Box mit cc/primary-soft bg + cc/primary-border. */
.consent-dialog__icon-box {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    border-radius: 8px;
    color: var(--cc-primary);
}

.consent-dialog__lock {
    width: 22px;
    height: 22px;
}

.consent-dialog__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consent-dialog__title {
    /* Figma 56:140: Source Serif 4 SemiBold 22px/28px, tracking -0.33px. */
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.33px;
    color: var(--cc-text);
    margin: 0;
}

.consent-dialog__subtitle {
    /* Figma 56:141: JetBrains Mono Regular 11px/14px, cc/muted, NICHT uppercase. */
    font-family: var(--font-family-mono);
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--cc-muted);
    margin: 0;
}

/* ── Intro ───────────────────────────────────────────────────── */

.consent-dialog__intro {
    /* Figma 56:142: Source Sans 3 Regular 14px/22px, cc/text-soft. */
    font: var(--cc-body-m);
    color: var(--cc-text-soft);
    margin: 0;
}

/* ── Cards (3 Kategorien) ────────────────────────────────────── */

.consent-dialog__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.consent-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    /* Figma: padding 14px 16px, radius 8px. */
    padding: 14px 16px;
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    background: var(--cc-surface);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.consent-card:hover {
    background: var(--cc-surface-alt);
}

/* Bewusst KEIN :focus-within Ring um die Card — sonst springt die ganze
   Kachel beim Click in den primary-Highlight, was im Figma-Layout nicht
   vorgesehen ist. Keyboard-Fokus bleibt sichtbar via .consent-card__checkbox
   :focus-visible (Browser unterdrueckt das bei Mouse-Click korrekt). */

/* AC2: Essenziell-Card visuell abgehoben (cc/primary-soft + cc/primary-border). */
.consent-card--required {
    background: var(--cc-primary-soft);
    border-color: var(--cc-primary-border);
    cursor: default;
}

.consent-card--required:hover {
    background: var(--cc-primary-soft);
}

/* Custom Checkbox (Figma 56:154/56:160 leer, 56:145 gefuellt). 20x20 Box,
   weisser bg + hairline border. Checked: cc/primary bg + weisser ✓.
   Wir nutzen appearance:none statt nativem Look, damit disabled+checked
   gleich aussieht wie aktive Checked-State (kein ausgegrauter Browser-Look). */
.consent-card__checkbox {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--cc-surface);
    /* Border dauerhaft cc/primary (statt nur auf Hover/Focus) — vereinheitlicht
       das Look-and-Feel: alle drei Checkboxen haben den gleichen blauen
       Stroke unabhaengig vom Pointer-/Focus-State. */
    border: 1px solid var(--cc-primary);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease;
}

.consent-card__checkbox:checked {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
}

.consent-card__checkbox:checked::after {
    /* Figma 56:146: weisser ✓, Source Sans 3 Bold 13px. */
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--cc-on-primary);
    border-bottom: 2px solid var(--cc-on-primary);
    transform: rotate(-45deg) translate(1px, -1px);
}

.consent-card__checkbox:disabled {
    cursor: not-allowed;
    opacity: 1;  /* keine Browser-Default-Ausgrauung */
}

/* Keine Outline mit offset — sah aus wie ein Card-Stroke. Statt dessen
   subtiler Border-Wechsel auf Keyboard-Fokus. */
.consent-card__checkbox:focus-visible {
    outline: none;
    border-color: var(--cc-primary);
}

/* Sicherstellen, dass weder Card noch Label-Wrapper jemals einen Focus-Stroke
   bekommen (Browser-Defaults oder versehentliche Vererbung). */
.consent-card,
.consent-card:focus,
.consent-card:focus-within,
.consent-card:focus-visible {
    outline: none;
    box-shadow: none;
}

.consent-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.consent-card__title {
    /* Figma 56:149: Source Sans 3 SemiBold 15px/20px. */
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--cc-text);
}

/* Figma 56:150 Badge: cc/safe-Familie, NICHT primary, NICHT uppercase,
   JetBrains Mono Regular 10px, padding 8px/2px, radius 4px. */
.consent-card__badge {
    font-family: var(--font-family-mono);
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    color: var(--cc-safe);
    background: var(--cc-safe-soft);
    border: 1px solid var(--cc-safe-border);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.consent-card__desc {
    /* Figma 56:152: Source Sans 3 Regular 13px/20px, cc/text-soft. */
    font: var(--cc-body-s);
    color: var(--cc-text-soft);
    margin: 0;
}

/* ── Footer: Buttons ─────────────────────────────────────────── */

.consent-dialog__footer {
    display: flex;
    flex-direction: column;
}

.consent-dialog__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.consent-dialog__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma 56:166/56:168: padding 12px 20px, radius 6px. */
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    font: var(--cc-button-m);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* Secondary = „Auswahl akzeptieren": Outline mit cc/hairline + cc/text. */
.consent-dialog__btn--secondary {
    background: var(--cc-surface);
    color: var(--cc-text);
    border-color: var(--cc-hairline);
}

.consent-dialog__btn--secondary:hover {
    background: var(--cc-surface-alt);
    border-color: var(--cc-text-soft);
}

/* Primary = „Alle akzeptieren": gefuellt, prominent. */
.consent-dialog__btn--primary {
    background: var(--cc-primary);
    color: var(--cc-on-primary);
    border-color: var(--cc-primary);
}

.consent-dialog__btn--primary:hover {
    background: #093d6c;
    border-color: #093d6c;
}

.consent-dialog__btn:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

/* AC10 Reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .consent-backdrop,
    .consent-dialog {
        animation: none;
    }
    .consent-card,
    .consent-card__checkbox,
    .consent-dialog__btn {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   HAN-30: Onboarding — First-Use-Hinweis + Disclaimer-Banner
   ══════════════════════════════════════════════════════════════════
   Tokens werden mit Fallbacks referenziert, weil das Repo
   `--color-white` / `--color-tertiary` / `--color-links` / `--color-black`
   aktuell noch nicht in :root definiert (vgl. sprint-showcase.html
   DSM-Tokens, HAN-43/45). */

/* ── First-Use-Hint · Figma 302:2 ───────────────────────────── */
/* Inline-Card im Step-1 step-card__body, nicht mehr Floating-Overlay.
   Dimensionen, Farben, Typo strikt aus Figma 302:2..302:15. */

.first-use-hint {
    background: var(--cc-surface, #ffffff);
    border: 1px solid var(--cc-hairline, #d6dde5);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(14, 26, 43, 0.06), 0 12px 32px rgba(14, 26, 43, 0.16);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 420px;
    max-width: calc(100% - 32px);
    /* Im Input-Field-Container (.step-card__body) absolut anchored an die
       untere Kante; horizontal zentriert. z-index hebt die Card über das
       Textarea, damit Border + Shadow nicht beschnitten werden. */
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Figma 307:2 · Downward-Pfeil 16x8, zeigt von Hint nach unten aufs Textarea.
   Zwei ::before/::after-Layer: ::before ist der Hairline-Border-Trick (etwas
   größer + dunkler, gibt der Pfeilspitze die Border-Linie passend zur Card),
   ::after legt die weiße Fläche darüber, sodass nur die Border-Kanten
   sichtbar bleiben. */
.first-use-hint::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background: var(--cc-hairline, #d6dde5);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.first-use-hint::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: var(--cc-surface, #ffffff);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Figma 302:5 · Brand-Group (Logo-Stack + Wordmark) */
.first-use-hint__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Figma 302:6 · Logo-Stack 32x32 mit drei 20x20 rounded-2 Layers */
.first-use-hint__logo-stack {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.first-use-hint__logo-layer {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.first-use-hint__logo-layer--back {
    top: 3px; left: 3px;
    background: linear-gradient(135deg, #dee2e8 0%, #cacdd4 70.711%);
}

.first-use-hint__logo-layer--mid {
    top: 6px; left: 6px;
    background: linear-gradient(135deg, #498ac6 0%, #0b4f8a 70.711%);
}

.first-use-hint__logo-layer--front {
    top: 9px; left: 9px;
    background: linear-gradient(135deg, #eaedf1 0%, #d8dbe0 70.711%);
}

/* Figma 302:10 · Wordmark "Hanoda AI" */
.first-use-hint__brand-name {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.27px;
    color: var(--cc-text, #0e1a2b);
    margin: 0;
    white-space: nowrap;
}

/* Figma 302:11 · Headline "Sicher mit KI arbeiten" */
.first-use-hint__headline {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.18px;
    color: var(--cc-text, #0e1a2b);
    text-align: center;
    margin: 0;
}

/* Figma 302:12 · Body */
.first-use-hint__body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--cc-text-soft, #3c4a5b);
    text-align: center;
    max-width: 360px;
    margin: 0;
}

/* Figma 302:14/15 · Verstanden-Button */
.first-use-hint__ack {
    background: var(--cc-primary-hover, #093f70);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.first-use-hint__ack:hover {
    background: var(--cc-primary, #0b4f8a);
}

/* ── Disclaimer-Banner ──────────────────────────────────────── */

.disclaimer-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-white, #FFFFFF);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* Desktop: Sidebar (260px) reserviert den linken Rand; Banner beginnt
   rechts davon. Mobile (<834px): Sidebar ist Drawer, Banner bleibt
   full-viewport-width. */
@media (min-width: 834px) {
    .disclaimer-banner {
        left: 260px;
    }
}

.disclaimer-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
}

/* [hidden] (Spec: display:none) wird von unseren display:flex/block-Regeln
   ueberschrieben. Diese Regel erzwingt, dass der JS-Toggle via .hidden=true
   die Views tatsaechlich ausblendet. */
.disclaimer-compact[hidden],
.disclaimer-expanded[hidden] {
    display: none;
}

.disclaimer-compact__text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-tertiary, #595959);
    flex: 1;
}

.disclaimer-link {
    color: var(--color-links, #566EBB);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.disclaimer-link:hover,
.disclaimer-link:focus-visible {
    text-decoration: underline;
}

.disclaimer-more-btn {
    margin-left: 4px;
}

.disclaimer-close-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-tertiary, #595959);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.disclaimer-close-btn:hover,
.disclaimer-close-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-black, #000);
}

.disclaimer-expanded {
    padding: 16px 24px;
}

.disclaimer-expanded__hint {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-tertiary, #595959);
    margin-bottom: 12px;
}

.disclaimer-expanded__body {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-black, #000);
    margin: 0 0 16px;
}

.disclaimer-expanded__ack {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 12px;
}

/* Konsistente Fokus-Indikatoren (WCAG 2.1 AA) fuer Onboarding-Controls. */
.first-use-hint__ack:focus-visible,
.disclaimer-expanded__ack:focus-visible,
.disclaimer-more-btn:focus-visible,
.disclaimer-close-btn:focus-visible {
    outline: 2px solid var(--color-links, #566EBB);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   HAN-31: :focus-visible-Ergaenzung (WCAG 2.1 AA)
   Sichtbarer Focus-Ring fuer Tastatur-Navigation auf Controls, die bisher
   keinen oder nur schwachen Fokus-Indikator hatten. Outline-Offset 2px
   haelt den Ring vom Element frei (wichtig bei Input- und Delete-Buttons). */

.send-button:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.orphanet-warning:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.session-item__label:focus-visible,
.session-item__delete:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* HAN-31 + HAN-65: Inline-Rename-Input bekommt sichtbaren Ring passend
   zum Sitzungs-Item-Pattern (ersetzt browser-default). */
.session-item__rename-input:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   HAN-72 · Variante B — Visual Refresh (ADR-9 Phase 1)
   ──────────────────────────────────────────────────────────────
   Strikt nach Figma-Frame 71:2 („B · Step 1 — Empty State (erste
   Sitzung)"), Node-IDs referenziert. Kein gerundeter Pixel-Wert —
   jede Zahl stammt aus dem Figma-Dev-Mode-Dump (px-, py-, size-,
   gap-, rounded-Werte). Tokens cc/* aus :root.
   ══════════════════════════════════════════════════════════════ */

/* ── Page-Background · Figma 71:2-Root (cc/bg) ─────────────────── */
/* Figma: bg cc/bg (#f5f7fa) als Frame-Root; Sidebar + TopBar liegen als
   cc/surface (weiß) darüber. Die Main-Content-Zone erbt diese cc/bg. */
body {
    background: var(--cc-bg);
}

/* ── App-Footer entfernen (nicht in Figma 71:2) ────────────────── */
/* Der Legacy-Footer mit Logo + Copyright + Links ist im Variante-B-Scope
   nicht Teil des Designs. Main-Content endet direkt an der Viewport-
   Unterkante (bzw. am Input-Bar-Bottom). */
.app-footer {
    display: none;
}

/* ── TopBar · Figma 71:3 (AC6) ────────────────────────────────── */
/* Root-Container des TopBars: 56px Höhe, horizontal 24px Padding,
   bg cc/surface, border-bottom 1px cc/hairline, flex space-between.
   Followup 2026-04-27: position:fixed statt sticky — sticky-Verhalten ist
   bruechig in flex-column-Layouts wenn ein Vorfahre overflow setzt; fixed
   ist garantiert immer sichtbar. body bekommt entsprechend padding-top:56px,
   damit der Content nicht unter die TopBar rutscht. */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 24px;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-hairline);
    overflow: clip;
}

/* Sidebar-Toggle (kein Figma-Node — Afforantz für responsive Drawer).
   Setzt direkt auf den Anfang, außerhalb des Figma-definierten Left-Wrappers.
   12px Abstand zum Left-Wrapper-Inhalt, damit der Toggle klar als Nav-Afforantz
   vom Brand-Block getrennt wahrnehmbar bleibt. */
.topbar__toggle {
    margin-right: 12px;
    flex-shrink: 0;
}

/* Figma 71:4 · Left-Wrapper: gap-24 items-center overflow-clip.
   Enthält Brand-Group (71:5) + Chip-Group (71:9). */
.topbar__left {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow: clip;
    min-width: 0;
}

/* Figma 71:5 · Brand-Group: gap-10 items-center. */
.topbar__brand-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: clip;
}

/* Figma 71:5 (Refresh 2026-04-26) · Logo-Icon: 28x28 Frame, drei gestapelte
   18x18 rounded-2 Squares mit 135deg-Gradients, versetzt 3px diagonal nach
   unten-rechts. Ersetzt das alte cc/primary-Quadrat mit "H". */
.topbar__logo {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    overflow: clip;
}

/* Brand-Link: reiner Wrapper für den Namen — kein Visual. */
.topbar__brand-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

/* Figma 71:8 (Refresh 2026-04-27) · „Hanoda AI" — Source Sans 3 Medium 22px,
   tracking -0.33px, color cc/text, leading-normal, whitespace-nowrap.
   Followup: 18px → 22px (User-Wunsch 2026-04-27). */
.topbar__brand-name {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 22px;
    line-height: normal;
    letter-spacing: -0.33px;
    color: var(--cc-text);
    white-space: nowrap;
}

/* Figma 71:9 · Chip-Group: flex items-center, overflow-clip — kein Gap,
   ein einzelnes Chip-Element. */
.topbar__chip-group {
    display: inline-flex;
    align-items: center;
    overflow: clip;
}

/* Figma 71:10 · Chip: bg cc/primary-soft, rounded-5, px-12 py-6, overflow-clip. */
/* Figma 71:11 · Chip-Text: Source Sans 3 SemiBold 13px, cc/primary,
   leading-normal, whitespace-nowrap. */
.topbar__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--cc-primary-soft);
    color: var(--cc-primary);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: normal;
    white-space: nowrap;
    overflow: clip;
    user-select: none;
}

/* Figma 71:12 · Right-Wrapper: flex items-center overflow-clip. */
.topbar__right {
    display: flex;
    align-items: center;
    overflow: clip;
    flex-shrink: 0;
}

/* Figma 71:13 · Avatar: 32x32, rounded-full (999), bg cc/primary, flex center,
   overflow-clip. */
/* Figma 71:14 · „DA": Source Sans 3 Bold 12px, cc/on-primary, leading-normal,
   whitespace-nowrap. */
.topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--cc-primary);
    color: var(--cc-on-primary);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
    overflow: clip;
    user-select: none;
}

/* Sidebar-Toggle — erbt .nav-icon-btn Basis, Farben auf cc/*. */
.topbar .nav-icon-btn {
    color: var(--cc-text);
}
.topbar .nav-icon-btn:hover,
.topbar .nav-icon-btn:focus-visible {
    background: var(--cc-surface-alt);
}
.topbar .nav-icon-btn:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}
.topbar .nav-icon-btn .icon {
    color: var(--cc-text);
}

/* ── Sidebar-Überlapp + Figma-Geometrie (Figma 71:16). */
/* Figma: bg cc/surface, border-r cc/hairline, flex-col gap-28, h-full,
   items-start overflow-clip px-24 py-28 w-296.
   Die Sidebar selbst scrollt NICHT — nur der .sidebar-sessions-Block
   scrollt intern. Dadurch bleiben Legal-Card + „↻ Neue Sitzung"-Button
   + Wipe-Button immer sichtbar, auch bei vielen Sessions. */
.sidebar {
    top: 56px;
    height: calc(100% - 56px);
    width: 296px;
    background: var(--cc-surface);
    border-right: 1px solid var(--cc-hairline);
    padding: 28px 24px;
    gap: 28px;
    align-items: stretch;
    overflow: clip;
    box-sizing: border-box;
}

/* Figma 71:17..71:20 Intro bleibt natürlicher Größe (shrink-0). */
.sidebar-intro {
    flex-shrink: 0;
}

/* Figma 71:52 war ein expliziter Flex-Spacer; im Live-Code übernimmt der
   .sidebar-sessions-Block (flex:1) die Rolle. Dadurch scrollt die Session-
   Liste intern, statt den ganzen Sidebar-Tree zu schieben. */
.sidebar-spacer {
    display: none;
}

/* ── ABLAUF-Intro · Figma 71:17..71:20 ─────────────────────────── */
/* Figma: flex-col gap-8 items-start overflow-clip w-full. */
.sidebar-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    overflow: clip;
}

/* Figma 71:18 · „ABLAUF" — Source Sans 3 Bold 11/14, letterSpacing=6 (=0.66px),
   color cc/muted, whitespace-nowrap. */
.sidebar-intro__kicker {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.66px;
    color: var(--cc-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Figma 71:19 · „Drei Schritte. / Nachvollziehbar." — cc/display/m
   (Source Serif 4 SemiBold 24/30, letterSpacing=-1.5 → -0.36px), cc/text.
   Zwei Zeilen mit leading-30, als zwei <span> mit display:block. */
.sidebar-intro__heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.36px;
    color: var(--cc-text);
    margin: 0;
    min-width: 100%;
}
.sidebar-intro__heading > span {
    display: block;
}

/* Figma 71:20 · Body — Source Sans 3 Regular 13/20, cc/text-soft, w-full. */
.sidebar-intro__body {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-text-soft);
    margin: 0;
    min-width: 100%;
}

/* ── Sessions-Block — Label + scrollende Liste ─────────────────── */
/* Der Block füllt den verfügbaren Platz zwischen Intro (oben) und Footer-
   Gruppe (Legal-Card + Buttons, unten). Interner Scroll sorgt dafür, dass
   viele Sessions die Footer-Elemente nicht aus dem Viewport drücken. */
.sidebar-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* HAN-72 Followup (Punkt 8): Abstand der aktiven Session-Item-Hintergrundflaeche
       zur Scrollbar — sonst ueberlappen primary-soft-Background und Scrollbar
       optisch an der rechten Kante. */
    padding-right: 6px;
}
.sidebar-sessions .session-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Session-Item · Figma 70:22/70:27 (AC5) ────────────────────── */
/* Figma außen (70:22/27): flex flex-col items-start p-10 rounded-6 size-full.
   Figma innen (70:23/28): flex items-center justify-between w-full.
   Da mein HTML keine Inner-Wrapper-Ebene hat, kombiniere ich zu flex-row
   direkt — visuell identisch zu Figma (nur eine Zeile im Item). */
.sidebar .session-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    overflow: clip;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Figma 70:22 · Aktives Item: bg cc/primary-soft, Text cc/primary SemiBold. */
.sidebar .session-item--active {
    background: var(--cc-primary-soft);
}

/* Hover (nicht aktiv) — dezenter surface-alt-Tint, nicht in Figma explizit,
   aber als Interaktions-Affordance unverzichtbar. */
.sidebar .session-item:not(.session-item--active):hover {
    background: var(--cc-surface-alt);
}

/* Figma 70:23/70:28 · Inner-Row: flex items-center justify-between w-full. */
.sidebar .session-item__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    /* Figma 70:29 · Inaktiv: Source Sans 3 Medium 13/normal cc/text. */
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    color: var(--cc-text);
    overflow: hidden;
}

/* HAN-72 Followup (Punkt 7): Inner-Span fuer den Titel — text-overflow:ellipsis
   greift hier zuverlaessig, da Block-Layout statt Flex. */
.sidebar .session-item__label-text {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Figma 70:24 · Aktiver Text-Style: Source Sans 3 SemiBold 13 cc/primary. */
.sidebar .session-item--active .session-item__label {
    font-weight: 600;
    color: var(--cc-primary);
}

.sidebar .session-item__label:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Delete-Button im Session-Item: nur on hover/focus sichtbar, kein Visual-
   Noise bei Idle-State. Figma zeigt keinen Delete-Button im Default-Render. */
.sidebar .session-item__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cc-muted);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.sidebar .session-item:hover .session-item__delete,
.sidebar .session-item:focus-within .session-item__delete {
    opacity: 1;
}
.sidebar .session-item__delete:hover {
    background: var(--cc-surface-alt);
    color: var(--cc-text);
}
.sidebar .session-item__delete:focus-visible {
    opacity: 1;
    outline: 2px solid var(--cc-primary);
    outline-offset: 1px;
}

/* Legal-Card + Bottom-Button + Wipe-Button behalten ihre natürliche Höhe
   und lassen sich nicht von der Session-Liste wegschieben. */
.sidebar > .sidebar-legal-card,
.sidebar > .sidebar-new-session-btn,
.sidebar > .sidebar-wipe-btn {
    flex-shrink: 0;
}

/* Empty-State: Session-Block hat natürliche Höhe (Empty-Card soll nicht
   optisch „fliegen"), die Legal-Card wird stattdessen per margin-top:auto
   an den unteren Rand geschoben — so bleibt Figma 71:52 (Spacer) logisch
   erhalten, ohne dass der Non-Empty-Case bricht. */
.sidebar.is-empty .sidebar-sessions {
    flex: 0 0 auto;
    overflow: visible;
}
.sidebar.is-empty .sidebar-legal-card {
    margin-top: auto;
}

/* ── Bottom „↻ Neue Sitzung"-Button · Figma 71:58..71:59 ────────── */
/* Figma: bg cc/surface, border 1px solid cc/hairline, rounded-6, flex items-center
   justify-center, px-16 py-10, w-full, overflow-clip. Text cc/button/m (Source
   Sans 3 SemiBold 14/20) in cc/text. */
.sidebar-new-session-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: var(--cc-surface);
    color: var(--cc-text);
    border: 1px solid var(--cc-hairline);
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    overflow: clip;
    box-sizing: border-box;
}
.sidebar-new-session-btn:hover {
    background: var(--cc-surface-alt);
}
.sidebar-new-session-btn:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}
.sidebar-new-session-btn .icon {
    width: 14px;
    height: 14px;
    color: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

/* ── Empty-State-Toggle (AC8) ─────────────────────────────────── */
/* Im Empty-State verschwinden: „Letzte Sitzungen"-Label, Bottom-„Neue Sitzung"-
   Button (AC8: „Kein Neue-Sitzung-Button im Footer") und Wipe-Button (nichts zu
   löschen). Legal-Card + ABLAUF-Intro bleiben. */
.sidebar.is-empty .sidebar-section-label,
.sidebar.is-empty .sidebar-new-session-btn,
.sidebar.is-empty .sidebar-wipe-btn {
    display: none;
}

/* ── Sidebar-Session-Liste — Gruppen-Header (AC5) · Figma 70:26 ── */
/* Figma: Source Sans 3 Bold 11 · letterSpacing=6 (→ 0.66px CSS) · cc/muted
   · leading-normal · whitespace-nowrap. In Figma 70:21 liegt GESTERN 4px
   unterhalb des vorherigen Items (y=43) und 4px oberhalb des nächsten (y=63
   minus 16px Header-Höhe). Umgesetzt als Padding 4px oben + 4px unten. */
.session-group-header {
    list-style: none;
    padding: 4px 0;
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.66px;
    color: var(--cc-muted);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Empty-State · Figma 74:2 (AC8) ───────────────────────────── */
/* <li>-Wrapper neutralisieren. */
.session-empty-state {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Figma 74:2 · EmptyState-Card: bg cc/surface-alt, border 1px dashed cc/hairline-soft,
   flex-col gap-8 items-center, px-20 py-32, rounded-8, w-full. */
.session-empty-state__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    background: var(--cc-surface-alt);
    border: 1px dashed var(--cc-hairline-soft);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* Figma 97:2 · EmptyIcon: 40x40, rounded-6, bg cc/primary-soft,
   border 1px solid cc/primary-border, flex items-center justify-center. */
/* Figma 97:3 · „+": Source Sans 3 SemiBold 22px, cc/primary, leading-normal. */
.session-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    color: var(--cc-primary);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    overflow: clip;
    user-select: none;
}

/* Figma 74:4 · „Keine Sitzungen": Source Sans 3 SemiBold 14/20, cc/text,
   whitespace-nowrap. */
.session-empty-state__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--cc-text);
    margin: 0;
    white-space: nowrap;
}

/* Figma 74:5 · Body: Source Sans 3 Regular 12/18, cc/text-soft, text-center. */
.session-empty-state__body {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--cc-text-soft);
    margin: 0;
    min-width: 100%;
}

/* ── Sidebar-Footer — Layout-Override für Variante B ───────────── */
/* Der HAN-63-Footer war Single-Row (Icons nebeneinander). Variante B
   stapelt die Rechtliche-Einordnung-Card über den Wipe-Button, beide
   volle Breite. Höhe wächst mit Inhalt, Padding folgt der Sidebar-Struktur
   (Figma 71:16: px-24 py-28 — der Wert py-14 hier entspricht den 14px
   Außenabstand, da der Legal-Card-14px-Innenpadding die restliche Strecke
   deckt). */
.sidebar-footer {
    height: auto;
    padding: 0 16px 14px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
}

/* Wipe-Button: volle Breite, dezent, unter der Legal-Card. */
.sidebar-footer .sidebar-wipe-btn {
    width: 100%;
    justify-content: center;
}

/* ── Rechtliche-Einordnung-Card · Figma 71:53 (AC7) ───────────── */
/* Figma 71:53 · Card: bg cc/primary-soft, border 1px solid cc/primary-border,
   flex-col gap-6 items-start, p-14 (14px all sides), rounded-6, w-full,
   overflow-clip. */
.sidebar-legal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    overflow: clip;
    margin-bottom: 12px;
}

/* Figma 71:54 · Header-Row: gap-8 items-center, text cc/primary, w-full,
   whitespace-nowrap, overflow-clip. */
.sidebar-legal-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--cc-primary);
    white-space: nowrap;
    overflow: clip;
}

/* Figma 71:55 · ⓘ-Icon: Source Sans 3 Medium 13/20, cc/primary. */
.sidebar-legal-card__icon {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-primary);
    flex-shrink: 0;
}

/* Figma 71:56 · Titel: Source Sans 3 SemiBold 12/16, cc/primary,
   whitespace-nowrap. */
.sidebar-legal-card__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-primary);
    white-space: nowrap;
}

/* Figma 71:57 · Body: Source Sans 3 Regular 11/16, cc/text-soft, w-full,
   whitespace-pre-wrap. */
.sidebar-legal-card__body {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    color: var(--cc-text-soft);
    margin: 0;
    width: 100%;
    white-space: pre-wrap;
}

/* ── Responsive-Breakpoints (HAN-31 Grid: Mobile <834px) ──────── */
/* Desktop ≥834: Sidebar ist gepinnt, kein Drawer — daher auch kein Toggle
   im TopBar (Figma 71:3..71:14 hat keinen Toggle). Brand startet direkt
   am 24px-Padding, wie in Figma. */
@media (min-width: 834px) {
    .topbar__toggle {
        display: none;
    }
}

/* Tablet (833..600): Chip bleibt, Left-Gap schrumpft. */
@media (max-width: 833px) {
    .topbar__left {
        gap: 16px;
    }
}

/* Narrow Mobile (<600px): Anonymisieren-Chip verschwindet, damit Brand-Name
   + Avatar ohne Überlappung auf dem TopBar Platz haben. Der Chip ist ein
   dekoratives Context-Label, kein funktionaler Control — seine Abwesenheit
   auf schmalen Viewports ist verlustfrei. */
@media (max-width: 599px) {
    .topbar {
        padding: 0 16px;
    }
    .topbar__toggle {
        margin-right: 8px;
    }
    .topbar__chip-group {
        display: none;
    }
}

/* Very narrow (<375px): Logo-Icon weg, nur Brand-Name bleibt sichtbar. */
@media (max-width: 374px) {
    .topbar__logo {
        display: none;
    }
    .topbar__brand-group {
        gap: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   HAN-72 · Chunk C · 3-Step-Flow (AC3 Accordion) — Step 1 Scope
   ──────────────────────────────────────────────────────────────
   Figma 71:60 (Wrapper), 71:61 (3-Step-Indikator), 71:80 (Step 1
   active), 71:111/112 + 71:122 (Step 2 + 3 locked), 93:132 (Inline-
   Error), 138:128 (LLM-Timeout-Toast).
   ══════════════════════════════════════════════════════════════ */

/* HAN-72 Chunk C: .hero-section / .chat-section / .processing-section sind aus
   dem HTML entfernt. Der Legacy-Render-Host (#messages-container + Templates)
   lebt in #legacy-dom-stash als hidden Data-Holder; anonymization.js schreibt
   weiterhin dorthin, bis in der Step-2-Review-Wire-Up-Phase das Rendering auf
   die Variante-B-Cards umgestellt wird. */

/* Main-Content-Wrapper · Figma 71:60
   bg cc/bg, flex-col gap-20, items-start, pb-48 pt-28 px-40 */
.step-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 28px 40px 48px;
    background: var(--cc-bg);
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* ── 3-Step-Indikator · Figma 71:61 ───────────────────────────── */
/* bg cc/surface, border 1px cc/hairline, rounded-8, h-68,
   flex items-center justify-center, px-24 py-16, overflow-clip. */
.step-indicator {
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    height: 68px;
    padding: 16px 24px;
    overflow: clip;
    box-sizing: border-box;
    flex-shrink: 0;
}
.step-indicator__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
    gap: 0;
}

/* Jeder Schritt beansprucht gleich viel Platz (flex-[1_0_0]) und
   richtet sich horizontal zentriert (justify-center) aus. */
.step-indicator__step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1 0 0;
    min-width: 0;
    overflow: clip;
}

/* Figma 71:63/71:69/71:75 · Badge 28x28, rounded-full, border-2.
   Zustände: active (blau), done (grün), locked (grau mit opacity). */
.step-indicator__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid var(--cc-hairline);
    background: var(--cc-surface);
    color: var(--cc-muted);
    flex-shrink: 0;
    overflow: clip;
    /* Figma 71:64 · Badge-Text: Source Sans 3 SemiBold 12, leading normal
       (Refresh 2026-04-27: Serif Bold → Sans SemiBold). */
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
}
.step-indicator__step[data-state="active"] .step-indicator__badge {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-on-primary);
}
.step-indicator__step[data-state="done"] .step-indicator__badge {
    background: var(--cc-safe);
    border-color: var(--cc-safe);
    color: var(--cc-on-primary);
}
.step-indicator__step[data-state="done"] .step-indicator__badge > span::before {
    content: "✓";
}
.step-indicator__step[data-state="done"] .step-indicator__badge > span {
    font-size: 0;
}
.step-indicator__step[data-state="done"] .step-indicator__badge > span::before {
    font-size: 12px;
}
.step-indicator__step[data-state="locked"] .step-indicator__badge {
    opacity: 0.6;
}

/* Figma 71:65 · Label-Column (flex-col gap-2, items-start, flex-[1_0_0]). */
.step-indicator__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
    min-width: 0;
    overflow: clip;
}
/* Figma 71:66 · Title Source Sans 3 SemiBold 14, cc/text. */
.step-indicator__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    color: var(--cc-text);
    white-space: nowrap;
}
/* Figma 71:67 · Subtitle Source Sans 3 Regular 11/14, cc/muted. */
.step-indicator__subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--cc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}
/* Locked: Title + Subtitle beide in cc/muted. */
.step-indicator__step[data-state="locked"] .step-indicator__title,
.step-indicator__step[data-state="locked"] .step-indicator__subtitle {
    color: var(--cc-muted);
}

/* ── Step-Card (Base) ─────────────────────────────────────────── */
/* Gemeinsame Struktur für alle drei Steps. Variante-spezifische Werte
   in .step-card--active und .step-card--locked. */
.step-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: clip;
    width: 100%;
    margin: 0;
}

/* Figma 71:81/71:82 · Kicker „SCHRITT N VON 3":
   JetBrains Mono Bold 11/14, tracking 0.88, cc/primary. */
.step-card__kicker {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.88px;
    color: var(--cc-primary);
    white-space: nowrap;
    text-transform: uppercase;
}

/* Figma 71:86/71:116/71:126 · Heading cc/display/l (Source Serif 4
   SemiBold 28/34, tracking -0.42, cc/text). Abstand zum Kicker: 14px. */
.step-card__heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.42px;
    color: var(--cc-text);
    margin: 14px 0 0;
    padding: 0;
}

/* Figma 71:88/71:118/71:128 · Subtitle cc/body/m (Source Sans 3
   Regular 14/22, cc/text-soft, max-w-700). Abstand zur Heading: 8px. */
.step-card__subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--cc-text-soft);
    margin: 8px 0 0;
    max-width: 700px;
}

/* ── Step-Card · State-Switches via [data-state] ───────────────── */
/* Jede Step-Card enthält mehrere Body-Varianten (.step-card__body-<state>).
   Sichtbar ist nur der zum aktiven data-state passende Body — alle anderen
   display:none. Zusätzlich erbt die Karte Outer-Styles (bg, border, shadow,
   opacity) basierend auf dem data-state. */

/* Body-Varianten: nur der zum State passende ist sichtbar. */
.step-card__body-active,
.step-card__body-compressed,
.step-card__body-locked,
.step-card__body-scanning,
.step-card__body-review {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.step-card[data-state="active"] .step-card__body-active { display: flex; }
.step-card[data-state="done"] .step-card__body-compressed { display: flex; }
.step-card[data-state="locked"] .step-card__body-locked { display: flex; }
.step-card[data-state="scanning"] .step-card__body-scanning { display: flex; }
.step-card[data-state="review"] .step-card__body-review { display: flex; }

/* Outer-Card-Styles pro State — Figma 71:80 (active/scanning/review: bg
   cc/surface + border cc/hairline + shadow), Figma 71:111/112 + 75:80
   (done/locked: border cc/hairline-soft, transparent bg, locked zusätzlich
   opacity 0.55). */
.step-card[data-state="active"],
.step-card[data-state="scanning"],
.step-card[data-state="review"] {
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    box-shadow: 0 4px 16px rgba(13, 26, 43, 0.04);
    padding: 28px;
}
.step-card[data-state="done"] {
    /* Figma 75:80 · Compressed: border cc/hairline-soft, transparent bg,
       px-28 py-20, flex-col gap-10, rounded-8, overflow-clip. Kein Shadow. */
    background: transparent;
    border: 1px solid var(--cc-hairline-soft);
    box-shadow: none;
    padding: 20px 28px;
    gap: 10px;
}
.step-card[data-state="locked"] {
    background: transparent;
    border: 1px solid var(--cc-hairline-soft);
    box-shadow: none;
    opacity: 0.55;
    padding: 28px;
}

/* HAN-72 · Flash-Free-Boot: wenn der Inline-Script im <body> eine aktive
   Sitzung mit Anonymize-Response findet, setzt er html[data-initial-mode=
   "review"]. Diese Regeln kehren die HTML-Defaults um, bevor JS die Step-
   Cards auf done/review setzt — so sieht der User beim Reload nicht erst
   kurz Step 1, dann Step 2. */
html[data-initial-mode="review"] .step-card[data-step="1"] .step-card__body-active,
html[data-initial-mode="review"] .step-card[data-step="2"] .step-card__body-locked {
    display: none;
}
html[data-initial-mode="review"] .step-card[data-step="1"] .step-card__body-compressed,
html[data-initial-mode="review"] .step-card[data-step="2"] .step-card__body-review {
    display: flex;
}
/* Outer-Card-Styles entsprechend dem virtuellen Initial-State ableiten. */
html[data-initial-mode="review"] .step-card[data-step="1"] {
    background: transparent;
    border: 1px solid var(--cc-hairline-soft);
    box-shadow: none;
    padding: 20px 28px;
    gap: 10px;
}
html[data-initial-mode="review"] .step-card[data-step="2"] {
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    box-shadow: 0 4px 16px rgba(13, 26, 43, 0.04);
    padding: 28px;
    opacity: 1;
}
/* 3-Step-Indikator: Step 1 = done (grün), Step 2 = active (blau). */
html[data-initial-mode="review"] .step-indicator__step[data-step="1"] .step-indicator__badge {
    background: var(--cc-safe);
    border-color: var(--cc-safe);
    color: var(--cc-on-primary);
}
html[data-initial-mode="review"] .step-indicator__step[data-step="1"] .step-indicator__badge > span { font-size: 0; }
html[data-initial-mode="review"] .step-indicator__step[data-step="1"] .step-indicator__badge > span::before {
    content: "✓"; font-size: 12px;
}
html[data-initial-mode="review"] .step-indicator__step[data-step="2"] .step-indicator__badge {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-on-primary);
    opacity: 1;
}
html[data-initial-mode="review"] .step-indicator__step[data-step="2"] .step-indicator__label,
html[data-initial-mode="review"] .step-indicator__step[data-step="2"] .step-indicator__title,
html[data-initial-mode="review"] .step-indicator__step[data-step="2"] .step-indicator__subtitle {
    color: var(--cc-text);
}

/* Legacy-Klasse .step-card--active bleibt als Alias für data-state="active",
   solange anderer Code sie referenziert. */
.step-card--active {
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    box-shadow: 0 4px 16px rgba(13, 26, 43, 0.04);
}
.step-card--locked {
    /* Legacy-Alias; identisch zu data-state="locked". */
    border: 1px solid var(--cc-hairline-soft);
    opacity: 0.55;
    background: transparent;
    box-shadow: none;
}

/* Figma 71:81 · Header-Row (gap-10 items-center) mit Kicker + „aktiv"-Chip. */
.step-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: clip;
}

/* Figma 71:83/71:84 · „aktiv"-Chip: bg cc/primary-soft, border 1px
   cc/primary-border, rounded-4, px-10 py-3, Source Sans 3 Medium 12
   cc/primary, leading-normal. */
.step-card__state-badge--active {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: var(--cc-primary);
    white-space: nowrap;
    overflow: clip;
}

/* Figma 71:89..71:91 · Body (Abstand zur Subtitle 14px, enthält Textarea
   + optionalen Inline-Error). */
.step-card__body {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Figma 71:90 · Textarea: bg cc/surface, border 1px cc/hairline, rounded-6,
   h-220, p-20. Placeholder/Text Source Sans 3 Regular 15/24 (cc/muted
   placeholder, cc/text actual). */
.step-card__textarea {
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 6px;
    padding: 20px;
    height: 220px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--cc-text);
    resize: none;
    outline: none;
    display: block;
}
.step-card__textarea::placeholder {
    color: var(--cc-muted);
    opacity: 1;
}
.step-card__textarea:focus-visible {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px rgba(11, 79, 138, 0.15);
}

/* Figma 93:90 · Error-Variante: Border cc/pii/medical (Figma zeigt den
   roten Border, der Switch auf Warning-Gelb erfolgt in HAN-78/AC1). */
.step-card__textarea--invalid {
    border-color: var(--cc-pii-medical);
}
.step-card__textarea--invalid:focus-visible {
    border-color: var(--cc-pii-medical);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* Figma 93:132..93:134 · Inline-Error unter Textarea:
   Source Sans 3 Regular 12/16 cc/pii/medical + „⚠"-Icon. pt-6.
   Default hidden (Figma 71:2 hat keinen Error) — sichtbar nur wenn
   das `hidden`-Attribut entfernt wird. */
.step-card__inline-error[hidden] {
    display: none;
}
.step-card__inline-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-top: 6px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-pii-medical);
    white-space: nowrap;
}
.step-card__inline-error-icon {
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

/* Figma 71:93 · Footer (pt-16, gap-16, items-center, justify-end). */
.step-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    margin-top: 16px;
    overflow: clip;
}

/* Figma 71:94..71:107 · Tastatur-Hints (gap-12, shrink-0).
   Beide Footer-Children (Hints + Absenden-Btn) sind shrink-0; das Parent
   .step-card__footer steht auf justify-end, damit Hints + Button zusammen
   rechts-bündig stehen (Figma 71:93 Layout). */
.step-card__hints {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: clip;
    flex-shrink: 0;
}
.step-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: var(--cc-muted);
    white-space: nowrap;
}
.step-card__kbd-combo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Figma 71:97/102/105 · kbd: bg cc/surface-alt, border 1px cc/hairline-soft,
   rounded-4, px-6 py-2, JetBrains Mono Medium 11 cc/text-soft. */
.step-card__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--cc-surface-alt);
    border: 1px solid var(--cc-hairline-soft);
    border-radius: 4px;
    font-family: var(--font-family-mono);
    font-weight: 500;
    font-size: 11px;
    line-height: normal;
    color: var(--cc-text-soft);
    white-space: nowrap;
    overflow: clip;
}

/* Figma 71:108..71:110 · Absenden-Button: bg cc/primary, border 1px cc/primary,
   rounded-6, px-20 py-10, gap-8, Source Sans 3 SemiBold 14 cc/on-primary. */
.step-card__primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--cc-primary);
    color: var(--cc-on-primary);
    border: 1px solid var(--cc-primary);
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    overflow: clip;
    flex-shrink: 0;
}
.step-card__primary-btn:hover:not(:disabled) {
    background: #0a4579;
    border-color: #0a4579;
}
.step-card__primary-btn:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}
/* Figma 93:108 · Disabled: bg cc/disabled, border cc/disabled. */
.step-card__primary-btn:disabled {
    background: var(--cc-disabled);
    border-color: var(--cc-disabled);
    cursor: not-allowed;
}

/* Figma 75:87/70:181 · Secondary-Button (bg cc/surface, border cc/hairline,
   rounded-6, px-16 py-10, Source Sans 3 SemiBold 14/20 cc/text). */
.step-card__secondary-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--cc-surface);
    color: var(--cc-text);
    border: 1px solid var(--cc-hairline);
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: clip;
    flex-shrink: 0;
}
.step-card__secondary-btn:hover {
    background: var(--cc-surface-alt);
}
.step-card__secondary-btn:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

/* ── Step-Card · Compressed (done) · Figma 75:80..75:88 ────────── */
/* Compressed-Layout: Header-Row (Kicker + „✓ erledigt"-Badge) + Content-Row
   (Summary-Text links, „Zum Text zurück"-Button rechts). gap-10. */
.step-card__body-compressed .step-card__header {
    margin-bottom: 0;
}
/* HAN-74 · Anonymisierungs-Chip unter Follow-up-User-Messages. Figma 81:142
   (cc/safe-soft bg, cc/safe-border, cc/safe text). Sitzt rechts-aligned in
   einer Meta-Zeile unter der User-Bubble (siehe .reid-chip-row). Defensive
   Token-Fallbacks falls HAN-72-Tokens noch nicht auf redesign gemerged sind. */
.reid-chip-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
    margin-bottom: 4px;
}
.reid-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--cc-safe-soft, #e8f3ec);
    border: 1px solid var(--cc-safe-border, #c3e0ce);
    color: var(--cc-safe, #1f7a4d);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
}
.reid-chip__icon {
    font-weight: 700;
    font-size: 11px;
    line-height: normal;
}
.reid-chip__label {
    font-weight: 500;
}

/* Figma 75:83/75:84 · „✓ erledigt"-Badge: bg cc/safe-soft, border cc/safe-border,
   rounded-4, px-10 py-3, Source Sans 3 Medium 12 cc/safe. */
.step-card__state-badge--done {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--cc-safe-soft);
    border: 1px solid var(--cc-safe-border);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: var(--cc-safe);
    white-space: nowrap;
    overflow: clip;
}
/* Figma 75:85 · Row: items-center justify-between, w-full. */
.step-card__compressed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    overflow: clip;
}
/* Figma 75:86 · Summary-Text Source Sans 3 Regular 14/22 cc/text-soft. */
.step-card__compressed-summary {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--cc-text-soft);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Step-Card · Scanning-Body · Figma 75:89..75:233 ────────────── */
/* Die Scanning-Card selbst: bg cc/surface-alt, border 1px cc/hairline,
   rounded-8, flex-col gap-20 items-center, px-32 py-48. Oben im Step-
   Abstand zur Subtitle: 22+16 = 38px (Figma 75:98+75:197 Spacer). */
.step-card__scanning-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 32px;
    background: var(--cc-surface-alt);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow: clip;
    margin-top: 38px;
}

/* Figma 75:199 · Pulsating-Dots · 36x8 (3 Dots à ~8px mit Staggered-Animation).
   Die Figma-SVG zeigt 3 gefüllte Kreise in cc/primary; ich nutze CSS-Keyframes
   statt SVG, damit die Animation ohne externes Asset läuft. Respektiert
   prefers-reduced-motion. */
.step-card__scanning-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 36px;
    height: 8px;
}
.step-card__scanning-dots > span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--cc-primary);
    animation: step-scanning-pulse 1.2s ease-in-out infinite;
}
.step-card__scanning-dots > span:nth-child(2) { animation-delay: 0.2s; }
.step-card__scanning-dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes step-scanning-pulse {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .step-card__scanning-dots > span {
        animation: none;
        opacity: 0.7;
    }
}

/* Figma 75:203 · Text „Hanoda prüft den Text …" — Source Serif 4 SemiBold
   20/26, letter-spacing -0.3, cc/text, whitespace-nowrap. */
.step-card__scanning-text {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.3px;
    color: var(--cc-text);
    white-space: nowrap;
}

/* Figma 75:230+75:231 · Footer unter Scanning-Card: h-20 Spacer + justify-end.
   Enthält nur den disabled-Button. */
.step-card__footer--scanning {
    margin-top: 20px;
    padding-top: 0;
    justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════════
   HAN-72 · Step 2 · Review-Body (Figma 51:2 Baseline + 70:89 + 139:2)
   ══════════════════════════════════════════════════════════════ */

.step-card__body-review > .step-card__header {
    margin-bottom: 14px;
}
.step-card__body-review .step-card__heading {
    margin-top: 0;
}

/* ── Trust-Banner · Figma 70:99..70:115 ───────────────────────── */
/* Outer: bg cc/surface, border 1px cc/primary-border, rounded-8, items-start.
   Abstand zur Subtitle: Figma 70:98 Spacer h-22 → margin-top 22. */
.trust-banner {
    display: flex;
    align-items: stretch;
    margin-top: 22px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-primary-border);
    border-radius: 8px;
    overflow: clip;
    width: 100%;
    box-sizing: border-box;
}

/* Figma 70:100..70:102 · Shield-Box links: bg cc/primary, h-77, px-22 py-16,
   gap-14, items-center, Text white. */
.trust-banner__shield {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: var(--cc-primary);
    color: var(--cc-on-primary);
    flex-shrink: 0;
}
/* HAN-72 · Outline-Shield-SVG (weiß, ohne Füllung, 1.8px Stroke). Ersetzt das
   Figma-🛡-Emoji, das je nach Plattform-Font unterschiedlich gerendert wurde. */
.trust-banner__shield-icon {
    width: 26px;
    height: 26px;
    color: var(--cc-on-primary);
    flex-shrink: 0;
    display: inline-block;
}
/* Figma 70:102 · Zahl — Source Serif 4 SemiBold 28. */
.trust-banner__shield-count {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
    line-height: normal;
}

/* Figma 70:103 · Right-Body: flex-col gap-3, items-start justify-center,
   px-20 py-14, self-stretch, flex-[1_0_0]. */
.trust-banner__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 14px 20px;
    flex: 1 0 0;
    min-width: 0;
    overflow: clip;
}

/* Figma 70:105 · Title Source Serif 4 SemiBold 17/24 tracking -0.255, cc/text. */
.trust-banner__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: -0.255px;
    color: var(--cc-text);
    white-space: nowrap;
}

/* Figma 70:106 · CounterRow: flex gap-6 items-center. */
.trust-banner__counters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Figma 70:107..70:115 · Counter-Chip: bg cc/pii-<cat>-bg, color cc/pii-<cat>,
   rounded-4, px-10 py-3, gap-4, Text size-12 whitespace-nowrap.
   „3×" in JetBrains Mono Bold, „Name" in JetBrains Mono Medium. */
.trust-banner__counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
    overflow: clip;
}
.trust-banner__counter-count {
    font-family: var(--font-family-mono);
    font-weight: 700;
}
.trust-banner__counter-label {
    font-family: var(--font-family-mono);
    font-weight: 500;
}
/* Farben pro Kategorie (analog zu PII-Span-Chips). */
.trust-banner__counter--person  { background: var(--cc-pii-person-bg);   color: var(--cc-pii-person); }
.trust-banner__counter--date    { background: var(--cc-pii-date-bg);     color: var(--cc-pii-date); }
.trust-banner__counter--location{ background: var(--cc-pii-location-bg); color: var(--cc-pii-location); }
.trust-banner__counter--medical { background: var(--cc-pii-medical-bg);  color: var(--cc-pii-medical); }
.trust-banner__counter--org     { background: var(--cc-pii-org-bg);      color: var(--cc-pii-org); }

/* ── Review-Warnings-Slot (Figma 70:197 / 139:*) ───────────────── */
/* Abstand zum Trust-Banner: Figma 88:2 Spacer h-16 → margin-top 16. */
.review-warnings {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-warnings[hidden] {
    display: none;
}

/* ── Warning-Card Base (Figma 105:130/105:144 · HAN-75) ───────── */
/* Card-Grundstruktur: padding 16/20, radius 8, border 1px, kein Icon, kein
   Close — nur Titel + Body (+ optionale Actions bei Orphanet). Schatten
   `0 2px 8px rgba(0,0,0,0.06)` per AC9. Farbvariationen pro Typ (medical/
   warn) über Modifier-Klassen. */
.review-warning {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    width: 100%;
    box-sizing: border-box;
    overflow: clip;
}

/* Figma 70:197 · Orphanet-Variante: bg cc/pii/medical-bg, border cc/pii/medical. */
.review-warning--orphanet {
    background: var(--cc-pii-medical-bg);
    border-color: var(--cc-pii-medical);
}

/* Figma 139:93..139:107 · Warn-Variante (Mixed-Script + HTML-Tags): bg cc/warn-bg,
   border cc/warn-border. Title + Icon in cc/warn-text (Oliven-Gelb), Body bleibt
   cc/text-soft wie im Orphanet-Card. */
.review-warning--warn {
    background: var(--cc-warn-bg);
    border-color: var(--cc-warn-border);
}
.review-warning--warn .review-warning__title {
    color: var(--cc-warn-text);
}

/* HAN-75 AC9 · Card hat keinen Icon mehr (Figma 105:130/105:144 — vorher
   Figma 70:198 mit Icon-Circle 32×32). Das HTML-Markup liefert das Icon
   nicht mehr; obsolete .review-warning__icon-Regeln sind entfernt. */

/* Figma 70:200 · Body: flex-col, gap-6, items-start, flex-1. */
.review-warning__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: clip;
}

/* Figma 70:201 · Title Source Sans 3 SemiBold 15/20 cc/pii/medical. */
.review-warning__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
}
.review-warning--orphanet .review-warning__title {
    color: var(--cc-pii-medical);
}

/* Figma 70:202 · Body-Text Source Sans 3 Regular 13/20 cc/text-soft, w-full. */
.review-warning__text {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-text-soft);
    width: 100%;
}

/* Figma 70:203 · Actions-Row gap-8 items-center pt-6. */
.review-warning__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    overflow: clip;
}

/* Figma 70:204..70:207 · Buttons. Beide rounded-6, px-14 py-8, Source Sans 3
   Size 13 leading-normal, whitespace-nowrap. */
.review-warning__btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    overflow: clip;
}
/* „Entfernen": gefüllt — bg cc/pii/medical, cc/on-primary, SemiBold. */
.review-warning__btn--remove {
    background: var(--cc-pii-medical);
    border: 1px solid var(--cc-pii-medical);
    color: var(--cc-on-primary);
    font-weight: 600;
}
.review-warning__btn--remove:hover {
    background: #b91d1d;
    border-color: #b91d1d;
}
/* „Beibehalten": Outline — bg white, border cc/pii/medical, Medium. */
.review-warning__btn--keep {
    background: var(--cc-surface);
    border: 1px solid var(--cc-pii-medical);
    color: var(--cc-pii-medical);
    font-weight: 500;
}
.review-warning__btn--keep:hover {
    background: var(--cc-pii-medical-bg);
}
.review-warning__btn:focus-visible {
    outline: 2px solid var(--cc-pii-medical);
    outline-offset: 2px;
}

/* Resolved-State · Figma 105:186 · gesamte Card opak 0.55, Actions weg,
   Title-Zeile bekommt rechts einen Status-Tag (ENTFERNT / BEIBEHALTEN). */
.review-warning--resolved {
    opacity: 0.55;
}
.review-warning--resolved .review-warning__actions {
    display: none;
}
.review-warning__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
/* Figma 105:192 · Status-Pill (bg cc/surface-alt, text cc/muted, px-8 py-2
   rounded-4, Source Sans 3 Bold 10/14 tracking 0.6). */
.review-warning__status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--cc-surface-alt);
    color: var(--cc-muted);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.6px;
    white-space: nowrap;
    text-transform: uppercase;
}
/* Body-Text im resolved-State · Figma 105:194 · cc/text-soft 12/18 Regular. */
.review-warning--resolved .review-warning__text {
    color: var(--cc-text-soft);
    font-size: 12px;
    font-style: normal;
}

/* ── Side-by-Side-Diff · Figma 70:117..70:175 ──────────────────── */
/* Wrapper: gap-12, items-start, w-full. Abstand zum vorherigen Block (Trust-
   Banner oder Warnings): Figma 70:116 Spacer h-20 → margin-top 20. */
.review-diff {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

/* Figma 70:118 / 70:147 · Card-Wrapper:
   Links (Original): border cc/warn-border, Header bg cc/warn-bg.
   Rechts (Anonymized): border cc/primary-border, Header bg cc/primary-soft.
   Base: bg cc/surface, rounded-8, flex-col items-start, flex-[1_0_0]. */
.review-diff__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    flex: 1 0 0;
    min-width: 0;
    overflow: clip;
}
.review-diff__card--original {
    border-color: var(--cc-warn-border);
}
.review-diff__card--anonymized {
    border-color: var(--cc-primary-border);
}

/* Figma 70:119/70:148 · Header: px-14 py-8, bg warn-bg / primary-soft,
   Text JetBrains Mono Bold 11 tracking 0.66 (Figma rendered 0.66 letterSpacing
   aus dem „6" LetterSpacing-Wert). */
.review-diff__card-header {
    padding: 8px 14px;
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 0.66px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: clip;
}
.review-diff__card-header--warn {
    background: var(--cc-warn-bg);
    color: var(--cc-warn-text);
}
.review-diff__card-header--primary {
    background: var(--cc-primary-soft);
    color: var(--cc-primary);
}

/* Figma 70:121/70:150 · Card-Body: px-16 py-14, flex-wrap mit gap-5x3. */
.review-diff__card-body {
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: 5px 3px;
    min-height: 60px;
}

/* PII-Span-Chips: bg cc/pii-<cat>-bg, color cc/pii-<cat>, rounded-6, px-8 py-2,
   Source Sans 3 SemiBold 13/18 (Figma 70:125 etc). JetBrains-Mono-Variante
   für Platzhalter-Chips rechts (70:154 „[NAME]_Patient_1" JetBrains Mono
   Bold 12/18). */
.pii-span {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    /* HAN-72 · Legacy-Reset für HAN-19-Regel. Border-Bottom weg (nicht in
       Figma 70:127). Cursor default. Kleines horizontales Margin, damit die
       Chips nicht mit dem umliegenden Plain-Text verschmelzen — ohne einen
       sichtbaren Rahmen zu ziehen. */
    cursor: default;
    border-bottom: none;
    margin: 0 2px;
}
.pii-span--mono {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 12px;
}
.pii-span--person  { background: var(--cc-pii-person-bg);   color: var(--cc-pii-person); }
.pii-span--date    { background: var(--cc-pii-date-bg);     color: var(--cc-pii-date); }
.pii-span--location{ background: var(--cc-pii-location-bg); color: var(--cc-pii-location); }
.pii-span--medical { background: var(--cc-pii-medical-bg);  color: var(--cc-pii-medical); }
.pii-span--org     { background: var(--cc-pii-org-bg);      color: var(--cc-pii-org); }

/* Plain-Text-Schnipsel zwischen PII-Chips: Source Sans 3 Regular 13/22 cc/text.
   Links strikt read-only (Original-Referenz), rechts interaktiv. */
.review-diff__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--cc-text);
    white-space: pre-wrap;
}

/* ── Divider + Review-Footer · Figma 70:176..70:186 ────────────── */
/* Figma 70:176 Spacer h-20 + 70:177 hr 1px cc/hairline + 70:178 Spacer h-20. */
.review-divider {
    margin: 20px 0;
    height: 1px;
    background: var(--cc-hairline);
    border: none;
    width: 100%;
}

/* Footer-Variante für Review (Figma 70:179): justify-between, items-center,
   gap-12. */
.step-card__footer--review {
    justify-content: space-between;
    padding-top: 0;
    margin-top: 0;
}

/* Figma 70:183 · Right-Group: gap-12 items-center. */
.review-footer__release {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* Figma 70:184 · Hint: Source Sans 3 Regular 12/16 cc/muted, text-right, w-240. */
.review-footer__hint {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-muted);
    text-align: right;
    width: 240px;
    flex-shrink: 0;
}

/* Figma 70:185 · Safe-Variante des Primary-Button (grün, „Freigeben und senden"). */
.step-card__primary-btn--safe {
    background: var(--cc-safe);
    border-color: var(--cc-safe);
}
.step-card__primary-btn--safe:hover:not(:disabled) {
    background: #19633e;
    border-color: #19633e;
}
.step-card__primary-btn--safe:focus-visible {
    outline: 2px solid var(--cc-safe);
    outline-offset: 2px;
}

/* Responsive: Side-by-Side-Diff stackt auf Mobile. */
@media (max-width: 833px) {
    .review-diff {
        flex-direction: column;
    }
    .review-diff__card {
        width: 100%;
    }
    .trust-banner {
        flex-direction: column;
    }
    .trust-banner__shield {
        padding: 12px 20px;
        width: 100%;
        justify-content: flex-start;
    }
    .step-card__footer--review {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .review-footer__release {
        justify-content: space-between;
    }
    .review-footer__hint {
        width: auto;
        text-align: left;
    }
}

/* ── Step-Card · Locked-Variante · Figma 71:111/112 + 71:122 ───── */
/* border 1px cc/hairline-soft, opacity 0.55, p-28, rounded-8. */
.step-card--locked {
    border: 1px solid var(--cc-hairline-soft);
    opacity: 0.55;
    background: transparent;
    box-shadow: none;
}

/* Figma 71:120/71:130 · Dashed Placeholder: bg cc/bg, border 1px dashed
   cc/hairline, py-40, rounded-8, flex center, Source Sans 3 Regular 13/20
   cc/muted. Abstand zur Subtitle: 14px. */
.step-card__placeholder {
    margin-top: 14px;
    padding: 40px 0;
    background: var(--cc-bg);
    border: 1px dashed var(--cc-hairline);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-muted);
    white-space: nowrap;
    overflow: clip;
}

/* HAN-75: Das frühere step-toast-System ist abgeschafft. Alle Toasts laufen
   jetzt zentral über die .error-toast-Komponente in errors.js. Kein Markup,
   keine Selektoren, kein doppeltes CSS mehr. */

/* ── Responsive Step-Flow ─────────────────────────────────────── */
/* Tablet + Mobile: Padding schrumpft, 3-Step-Indikator wird auf
   Text-only reduziert (Subtitle weg, Titel bleibt), Footer-Hints auf
   Mobile verstecken. */
@media (max-width: 833px) {
    .step-flow {
        padding: 20px 20px 32px;
        gap: 16px;
    }
    .step-card {
        padding: 20px;
    }
    .step-indicator {
        height: auto;
        padding: 12px 16px;
    }
    .step-indicator__step {
        gap: 8px;
    }
    .step-indicator__subtitle {
        display: none;
    }
}

@media (max-width: 599px) {
    .step-flow {
        padding: 16px 12px 24px;
    }
    .step-card {
        padding: 16px;
    }
    .step-card__heading {
        font-size: 22px;
        line-height: 28px;
    }
    .step-card__hints {
        display: none;
    }
    .step-card__footer {
        justify-content: stretch;
    }
    .step-card__primary-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ─── Figma 108:223 · PII-Popover ─────────────────────────────────────
   Floating-Popover, das beim Klick auf einen PII-Chip öffnet. Enthält
   Kategorie-Wechsel, Subtype-Auswahl und Bezug-Nummer-Stepper. Positioniert
   absolut via JS unterhalb des angeklickten Chips. Backdrop-Overlay schließt
   den Popover beim Außen-Klick — ist `pointer-events: none` default, wird
   beim Öffnen auf `auto` gesetzt. */
.pii-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}
.pii-popover-backdrop[data-open="true"] {
    pointer-events: auto;
}
.pii-popover {
    position: absolute;
    width: 360px;
    max-height: 85vh;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    box-shadow: 0 12px 32px 0 rgba(10, 20, 38, 0.22);
    overflow: clip;
    display: none;
    flex-direction: column;
    z-index: 1000;
}
.pii-popover[data-open="true"] {
    display: flex;
}
/* Scrollable middle body · Header + Footer bleiben gepinnt.
   `flex: 1 1 auto` + `min-height: 0` + `max-height: 85vh` auf .pii-popover:
   der Body nimmt natürliche Höhe, wenn das Popover in 85vh passt (keine
   Scrollbar). Überschreitet er 85vh, shrinkt der Body dank min-height: 0
   unter seine Content-Höhe und scrollt intern. */
.pii-popover__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Trenner zwischen Sektionen — 1px hairline full-width. */
.pii-popover__divider {
    height: 1px;
    background: var(--cc-hairline);
    width: 100%;
}

/* Header · Figma 108:240 */
.pii-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px 14px;
}
.pii-popover__back,
.pii-popover__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cc-text-soft);
    font-family: var(--font-family);
}
.pii-popover__back {
    font-weight: 500;
    font-size: 13px;
    padding: 0;
}
.pii-popover__close {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
}
.pii-popover__close:hover {
    background: var(--cc-bg);
}
.pii-popover__kicker {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.6px;
    color: var(--cc-muted);
    text-transform: uppercase;
}

/* Aktuell-Zeile · Figma 108:244 */
.pii-popover__current {
    padding: 12px 14px 10px 14px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    color: var(--cc-muted);
    margin: 0;
}
.pii-popover__current-value {
    color: var(--cc-text-soft);
}

/* Sektionen (KATEGORIE / SUBTYPE / BEZUG) · 108:246, 108:264, 108:289 */
.pii-popover__section {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pii-popover__label {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.6px;
    color: var(--cc-muted);
    text-transform: uppercase;
}

/* Kategorie-Pill-Grid · 108:248 */
.pii-popover__cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.pii-popover__cat {
    padding: 4px 10px;
    border-radius: 4px;
    border: 2px solid transparent;
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    cursor: pointer;
    background: var(--cc-bg);
    color: var(--cc-text-soft);
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
}
.pii-popover__cat--person  { background: var(--cc-pii-person-bg);   color: var(--cc-pii-person); }
.pii-popover__cat--date    { background: var(--cc-pii-date-bg);     color: var(--cc-pii-date); }
.pii-popover__cat--location{ background: var(--cc-pii-location-bg); color: var(--cc-pii-location); }
.pii-popover__cat--org     { background: var(--cc-pii-org-bg);      color: var(--cc-pii-org); }
.pii-popover__cat--medical { background: var(--cc-pii-medical-bg);  color: var(--cc-pii-medical); }
.pii-popover__cat--age     { background: var(--cc-pii-age-bg);      color: var(--cc-pii-age); }
.pii-popover__cat--other   { background: var(--cc-pii-other-bg);    color: var(--cc-pii-other); }
.pii-popover__cat[data-active="true"] {
    border-color: currentColor;
}

/* Subtype-Rows · 108:268..108:288 */
.pii-popover__sub-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.pii-popover__sub {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.pii-popover__sub-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid var(--cc-hairline);
    flex-shrink: 0;
    background: var(--cc-surface);
}
.pii-popover__sub[data-active="true"] {
    background: var(--cc-primary-soft);
}
.pii-popover__sub[data-active="true"] .pii-popover__sub-indicator {
    border-color: var(--cc-primary);
    background: var(--cc-primary);
    /* Innenkreis als box-shadow-Inset für den Check-Dot-Effekt. */
    box-shadow: inset 0 0 0 3px var(--cc-surface);
}
.pii-popover__sub-title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--cc-text);
}
.pii-popover__sub[data-active="true"] .pii-popover__sub-title {
    font-weight: 600;
    color: var(--cc-primary);
}
.pii-popover__sub-desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    color: var(--cc-muted);
}
.pii-popover__sub-body {
    display: flex;
    flex-direction: column;
}

/* Bezug (Nummer) · 108:291..108:299 — Stepper-Row */
.pii-popover__bezug {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.pii-popover__bezug-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    color: var(--cc-text-soft);
}
.pii-popover__bezug-btn:hover {
    background: var(--cc-bg);
}
.pii-popover__bezug-value {
    flex: 1 0 0;
    padding: 4px;
    border-radius: 4px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    text-align: center;
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--cc-text);
}
/* AGE · Altersgruppe: zwei Nummernfelder mit Bindestrich dazwischen, daraus
   wird „66-68" im Platzhalter. */
.pii-popover__bezug-input {
    flex: 1 0 0;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    text-align: center;
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--cc-text);
    width: 100%;
    min-width: 0;
}
.pii-popover__bezug-input::-webkit-outer-spin-button,
.pii-popover__bezug-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pii-popover__bezug-input {
    -moz-appearance: textfield;
}
.pii-popover__bezug-dash {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    color: var(--cc-text-soft);
    padding: 0 4px;
}

/* Footer · 108:300 */
.pii-popover__footer {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pii-popover__btn {
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
}
.pii-popover__btn--secondary {
    background: var(--cc-surface);
    border-color: var(--cc-hairline);
    color: var(--cc-text-soft);
}
.pii-popover__btn--primary {
    padding: 8px 16px;
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-on-primary);
    font-weight: 600;
}
.pii-popover__btn--primary:hover {
    filter: brightness(0.95);
}

/* ─── Figma 183:2 · PII-Mini-Popover (Vorstufe) ─────────────────────
   Action-Sheet, das beim Klick auf einen PII-Chip als ERSTES erscheint.
   Bietet zwei Optionen:
     1. „Als Text belassen"          → Span entfernen, Klartext
     2. „Kategorie & Subtype ändern" → öffnet den großen Editor (108:4)
   Teilt Backdrop + Positionierungs-Logik mit .pii-popover (eigener
   Root-Knoten im selben Backdrop). */
.pii-mini-popover {
    position: absolute;
    width: 320px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    box-shadow: 0 8px 24px 0 rgba(14, 26, 43, 0.12);
    overflow: clip;
    display: none;
    flex-direction: column;
    z-index: 1000;
}
.pii-mini-popover[data-open="true"] {
    display: flex;
}

/* Header · Figma 183:3 */
.pii-mini-popover__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 12px 16px;
}
.pii-mini-popover__kicker {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.6px;
    color: var(--cc-muted);
    text-transform: uppercase;
}
.pii-mini-popover__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: var(--cc-text);
}

/* Divider · Figma 183:6 */
.pii-mini-popover__divider {
    height: 1px;
    background: var(--cc-hairline-soft);
    width: 100%;
}

/* MenuItem · Figma 183:7, 183:12 */
.pii-mini-popover__item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.pii-mini-popover__item:hover {
    background: var(--cc-bg);
}
.pii-mini-popover__item:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: -2px;
}
.pii-mini-popover__icon {
    flex: 0 0 auto;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: var(--cc-muted);
}
.pii-mini-popover__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    overflow: clip;
}
.pii-mini-popover__label {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: var(--cc-text);
}
.pii-mini-popover__hint {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    color: var(--cc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
}

/* ─── Step 3 · KI-Chat · Figma 51:294 ──────────────────────────────
   Innerer Chat-Panel in der Step-3-Card: Banner (Model-Info) oben,
   Log (User-/AI-Bubbles) Mitte, Input-Zone unten. */
.chat-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 8px;
    overflow: clip;
    min-height: 0;
    margin-top: 20px;
    /* Log soll intern scrollen bei langen Konversationen; Panel hat deshalb
       eine max-höhe relativ zum Viewport. Kompakt-Modus (Figma 51:294) — der
       Vollbild-Modus (81:2) kommt in einem Folge-Chunk und überschreibt das
       per `.chat-panel--fullscreen`. */
    max-height: 70vh;
}

/* Figma 51:305 · Chat-Banner */
.chat-panel__banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--cc-surface-alt);
    border-bottom: 1px solid var(--cc-hairline-soft);
}
.chat-panel__banner-icon {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-primary);
}
.chat-panel__banner-label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    color: var(--cc-primary);
    white-space: nowrap;
}
.chat-panel__banner-info {
    appearance: none;
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin: 0;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--cc-muted);
    cursor: help;
    border-radius: 4px;
}
.chat-panel__banner-info:hover,
.chat-panel__banner-info:focus-visible {
    color: var(--cc-primary);
}
.chat-panel__banner-info:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}
.chat-panel__banner-spacer { flex: 1 1 auto; }
.chat-panel__banner-fullscreen {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--cc-muted);
    white-space: nowrap;
    padding: 0;
}
.chat-panel__banner-fullscreen:hover {
    color: var(--cc-text-soft);
    text-decoration: underline;
}

/* Figma 51:310 · Chat-Log */
.chat-panel__log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px;
    background: var(--cc-surface);
}
.chat-panel__log:empty::before {
    content: "Der KI-Chat startet nach \u201eFreigeben und senden\u201c.";
    display: block;
    color: var(--cc-muted);
    font-family: var(--font-family);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}

/* Chat-Bubble · gemeinsam für User + AI */
.chat-msg {
    display: flex;
    gap: 12px;
    width: 100%;
}
.chat-msg--user {
    justify-content: flex-end;
    align-items: flex-start;
}
.chat-msg--ai {
    align-items: flex-start;
}

/* Avatar-Box · Figma 51:340 (User: weiß „DA") / 51:343 (AI: primary ✦) */
.chat-msg__avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 11px;
    color: var(--cc-text);
    background: var(--cc-surface);
}
.chat-msg--ai .chat-msg__avatar {
    background: var(--cc-primary);
    color: var(--cc-on-primary);
    font-size: 13px;
}

/* User-Bubble · Figma 51:312 */
.chat-msg--user .chat-msg__bubble {
    position: relative;
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    border-radius: 6px;
    padding: 10px 14px;
    max-width: 640px;
    overflow-wrap: anywhere;
}
/* Chip-Content-Wrapper · Figma 51:313 (content-center flex-wrap gap-5-3) */
.chat-msg--user .chat-msg__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 3px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--cc-text);
}

/* AI-Bubble · Figma 51:345 (kein Rahmen, nur Content-Column mit Copy-Icon) */
.chat-msg--ai .chat-msg__bubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-msg--ai .chat-msg__content {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--cc-text);
    white-space: pre-wrap;
}
.chat-msg--ai .chat-msg__content p { margin: 0; }
.chat-msg--ai .chat-msg__content ol,
.chat-msg--ai .chat-msg__content ul {
    margin: 0;
    padding-left: 20px;
}
.chat-msg--ai .chat-msg__content strong { font-weight: 600; }

/* Copy-Icon · Figma 68:2 (User) / 68:4 (AI).
   Position: unten rechts an der Bubble (statt Figma-oben-rechts — user-Wunsch,
   damit langer Content nicht vom Icon überlagert wird).
   Hover-Verhalten: nur sichtbar, wenn über der Message gehovert wird.
   Klick-Feedback via attachCopyFeedback → Haken + Tooltip „Kopiert!". */
.chat-msg__copy {
    position: absolute;
    bottom: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--cc-surface);
    border: 1px solid var(--cc-primary-border);
    color: var(--cc-primary);
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.chat-msg__copy .icon {
    width: 14px;
    height: 14px;
}
.chat-msg--ai .chat-msg__copy {
    bottom: 0;
    right: 8px;
    background: var(--cc-surface-alt);
    border-color: var(--cc-hairline-soft);
    color: var(--cc-text-soft);
}
.chat-msg:hover .chat-msg__copy,
.chat-msg:focus-within .chat-msg__copy,
.chat-msg__copy.active {
    opacity: 1;
}
.chat-msg__copy:hover {
    filter: brightness(0.95);
}

/* Re-Identifikations-Badge · Figma 51:347 (unter der AI-Bubble) */
.chat-msg__reid-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--cc-safe-soft);
    border: 1px solid var(--cc-safe-border);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 11px;
    color: var(--cc-safe);
    white-space: pre;
}

/* Streaming-Caret (blinkender Block am Ende) */
.chat-msg--streaming .chat-msg__content::after {
    content: "\u2588";
    display: inline-block;
    margin-left: 2px;
    color: var(--cc-muted);
    animation: chat-caret-blink 1s steps(2, start) infinite;
}
@keyframes chat-caret-blink {
    to { visibility: hidden; }
}

/* Error-Card inline · Figma 119:129 — wird im Chat-Log statt einer AI-Bubble
   angezeigt, wenn /anonymize/ oder /chat/gpt fehlschlägt. Layout: externes
   "!"-Icon links + Card mit Title-Row (Title + Code-Pill) + Body. Verwendet
   die gleichen cc/pii/medical-Tokens wie die Orphanet-Warning, aber mit
   anderer Struktur. */
.chat-error-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    max-width: 760px;
}
.chat-error-card__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--cc-error-bg);
    border: 1px solid var(--cc-error);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    color: var(--cc-error);
}
.chat-error-card__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--cc-error-bg);
    border: 1px solid var(--cc-error-border);
    overflow: clip;
}
.chat-error-card__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}
.chat-error-card__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--cc-error);
    margin: 0;
}
.chat-error-card__code {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--cc-surface);
    font-family: var(--font-family-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--cc-error);
    white-space: nowrap;
}
.chat-error-card__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-text);
    margin: 0;
    width: 100%;
}
/* HAN-77 · Action-Buttons + Sub-Hint unterhalb der Body-Texte. */
.chat-error-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.chat-error-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    border: 1px solid transparent;
}
.chat-error-card__action--primary {
    background: var(--cc-error);
    color: var(--cc-surface);
    border-color: var(--cc-error);
}
.chat-error-card__action--primary:hover {
    background: color-mix(in srgb, var(--cc-error) 88%, black);
}
.chat-error-card__action--secondary {
    background: var(--cc-surface);
    color: var(--cc-error);
    border-color: var(--cc-error-border);
}
.chat-error-card__action--secondary:hover {
    background: color-mix(in srgb, var(--cc-error) 8%, var(--cc-surface));
}
.chat-error-card__action:focus-visible {
    outline: 2px solid var(--cc-error);
    outline-offset: 2px;
}
.chat-error-card__hint {
    margin: 8px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-text-soft, #555);
}

/* Pending-Bubble · Figma 89:147 — während /anonymize/ läuft, zeigt die
   User-Seite eine dashed-border-Bubble mit Status-Row (drei Dots + „Anonymi-
   sierung läuft"-Hint). Avatar daneben ist eine neutrale surface-alt-Box. */
.chat-msg--pending .chat-msg__bubble {
    background: var(--cc-surface-alt);
    border: 1px dashed var(--cc-hairline);
    padding: 14px 18px;
    border-radius: 8px;
    max-width: 760px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.chat-msg--pending .chat-msg__avatar {
    background: var(--cc-surface-alt);
    border: 1px solid var(--cc-hairline);
}
.chat-msg__pending-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--cc-muted);
    margin: 0;
    width: 100%;
}
.chat-msg__pending-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-primary);
}
.chat-msg__pending-dots {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.chat-msg__pending-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--cc-primary);
    opacity: 0.3;
    animation: chat-pending-dot 1.2s infinite ease-in-out both;
}
.chat-msg__pending-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg__pending-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-pending-dot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%           { opacity: 1;   transform: scale(1); }
}

/* Figma 51:351 · Input-Zone */
.chat-panel__input-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--cc-surface);
    border-top: 1px solid var(--cc-hairline-soft);
}
.chat-panel__input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    border-radius: 6px;
}
.chat-panel__input-row:focus-within {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px rgba(11, 79, 138, 0.12);
}
.chat-panel__input {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: var(--cc-text);
    padding: 0;
}
.chat-panel__input::placeholder {
    color: var(--cc-muted);
}
.chat-panel__input-hint {
    font-family: var(--font-family-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--cc-muted);
    white-space: nowrap;
}
.chat-panel__send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    background: var(--cc-primary);
    border: 1px solid var(--cc-primary);
    color: var(--cc-on-primary);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}
.chat-panel__send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.chat-panel__send-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}
/* Figma 89:142 · Waiting-State — während Anonymisierung der Follow-up-Frage
   läuft. Button bekommt cc/disabled-Hintergrund (nicht nur opacity), damit
   der Kontrast klarer ist. */
.chat-panel__send-btn.is-waiting {
    background: var(--cc-disabled);
    border-color: var(--cc-disabled);
    opacity: 1;
    color: var(--cc-on-primary);
}
.chat-panel__footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--cc-muted);
}
.chat-panel__footer-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--cc-muted);
    /* `align-items: center` auf .chat-panel__footer-hint zentriert das Icon
       vertikal relativ zum Label; display: block entfernt die SVG-
       Baseline-Versatz, sodass das Schloss exakt mittig sitzt. */
}

/* ─── Figma 327:2 · Folgenachrichten-anonymisieren-Toggle ──────────────
   Inline-Checkbox über dem Chat-Input. Default OFF (data-checked="false").
   Click öffnet das Risk-Confirm-Modal (chat-anon-modal). */
.chat-anon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Source Sans 3', sans-serif;
    align-self: flex-start;
}
.chat-anon-toggle__box {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid var(--cc-hairline, #d6dde5);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.chat-anon-toggle[data-checked="true"] .chat-anon-toggle__box {
    background: var(--cc-primary, #0b4f8a);
    border-color: var(--cc-primary, #0b4f8a);
}
.chat-anon-toggle[data-checked="true"] .chat-anon-toggle__box::after {
    content: '';
    width: 7px;
    height: 4px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.chat-anon-toggle__label {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--cc-text-soft, #3c4a5b);
    white-space: nowrap;
}
.chat-anon-toggle__info {
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--cc-muted, #6b7a8c);
    cursor: help;
}
.chat-anon-toggle:focus-visible {
    outline: 2px solid var(--cc-primary, #0b4f8a);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ─── Figma 328:3 · Risk-Confirm-Modal beim Aktivieren ────────────────
   Backdrop + zentrierte Card. Nur sichtbar wenn das outer .chat-anon-modal
   nicht [hidden] hat. */
.chat-anon-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* [hidden] muss display:flex übersteuern — sonst zeigt sich das Modal,
   sobald sein Container sichtbar wäre (Spezifity-Fix: Klasse+Attr > Klasse). */
.chat-anon-modal[hidden] {
    display: none;
}
.chat-anon-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 15, 0.45);
}
.chat-anon-modal__card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--cc-hairline, #d6dde5);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(4, 8, 15, 0.3);
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: 460px;
    width: 100%;
}
.chat-anon-modal__title {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.18px;
    color: var(--cc-text, #0e1a2b);
    margin: 0;
}
.chat-anon-modal__body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--cc-text, #0e1a2b);
    margin: 0;
    max-width: 404px;
}
.chat-anon-modal__risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cc-surface-alt, #ecf2f8);
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 50px;
    cursor: pointer;
    text-align: left;
    font-family: 'Source Sans 3', sans-serif;
}
.chat-anon-modal__risk-box {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: #ffffff;
    border: 1.5px solid var(--cc-hairline, #d6dde5);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.chat-anon-modal__risk-row[data-checked="true"] .chat-anon-modal__risk-box {
    background: var(--cc-primary, #0b4f8a);
    border-color: var(--cc-primary, #0b4f8a);
}
.chat-anon-modal__risk-row[data-checked="true"] .chat-anon-modal__risk-box::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.chat-anon-modal__risk-text {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--cc-text, #0e1a2b);
}
.chat-anon-modal__risk-row:focus-visible {
    outline: 2px solid var(--cc-primary, #0b4f8a);
    outline-offset: 2px;
}
.chat-anon-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}
.chat-anon-modal__btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 120ms ease, opacity 120ms ease;
}
.chat-anon-modal__btn--secondary {
    background: #ffffff;
    border-color: var(--cc-hairline, #d6dde5);
    color: var(--cc-text, #0e1a2b);
}
.chat-anon-modal__btn--secondary:hover {
    background: var(--cc-surface-alt, #ecf2f8);
}
.chat-anon-modal__btn--danger {
    background: #dc2626;
    color: #ffffff;
}
.chat-anon-modal__btn--danger:hover:not(:disabled) {
    background: #b91c1c;
}
.chat-anon-modal__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.chat-anon-modal__btn:focus-visible {
    outline: 2px solid var(--cc-primary, #0b4f8a);
    outline-offset: 2px;
}

/* ─── Figma 81:2 · Vollbild-Chat-Modus ─────────────────────────────────
   Toggle via `body.is-fullscreen-chat`. Blendet Step-Indicator + Step 1 + 2
   Cards aus, zeigt einen schlanken Header (Back-Button + Session-Titel + Modus-
   Pill) und lässt die Step-3-Card auf die volle Höhe des Content-Areas
   wachsen. Der Chat-Panel-Banner „Chat in Vollbild anzeigen" entfällt im
   Vollbild, weil er überflüssig ist. */
.chat-fullscreen-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}
body.is-fullscreen-chat .chat-fullscreen-header {
    display: flex;
}
.chat-fullscreen-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-fullscreen-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 5px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    color: var(--cc-text);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.chat-fullscreen-header__back:hover {
    background: var(--cc-bg);
}
.chat-fullscreen-header__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: var(--cc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50ch;
}
.chat-fullscreen-header__right {
    display: flex;
    align-items: center;
}
.chat-fullscreen-header__model-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    color: var(--cc-text-soft);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
}

/* Vollbild-Mode-Hide-Rules: Indicator + Step 1 + Step 2 ausblenden. Step 3
   wird zum Vollbild-Chat — Outer-Card-Padding/Border weg, der Chat-Panel
   übernimmt die ganze Fläche. */
body.is-fullscreen-chat .step-indicator,
body.is-fullscreen-chat .step-card[data-step="1"],
body.is-fullscreen-chat .step-card[data-step="2"],
body.is-fullscreen-chat .step-card[data-step="3"] .step-card__header,
body.is-fullscreen-chat .step-card[data-step="3"] .step-card__heading,
body.is-fullscreen-chat .step-card[data-step="3"] .step-card__subtitle,
body.is-fullscreen-chat .chat-panel__banner {
    display: none !important;
}
body.is-fullscreen-chat .step-card[data-step="3"] {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
}
body.is-fullscreen-chat .step-card[data-step="3"] .step-card__body-active {
    flex: 1 1 auto;
    min-height: 0;
}
body.is-fullscreen-chat .chat-panel {
    margin-top: 0;
    max-height: none;
    flex: 1 1 auto;
}
/* .step-flow soll im Vollbild-Modus die volle Höhe füllen, damit chat-panel
   mitwachsen kann. */
body.is-fullscreen-chat .step-flow {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px - 48px);
}

/* ── HAN-76 · ⓘ-Hinweis im Vollbild-Chat-Header (neben Model-Pill) ───────── */
.chat-fullscreen-header__info {
    appearance: none;
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1;
    color: var(--cc-text-soft);
    cursor: help;
    border-radius: 4px;
}
.chat-fullscreen-header__info:hover,
.chat-fullscreen-header__info:focus-visible {
    color: var(--cc-primary);
}
.chat-fullscreen-header__info:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

/* ── HAN-76 · Generische Tooltip-Komponente ─────────────────────────────────
   Tooltip wird per JS ans <body> angehaengt und ueber position:fixed in
   Viewport-Koordinaten platziert. Pfeil via ::after, Seite via
   data-placement umgeschaltet. */
.tooltip {
    position: fixed;
    z-index: 1100;
    max-width: 280px;
    padding: 8px 12px;
    background: var(--cc-text, #1f2937);
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-out;
}
.tooltip.is-visible {
    opacity: 1;
}
.tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.tooltip[data-placement="top"]::after {
    bottom: -6px;
    border-top: 6px solid var(--cc-text, #1f2937);
}
.tooltip[data-placement="bottom"]::after {
    top: -6px;
    border-bottom: 6px solid var(--cc-text, #1f2937);
}
@media (prefers-reduced-motion: reduce) {
    .tooltip {
        transition: none;
    }
}