/* Aiory Letter Studio */

/* ---------- Chat-Karte (Vorschau im Chatverlauf) ---------- */
.aion-letter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
}

.aion-letter-card-title {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 800;
}

.aion-letter-card-title small {
    overflow: hidden;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-letter-card-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

.aion-letter-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.16);
    color: #ede9fe;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aion-letter-card-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.aion-letter-card-btn:hover,
.aion-letter-card-btn:focus-visible {
    outline: none;
    background: rgba(124, 58, 237, 0.28);
    border-color: rgba(196, 181, 253, 0.52);
    color: #ffffff;
}

/* ---------- Overlay & Shell ---------- */
.aion-letter-studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: none;
    padding: 0;
    background: #0b1020;
}

.aion-letter-studio-overlay.show {
    display: flex;
}

.aion-letter-studio-shell {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #0b1020;
    color: #e2e8f0;
}

/* ---------- Topbar ---------- */
/* Spaltenraster spiegelt den Hauptbereich: Dokument-Spalte + Sidebar-Spalte.
   Dadurch sitzt die Toolbar über dem A4-Blatt, nicht über dem ganzen Schirm. */
.aion-letter-studio-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem);
    align-items: center;
    gap: 0;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(20, 28, 48, 0.98), rgba(13, 19, 36, 0.98));
}

/* Dokument-Zone (linke Spalte): Titel links, Toolbar mittig, Spacer rechts */
.aion-letter-studio-topbar-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.aion-letter-studio-topbar-spacer {
    min-width: 0;
}

.aion-letter-studio-title {
    min-width: 0;
}

.aion-letter-studio-title strong {
    display: block;
    overflow: hidden;
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-letter-studio-title span {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #8b97ad;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-letter-studio-toolbar {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.45);
}

.aion-letter-studio-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.aion-letter-studio-divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: rgba(148, 163, 184, 0.2);
}

.aion-letter-studio-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 8px;
}

/* ---------- Buttons ---------- */
.aion-letter-studio-btn,
.aion-letter-studio-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    background: rgba(30, 41, 59, 0.55);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.aion-letter-studio-btn {
    min-height: 36px;
    padding: 9px 14px;
}

.aion-letter-studio-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: #aab6cd;
    font-size: 0.92rem;
}

.aion-letter-studio-icon-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.aion-letter-studio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: rgba(30, 41, 59, 0.55);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aion-letter-studio-toggle:hover,
.aion-letter-studio-toggle:focus-visible {
    outline: none;
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(167, 139, 250, 0.45);
    color: #f5f3ff;
}

.aion-letter-studio-toggle.active {
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    border-color: transparent;
    color: #ffffff;
}

.aion-letter-studio-btn:hover,
.aion-letter-studio-btn:focus-visible,
.aion-letter-studio-icon-btn:hover,
.aion-letter-studio-icon-btn:focus-visible,
.aion-letter-studio-icon-btn.active {
    outline: none;
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(167, 139, 250, 0.45);
    color: #f5f3ff;
}

.aion-letter-studio-btn:disabled,
.aion-letter-studio-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.aion-letter-studio-btn--primary {
    border-color: transparent;
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
}

.aion-letter-studio-btn--primary:hover,
.aion-letter-studio-btn--primary:focus-visible {
    background: linear-gradient(180deg, #9d72f8, #8b46f0);
    border-color: transparent;
    color: #ffffff;
}

.aion-letter-studio-btn--block {
    width: 100%;
}

/* Close-Button konsistent mit den übrigen Popups (z. B. .doc-profile-close):
   neutral grau, transparent, dezenter Hover – kein Rot. */
.aion-letter-studio-close {
    margin-left: 2px;
    color: #94a3b8;
    font-size: 24px;
}

.aion-letter-studio-close:hover,
.aion-letter-studio-close:focus-visible {
    background: rgba(148, 163, 184, 0.12);
    border-color: transparent;
    color: #ffffff;
}

.aion-letter-studio-select {
    height: 34px;
    min-width: 7rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    outline: none;
    padding: 0 8px;
    cursor: pointer;
}

/* ---------- Layout: Dokument links, Assistent rechts ---------- */
.aion-letter-studio-main {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem);
}

#aion-letter-studio .aion-letter-studio-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem);
}

/* ---------- Dokument-Bühne ---------- */
.aion-letter-studio-stage {
    min-width: 0;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    padding: 36px 28px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(124, 58, 237, 0.08), transparent 60%),
        #0e1426;
}

.aion-letter-studio-page {
    box-sizing: border-box;
    width: min(100%, 880px);
    min-height: 1244px;
    margin: 0 auto;
    padding: 88px 82px;
    border-radius: 3px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.02rem * var(--letter-studio-scale, 1));
    line-height: var(--letter-studio-line-height, 1.52);
    outline: none;
    white-space: normal;
}

.aion-letter-studio-page[data-font="serif"] {
    font-family: Georgia, "Times New Roman", serif;
}

.aion-letter-studio-page p {
    margin: 0 0 1em;
}

.aion-letter-studio-page p:last-child {
    margin-bottom: 0;
}

/* ---------- Assistent-Sidebar ---------- */
.aion-letter-studio-ai {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 14px;
    padding: 18px;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(13, 19, 36, 0.96);
}

.aion-letter-studio-ai .aion-letter-studio-prompt {
    flex: 1 1 auto;
}

.aion-letter-studio-selinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.12);
}

.aion-letter-studio-selinfo[hidden] {
    display: none;
}

.aion-letter-studio-selinfo-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.35);
    color: #ede9fe;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.aion-letter-studio-selinfo-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #ddd6fe;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aion-letter-studio-selinfo-clear {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #c4b5fd;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.aion-letter-studio-selinfo-clear:hover,
.aion-letter-studio-selinfo-clear:focus-visible {
    outline: none;
    background: rgba(124, 58, 237, 0.3);
    color: #ffffff;
}

.aion-letter-studio-ai.is-busy .aion-letter-studio-prompt {
    opacity: 0.6;
}

.aion-letter-studio-btn[data-letter-action="apply-ai"][disabled] {
    box-shadow: none;
}

.aion-letter-studio-ai.is-busy [data-letter-action="apply-ai"]::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 2px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: aion-letter-spin 0.7s linear infinite;
}

@keyframes aion-letter-spin {
    to { transform: rotate(360deg); }
}

.aion-letter-studio-ai-head h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 0.96rem;
    font-weight: 800;
}

.aion-letter-studio-ai-head p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 0.79rem;
    line-height: 1.45;
}

.aion-letter-studio-prompt {
    width: 100%;
    min-height: 9rem;
    resize: none;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    outline: none;
    padding: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aion-letter-studio-prompt:focus {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.aion-letter-studio-ai-foot {
    display: grid;
    gap: 10px;
}

.aion-letter-studio-status {
    min-height: 1.1rem;
    color: #a5b4fc;
    font-size: 0.76rem;
    line-height: 1.4;
}

.aion-letter-studio-status[data-type="error"] {
    color: #fca5a5;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .aion-letter-studio-topbar {
        grid-template-columns: 1fr auto;
        gap: 10px 12px;
    }

    .aion-letter-studio-topbar-stage {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aion-letter-studio-topbar-spacer {
        display: none;
    }

    .aion-letter-studio-toolbar {
        justify-self: start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .aion-letter-studio-actions {
        flex-wrap: wrap;
    }

    .aion-letter-studio-main,
    #aion-letter-studio .aion-letter-studio-main {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .aion-letter-studio-ai {
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
        grid-template-rows: auto auto auto;
    }

    .aion-letter-studio-prompt {
        min-height: 5.5rem;
    }
}

@media (max-width: 640px) {
    .aion-letter-card {
        align-items: stretch;
        flex-direction: column;
    }

    .aion-letter-card-actions {
        width: 100%;
    }

    .aion-letter-card-btn {
        flex: 1 1 0;
    }

    .aion-letter-studio-stage {
        padding: 14px;
    }

    .aion-letter-studio-page {
        min-height: calc((100vw - 28px) * 1.414);
        padding: 42px 30px;
        font-size: calc(0.82rem * var(--letter-studio-scale, 1));
    }
}

/* ---------- Light-Theme (Chat-Karte) ---------- */
html.aion-chat-page.theme-light .aion-letter-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(148, 163, 184, 0.26);
}

html.aion-chat-page.theme-light .aion-letter-card-title {
    color: #1e293b;
}

html.aion-chat-page.theme-light .aion-letter-card-title small {
    color: #64748b;
}

html.aion-chat-page.theme-light .aion-letter-card-btn {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(109, 40, 217, 0.18);
    color: #5b21b6;
}

html.aion-chat-page.theme-light .aion-letter-card-btn:hover,
html.aion-chat-page.theme-light .aion-letter-card-btn:focus-visible {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(109, 40, 217, 0.32);
    color: #4c1d95;
}

/* ---------- Editierbarer Titel ---------- */
#aion-letter-studio-title[contenteditable] {
    padding: 1px 4px;
    margin: -1px -4px;
    border-radius: 6px;
    outline: none;
    cursor: text;
}

#aion-letter-studio-title[contenteditable]:hover {
    background: rgba(148, 163, 184, 0.12);
}

#aion-letter-studio-title[contenteditable]:focus {
    background: rgba(2, 6, 23, 0.55);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45);
}

/* ---------- Dokumente-Bibliothek ---------- */
.aion-documents-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 40px);
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.aion-documents-overlay.show {
    display: flex;
}

/* Modal nur so groß wie nötig: Breite gedeckelt, Höhe wächst mit Inhalt bis 88vh */
.aion-documents-shell {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(88vh, 100%);
    background: #0e1426;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.aion-documents-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: transparent;
}

.aion-documents-title strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}

.aion-documents-title span {
    display: block;
    margin-top: 2px;
    color: #8b97ad;
    font-size: 0.78rem;
}

.aion-documents-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.aion-documents-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    padding: 16px 20px 28px;
    background: transparent;
}

.aion-documents-status {
    min-height: 1.1rem;
    margin-bottom: 12px;
    color: #a5b4fc;
    font-size: 0.82rem;
}

.aion-documents-status[data-type="error"] {
    color: #fca5a5;
}

.aion-documents-empty {
    margin-top: 12vh;
    color: #94a3b8;
    font-size: 0.95rem;
    text-align: center;
}

