@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: ;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    

    

        

    

.header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
}

input[type='file'] {
   color:transparent;
}

img:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 3.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

/* ───────────── Overlay-Menüleiste (Shared/DialogMenue.razor)  ─────────────
   Titel und Menü in einem Ton, Menü auf voller Breite direkt unter dem Titel, keine Buttons am unteren Rand. */
.rz-dialog-content:has(> .app-dialog-menue) {
    padding: 0 1rem 1rem 1rem !important;
}

.rz-dialog:has(.rz-dialog-content > .app-dialog-menue) .rz-dialog-titlebar {
    border-bottom: none;
}

.app-dialog-menue {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    min-height: 34px;
    margin: 0 -1rem 0.75rem -1rem;
    padding: 0 0.5rem;
    background: var(--rz-dialog-title-background-color, var(--rz-base-200, #e9ecef));
    color: var(--rz-dialog-title-color, var(--rz-text-color, #212529));
    border-bottom: 1px solid var(--rz-border-color, rgba(0, 0, 0, .12));
}

.app-dialog-menue-punkt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 4px;
    margin: 3px 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.app-dialog-menue-punkt .rzi,
.app-dialog-menue-punkt .rz-icon {
    font-size: 1.15rem;
}

.app-dialog-menue-punkt:hover:not(:disabled),
.app-dialog-menue-punkt:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    outline: none;
}

.app-dialog-menue-punkt.hervorgehoben {
    font-weight: 600;
    color: var(--rz-primary, #1976d2);
}

.app-dialog-menue-punkt:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Telefon: Leiste waagerecht scrollen statt umbrechen */
@media (max-width: 767.98px) {
    .app-dialog-menue {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@keyframes app-spinner-drehen {
    to { transform: rotate(360deg); }
}

html.app-ausgedockt { --app-tab-hoehe: 0px; }
html.app-ausgedockt .rz-header,
html.app-ausgedockt .app-tab-leiste,
html.app-ausgedockt .app-kopf-info { display: none !important; }

.ticket-sidebar-titel {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: .25rem;
}

/* To-do mit Ticketbezug: Chip unter dem Titel (öffnet das Ticket) */
.todo-herkunft { display: inline-block; max-width: 100%; margin-top: 2px; padding: 0 8px; border: 1px solid var(--rz-border-color, #ccc); border-radius: 10px;
               background: transparent; color: inherit; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.todo-herkunft:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 10%, transparent); }

/* Mailbox: Ticketnummer als Chip vor dem Betreff (gut lesbar in Hell/Dunkel) */
.mbx-betreff-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mbx-betreff-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-betreff-zeile .mbx-ticket-nr { margin: 0 0 0 auto; flex: none; }
.mbx-ticket-nr { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
                 background: var(--rz-success, #2e7d32); color: #fff; vertical-align: 1px; }
.mbx-ticket-nr:hover { filter: brightness(1.15); }
.mbx-betreff-zeile .mbx-ai-cat { flex: none; }

/* ───── Notizen (wie Apple Notizen) ───── */
.nz { display: grid; grid-template-columns: 200px 280px minmax(0, 1fr); height: calc(100vh - var(--app-tab-hoehe, 48px) - 150px); min-height: 480px;
      border: 1px solid var(--rz-border-color, #ddd); border-radius: 10px; overflow: hidden; background: var(--rz-base-background-color, #fff); margin-top: .5rem; }
@media (max-width: 1100px) {
    .nz { grid-template-columns: 180px 250px minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .nz { grid-template-columns: 1fr; height: auto; }
}
.nz-ordner, .nz-liste { border-right: 1px solid var(--rz-border-color, #ddd); overflow-y: auto; overscroll-behavior: contain; }
.nz-ordner { padding: 10px 8px; background: color-mix(in srgb, var(--rz-base-200, #f3f3f3) 70%, transparent); display: flex; flex-direction: column; gap: 2px; }
.nz-spalten-titel { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; padding: 0 6px 4px; }
.nz-ordner-zeile { position: relative; }
.nz-ordner-eintrag { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit;
                     text-align: left; cursor: pointer; font-size: .9rem; }
.nz-ordner-eintrag span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-ordner-eintrag:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 8%, transparent); }
.nz-ordner-eintrag.aktiv { background: #f5c518; color: #1c1c1c; }
.nz-ordner-eintrag .rzi { font-size: 1.1rem; color: #e0a800; }
.nz-ordner-eintrag.aktiv .rzi { color: #1c1c1c; }
.nz-ordner-aktionen { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.nz-ordner-zeile:hover .nz-ordner-aktionen { display: flex; }
.nz-ordner-aktionen button { border: 0; background: transparent; cursor: pointer; padding: 0 3px; font-size: .8rem; opacity: .7; }
.nz-zahl { font-size: .75rem; opacity: .6; }
.nz-neuer-ordner { margin-top: auto; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 6px 8px; opacity: .8; }
.nz-liste { display: flex; flex-direction: column; }
.nz-liste-kopf { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--rz-border-color, #ddd); }
.nz-suche { flex: 1; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--rz-base-300, #ddd) 50%, transparent); }
.nz-suche input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; outline: none; font-size: .9rem; }
.nz-suche button, .nz-neu { border: 0; background: transparent; color: inherit; cursor: pointer; }
.nz-neu .rzi { font-size: 1.35rem; color: #e0a800; }
.nz-liste-titel { padding: 8px 12px 2px; font-weight: 700; font-size: 1.05rem; }
.nz-liste-inhalt { flex: 1; }
.nz-gruppe { padding: 10px 12px 4px; font-size: .78rem; font-weight: 700; opacity: .7; }
.nz-eintrag { margin: 0 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--rz-border-color, #ddd) 60%, transparent); }
.nz-eintrag:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 6%, transparent); }
.nz-eintrag.aktiv { background: #f5c518; color: #1c1c1c; border-bottom-color: transparent; }
.nz-eintrag-titel { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-eintrag-unter { display: flex; gap: 6px; font-size: .8rem; }
.nz-eintrag-zeit { font-weight: 600; white-space: nowrap; }
.nz-eintrag-vorschau { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-eintrag-meta { display: flex; gap: 8px; font-size: .72rem; opacity: .6; }
.nz-eintrag-meta:empty { display: none; }
.nz-leer { padding: 1rem; text-align: center; opacity: .6; }
.nz-editor-leer { margin-top: 30%; }
.nz-editor-spalte { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Apple-Notizen: schlanke Kopfzeile, Datum mittig, Aktionen dezent */
.nz-editor-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--rz-border-color, #ddd) 55%, transparent); }
.nz-editor-datum { flex: 1; text-align: center; font-size: .78rem; opacity: .55; }
.nz-editor-aktionen { display: flex; align-items: center; gap: 4px; }
.nz-editor-rahmen { flex: 1; min-height: 0; display: flex; }
.nz-editor { flex: 1; display: flex; flex-direction: column; border: 0 !important; border-radius: 0 !important; min-height: 0; width: 100%; }
/* Apple-Notizen: leichte, nicht aufdringliche Symbolleiste, bricht bei schmaler Breite um */
.nz-editor .rz-html-editor-toolbar { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rz-border-color, #ddd) 50%, transparent);
    background: color-mix(in srgb, var(--rz-base-200, #f3f3f3) 45%, transparent); padding: 3px 8px; flex-wrap: wrap; gap: 1px; }
.nz-editor .rz-html-editor-toolbar .rz-html-editor-button { border-radius: 6px; }
/* Textbereich über die ganze Breite, großzügige Apple-typische Ränder und Zeilenhöhe, System-Schrift */
.nz-editor .rz-html-editor-content { flex: 1; width: 100%; max-width: none; box-sizing: border-box; overflow-y: auto; padding: 20px 34px; font-size: 1.02rem; line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Erste Zeile = Titel: groß und fett (wie Apple) */
.nz-editor .rz-html-editor-content > :first-child, .nz-nurlesen > :first-child { font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin-top: 0; margin-bottom: .5rem; }
.nz-editor .rz-html-editor-content img, .nz-nurlesen img { max-width: 100%; height: auto; border-radius: 6px; }
.nz-nurlesen { flex: 1; width: 100%; box-sizing: border-box; overflow-y: auto; padding: 20px 34px; opacity: .85; line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Checklisten: Kreis zum Abhaken, erledigt = gefüllt + durchgestrichen */
ul.nz-check { list-style: none; padding-left: 4px; }
ul.nz-check > li { position: relative; padding-left: 28px; min-height: 1.5em; }
ul.nz-check > li::before { content: ""; position: absolute; left: 2px; top: .2em; width: 17px; height: 17px; border: 1.5px solid #b0b0b0; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
ul.nz-check > li.erledigt::before { background: #f5c518; border-color: #e0a800; }
ul.nz-check > li.erledigt::after { content: "✓"; position: absolute; left: 6px; top: .05em; font-size: .8rem; font-weight: 700; color: #1c1c1c; pointer-events: none; }
ul.nz-check > li.erledigt { color: color-mix(in srgb, currentColor 55%, transparent); text-decoration: line-through; }

/* Einstellungen → WhatsApp: Diagnose */
.wa-koex { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; border: 1px solid var(--rz-border-color, #ddd); border-radius: 8px; margin: 0; }
.wa-koex legend { float: none; width: auto; font-size: .9rem; font-weight: 600; padding: 0 4px; margin: 0; }
.wa-diagnose { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--rz-border-color, #ddd); border-radius: 8px; }
.wa-diag-punkt { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.wa-diag-punkt > span:nth-child(2) { flex: 1; }
.wa-diag-symbol { width: 1.2em; font-weight: 700; text-align: center; }
.wa-diag-punkt.ok .wa-diag-symbol { color: var(--rz-success, #2e7d32); }
.wa-diag-punkt.warnung .wa-diag-symbol { color: var(--rz-warning, #ed6c02); }
.wa-diag-punkt.fehler .wa-diag-symbol { color: var(--rz-danger, #d32f2f); }

/* ── KI-Assistent ── */
.as-seite { display: flex; flex-direction: column; height: calc(100vh - var(--app-tab-hoehe, 48px) - 150px); min-height: 480px; margin-top: .5rem; }
.as { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--rz-border-color, #ddd); border-radius: 10px; overflow: hidden;
      background: var(--rz-base-background-color, #fff); }
.as-dialog .as { height: 70vh; }
.as-verlauf { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.as-leer { margin: auto; max-width: 560px; text-align: center; opacity: .85; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.as-leer > .rzi { font-size: 40px; opacity: .6; }
.as-beispiele { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.as-beispiele button { border: 1px solid var(--rz-border-color, #ddd); background: transparent; color: inherit; border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: .85rem; }
.as-beispiele button:hover { background: color-mix(in srgb, var(--rz-primary, #1976d2) 10%, transparent); }
.as-blase { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.as-ich { align-self: flex-end; background: color-mix(in srgb, var(--rz-primary, #1976d2) 16%, transparent); border-bottom-right-radius: 4px; }
.as-ki { align-self: flex-start; background: color-mix(in srgb, var(--rz-base-300, #ddd) 45%, transparent); border-bottom-left-radius: 4px; }
.as-denkt { display: flex; align-items: center; gap: 8px; }
.as-werkzeug { align-self: flex-start; font-size: .8rem; opacity: .75; max-width: 80%; }
.as-werkzeug summary { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.as-werkzeug summary .rzi { font-size: 16px; }
.as-werkzeug pre { white-space: pre-wrap; max-height: 220px; overflow: auto; font-size: .75rem; margin: 4px 0 0; padding: 6px 8px; border-radius: 6px;
                   background: color-mix(in srgb, var(--rz-base-300, #ddd) 35%, transparent); }
.as-hinweis { align-self: center; font-size: .8rem; opacity: .7; text-align: center; }
/* Umschalter App ⟷ Telegram oben im Chat */
.as-modus { display: flex; gap: 0; align-self: center; margin: 8px 0 2px; border: 1px solid var(--rz-border-color, #ddd); border-radius: 999px; overflow: hidden; }
.as-modus button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 3px 14px; font-size: .82rem; }
.as-modus button.aktiv { background: color-mix(in srgb, var(--rz-primary, #1976d2) 85%, transparent); color: #fff; }
/* Warteschlange: Anfragen, die der KI-Server (Ollama) nicht ausführen konnte */
.as-warteschlange { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 0; }
.as-wz-zeile { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; font-size: .82rem;
    background: color-mix(in srgb, var(--rz-warning, #f9a825) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rz-warning, #f9a825) 45%, transparent); }
.as-wz-zeile.nicht { background: color-mix(in srgb, var(--rz-danger, #d32f2f) 12%, transparent); border-color: color-mix(in srgb, var(--rz-danger, #d32f2f) 45%, transparent); }
.as-wz-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-wz-knopf { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 8px; padding: 1px 8px; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.as-wz-knopf:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.as-karte { align-self: stretch; border: 1px solid color-mix(in srgb, var(--rz-primary, #1976d2) 45%, transparent); border-radius: 10px; padding: 10px 12px;
            display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--rz-primary, #1976d2) 4%, transparent); }
.as-karte.ausgefuehrt { border-color: color-mix(in srgb, var(--rz-success, #2e7d32) 60%, transparent); background: color-mix(in srgb, var(--rz-success, #2e7d32) 5%, transparent); }
.as-karte.verworfen { opacity: .55; }
.as-karte-kopf { display: flex; align-items: center; gap: 6px; }
.as-status { margin-left: auto; font-size: .8rem; opacity: .75; }
.as-warnung { font-size: .85rem; color: var(--rz-warning-dark, #b26a00); }
.as-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.as-felder label { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; opacity: .95; }
.as-felder .breit { grid-column: 1 / -1; }
.as-felder input:not([type=checkbox]), .as-felder textarea { font: inherit; font-size: .9rem; padding: 5px 8px; border: 1px solid var(--rz-border-color, #ccc); border-radius: 6px;
                                       background: var(--rz-base-background-color, #fff); color: inherit; }
.as-felder textarea { resize: vertical; }
.as-felder .as-schalter { flex-direction: row; align-items: center; gap: 6px; font-size: .85rem; }
.as-klein { font-size: .8rem; opacity: .75; }
.as-karte-knoepfe { display: flex; gap: 6px; }
.as-eingabe { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rz-border-color, #ddd); align-items: flex-end; }
.as-eingabe textarea { flex: 1; resize: none; font: inherit; padding: 8px 10px; border: 1px solid var(--rz-border-color, #ccc); border-radius: 8px;
                       background: var(--rz-base-background-color, #fff); color: inherit; min-height: 44px; max-height: 160px; }
.as-eingabe-knoepfe { display: flex; flex-direction: column; gap: 4px; }
.as-eingabe-knoepfe { flex-direction: row; flex-wrap: wrap; max-width: 92px; }
.as-nimmt { animation: as-puls 1.2s ease-in-out infinite; }
@keyframes as-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, .55); } 50% { box-shadow: 0 0 0 7px rgba(211, 47, 47, 0); } }
.as-seite { height: auto; }
.as-reiter .as { height: calc(100vh - var(--app-tab-hoehe, 48px) - 240px); min-height: 420px; flex: none; }
.he { display: flex; flex-direction: column; gap: 10px; }
.he-vorgang { border: 1px solid var(--rz-border-color, #ddd); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.he-vorgang.erledigt, .he-vorgang.ignoriert { opacity: .65; }
.he-vorgang.fehler { border-color: color-mix(in srgb, var(--rz-danger, #d32f2f) 50%, transparent); }
.he-kopf { display: flex; align-items: center; gap: 6px; }
.he-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.he-status { margin-left: auto; font-size: .8rem; opacity: .75; white-space: nowrap; }
.he-zusammenfassung { max-width: 100%; }
.he-mail { max-width: 100%; }
.he-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
/* Notizen: Inhalt immer über die volle Spaltenbreite; „Breit“ blendet Ordner und Liste aus.
   !important, weil Radzen- und metro-CSS NACH app.css laden und sonst gewinnen würden. */
/* Ursache der schmalen, zentrierten Editor-Spalte: metro-ui setzt global „section, aside { margin: 0 auto }“ –
   als Grid-Element schrumpft die Spalte dadurch auf Inhaltsbreite und wird zentriert. */
.nz > section, .nz > aside { margin: 0 !important; width: 100%; min-width: 0; justify-self: stretch; }
.nz .nz-editor-spalte { align-items: stretch !important; }
.nz .nz-editor-rahmen { justify-content: flex-start !important; align-items: stretch !important; width: 100% !important; }
.nz .nz-editor-rahmen > .nz-editor { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; }
.nz .nz-editor .rz-html-editor-toolbar,
.nz .nz-editor .rz-html-editor-content,
.nz .nz-nurlesen { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; }
.nz.nz-breit { grid-template-columns: minmax(0, 1fr); }
.nz.nz-breit > .nz-ordner, .nz.nz-breit > .nz-liste { display: none; }
.he-liste { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }


.mbx-att-dms { border: 1px dashed var(--rz-border-color, #ccc); background: transparent; color: inherit; border-radius: 12px; padding: 1px 8px; font-size: .75rem; cursor: pointer; margin-right: 6px; opacity: .8; }
.mbx-att-dms:hover { opacity: 1; border-style: solid; }

/* ── Historie (HistorieBereich) ── */
.hist { display: flex; flex-direction: column; gap: .6rem; }
.hist-neu { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.hist-neu .hist-text { flex: 1 1 260px; min-width: 0; }
.hist-knoepfe { display: flex; gap: .25rem; }
.hist-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hist-eintrag { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .5rem; padding: 6px 8px; border-left: 3px solid var(--rz-base-300, #ddd); border-radius: 4px; }
.hist-eintrag:hover { background: var(--rz-base-100, rgba(0,0,0,.03)); }
.hist-eintrag.aktiv { border-left-color: var(--rz-primary); background: var(--rz-primary-lighter, rgba(0,0,0,.04)); }
.hist-icon { color: var(--rz-primary); font-size: 1.2rem; margin-top: 2px; }
.hist-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; }
.hist-aktionen { margin-left: auto; display: flex; gap: 2px; opacity: .5; }
.hist-eintrag:hover .hist-aktionen { opacity: 1; }
.hist-text-anzeige { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Emma-Postfachregeln (Einstellungen → KI) */
.hr-schalter { display: inline-flex; align-items: center; gap: 6px; }
.hr-regel { border: 1px solid var(--rz-border-color, #ddd); border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.hr-regel-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hr-regel-aktion { display: flex; gap: 18px; flex-wrap: wrap; }
.hr-sim { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px dashed var(--rz-border-color, #ccc); }
.hr-sim.an { border-color: var(--rz-warning, #f9a825); background: color-mix(in srgb, var(--rz-warning, #f9a825) 10%, transparent); }

/* KI-Anbieter je Bereich (Einstellungen → KI) */
.ki-anbieter { display: grid; grid-template-columns: minmax(220px, max-content) 200px; gap: 6px 12px; align-items: center; }
@media (max-width: 600px) {
    .ki-anbieter { grid-template-columns: 1fr; }
}

/* Eigenes Ticketsystem (Support) */
.spt { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; height: 100%; min-height: 0; }
@media (max-width: 900px) {
    .spt { grid-template-columns: 1fr; }
}
.spt-haupt { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.spt-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; min-height: 120px; }
.spt-artikel { border: 1px solid var(--app-rand, #ddd); border-left: 4px solid var(--rz-primary); border-radius: var(--app-radius-klein, 8px); padding: 8px 12px; background: var(--app-flaeche); }

.spt-artikel.spt-intern { border-left-color: var(--rz-warning); background: color-mix(in srgb, var(--rz-warning) 7%, var(--app-flaeche)); }
.spt-artikel.spt-system { border-left-color: var(--rz-base-400, #aaa); opacity: .75; font-size: .85rem; background: transparent; }
.spt-artikel-kopf { display: flex; gap: 8px; align-items: center; font-size: .85rem; }
.spt-text { white-space: pre-wrap; margin-top: 4px; }
.spt-zeit { font-size: .78rem; opacity: .8; }
.spt-anhang { border: 1px solid var(--rz-border-color, #ddd); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; padding: 2px 8px; margin: 4px 6px 0 0; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; }
.spt-antwort { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rz-border-color, #ddd); padding-top: 8px; }
.spt-seite { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }

/* Empfänger-Vorschläge (wie Outlook) */
.kv { position: relative; display: inline-block; min-width: 180px; }
.kv > input { width: 100%; }
.kv-liste { position: absolute; z-index: 1200; top: 100%; left: 0; min-width: 320px; max-width: 460px; max-height: 300px; overflow-y: auto;
            background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-border-color, #ccc); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); margin-top: 2px; }
.kv-eintrag { padding: 5px 10px; cursor: pointer; font-size: .88rem; line-height: 1.3; }
.kv-eintrag.aktiv { background: color-mix(in srgb, var(--rz-primary, #1976d2) 14%, transparent); }
.kv-mail { opacity: .75; margin-left: 4px; }
.kv-quelle { font-size: .75rem; opacity: .6; }
.kv.kv-breit { display: block; width: 100%; }
.kv.kv-breit > input { box-sizing: border-box; }
.kv-feld { display: flex; flex-direction: column; gap: 2px; }
.kv-feld > label { font-size: .78rem; opacity: .7; padding-left: 2px; }
.kv-feld .rz-textbox, .kv.kv-kontakt .rz-textbox { width: 100%; padding: 6px 10px; }