.aion-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.aion-doc-card {
    position: relative;
    display: flex;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.aion-doc-card:hover {
    border-color: rgba(167, 139, 250, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.aion-doc-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 16px 16px 18px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.aion-doc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.aion-doc-card-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aion-doc-card-badge.is-letter {
    background: rgba(124, 58, 237, 0.3);
    color: #ede9fe;
}

.aion-doc-card-date {
    color: #8b97ad;
    font-size: 0.72rem;
}

.aion-doc-card-title {
    overflow: hidden;
    margin-bottom: 6px;
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-doc-card-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.45;
}

.aion-doc-card-delete {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 10px 10px 0 0;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.aion-doc-card:hover .aion-doc-card-delete {
    opacity: 1;
}

.aion-doc-card-delete:hover,
.aion-doc-card-delete:focus-visible {
    outline: none;
    background: rgba(127, 29, 29, 0.32);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fee2e2;
    opacity: 1;
}

@media (max-width: 640px) {
    .aion-documents-topbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .aion-doc-card-delete {
        opacity: 1;
    }
}

/* ---------- Dokumente: Sektion-Labels + Uploads ---------- */
.aion-documents-section-label {
    margin: 4px 0 12px;
    color: #8b97ad;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aion-documents-uploads-label {
    margin-top: 28px;
}

.aion-upload-card {
    text-decoration: none;
    color: inherit;
}

.aion-upload-card .aion-doc-card-main {
    cursor: pointer;
}

.aion-upload-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.aion-upload-card .aion-doc-card-preview {
    -webkit-line-clamp: 1;
}

/* ---------- Dokumente: Toolbar (Suche + Filter) + Tagesgruppen ---------- */
.aion-documents-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: transparent;
}

.aion-documents-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
}

.aion-documents-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.7;
    pointer-events: none;
}

.aion-documents-search {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aion-documents-search:focus {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.aion-documents-filter {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

.aion-documents-daygroup {
    margin-bottom: 26px;
}

.aion-documents-day-label {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 12px;
    padding: 6px 0;
    color: #cbd5e1;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #0e1426 60%, rgba(14, 20, 38, 0));
    text-transform: capitalize;
}

/* ---------- Dokumente: Listenansicht (Zeilen) ---------- */
.aion-documents-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aion-doc-row {
    display: flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.aion-doc-row:hover {
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(30, 41, 59, 0.6);
}

.aion-doc-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.aion-upload-row {
    gap: 12px;
    padding: 10px 12px;
}

.aion-doc-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    font-size: 1.15rem;
    line-height: 1;
}

.aion-doc-row-icon .file-icon-wrap {
    display: inline-flex;
}

.aion-doc-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.aion-doc-row-title {
    overflow: hidden;
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-doc-row-sub {
    overflow: hidden;
    color: #8b97ad;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-doc-row-delete {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8b97ad;
    cursor: pointer;
    opacity: 0.55;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.aion-doc-row-delete svg {
    width: 16px;
    height: 16px;
}

.aion-doc-row:hover .aion-doc-row-delete {
    opacity: 1;
}

.aion-doc-row-delete:hover,
.aion-doc-row-delete:focus-visible {
    outline: none;
    background: rgba(127, 29, 29, 0.32);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fee2e2;
    opacity: 1;
}

/* ---------- Ansicht-Umschalter (Liste/Kacheln) ---------- */
.aion-documents-view {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
}

.aion-documents-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aion-documents-view-btn svg {
    width: 17px;
    height: 17px;
}

.aion-documents-view-btn:hover {
    color: #e2e8f0;
}

.aion-documents-view-btn.active {
    background: rgba(124, 58, 237, 0.3);
    color: #f5f3ff;
}

/* ---------- Kachelansicht (Tiles) ---------- */
.aion-doc-tile {
    position: relative;
    display: flex;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.aion-doc-tile:hover {
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(30, 41, 59, 0.6);
    transform: translateY(-2px);
}

.aion-doc-tile-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.aion-doc-tile-icon {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2px;
}

.aion-doc-tile-title {
    overflow: hidden;
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-doc-tile-sub {
    overflow: hidden;
    color: #8b97ad;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aion-doc-tile-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.5);
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.aion-doc-tile-delete svg {
    width: 16px;
    height: 16px;
}

.aion-doc-tile:hover .aion-doc-tile-delete {
    opacity: 1;
}

.aion-doc-tile-delete:hover,
.aion-doc-tile-delete:focus-visible {
    outline: none;
    background: rgba(127, 29, 29, 0.45);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fee2e2;
    opacity: 1;
}

@media (max-width: 640px) {
    .aion-doc-row-delete,
    .aion-doc-tile-delete {
        opacity: 1;
    }
}

/* ---------- Dokumente: Fehlerzustand mit Retry ---------- */
.aion-documents-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    padding: 32px 20px;
    text-align: center;
}

.aion-documents-error-icon {
    font-size: 2rem;
    line-height: 1;
    opacity: 0.9;
}

.aion-documents-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    padding: 32px 20px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.aion-documents-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: #a78bfa;
    animation: aion-letter-spin 0.7s linear infinite;
}

.aion-documents-error-text {
    max-width: 32rem;
    color: #fca5a5;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ===== Cloud file manager ===== */
.aion-documents-storage {
    padding: 10px 22px 0;
}
.aion-storage-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.aion-storage-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
    transition: width 0.3s ease;
}
.aion-storage-fill.is-full {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.aion-storage-text {
    margin-top: 5px;
    font-size: 0.78rem;
    color: #94a3b8;
}

.aion-documents-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 22px 0;
    min-height: 22px;
}
.aion-fm-crumb {
    border: none;
    background: transparent;
    color: #c4b5fd;
    cursor: pointer;
    font-size: 0.84rem;
    padding: 3px 6px;
    border-radius: 6px;
}
.aion-fm-crumb:hover {
    background: rgba(124, 58, 237, 0.18);
    color: #ddd6fe;
}
.aion-fm-sep {
    color: #64748b;
    font-size: 0.8rem;
}

.aion-documents-section-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8b97ad;
    margin: 4px 2px 8px;
    font-weight: 600;
}

/* row + tile action buttons (rename / move) */
.aion-doc-row-action {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8b97ad;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.55;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.aion-doc-row:hover .aion-doc-row-action {
    opacity: 1;
}
.aion-doc-row-action:hover,
.aion-doc-row-action:focus-visible {
    outline: none;
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(139, 92, 246, 0.45);
    color: #ede9fe;
    opacity: 1;
}

.aion-doc-tile-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.72);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.aion-doc-tile:hover .aion-doc-tile-actions,
.aion-doc-tile:focus-within .aion-doc-tile-actions {
    opacity: 1;
}
.aion-doc-tile-action {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    /* etwaige geerbte absolute Positionierung neutralisieren (kein Überlappen) */
    position: static;
    top: auto;
    right: auto;
    opacity: 1;
}
.aion-doc-tile-action svg { width: 15px; height: 15px; }
.aion-doc-tile-action:hover,
.aion-doc-tile-action:focus-visible {
    outline: none;
    background: rgba(124, 58, 237, 0.4);
    border-color: rgba(139, 92, 246, 0.55);
    color: #fff;
}
.aion-doc-tile-action--edit { color: #c4b5fd; }
.aion-doc-tile-action--del:hover,
.aion-doc-tile-action--del:focus-visible {
    background: rgba(127, 29, 29, 0.5);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fee2e2;
}

/* Zeilen-Aktionen (Listenansicht) – saubere Reihe, kein Überlappen */
.aion-doc-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 6px;
}
.aion-doc-row-action--edit { color: #c4b5fd; }

/* folder entries */
.aion-fm-folder .aion-doc-row-icon,
.aion-fm-folder .aion-doc-tile-icon {
    color: #fbbf24;
}
.aion-fm-folder-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.aion-fm-folder:hover .aion-fm-folder-actions {
    opacity: 1;
}

/* ===== Kontextmenü (Desktop Rechtsklick) ===== */
.aion-ctx-menu {
    position: fixed;
    z-index: 2147483647;
    min-width: 184px;
    padding: 6px;
    background: #0b1020;
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: aionCtxIn 0.1s ease;
}
@keyframes aionCtxIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.aion-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.aion-ctx-item:hover { background: rgba(124, 58, 237, 0.22); }
.aion-ctx-item.is-danger { color: #fca5a5; }
.aion-ctx-item.is-danger:hover { background: rgba(127, 29, 29, 0.34); color: #fee2e2; }
.aion-ctx-ico { width: 18px; text-align: center; font-size: 14px; opacity: 0.9; }
.aion-ctx-sep { height: 1px; margin: 5px 8px; background: rgba(148, 163, 184, 0.18); }
/* Kopfzeile des Auswahl-Kontextmenüs ("N Elemente ausgewählt") — kein Button */
.aion-ctx-head {
    padding: 7px 12px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c4b5fd;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 4px;
    white-space: nowrap;
}

/* ===== Auswahl-Toolbar (Mobile, WhatsApp-artig) ===== */
.aion-documents-shell { position: relative; }
.aion-documents-selbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    animation: aionSelIn 0.15s ease;
}
.aion-documents-selbar[hidden] { display: none !important; }
@keyframes aionSelIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.aion-sel-x {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff; font-size: 16px; cursor: pointer;
}
.aion-sel-x:hover { background: rgba(255, 255, 255, 0.28); }
.aion-sel-count { flex: 1 1 auto; color: #fff; font-weight: 600; font-size: 0.98rem; }
.aion-sel-actions { display: flex; align-items: center; gap: 4px; }
.aion-sel-act {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 9px;
    background: transparent; color: #fff;
    font-size: 16px; cursor: pointer;
}
.aion-sel-act:hover { background: rgba(255, 255, 255, 0.18); }
.aion-sel-act.is-danger:hover { background: rgba(239, 68, 68, 0.45); }

/* Ausgewählte Elemente */
.aion-doc-row.is-selected,
.aion-doc-tile.is-selected {
    border-color: #8b5cf6 !important;
    background: rgba(124, 58, 237, 0.16) !important;
}
.aion-doc-row.is-selected::before,
.aion-doc-tile.is-selected::after {
    content: '✓';
    position: absolute;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: #8b5cf6; color: #fff;
    border-radius: 50%;
    font-size: 13px; font-weight: 700;
    z-index: 4;
}
.aion-doc-row { position: relative; }
.aion-doc-row.is-selected::before { left: 10px; top: 50%; transform: translateY(-50%); }
.aion-doc-tile.is-selected::after { right: 8px; top: 8px; }
/* Im Auswahlmodus die Inline-Aktionsknöpfe ausblenden (Toolbar übernimmt) */
.aion-documents-overlay.is-selecting .aion-doc-row-action,
.aion-documents-overlay.is-selecting .aion-doc-row-delete,
.aion-documents-overlay.is-selecting .aion-doc-tile-actions { display: none !important; }
.aion-documents-overlay.is-selecting .aion-doc-row-main,
.aion-documents-overlay.is-selecting .aion-doc-tile-main { cursor: pointer; }

/* Touch-Geräte: Ordner-Aktionen dauerhaft sichtbar (kein Hover) */
@media (pointer: coarse) {
    .aion-fm-folder-actions { opacity: 1; }
    .aion-doc-row-action, .aion-doc-row-delete { opacity: 0.8; }
}

/* ===== Dokument-Vorschau im Chat ===== */
.aion-doc-chat-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    width: fit-content;
    max-width: 260px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.07);
    text-decoration: none;
    color: inherit;
}
.aion-doc-chat-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.aion-doc-chat-card--clickable:hover {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(124, 58, 237, 0.13);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
/* DIN-A4-Seitenvorschau (Verhältnis 1:√2) */
.aion-doc-page {
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    width: 162px;
    height: 229px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.25);
    /* reine Vorschau – nicht interaktiv, kein Text markieren, Klick geht an die Karte */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.aion-doc-chat-card,
.aion-doc-chat-body {
    user-select: none;
    -webkit-user-select: none;
}
.aion-doc-page-inner {
    padding: 12px 13px;
    color: #1e293b;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 7px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}
.aion-doc-page-inner p { margin: 0 0 5px; }
.aion-doc-page-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff);
}
.aion-doc-page--img img,
.aion-doc-page--pdf iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.aion-doc-page--img img { object-fit: cover; }
.aion-doc-page--pdf iframe { pointer-events: none; background: #fff; }
.aion-doc-page-hit { position: absolute; inset: 0; }
.aion-doc-page--icon {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(139, 92, 246, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}
.aion-doc-page--filetype {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}
.aion-doc-page-skeleton {
    position: absolute;
    inset: 16px;
    background: repeating-linear-gradient(180deg, rgba(100, 116, 139, 0.16) 0 3px, transparent 3px 13px);
    opacity: 0.6;
    pointer-events: none;
}
.aion-doc-page-ext {
    position: relative;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 7px;
    background: #ef4444;
    color: #ffffff;
    font: 700 12px/1 system-ui, sans-serif;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.aion-doc-page-ext[data-ext="doc"],
.aion-doc-page-ext[data-ext="docx"] { background: #2563eb; }
.aion-doc-page-ext[data-ext="xls"],
.aion-doc-page-ext[data-ext="xlsx"],
.aion-doc-page-ext[data-ext="csv"] { background: #16a34a; }
.aion-doc-page-ext[data-ext="txt"],
.aion-doc-page-ext[data-ext="md"] { background: #6b7280; }
.aion-doc-chat-body { min-width: 0; width: 100%; }
.aion-doc-chat-name {
    font-weight: 700;
    color: #e2e8f0;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aion-doc-chat-sub {
    margin-top: 2px;
    color: #8b97ad;
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aion-doc-chat-snippet {
    margin-top: 8px;
    color: #aab4c5;
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aion-doc-chat-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.aion-doc-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    color: #fff;
}
.aion-doc-chat-btn:hover { filter: brightness(1.08); }
.aion-doc-chat-btn--ghost {
    background: transparent;
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}
.aion-doc-chat-btn--ghost:hover { background: rgba(124, 58, 237, 0.18); }

/* ===== Datei-Viewer (Bild-Lightbox / Text / Markdown / CSV-Tabelle / PDF) ===== */
.aion-fv-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(4px);
}
.aion-fv-overlay.show { display: flex; }
.aion-fv-shell {
    display: flex;
    flex-direction: column;
    width: 100vw;
    /* dvh statt vh: auf Handys ist 100vh die Hoehe OHNE eingeblendete
       Adressleiste - der untere Teil (bei mittig gesetzten Bildern also ein
       Stueck des Bildes) rutschte darunter und war abgeschnitten.
       vh bleibt als Rueckfallebene fuer aeltere Browser stehen. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: #0e1426;
    color: #e2e8f0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.aion-fv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.aion-fv-title span {
    font-weight: 700;
    font-size: 0.96rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aion-fv-actions { display: inline-flex; align-items: center; gap: 8px; }
.aion-fv-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; }
.aion-fv-loading { padding: 40px; text-align: center; color: #94a3b8; }

/* Bild-Lightbox */
.aion-fv-body.is-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #060912;
}
.aion-fv-body.is-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
/* PDF */
.aion-fv-body.is-pdf { padding: 0; }
.aion-fv-body.is-pdf iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; background: #fff; }

/* Dokument-Seite (Text / Markdown) */
.aion-fv-body.is-doc { background: #0b0f1c; }
.aion-fv-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 36px;
    background: #ffffff;
    color: #1f2937;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    line-height: 1.6;
    font-size: 0.92rem;
}
.aion-fv-page--wide { max-width: none; padding: 0; overflow: auto; }
.aion-fv-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: #1f2937;
}
.aion-fv-md h1, .aion-fv-md h2, .aion-fv-md h3 { margin: 0.8em 0 0.4em; line-height: 1.25; }
.aion-fv-md h1 { font-size: 1.6rem; }
.aion-fv-md h2 { font-size: 1.3rem; }
.aion-fv-md h3 { font-size: 1.12rem; }
.aion-fv-md p { margin: 0 0 0.8em; }
.aion-fv-md ul { margin: 0 0 0.8em; padding-left: 1.4em; }
.aion-fv-md li { margin: 0.2em 0; }
.aion-fv-md blockquote { margin: 0 0 0.8em; padding: 6px 14px; border-left: 3px solid #8b5cf6; background: #f5f3ff; color: #4b5563; }
.aion-fv-md code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-family: Menlo, Consolas, monospace; font-size: 0.85em; }
.aion-fv-md a { color: #7c3aed; }

/* CSV – Tabelle wie in Excel */
.aion-fv-table { border-collapse: collapse; width: 100%; background: #fff; color: #1f2937; font-size: 0.85rem; }
.aion-fv-table th, .aion-fv-table td { border: 1px solid #cbd5e1; padding: 6px 12px; text-align: left; white-space: nowrap; }
.aion-fv-table thead th { position: sticky; top: 0; background: #ede9fe; color: #312e81; font-weight: 700; z-index: 1; }
.aion-fv-table tbody tr:nth-child(even) { background: #f8fafc; }
.aion-fv-table tbody tr:hover { background: #f1f5f9; }
.aion-fv-rownum { background: #f1f5f9 !important; color: #64748b; text-align: center; font-weight: 600; }

/* ===== Viewer v2: Typ-Badge, Code/JSON, Excel-Grid, Fallback ===== */
.aion-fv-title { display: flex; align-items: center; min-width: 0; }
.aion-fv-title span[data-fv-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aion-fv-title span.aion-fv-badge {
    flex: 0 0 auto; margin-right: 8px; padding: 2px 8px; border-radius: 6px;
    background: rgba(124, 58, 237, 0.18); color: #c4b5fd; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.03em; overflow: visible; white-space: nowrap;
}
.aion-fv-errbar { background: #7f1d1d; color: #fecaca; padding: 8px 14px; font-size: 0.82rem; }

/* Code / JSON – highlight.js (dunkles Theme) + Zeilennummern */
.aion-fv-body.is-code { padding: 0; background: #0d1117; }
.aion-fv-code { display: flex; flex-direction: column; min-height: 100%; }
.aion-fv-codebar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 14px; background: #0b0f17; border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    position: sticky; top: 0; z-index: 2;
}
.aion-fv-lang { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; font-weight: 700; }
.aion-fv-codebtns { display: inline-flex; gap: 6px; }
.aion-fv-mini {
    background: rgba(124, 58, 237, 0.16); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 7px; padding: 3px 10px; font-size: 0.74rem; cursor: pointer;
}
.aion-fv-mini:hover { background: rgba(124, 58, 237, 0.28); }
.aion-fv-mini.active { background: #7c3aed; color: #fff; }
.aion-fv-codewrap { display: flex; align-items: flex-start; overflow: auto; flex: 1 1 auto; }
.aion-fv-gutter {
    margin: 0; padding: 14px 10px 14px 14px; text-align: right; color: #475569; background: #0b0f17;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.55;
    user-select: none; border-right: 1px solid rgba(148, 163, 184, 0.1); white-space: pre;
}
.aion-fv-codepre {
    margin: 0; padding: 14px 18px; font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8rem; line-height: 1.55; white-space: pre; overflow: visible;
}
.aion-fv-codepre code.hljs { background: transparent; padding: 0; }
.aion-fv-code.is-wrap .aion-fv-gutter { display: none; }
.aion-fv-code.is-wrap .aion-fv-codepre { white-space: pre-wrap; word-break: break-word; }

/* Tabellen (Excel-Grid): Spaltenbuchstaben + Sticky-Header + Sticky-erste-Spalte */
.aion-fv-body.is-sheet { padding: 0; background: #0b0f1c; display: flex; }
.aion-fv-sheetwrap { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.aion-fv-sheettop { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.aion-fv-search {
    flex: 0 0 auto; width: min(260px, 60%); background: #0e1426; color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem;
}
.aion-fv-sheetmeta { color: #94a3b8; font-size: 0.78rem; }
.aion-fv-tabs { display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; }
.aion-fv-tab {
    background: transparent; color: #94a3b8; border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.aion-fv-tab.active { background: #fff; color: #312e81; font-weight: 700; }
.aion-fv-sheetbody { flex: 1 1 auto; min-height: 0; overflow: auto; }
.aion-fv-sheetpanel { display: none; }
.aion-fv-sheetpanel.active { display: block; }
.aion-fv-sheet td, .aion-fv-sheet th { min-width: 56px; }
.aion-fv-sheet thead th { position: sticky; top: 0; background: #ede9fe; color: #312e81; z-index: 3; }
.aion-fv-sheet tbody th.aion-fv-rownum {
    position: sticky; left: 0; background: #f1f5f9; color: #64748b; text-align: center;
    font-weight: 600; z-index: 1; border: 1px solid #cbd5e1; min-width: 44px;
}
.aion-fv-sheet thead th.aion-fv-corner {
    position: sticky; left: 0; top: 0; background: #ddd6fe; z-index: 4; border: 1px solid #cbd5e1; min-width: 44px;
}

/* Excel-getreue .xlsx-Ansicht: Werte + Fills + Rahmen + Fonts + Merges + Rotation */
.aion-xlsx { table-layout: fixed; font-family: Calibri, 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #111; background: #fff; }
.aion-xlsx td { border: 1px solid #e6e6e6; padding: 1px 5px; overflow: hidden; white-space: nowrap; line-height: 1.25; min-width: 0; }
.aion-xlsx thead th { background: #f5f5f5; color: #555; font-weight: 600; border: 1px solid #d0d0d0; min-width: 0; text-align: center; }
.aion-xlsx tbody th.aion-fv-rownum { background: #f5f5f5; color: #555; border: 1px solid #d0d0d0; min-width: 0; font-weight: 600; }
.aion-xlsx thead th.aion-fv-corner { background: #f5f5f5; border: 1px solid #d0d0d0; min-width: 0; }

/* Fallback (Office-Präsentationen, Archive, Binär) */
.aion-fv-fallback {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 48px 24px; text-align: center; color: #cbd5e1; min-height: 240px;
}
.aion-fv-fallback-name { font-weight: 700; font-size: 1rem; color: #e2e8f0; word-break: break-word; }
.aion-fv-fallback-msg { color: #94a3b8; font-size: 0.86rem; }

/* ===== Bearbeiten: Code-Editor + Tabellen-Editor ===== */
.aion-ce-overlay, .aion-te-overlay {
    position: fixed; inset: 0; z-index: 2147483646; display: none;
    padding: 0; background: #0b1020;
}
.aion-ce-overlay.show, .aion-te-overlay.show { display: flex; }
.aion-ce-shell, .aion-te-shell {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    background: #0d1117; color: #e2e8f0; overflow: hidden;
}
.aion-ce-top, .aion-te-top {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); background: #0b0f17;
}
.aion-ce-title, .aion-te-title { display: flex; align-items: center; min-width: 0; gap: 8px; font-weight: 700; font-size: 0.92rem; }
.aion-ce-title span:last-child, .aion-te-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aion-ce-badge, .aion-te-badge {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 6px; background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
}
.aion-ce-actions, .aion-te-actions { display: inline-flex; align-items: center; gap: 8px; }
.aion-ce-status { color: #94a3b8; font-size: 0.8rem; min-width: 70px; text-align: right; }

/* Code-Editor: Gutter + transparente Textarea über hljs-Overlay (identische Box-Metrik!) */
.aion-ce-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.aion-ce-gutter {
    margin: 0; padding: 14px 10px 14px 14px; text-align: right; color: #475569; background: #0b0f17;
    font: 0.82rem/1.6 "SFMono-Regular", Menlo, Consolas, monospace;
    white-space: pre; user-select: none; overflow: hidden; border-right: 1px solid rgba(148, 163, 184, 0.1);
}
.aion-ce-edit { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.aion-ce-hl, .aion-ce-ta {
    position: absolute; inset: 0; margin: 0; padding: 14px 18px; box-sizing: border-box;
    font: 0.82rem/1.6 "SFMono-Regular", Menlo, Consolas, monospace;
    white-space: pre; tab-size: 2; -moz-tab-size: 2; word-wrap: normal;
}
.aion-ce-hl { z-index: 1; pointer-events: none; overflow: hidden; }
.aion-ce-hl code.hljs { background: transparent; padding: 0; white-space: pre; display: block; }
.aion-ce-ta {
    z-index: 2; overflow: auto; background: transparent; color: transparent; -webkit-text-fill-color: transparent;
    caret-color: #e2e8f0; border: 0; outline: none; resize: none;
}
.aion-ce-ta::selection { background: rgba(124, 58, 237, 0.4); }

/* Tabellen-Editor: editierbare Zellen */

/* ===== EIN Editor: typabhängige View-Fläche im Stage (Sidebar bleibt rechts) ===== */
#aion-letter-studio[data-view="code"] .aion-letter-studio-stage,
#aion-letter-studio[data-view="table"] .aion-letter-studio-stage {
    padding: 0; overflow: hidden; display: flex; flex-direction: column; scrollbar-gutter: auto;
}
#aion-letter-studio[data-view="code"] .aion-letter-studio-stage { background: #0d1117; }
#aion-letter-studio[data-view="table"] .aion-letter-studio-stage { background: #0b0f1c; }
.aion-ls-code, .aion-ls-table { min-height: 0; }
#aion-letter-studio[data-view="code"] .aion-ls-code { display: flex; flex: 1 1 auto; }
#aion-letter-studio[data-view="table"] .aion-ls-table { display: block; flex: 1 1 auto; overflow: auto !important; }

/* ===== Aiory-Chat mit Verlauf (rechte Leiste, wie VS-Code-Chat) ===== */
.aion-ls-chat {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.aion-ls-chat-empty { color: #94a3b8; font-size: 0.82rem; line-height: 1.5; padding: 6px 2px; }
.aion-ls-msg { display: flex; }
.aion-ls-msg--user { justify-content: flex-end; }
.aion-ls-msg--assistant { justify-content: flex-start; }
.aion-ls-msg-bubble {
    max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.aion-ls-msg--user .aion-ls-msg-bubble { background: #7c3aed; color: #fff; border-bottom-right-radius: 4px; }
.aion-ls-msg--assistant .aion-ls-msg-bubble { background: rgba(148, 163, 184, 0.14); color: #e2e8f0; border-bottom-left-radius: 4px; }
.aion-ls-msg.is-error .aion-ls-msg-bubble { background: rgba(239, 68, 68, 0.18); color: #fecaca; }
.aion-ls-msg-sel { margin-top: 5px; font-size: 0.74rem; opacity: 0.85; }
.aion-ls-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.aion-ls-typing i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: aionLsTyping 1s infinite ease-in-out; }
.aion-ls-typing i:nth-child(2) { animation-delay: 0.15s; }
.aion-ls-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aionLsTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.aion-ls-chat-inputrow {
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: #0e1426;
    padding: 8px 46px 8px 12px;
    transition: border-color 0.15s ease;
}
.aion-ls-chat-inputrow:focus-within { border-color: rgba(124, 58, 237, 0.65); }
.aion-ls-chat-inputrow .aion-letter-studio-prompt {
    display: block; width: 100%; height: 24px; min-height: 24px; max-height: 220px; resize: none; overflow-y: auto;
    border: 0; outline: none; background: transparent; padding: 0; box-shadow: none;
    color: #e2e8f0; font-size: 0.88rem; line-height: 1.5;
}
.aion-ls-chat-inputrow .aion-letter-studio-prompt:focus { border: 0; outline: none; box-shadow: none; }
.aion-ls-chat-send {
    position: absolute; right: 6px; bottom: 6px;
    width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
    background: #7c3aed; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}
.aion-ls-chat-send:hover { background: #6d28d9; }
.aion-ls-chat-send:active { transform: scale(0.94); }
.aion-ls-chat-send:disabled { background: rgba(124, 58, 237, 0.35); cursor: pointer; }
.aion-ls-chat-send svg { width: 16px; height: 16px; }
.aion-letter-studio-ai.is-busy .aion-ls-chat-send::before { display: none !important; }

/* Scroll-Fix Dokument-Bühne: die globale /aiory-Regel
   `html.aion-chat-page main > section { overflow:hidden!important; padding:0!important }`
   trifft die Editor-Bühne (<section class="aion-letter-studio-stage">) und killt das
   Runterscrollen bei mehrseitigen Dokumenten. Höhere Spezifität (#id .class) gewinnt. */
#aion-letter-studio .aion-letter-studio-stage {
    overflow: auto !important;
    padding: 32px 26px !important;
}
#aion-letter-studio .aion-letter-studio-page img {
    max-width: 100%;
    height: auto;
}

/* „Echte A4-Blätter stapeln": das durchgehende contenteditable optisch in einzelne A4-Seiten
   (weiße Blätter + Abstand + Schatten) zerlegen. Der wiederholende Verlauf malt Weiß/Lücke,
   filter:drop-shadow folgt der Alpha-Form -> jedes Blatt bekommt seinen eigenen Schatten.
   Hinweis: rein optisch, Text ist NICHT seiten-hart (kann über eine Lücke laufen). */
#aion-letter-studio .aion-letter-studio-page {
    --ls-page-h: 1244px;
    --ls-page-gap: 34px;
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        #ffffff 0,
        #ffffff calc(var(--ls-page-h) - var(--ls-page-gap)),
        transparent calc(var(--ls-page-h) - var(--ls-page-gap)),
        transparent var(--ls-page-h)
    );
    box-shadow: none;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5));
    border-radius: 0;
}

/* Bilder auf Seitenhöhe begrenzen, damit sie in ein A4-Blatt passen (Block-Pagination kann
   sie sonst nicht auf eine Seite schieben). */
#aion-letter-studio .aion-letter-studio-page img {
    max-width: 100%;
    max-height: 1000px;
    height: auto;
}

/* Speichern-Dropdown-Menü (Speichern / Speichern unter…) */
.aiory-savemenu {
    position: fixed; z-index: 2147483646;
    background: #0e1426; border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px;
    padding: 5px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    display: flex; flex-direction: column; min-width: 200px;
    font-family: 'Inter', system-ui, sans-serif;
}
.aiory-savemenu button {
    display: block; width: 100%; text-align: left; padding: 9px 12px;
    border: 0; border-radius: 7px; background: transparent; color: #e2e8f0;
    cursor: pointer; font-size: 13px; font-family: inherit;
}
.aiory-savemenu button:hover { background: rgba(124, 58, 237, .18); }

/* „Speichern unter"-Dialog: Formularfelder */
.aiory-saveas-box { width: min(480px, 94%); }
.aiory-saveas-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.aiory-saveas-row > label { font-size: 12px; color: #94a3b8; }
.aiory-saveas-row input[type="text"], .aiory-saveas-row select {
    height: 38px; box-sizing: border-box; border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, .25); background: rgba(15, 23, 42, .6);
    color: #e2e8f0; font-family: inherit; font-size: 13px; padding: 0 11px; outline: none;
}
.aiory-saveas-row input[type="text"]:focus, .aiory-saveas-row select:focus { border-color: #7c3aed; }
.aiory-saveas-types { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 2px; }
.aiory-saveas-types label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #e2e8f0; cursor: pointer; }
.aiory-saveas-types input[type="radio"] { accent-color: #7c3aed; }
.aiory-saveas-foot { gap: 10px; }

/* Seitenansicht aus = fortlaufendes, einzelnes weißes Blatt (kein Stapel/Gradient) */
#aion-letter-studio .aion-letter-studio-page.ls-pageless {
    background-color: #ffffff !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
    border-radius: 3px !important;
    min-height: 1244px !important;
}
/* aktiver Seitenansicht-Umschalter */
.aion-letter-studio-toggle.active {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(124, 58, 237, 0.55) !important;
    color: #ddd6fe !important;
}
/* schwebende Seitenzahl-Anzeige */
.aion-letter-studio-pageind {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2147483631;
    background: rgba(11, 16, 32, 0.88);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.aion-letter-studio-pageind[hidden] { display: none; }

/* Seitenzahl in der Toolbar (statt schwebendem Pill über dem Blatt) */
.aion-letter-studio-pagenum {
    font-size: 12px; color: #94a3b8; white-space: nowrap; padding: 0 4px;
    font-family: 'Inter', system-ui, sans-serif; align-self: center;
}
.aion-letter-studio-pagenum[hidden] { display: none !important; }
/* aktiver Seitenansicht-Icon-Toggle */
.aion-letter-studio-icon-btn.active {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(124, 58, 237, 0.55) !important;
    color: #ddd6fe !important;
}

/* aion-ls-import-list-fix: importierte Word-Listen (LibreOffice-HTML) sollen IMMER
   Aufzählungszeichen/Nummern + Einrückung zeigen, egal welche globale/Client-Regel dazwischenfunkt. */
#aion-letter-studio .aion-letter-studio-page ul { list-style: disc outside !important; padding-left: 2.4em !important; margin: 0.5em 0 !important; }
#aion-letter-studio .aion-letter-studio-page ol { list-style: decimal outside !important; padding-left: 2.4em !important; margin: 0.5em 0 !important; }
#aion-letter-studio .aion-letter-studio-page ul ul { list-style: circle outside !important; }
#aion-letter-studio .aion-letter-studio-page ul ul ul { list-style: square outside !important; }
#aion-letter-studio .aion-letter-studio-page li { display: list-item !important; }
#aion-letter-studio .aion-letter-studio-page li > p { margin: 0 0 0.15em !important; }

/* aion-ls-doc-table: Tabellen im Dokument-Editor wie in Word/Docs (statt dünner Default-Ränder). */
#aion-letter-studio .aion-letter-studio-page table {
    border-collapse: collapse !important;
    margin: 0.7em 0 !important;
    max-width: 100% !important;
    color: #1f2937;
}
#aion-letter-studio .aion-letter-studio-page table td,
#aion-letter-studio .aion-letter-studio-page table th {
    border: 1px solid #c3c9d4 !important;
    padding: 6px 11px !important;
    text-align: left;
    vertical-align: top;
    min-width: 2.5em;
}
#aion-letter-studio .aion-letter-studio-page table th {
    background: #eef1f6 !important;
    font-weight: 600;
    color: #111827;
}

/* ── Aiory-Chatverlauf je Dokument: Kopf-Buttons + Verlauf-Dropdown + Archiv-Banner ── */
#aion-letter-studio .aiory-chat { position: relative; }
#aion-letter-studio .aiory-chat-headactions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
#aion-letter-studio .aiory-chat-headbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 7px;
    background: transparent; border: 1px solid transparent; color: #a9b2c7; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
#aion-letter-studio .aiory-chat-headbtn:hover { background: rgba(124,58,237,.16); color: #ddd6fe; border-color: rgba(124,58,237,.4); }
#aion-letter-studio .aiory-chat-headbtn svg { display: block; }

#aion-letter-studio .aiory-chat-histmenu {
    position: absolute; top: 52px; right: 10px; z-index: 40;
    width: min(300px, calc(100% - 20px));
    background: #0b1020; border: 1px solid rgba(148,163,184,.22); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,.5); overflow: hidden;
}
#aion-letter-studio .aiory-chat-histhead {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,.16);
    font-size: 12px; font-weight: 700; color: #e2e8f0;
}
#aion-letter-studio .aiory-chat-histclear {
    background: transparent; border: 1px solid rgba(239,68,68,.4); color: #fca5a5;
    border-radius: 7px; padding: 3px 8px; font-size: 11px; cursor: pointer;
}
#aion-letter-studio .aiory-chat-histclear:hover { background: rgba(239,68,68,.16); color: #fecaca; }
#aion-letter-studio .aiory-chat-histlist { max-height: 300px; overflow: auto; padding: 6px; }
#aion-letter-studio .aiory-chat-histempty { padding: 14px 12px; font-size: 12px; color: #94a3b8; text-align: center; }
#aion-letter-studio .aiory-chat-histrow { display: flex; align-items: stretch; gap: 4px; border-radius: 8px; }
#aion-letter-studio .aiory-chat-histrow:hover { background: rgba(148,163,184,.08); }
#aion-letter-studio .aiory-chat-histrow.is-active { background: rgba(124,58,237,.12); }
#aion-letter-studio .aiory-chat-histopen {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    text-align: left; background: transparent; border: none; cursor: pointer; padding: 8px; color: #e2e8f0;
}
#aion-letter-studio .aiory-chat-histtitle { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aion-letter-studio .aiory-chat-histmeta { font-size: 10.5px; color: #94a3b8; }
#aion-letter-studio .aiory-chat-histrow.is-active .aiory-chat-histmeta { color: #c4b5fd; }
#aion-letter-studio .aiory-chat-histdel {
    flex: 0 0 auto; width: 30px; background: transparent; border: none; cursor: pointer;
    color: #94a3b8; font-size: 13px; border-radius: 8px; opacity: .6;
}
#aion-letter-studio .aiory-chat-histdel:hover { opacity: 1; color: #fca5a5; background: rgba(239,68,68,.12); }

#aion-letter-studio .aiory-chat-archbanner {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
    background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.34);
    font-size: 11.5px; color: #ddd6fe;
}
#aion-letter-studio .aiory-chat-archback {
    background: rgba(124,58,237,.3); border: none; color: #fff; border-radius: 7px;
    padding: 4px 9px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
#aion-letter-studio .aiory-chat-archback:hover { background: rgba(124,58,237,.5); }

/* ── Lade-Overlay im Editor (Spinner + „Slider"/indeterminate Balken) statt leerem weißem Blatt ── */
#aion-letter-studio .aion-letter-studio-stage { position: relative; }
#aion-letter-studio .aion-ls-loading {
    position: absolute; inset: 0; z-index: 6;
    align-items: center; justify-content: center;
    background: rgba(11, 16, 32, 0.94); backdrop-filter: blur(2px);
}
#aion-letter-studio .aion-ls-loading:not([hidden]) { display: flex; }

/* Während des Ladens: leere Seite + (blinkenden) Cursor ausblenden – nur das Lade-Overlay bleibt sichtbar. */
#aion-letter-studio.is-loading .aion-letter-studio-page,
#aion-letter-studio.is-loading .aion-ls-code,
#aion-letter-studio.is-loading .aion-ls-table { visibility: hidden; }
#aion-letter-studio.is-loading .aion-letter-studio-page { caret-color: transparent; }
/* Kein Karten-Kasten mehr – Spinner/Text/Slider frei zentriert auf dem Hintergrund, größer. */
#aion-letter-studio .aion-ls-loading-inner {
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    background: none; border: none; box-shadow: none; padding: 0;
    width: min(52vw, 560px);
}
#aion-letter-studio .aion-ls-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid rgba(148, 163, 184, 0.26); border-top-color: #8b5cf6;
    animation: aion-ls-spin 0.8s linear infinite;
}
@keyframes aion-ls-spin { to { transform: rotate(360deg); } }
#aion-letter-studio .aion-ls-loading-text {
    font-size: 20px; font-weight: 600; color: #e2e8f0; letter-spacing: 0.01em; text-align: center;
}
#aion-letter-studio .aion-ls-loading-bar {
    width: 100%; max-width: 460px; height: 7px; border-radius: 5px;
    background: rgba(148, 163, 184, 0.20); overflow: hidden; position: relative;
}
#aion-letter-studio .aion-ls-loading-bar::before {
    content: ''; position: absolute; top: 0; height: 100%; width: 38%; left: -38%;
    border-radius: 5px; background: linear-gradient(90deg, transparent, #8b5cf6 45%, #a78bfa 55%, transparent);
    animation: aion-ls-slide 1.15s ease-in-out infinite;
}
@keyframes aion-ls-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* ── Collabora (echtes LibreOffice im Browser) – Vollbild-Overlay ── */
.aion-collabora-overlay { position: fixed; inset: 0; z-index: 2147483646; background: #0e1426; display: none; flex-direction: column; }
.aion-collabora-overlay.show { display: flex; }
.aion-collabora-bar { flex: 0 0 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #0b1020; border-bottom: 1px solid rgba(148,163,184,.18); }
.aion-collabora-title { font-size: 14px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
.aion-collabora-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #c4b5fd; background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.4); border-radius: 6px; padding: 2px 7px; }
.aion-collabora-grow { flex: 1 1 auto; }
.aion-collabora-close { position: absolute; top: 8px; right: 10px; z-index: 5; width: 30px; height: 30px; border-radius: 8px; background: rgba(15,20,38,.72); border: 1px solid rgba(148,163,184,.28); color: #e2e8f0; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: background .12s; }
/* Sitzt ueber dem hellen Dokument: Farben der hellen Variante, Form zentral. */
.aion-collabora-close{ color:#475569 !important; background:rgba(255,255,255,.72) !important; }
.aion-collabora-close:hover, .aion-collabora-close:focus-visible{
  background:rgba(15,23,42,.10) !important; color:#0f172a !important; }
.aion-collabora-body { flex: 1 1 auto; position: relative; background: #dfdfdf; }
.aion-collabora-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.aion-collabora-loading, .aion-collabora-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #cbd5e1; font-size: 15px; text-align: center; padding: 24px; background: #0e1426; }
.aion-collabora-error .aiory-editor-save { margin-top: 6px; }

/* PDF -> Word Button (sichtbar an PDF-Zeilen/-Kacheln) */
.aion-doc-p2w { font-weight: 800; font-size: 12px; color: #60a5fa !important; }
.aion-doc-p2w:hover { color: #93c5fd !important; background: rgba(37,99,235,.18) !important; }

/* ============================================================
   AIORY CLOUD – Redesign der Dokumente-Bibliothek (V1 Cloud Drive)
============================================================ */
.aion-documents-shell.aion-cloud{
  flex-direction:row; width:100vw; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; padding:0; border:none; border-radius:0;
}
.aion-documents-overlay:has(.aion-cloud){padding:0; align-items:stretch; justify-content:stretch}
/* ----- Sidebar ----- */
.aion-cloud-side{
  width:234px; flex:none; display:flex; flex-direction:column; gap:2px;
  background:#0b1020; border-right:1px solid rgba(148,163,184,.12); padding:16px 12px; overflow-y:auto;
}
.aion-cloud-brand{display:flex; align-items:center; gap:11px; padding:2px 8px 14px}
.aion-cloud-logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#7c3aed,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none}
.aion-cloud-brandtxt strong{font-size:15px; display:block}
.aion-cloud-brandtxt span{font-size:10.5px; color:#64748b}
.aion-cloud-nav{display:flex; flex-direction:column; gap:2px}
.aion-cloud-navitem{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; border-radius:10px; background:none; color:#94a3b8; font-size:13px; text-align:left; cursor:pointer; transition:.12s}
.aion-cloud-navitem:hover{background:rgba(124,58,237,.12); color:#e2e8f0}
.aion-cloud-navitem.is-on{background:rgba(124,58,237,.22); color:#e9d5ff; font-weight:600}
.aion-cloud-navlabel{font-size:10px; font-weight:700; letter-spacing:.08em; color:#64748b; padding:15px 12px 6px; text-transform:uppercase}
.aion-cloud-sidefolders{display:flex; flex-direction:column; gap:1px}
.aion-cloud-sidefolder{display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; border:none; border-radius:9px; background:none; color:#94a3b8; font-size:12.5px; text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aion-cloud-sidefolder:hover{background:rgba(124,58,237,.12); color:#e2e8f0}
.aion-cloud-sidefolder.is-on{background:rgba(124,58,237,.18); color:#c4b5fd; font-weight:600}
.aion-cloud-sideempty{font-size:11.5px; color:#475569; padding:6px 12px}
.aion-cloud-newfolder{margin-top:6px; padding:8px 11px; border:1px dashed rgba(148,163,184,.28); border-radius:10px; background:none; color:#7c8aa5; font-size:12px; text-align:left; cursor:pointer}
.aion-cloud-newfolder:hover{border-color:rgba(124,58,237,.5); color:#c4b5fd}
.aion-cloud-side-storage{margin-top:auto; padding:14px 10px 4px; border-top:1px solid rgba(148,163,184,.12)}
/* ----- Main ----- */
.aion-cloud-main{flex:1; min-width:0; display:flex; flex-direction:column}
.aion-cloud .aion-documents-topbar{border-bottom:1px solid rgba(148,163,184,.1)}
.aion-cloud .aion-documents-search-wrap{flex:1; max-width:460px}
.aion-cloud-topactions{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end}
/* „In neuem Tab öffnen": reiner Icon-Knopf neben dem Schließen-Kreuz */
.aion-cloud-newtab{padding:8px 10px; flex:0 0 auto !important}
.aion-cloud-newtab svg{display:block}
.aion-cloud-filterbar{display:flex; align-items:center; gap:12px; padding:10px 20px 4px}
.aion-cloud-chips{display:flex; gap:8px; flex-wrap:wrap; flex:1; overflow-x:auto}
.aion-cloud-chip{padding:5px 13px; border-radius:999px; border:1px solid rgba(148,163,184,.16); background:none; color:#94a3b8; font-size:12px; cursor:pointer; white-space:nowrap; transition:.12s}
.aion-cloud-chip:hover{color:#e2e8f0; border-color:rgba(124,58,237,.4)}
.aion-cloud-chip.is-on{background:rgba(124,58,237,.22); border-color:rgba(124,58,237,.55); color:#c4b5fd; font-weight:600}
.aion-cloud .aion-documents-breadcrumb{padding:12px 20px 0}
.aion-cloud .aion-documents-body{flex:1; overflow-y:auto; padding:8px 20px 24px; position:relative}

/* ----- Rubberband-Auswahl (Aufziehen im Leerraum, Explorer-artig) ----- */
/* Bezugsrahmen ist .aion-documents-body (position:relative oben) — das Rechteck
   scrollt dadurch mit dem Inhalt mit. z-index unter der Auswahlleiste (30). */
.aion-fm-rubberband{
    position:absolute;
    z-index:20;
    pointer-events:none;
    border:1px solid rgba(124,58,237,.9);
    background:rgba(124,58,237,.16);
    border-radius:4px;
}
/* Waehrend des Zugs keine Textselektion und kein Hover-Flackern */
.aion-documents-overlay.is-rubberbanding{user-select:none; -webkit-user-select:none}
.aion-documents-overlay.is-rubberbanding .aion-doc-tile,
.aion-documents-overlay.is-rubberbanding .aion-doc-row{cursor:default}

/* ----- Drag & Drop: Dateien in Ordner ziehen ----- */
.aion-doc-tile[draggable="true"],
.aion-doc-row[draggable="true"]{cursor:grab}
.aion-documents-overlay.is-dragging .aion-doc-tile.is-selected,
.aion-documents-overlay.is-dragging .aion-doc-row.is-selected{opacity:.5}
/* Ziehbild (Anzahl der mitwandernden Elemente) */
.aion-fm-dragghost{
    position:fixed; top:-1000px; left:-1000px;
    padding:7px 13px; border-radius:999px;
    background:#7c3aed; color:#fff;
    font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
/* Aktives Ablageziel: Seitenleisten-Ordner, „Alle Dateien" und Ordner-Kacheln */
.aion-cloud-sidefolder.is-dropzone,
.aion-cloud-navitem.is-dropzone{
    background:rgba(124,58,237,.28);
    box-shadow:inset 0 0 0 1px rgba(124,58,237,.7);
    color:#fff;
}
.aion-doc-tile.aion-fm-folder.is-dropzone,
.aion-doc-row.aion-fm-folder.is-dropzone{
    border-color:rgba(124,58,237,.85);
    background:rgba(124,58,237,.18);
    transform:scale(1.02);
}
/* ----- ⋯-Button (immer sichtbar) ----- */
.aion-doc-more{width:30px; height:30px; border-radius:9px; border:none; background:rgba(71,85,105,.18); color:#94a3b8; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s}
.aion-doc-more:hover{background:rgba(124,58,237,.3); color:#fff}
.aion-cloud .aion-doc-tile-actions{position:absolute; top:8px; right:8px; opacity:.82; background:none; box-shadow:none; padding:0; border-radius:0; gap:0}
.aion-cloud .aion-doc-tile:hover .aion-doc-tile-actions{opacity:1}
.aion-cloud .aion-doc-row-actions{display:flex; align-items:center; background:none; box-shadow:none; padding:0; gap:0}
/* ----- Kacheln im Cloud-Look ----- */
.aion-cloud .aion-documents-grid{grid-template-columns:repeat(auto-fill,minmax(166px,1fr)); gap:14px}
.aion-cloud .aion-doc-tile{position:relative; background:#111a30; border:1px solid rgba(148,163,184,.14); border-radius:16px; padding:18px 12px 14px; text-align:center; transition:.15s}
.aion-cloud .aion-doc-tile:hover{border-color:rgba(124,58,237,.5); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35)}
.aion-cloud .aion-doc-tile-main{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; background:none; border:none; cursor:pointer; color:inherit}
.aion-cloud .aion-doc-tile-title{font-size:12.5px; font-weight:600; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.aion-cloud .aion-doc-tile-sub{font-size:10.5px; color:#64748b}
.aion-cloud .aion-documents-section-label{font-size:10.5px; font-weight:700; letter-spacing:.07em; color:#64748b; text-transform:uppercase; padding:6px 2px 2px}
/* ----- Light-Theme ----- */
html.theme-light .aion-documents-shell.aion-cloud{background:#f4f6fb; color:#0f172a}
html.theme-light .aion-cloud-side{background:#eef2f8; border-right-color:#dbe2ec}
html.theme-light .aion-cloud-navitem,html.theme-light .aion-cloud-sidefolder{color:#475569}
html.theme-light .aion-cloud-navitem:hover,html.theme-light .aion-cloud-sidefolder:hover{background:rgba(124,58,237,.1); color:#0f172a}
html.theme-light .aion-cloud-brandtxt span,html.theme-light .aion-cloud-navlabel{color:#94a3b8}
html.theme-light .aion-cloud .aion-doc-tile{background:#fff; border-color:#e2e8f0}
html.theme-light .aion-cloud .aion-doc-tile-title{color:#0f172a}
html.theme-light .aion-doc-more{background:#e8edf5; color:#475569}
html.theme-light .aion-cloud-chip{color:#475569; border-color:#d3dbe6}
/* ----- Responsive bis 320px ----- */
@media (max-width:768px){
  .aion-documents-shell.aion-cloud{flex-direction:column; width:100vw; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border-radius:0}
  .aion-cloud-side{width:auto; flex-direction:row; align-items:center; gap:8px; overflow-x:auto; padding:10px 12px; border-right:none; border-bottom:1px solid rgba(148,163,184,.12)}
  .aion-cloud-brand{padding:0 6px 0 2px}
  .aion-cloud-navlabel,.aion-cloud-side-storage,.aion-cloud-newfolder{display:none}
  .aion-cloud-nav{flex-direction:row}
  .aion-cloud-sidefolders{flex-direction:row; gap:6px}
  .aion-cloud-sidefolder{padding-left:11px !important; border:1px solid rgba(148,163,184,.16); border-radius:999px}
  /* Auf dem Handy gibt es keine sinnvollen Tabs — Knopf raus, Platz sparen */
  .aion-cloud-newtab{display:none}
  .aion-cloud .aion-documents-topbar{flex-wrap:wrap; padding:12px 14px}
  .aion-cloud .aion-documents-search-wrap{order:-1; flex:1 1 100%; max-width:none}
  .aion-cloud-topactions{width:100%; justify-content:flex-start}
  .aion-cloud .aion-documents-body,.aion-cloud-filterbar,.aion-cloud .aion-documents-breadcrumb{padding-left:14px; padding-right:14px}
  .aion-cloud .aion-documents-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-width:420px){
  .aion-cloud .aion-documents-grid{grid-template-columns:1fr 1fr; gap:10px}
  .aion-cloud-topactions{flex-wrap:wrap; gap:7px}
  .aion-cloud-topactions .aion-letter-studio-btn{flex:1; justify-content:center; font-size:11.5px; padding:8px 8px}
}
@media (max-width:340px){
  .aion-cloud-brandtxt{display:none}
  .aion-cloud .aion-doc-tile{padding:14px 8px 12px}
}

/* Datei-Viewer: Download-Link (a) weiß statt Standard-Linkfarbe */
.aion-fv-overlay a.aion-letter-studio-btn,
.aion-fv-fallback a.aion-letter-studio-btn{color:#fff !important;}

/* ────────────────────────────────────────────────────────────────────────
   Cloud auf schmalen Geräten – ausgelegt bis hinunter auf 320 px.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* Die Ordnerknöpfe erben width:100% aus der senkrechten Seitenleiste. In der
     waagerechten Leiste (ab hier) wurde daraus je Knopf die volle Leisten-
     breite: gemessen 729 px pro Ordner bei 320 px Bildschirm – man musste pro
     Ordner einmal komplett durchwischen, und sichtbar war immer nur einer. */
  .aion-cloud-sidefolder{width:auto; flex:0 0 auto; max-width:9.5rem}
  /* Die Ordnerleiste scrollt waagerecht (bei 320 px: 920 px Inhalt auf 320 px
     Sicht). Ohne Hinweis sah der angeschnittene letzte Ordner nach kaputtem
     Layout aus – „der Dateipfad oben ist abgeschnitten". Weiche Kante rechts
     zeigt, dass es weitergeht; Einrasten verhindert, dass ein Ordner mitten
     im Wort stehen bleibt. */
  .aion-cloud-side{
    scroll-snap-type:x proximity;
    scroll-padding-left:10px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .aion-cloud-side::-webkit-scrollbar{display:none}
  .aion-cloud-nav,.aion-cloud-sidefolder{scroll-snap-align:start}
}
@media (max-width:400px){
  .aion-cloud-side{gap:6px; padding:8px 10px}

  .aion-cloud-sidefolder{padding:7px 11px !important; font-size:12px; max-width:8rem}
  .aion-cloud-sidefolders{gap:5px}
  /* Aktionsknöpfe: gleich hoch und nie mitten im Wort umbrechen */
  .aion-cloud-topactions{align-items:stretch}
  .aion-cloud-topactions .aion-letter-studio-btn{padding:8px 9px; line-height:1.25}
  /* Trefferflächen auf mind. 34 px – vorher 28–31 px */
  .aion-cloud-chip{padding:7px 12px}
  .aion-fm-crumb{padding:6px 9px}
  .aion-documents-view-btn{width:34px; height:34px}
  .aion-doc-more{width:34px; height:34px}
  /* Etwas mehr Inhalt pro Bildschirm */
  /* Die Statuszeile hält per min-height Platz frei, damit das Raster beim
     Erscheinen einer Meldung nicht springt. Leer kostete das 30 px direkt
     über dem Inhalt – bei 320 px ist das eine halbe Kachelreihe. Nur hier
     eingeklappt; ab 401 px bleibt die sprungfreie Reserve. */
  .aion-cloud .aion-documents-status:empty{display:none}
  .aion-cloud .aion-documents-grid{gap:9px}
  .aion-cloud .aion-doc-tile-main{padding:13px 11px}
  .aion-cloud .aion-documents-body,
  .aion-cloud .aion-cloud-filterbar,
  .aion-cloud .aion-documents-breadcrumb{padding-left:11px; padding-right:11px}
  .aion-cloud .aion-documents-topbar{padding:10px 11px}
}

/* ────────────────────────────────────────────────────────────────────────
   Cloud auf schmalen Geräten, zweiter Durchgang: weniger Bedienleisten-Höhe.
   Vorher gingen bei 320 px rund 300 px für Leisten drauf, bevor die erste
   Kachel kam. Keine eigene Kopfzeile – die Ordnerleiste ist die oberste Zeile
   und das Schließen-X bleibt in der Aktionszeile.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  /* Chips bleiben umbrechend, NICHT scrollbar: die fünf Filter sind
     Hauptbedienelemente, versteckte Optionen hinter einer Wischgeste sind
     schlechter als eine zweite Zeile. Sie werden nur kompakter. */
  .aion-cloud-chip{padding:6px 10px; font-size:11.5px}
  /* Der Ansichts-Umschalter darf die Chips nicht anschneiden. */
  .aion-cloud-filterbar{align-items:flex-start}
  .aion-documents-view{flex:0 0 auto; margin-left:auto}
  /* Schließen-Knopf schmaler, damit "Neues Dokument" einzeilig bleibt. */
  .aion-cloud-topactions [data-docs-action="close"]{width:36px !important; height:36px !important}
  .aion-cloud-topactions .aion-letter-studio-btn{padding:8px 10px}
  /* Brotkrume und Filterzeile enger an den Inhalt */
  .aion-cloud .aion-documents-breadcrumb{padding-top:8px; padding-bottom:2px}
  .aion-cloud-filterbar{padding-top:6px; padding-bottom:8px; gap:8px}
  .aion-cloud .aion-documents-topbar{gap:8px}
  .aion-cloud .aion-documents-search-wrap{margin-bottom:0}
}

/* ────────────────────────────────────────────────────────────────────────
   Schmale Geräte: Kopfzeile + Ordnerbaum hinter einem Knopf.
   Der waagerechte Ordnerstreifen ist raus – bei 320 px passte immer nur ein
   Ordner ins Bild, man musste pro Ordner einmal komplett durchwischen.
   ──────────────────────────────────────────────────────────────────────── */
.aion-cloud-mhead{display:none}
@media (max-width:768px){
  .aion-cloud-mhead{
    display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:9px 12px;
    border-bottom:1px solid rgba(148,163,184,.14); background:rgba(15,23,42,.5);
  }
  .aion-cloud-mtree{
    flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
    border:1px solid rgba(148,163,184,.2); border-radius:10px;
    background:rgba(124,58,237,.14); color:#c4b5fd; cursor:pointer; transition:.15s;
  }
  .aion-cloud-mtree:hover,.aion-cloud-mtree[aria-expanded="true"]{
    background:rgba(124,58,237,.3); border-color:rgba(167,139,250,.55); color:#ede9fe;
  }
  .aion-cloud-mtitle{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.2}
  .aion-cloud-mtitle strong{font-size:.95rem; font-weight:700; color:#e2e8f0; letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* Groesse kommt zentral aus aion-chat.css (36px) - hier nur die Position. */
  .aion-cloud-mhead .aiory-close{flex:0 0 auto}

  /* Streifen weg – der Baum kommt per Knopf. */
  .aion-cloud-side{display:none}
  .aion-cloud-brand{display:none}
  .aion-cloud-topactions [data-docs-action="close"]{display:none !important}

  /* Aufgeklappter Ordnerbaum: die vorhandene Seitenleiste, wieder senkrecht. */
  .aion-cloud.cloud-tree-open .aion-cloud-side{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    width:auto; flex:0 0 auto; max-height:min(58vh,430px);
    overflow-y:auto; overflow-x:hidden;
    padding:10px 12px 12px; border-bottom:1px solid rgba(148,163,184,.14);
    background:rgba(15,23,42,.62);
    -webkit-mask-image:none; mask-image:none; scroll-snap-type:none;
  }
  .cloud-tree-open .aion-cloud-nav{flex-direction:column; gap:2px}
  .cloud-tree-open .aion-cloud-navitem{width:100%; justify-content:flex-start}
  .cloud-tree-open .aion-cloud-navlabel{
    display:block; margin:10px 0 4px; padding:0 2px;
    font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7c8aa0;
  }
  .cloud-tree-open .aion-cloud-sidefolders{flex-direction:column; gap:2px}
  .cloud-tree-open .aion-cloud-sidefolder{
    width:100% !important; max-width:none !important; flex:0 0 auto;
    justify-content:flex-start; border-radius:9px; padding:10px 11px !important; font-size:13px;
  }
  .cloud-tree-open .aion-cloud-newfolder{display:flex; margin-top:8px; width:100%; justify-content:flex-start}
}
html.theme-light .aion-cloud-mhead{background:#f1f5f9; border-bottom-color:#dbe3ec}
html.theme-light .aion-cloud-mhead strong{color:#0f172a}
html.theme-light .aion-cloud.cloud-tree-open .aion-cloud-side{background:#f8fafc}

/* Filter als Auswahlfeld – nur auf schmalen Geräten; am Desktop bleiben die Chips. */
.aion-cloud-filtersel{display:none}
@media (max-width:768px){
  /* Reihenfolge in der Werkzeugzeile: erst die beiden Aktionen, dann die Suche.
     Die Aktionen sind das, was man auf dem Handy zuerst braucht. */
  .aion-cloud-topactions{order:-2; width:100%; justify-content:stretch}
  .aion-cloud .aion-documents-search-wrap{order:-1}
  .aion-cloud-topactions .aion-letter-studio-btn{flex:1 1 0; justify-content:center}

  /* Chips raus, Auswahlfeld rein: fünf Chips brauchten zwei Zeilen. */
  .aion-cloud-chips{display:none}
  .aion-cloud-filtersel{
    display:block; flex:1 1 auto; min-width:0; max-width:15rem;
    appearance:none; -webkit-appearance:none;
    padding:9px 32px 9px 12px; border-radius:999px;
    border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.6); color:#e2e8f0;
    font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#a78bfa 50%),linear-gradient(135deg,#a78bfa 50%,transparent 50%);
    background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
    background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  }
  .aion-cloud-filtersel:focus-visible{outline:2px solid rgba(167,139,250,.7); outline-offset:2px}
  .aion-cloud-filtersel option{background:#0e1426; color:#e2e8f0}
  .aion-cloud-filterbar{align-items:center; gap:10px}
}
html.theme-light .aion-cloud-filtersel{background-color:#fff; color:#0f172a; border-color:#d3dbe6}
html.theme-light .aion-cloud-filtersel option{background:#fff; color:#0f172a}

/* ════════════════════════════════════════════════════════════════════════
   Cloud-Feinschliff 26.07.2026 — Desktop / Tablet / Handy
   Geprüft mit Chromium bei 320, 390, 768, 834, 1024, 1280 und 1440 px.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Dateinamen zweizeilig statt abgeschnitten -----------------------
   Der schwerwiegendste Befund: in der Kachelansicht bekam der Name genau EINE
   Zeile mit Ellipse. Real gemessen wurden daraus "Bewerbung Ansch…",
   "Quartalsbericht Q…", "Vertrag_Mietwoh…", "Rechnung_2026_…" — vier Dateien,
   die man nicht mehr auseinanderhalten kann, obwohl in der Kachel darunter
   Platz frei war. Zwei Zeilen lösen praktisch alle realen Dateinamen auf.
   overflow-wrap:anywhere ist nötig, weil an Unterstrichen sonst nicht
   umbrochen wird (Vertrag_Mietwohnung_Backnang_2026.pdf ist EIN Wort). */
.aion-cloud .aion-doc-tile-title{
  white-space:normal;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-height:1.32; overflow-wrap:anywhere; text-overflow:clip;
}

/* ---- 2. Ordnerkacheln kompakter ---------------------------------------
   Ohne den "Ordner"-Untertitel (raus in letter-studio.js) darf die Kachel
   enger sitzen. Vorher war eine Ordnerkachel auf dem Handy 140 px hoch für
   ein 24-px-Symbol und ein Wort. */
.aion-cloud .aion-doc-tile{padding:14px 10px 12px}
.aion-cloud .aion-fm-folder .aion-doc-tile-main{gap:6px}

/* ---- 3. Listenansicht: echte Spalten am Desktop ------------------------
   Vorher: 86 px hohe Zeilen, deren rechte ~55 % komplett leer waren — auf
   1440×900 passten SIEBEN Dateien auf den Bildschirm. Jetzt sitzen Typ,
   Größe und Zeit rechts in Spalten, die Zeile ist einzeilig. */
@media (min-width:769px){
  .aion-cloud .aion-doc-row-main{padding:6px 14px; gap:13px}
  .aion-cloud .aion-doc-row-info{flex-direction:row; align-items:center; gap:18px}
  /* Der Zeilenabstand der Liste war auf zweizeilige Zeilen ausgelegt. */
  .aion-cloud .aion-documents-list{gap:4px}
  .aion-cloud .aion-doc-row-title{flex:1 1 auto; min-width:0; font-size:.875rem}
  .aion-cloud .aion-doc-row-sub{
    flex:0 0 auto; display:flex; align-items:center; gap:18px;
    max-width:52%; font-size:.78rem;
  }
  /* Feste Mindestbreiten lassen die Spalten über die Zeilen hinweg fluchten.
     Dateien haben immer dieselben drei Teile (Typ · Größe · Zeit); gespeicherte
     Dokumente haben als dritten Teil einen Textauszug — der wird gekappt statt
     die Spalten zu sprengen. */
  .aion-cloud .aion-doc-meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .aion-cloud .aion-doc-meta--0{min-width:50px}
  .aion-cloud .aion-doc-meta--1{min-width:72px; text-align:right}
  .aion-cloud .aion-doc-meta--2{min-width:54px; text-align:right}
}


/* ---- 4. Listenzeilen auf dem Handy: Name zweizeilig --------------------
   Gleiche Ursache wie bei den Kacheln — "Vertrag_Mietwohnung_Backn…". In der
   86 px hohen Zeile ist für die zweite Zeile ohnehin Platz. */
@media (max-width:768px){
  /* Auf schmalen Geräten die gewohnte "DOCX · 22,7 KB · 17:24"-Zeile: die Teile
     sind jetzt einzelne Elemente, der Trenner kommt daher aus CSS. Am Desktop
     trennen die Spaltenabstände, dort bleibt er weg. */
  .aion-cloud .aion-doc-meta + .aion-doc-meta::before{
    content:'·'; margin:0 6px; opacity:.55;
  }
  .aion-cloud .aion-doc-row-title{
    white-space:normal;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    line-height:1.3; overflow-wrap:anywhere; text-overflow:clip;
  }
  .aion-cloud .aion-doc-row-main{padding:9px 12px}
}

/* ---- 5. Speicheranzeige einzeilig -------------------------------------
   "479.2 KB von 25600.0 MB belegt (0%)" brach auf zwei Zeilen um und mischte
   Einheiten. Text kommt jetzt kurz aus dem JS ("479 KB von 25 GB"). */
.aion-cloud .aion-storage-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- 6. Tablets behalten die Seitenleiste ------------------------------
   Der Umschaltpunkt lag bei 840 px — iPad hochkant (834 px) bekam damit das
   TELEFON-Layout: keine Ordner-Seitenleiste, Aktionsknöpfe über die volle
   Breite gestapelt, Filter als Auswahlfeld. Gemessen gingen dort 303 px für
   Bedienleisten drauf, bevor die erste Kachel kam — MEHR als auf dem Handy
   (268 px), obwohl doppelt so viel Platz da ist. Die Seitenleiste ist nur
   234 px breit; bei 800 px bleiben also über 540 px für den Inhalt (drei
   Kachelspalten). Der Umschaltpunkt sitzt deshalb jetzt bei 768 px — echte
   Tablets bekommen das Desktop-Layout, Telefone das optimierte schmale. */

/* ---- 7. Kleine Tablets/große Telefone: eine Werkzeugzeile statt zwei ----
   Zwischen 560 und 768 px ist Platz für Suche UND Aktionen nebeneinander.
   Gestapelt kosteten sie 70 px Höhe ohne Not. */
@media (min-width:560px) and (max-width:768px){
  .aion-cloud .aion-documents-search-wrap{order:0; flex:1 1 auto; max-width:none}
  .aion-cloud-topactions{order:0; width:auto; flex:0 0 auto; justify-content:flex-end}
  .aion-cloud-topactions .aion-letter-studio-btn{flex:0 0 auto}
  .aion-cloud .aion-documents-topbar{flex-wrap:nowrap}
}

/* ---- 8. Schmale Desktop-/Tabletbreiten: Typspalte weicht dem Namen -------
   Bei 834 px (iPad hochkant) drückte die dreispaltige Meta-Spalte sechs von
   zwölf Dateinamen in die Ellipse. Die Typspalte ist dort verzichtbar: das
   Dateisymbol trägt den Typ bereits als Plakette (DOCX/PNG/XLSX). */
@media (min-width:769px) and (max-width:1009px){
  .aion-cloud .aion-doc-meta--0{display:none}
  .aion-cloud .aion-doc-row-sub{max-width:34%; gap:12px}
  .aion-cloud .aion-doc-meta--1{min-width:62px}
  .aion-cloud .aion-doc-meta--2{min-width:48px}
}

/* ---- 9. Werkzeugzeile bei schmalem Desktop/Tablet ----------------------
   Bei 834 px teilen sich Suche, „Hochladen", „Neues Dokument" und das ✕ eine
   Zeile — für das Suchfeld blieben ~180 px und der Platzhalter brach mitten
   im Wort ab („Dateien durchsucher"). Die beiden Aktionen werden hier etwas
   kompakter, damit das Suchfeld seinen Platzhalter vollständig zeigt. */
@media (min-width:769px) and (max-width:1009px){
  .aion-cloud-topactions{gap:7px}
  .aion-cloud-topactions .aion-letter-studio-btn{padding:8px 12px; font-size:12.5px}
  .aion-cloud .aion-documents-search-wrap{min-width:210px}
  .aion-cloud .aion-documents-search-wrap input{font-size:13px}
}

/* ---- 10. Helle Ansicht: Listenansicht und Suchfeld nachgezogen ----------
   Die hellen Regeln deckten bisher nur Kacheln, Seitenleiste und Chips ab. In
   der LISTENANSICHT blieben die Zeilen auf ihrem dunklen Grundton stehen:
   graue Balken auf hellem Grund, Dateiname in Fast-Weiß (#f1f5f9) auf Grau —
   praktisch unlesbar. Ebenso das Suchfeld und die Brotkrume. */
html.theme-light .aion-cloud .aion-doc-row{background:#fff; border-color:#e2e8f0}
html.theme-light .aion-cloud .aion-doc-row:hover{background:#f8fafc; border-color:rgba(124,58,237,.4)}
html.theme-light .aion-cloud .aion-doc-row-title{color:#0f172a}
html.theme-light .aion-cloud .aion-doc-row-sub,
html.theme-light .aion-cloud .aion-doc-meta,
html.theme-light .aion-cloud .aion-doc-tile-sub{color:#64748b}
html.theme-light .aion-cloud .aion-documents-search-wrap input{
  background:#fff; border-color:#d3dbe6; color:#0f172a;
}
html.theme-light .aion-cloud .aion-documents-search-wrap input::placeholder{color:#94a3b8}
html.theme-light .aion-cloud .aion-documents-breadcrumb,
html.theme-light .aion-cloud .aion-fm-crumb{color:#475569}
html.theme-light .aion-cloud .aion-documents-section-label{color:#94a3b8}
html.theme-light .aion-cloud .aion-storage-text{color:#64748b}
html.theme-light .aion-cloud .aion-documents-topbar{border-bottom-color:#dbe3ec}
/* „Hochladen" ist der Zweitknopf und erbte seinen dunklen Grundton — auf hellem
   Grund ein grauer Klotz. Nur in der Cloud-Werkzeugzeile umfärben, damit andere
   Oberflächen mit demselben Knopf unberührt bleiben. Der Primärknopf („Neues
   Dokument", violett) bleibt wie er ist. */
html.theme-light .aion-cloud-topactions .aion-letter-studio-btn:not(.aion-letter-studio-btn--primary){
  background:#fff; border-color:#d3dbe6; color:#334155;
}
html.theme-light .aion-cloud-topactions .aion-letter-studio-btn:not(.aion-letter-studio-btn--primary):hover{
  background:#f1f5f9; border-color:#c4b5fd; color:#0f172a;
}

/* ════════════════════════════════════════════════════════════════════════
   Code-Ansicht auf dem Handy — 26.07.2026
   Ausgangslage gemessen bei 390x844: Kopfzeile 125 px, Chat 331 px, für den
   Editor blieben 324 px = 38 % des Bildschirms (bei 320x760 sogar 239 px).
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Code-Bühne randlos (gilt für ALLE Breiten) ---------------------
   Der Scroll-Fix der DOKUMENT-Bühne setzt `padding:32px 26px !important` und
   trifft damit auch Code und Tabelle — die Regel `padding:0` der Code-Ansicht
   hat weniger Spezifität und verlor. Ergebnis: der Code-Editor stand mit je
   26 px Rand und 32 px Kopfabstand im Nichts (gemessen x=26, w=338 bei 390 px
   Bildschirm). Code braucht keinen Papierrand — er bekommt die volle Fläche. */
#aion-letter-studio[data-view="code"] .aion-letter-studio-stage,
#aion-letter-studio[data-view="table"] .aion-letter-studio-stage {
    padding: 0 !important;
}

@media (max-width: 760px) {
  /* ---- 2. Kopfzeile einzeilig statt gestapelt -------------------------
     Ab 1100 px stapelt `.aion-letter-studio-topbar-stage` Titel ÜBER Werkzeuge
     (1 Spalte) — auf dem Handy kostete das allein 92 px. Titel und Werkzeuge
     passen nebeneinander, wenn der Titel schrumpfen darf. */
  #aion-letter-studio[data-view="code"] .aion-letter-studio-topbar {
      gap: 8px; padding: 7px 10px;
  }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-topbar-stage {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
  }
  /* min-width:0 ist Pflicht, sonst weigert sich das Grid-Element zu schrumpfen
     und die Werkzeuge werden aus der Zeile gedrängt. */
  #aion-letter-studio[data-view="code"] .aion-letter-studio-title { min-width: 0; }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-title strong { font-size: .88rem; }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-title span { font-size: .68rem; margin-top: 0; }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-toolbar {
      justify-self: end; padding: 3px; gap: 3px;
  }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-actions { flex-wrap: nowrap; }
}

@media (max-width: 400px) {
  /* Bei 320 px reicht die Breite für Titel + Werkzeuge + „Speichern" nicht mehr.
     Der Dateiname steht ohnehin im Titel der Speichern-Maske — hier weicht die
     Unterzeile, damit die Zeile einzeilig bleibt. */
  #aion-letter-studio[data-view="code"] .aion-letter-studio-title span { display: none; }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-topbar { padding: 6px 8px; }
}

/* ---- 3. Code-Editor darf die ganze Fläche nutzen ----------------------
   Ohne min-height:0 wächst der Monaco-Container nicht in die freie Höhe. */
@media (max-width: 760px) {
  #aion-letter-studio[data-view="code"] .aion-letter-studio-main { min-height: 0; }
  #aion-letter-studio[data-view="code"] .aion-letter-studio-stage { min-height: 0; }
  /* Der schwebende Knopf zum Aufklappen des Chats gehört nach UNTEN rechts -
     oben rechts (Grundregel) lag er über der ersten Codezeile und genau dort,
     wo Monaco seine Bildlaufleiste hat.
     ⚠️ Zwei Fallen: (1) `aion-chat.css` lädt SPÄTER als diese Datei, deshalb
     !important. (2) Ohne `top:auto` gewinnt das `top:12px` der Grundregel gegen
     `bottom` - das Element bliebe oben kleben.
     Form wie der Chat-Knopf des PDF-Editors: rund, Daumen-freundlich. */
  #aion-letter-studio .aiory-chat-reopen {
      top: auto !important;
      bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
      right: 14px !important;
      width: 46px !important; height: 46px !important;
      border-radius: 50% !important;
  }
}