/*
|--------------------------------------------------------------------------
| APOM Chat – Messenger Design
|--------------------------------------------------------------------------
*/

:root {
    --chat-background: #eef1f5;
    --chat-panel: #ffffff;
    --chat-panel-soft: #f7f8fa;
    --chat-border: #dfe3e8;
    --chat-text: #1f2933;
    --chat-text-soft: #667085;
    --chat-primary: #a1a1a1;
    --chat-primary-hover: #8f8f8f;
    --chat-primary-soft: #eeeeee;
    --chat-danger: #c62828;
    --chat-success: #18864b;
    --chat-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
    --chat-radius: 18px;
    --chat-radius-small: 12px;
    --chat-sidebar-width: 340px;
    --chat-header-height: 76px;
    --chat-composer-height: 76px;
}

/*
|--------------------------------------------------------------------------
| Grundlayout
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--chat-background);
    color: var(--chat-text);
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}

button,
input,
textarea {
    outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(161, 161, 161, 0.22);
}

[hidden] {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Messenger-Hauptfenster
|--------------------------------------------------------------------------
*/

.chat-app {
    display: grid;
    grid-template-columns: var(--chat-sidebar-width) minmax(0, 1fr);

    width: min(1180px, calc(100% - 32px));
    height: min(820px, calc(100vh - 32px));
    min-height: 560px;

    margin: 16px auto;

    overflow: hidden;

    background: var(--chat-panel);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    box-shadow: var(--chat-shadow);
}

/*
|--------------------------------------------------------------------------
| Conversation-Seitenleiste
|--------------------------------------------------------------------------
*/

.conversation-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;

    background: var(--chat-panel);
    border-right: 1px solid var(--chat-border);
}

.sidebar-header {
    flex: 0 0 auto;
    padding: 18px;
    border-bottom: 1px solid var(--chat-border);
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.sidebar-brand-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    font-size: 22px;

    background: #ffffff;
    border-radius: 14px;
}

.sidebar-brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.sidebar-title {
    margin: 0;

    font-size: 19px;
    line-height: 1.2;
    font-weight: 750;
}

.sidebar-subtitle {
    margin: 4px 0 0;

    font-size: 13px;
    color: var(--chat-text-soft);
}

.icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;
    padding: 0;

    cursor: pointer;

    font-size: 24px;
    line-height: 1;
    color: var(--chat-text);

    background: transparent;
    border-radius: 50%;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.icon-button:hover {
    background: var(--chat-panel-soft);
}

.icon-button:active {
    transform: scale(0.96);
}

.conversation-search {
    margin-top: 16px;
}

.conversation-search-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;

    color: var(--chat-text);

    background: var(--chat-panel-soft);
    border: 1px solid transparent;
    border-radius: 12px;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.conversation-search-input::placeholder {
    color: #98a2b3;
}

.conversation-search-input:focus {
    background: #ffffff;
    border-color: var(--chat-primary);
}

.sidebar-status {
    padding: 18px;

    font-size: 14px;
    color: var(--chat-text-soft);
}

.conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.conversation-list::-webkit-scrollbar,
.message-area::-webkit-scrollbar {
    width: 8px;
}

.conversation-list::-webkit-scrollbar-thumb,
.message-area::-webkit-scrollbar-thumb {
    background: #cfd5dc;
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Conversation-Eintrag
|--------------------------------------------------------------------------
*/

.conversation-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 74px;
    padding: 12px 16px;

    text-align: left;
    cursor: pointer;

    color: var(--chat-text);
    background: transparent;
    border-bottom: 1px solid #edf0f3;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.conversation-item:hover {
    background: var(--chat-panel-soft);
}

.conversation-item.is-active {
    background: var(--chat-primary-soft);
    border-bottom-color: #d7d7d7;
}

.conversation-item-main {
    min-width: 0;
}

.conversation-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.conversation-item-title {
    min-width: 0;
    overflow: hidden;

    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conversation-item-time {
    flex: 0 0 auto;

    font-size: 11px;
    color: var(--chat-text-soft);
}

.conversation-item-preview {
    margin-top: 5px;
    overflow: hidden;

    font-size: 13px;
    line-height: 1.3;
    color: var(--chat-text-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conversation-item-badge {
    display: grid;
    place-items: center;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    font-size: 11px;
    font-weight: 800;
    color: #ffffff;

    background: var(--chat-primary);
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.avatar {
    position: relative;

    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    overflow: hidden;

    font-size: 20px;

    background: #e9edf2;
    border-radius: 50%;
}

.avatar-large {
    width: 50px;
    height: 50px;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Chatbereich
|--------------------------------------------------------------------------
*/

.chat-panel {
    min-width: 0;
    min-height: 0;

    background: #f3f5f8;
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%;
    padding: 40px;

    text-align: center;
}

.chat-empty-icon {
    display: grid;
    place-items: center;

    width: 88px;
    height: 88px;

    margin-bottom: 20px;

    font-size: 40px;

    background: #ffffff;
    border: 1px solid var(--chat-border);
    border-radius: 28px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.chat-empty-state h2 {
    margin: 0;

    font-size: 24px;
}

.chat-empty-state p {
    max-width: 460px;
    margin: 12px 0 0;

    line-height: 1.6;
    color: var(--chat-text-soft);
}

.active-conversation {
    display: grid;
    grid-template-rows:
        var(--chat-header-height)
        minmax(0, 1fr)
        auto
        auto;

    height: 100%;
    min-height: 0;
}

/*
|--------------------------------------------------------------------------
| Chatkopf
|--------------------------------------------------------------------------
*/

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    height: var(--chat-header-height);
    padding: 12px 18px;

    background: #ffffff;
    border-bottom: 1px solid var(--chat-border);
}

.chat-header-user {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    gap: 12px;
}

.chat-header-details {
    min-width: 0;
}

.chat-header-title {
    margin: 0;
    overflow: hidden;

    font-size: 17px;
    line-height: 1.25;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-header-status {
    margin: 4px 0 0;
    overflow: hidden;

    font-size: 12px;
    color: var(--chat-text-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-back-button {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Nachrichtenbereich
|--------------------------------------------------------------------------
*/

.message-area {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 22px;

    background:
        linear-gradient(
            rgba(243, 245, 248, 0.94),
            rgba(243, 245, 248, 0.94)
        );
}

.message-loading {
    padding: 16px;

    text-align: center;
    font-size: 14px;
    color: var(--chat-text-soft);
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-row {
    display: flex;
    width: 100%;
}

.message-row.is-own {
    justify-content: flex-end;
}

.message-row.is-foreign {
    justify-content: flex-start;
}

.message-bubble {
    max-width: min(72%, 620px);
    padding: 10px 13px 8px;

    line-height: 1.45;

    background: #ffffff;
    border: 1px solid var(--chat-border);
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.message-row.is-own .message-bubble {
    color: #ffffff;
    background: var(--chat-primary);
    border-color: var(--chat-primary);
    border-radius: 16px 16px 5px 16px;
}

.message-sender {
    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 750;
    color: var(--chat-primary);
}

.message-row.is-own .message-sender {
    display: none;
}

.message-text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;

    margin-top: 5px;

    font-size: 10px;
    color: #98a2b3;
}

.message-row.is-own .message-meta {
    color: rgba(255, 255, 255, 0.78);
}

.message-day-separator {
    align-self: center;

    margin: 10px 0;
    padding: 6px 10px;

    font-size: 11px;
    font-weight: 700;
    color: var(--chat-text-soft);

    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--chat-border);
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Schreibanzeige
|--------------------------------------------------------------------------
*/

.typing-indicator {
    padding: 6px 22px 8px;

    font-size: 12px;
    color: var(--chat-text-soft);

    background: #f3f5f8;
}

/*
|--------------------------------------------------------------------------
| Nachrichteneingabe
|--------------------------------------------------------------------------
*/

.message-form {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;

    min-height: var(--chat-composer-height);
    padding: 12px 16px;

    background: #ffffff;
    border-top: 1px solid var(--chat-border);
}

.composer-button,
.send-message-button {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    cursor: pointer;

    border-radius: 50%;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.composer-button {
    font-size: 24px;
    color: var(--chat-text);
    background: var(--chat-panel-soft);
}

.composer-button:hover {
    background: #e9edf2;
}

.send-message-button {
    font-size: 18px;
    color: #ffffff;
    background: var(--chat-primary);
}

.send-message-button:hover:not(:disabled) {
    background: var(--chat-primary-hover);
}

.send-message-button:active:not(:disabled),
.composer-button:active {
    transform: scale(0.96);
}

.send-message-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.message-input-wrapper {
    min-width: 0;

    background: var(--chat-panel-soft);
    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.message-input-wrapper:focus-within {
    background: #ffffff;
    border-color: var(--chat-primary);
}

.message-input {
    display: block;

    width: 100%;
    min-height: 44px;
    max-height: 140px;

    padding: 11px 14px;

    resize: none;
    overflow-y: auto;

    line-height: 1.45;
    color: var(--chat-text);

    background: transparent;
    border: 0;
}

.message-input::placeholder {
    color: #98a2b3;
}

/*
|--------------------------------------------------------------------------
| Dialog
|--------------------------------------------------------------------------
*/

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(4px);
}

.dialog {
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    background: #ffffff;
    border-radius: 18px;
    box-shadow: var(--chat-shadow);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 18px 20px;

    border-bottom: 1px solid var(--chat-border);
}

.dialog-header h2 {
    margin: 0;
    font-size: 19px;
}

.dialog-form {
    padding: 20px;
}

.dialog-form label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 700;
}

.dialog-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;

    border: 1px solid var(--chat-border);
    border-radius: 10px;
}

.dialog-form input:focus {
    border-color: var(--chat-primary);
}

.dialog-help {
    margin: 10px 0 0;

    font-size: 12px;
    line-height: 1.5;
    color: var(--chat-text-soft);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 20px;
}

.primary-button,
.secondary-button {
    min-height: 42px;
    padding: 9px 16px;

    cursor: pointer;
    font-weight: 700;

    border-radius: 10px;

    transition:
        background-color 0.18s ease,
        opacity 0.18s ease;
}

.primary-button {
    color: #ffffff;
    background: var(--chat-primary);
}

.primary-button:hover {
    background: var(--chat-primary-hover);
}

.secondary-button {
    color: var(--chat-text);
    background: var(--chat-panel-soft);
}

.secondary-button:hover {
    background: #e9edf2;
}

.form-error {
    margin-top: 12px;
    padding: 10px 12px;

    font-size: 13px;
    color: var(--chat-danger);

    background: #fff1f1;
    border: 1px solid #ffd4d4;
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| Toast-Meldung
|--------------------------------------------------------------------------
*/

.chat-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1100;

    max-width: min(380px, calc(100vw - 44px));
    padding: 12px 16px;

    font-size: 14px;
    line-height: 1.45;
    color: #ffffff;

    background: #1f2933;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

.chat-toast.is-error {
    background: var(--chat-danger);
}

.chat-toast.is-success {
    background: var(--chat-success);
}

/*
|--------------------------------------------------------------------------
| Konfigurationswarnung
|--------------------------------------------------------------------------
*/

.configuration-warning {
    position: fixed;
    inset: auto 20px 20px 20px;
    z-index: 1200;

    max-width: 700px;
    margin: auto;
    padding: 16px 18px;

    background: #fff7dc;
    border: 1px solid #f1d67a;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.configuration-warning strong {
    display: block;
    margin-bottom: 6px;
}

.configuration-warning p {
    margin: 0 0 8px;
}

.configuration-warning code {
    display: block;
    overflow-wrap: anywhere;
}

/*
|--------------------------------------------------------------------------
| Hilfsklassen
|--------------------------------------------------------------------------
*/

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    :root {
        --chat-sidebar-width: 300px;
    }

    .chat-app {
        width: calc(100% - 20px);
        height: calc(100vh - 20px);
        margin: 10px auto;
        border-radius: 14px;
    }

    .message-bubble {
        max-width: 82%;
    }
}

/*
|--------------------------------------------------------------------------
| Mobil
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .chat-app {
        display: block;

        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .conversation-sidebar,
    .chat-panel {
        width: 100%;
        height: 100%;
    }

    .conversation-sidebar {
        border-right: 0;
    }

    .chat-panel {
        display: none;
    }

    .chat-app.is-chat-open .conversation-sidebar {
        display: none;
    }

    .chat-app.is-chat-open .chat-panel {
        display: block;
    }

    .mobile-back-button {
        display: inline-grid;
    }

    .sidebar-header {
        padding-top: max(16px, env(safe-area-inset-top));
    }

    .chat-header {
        padding-top: max(10px, env(safe-area-inset-top));
        height: calc(
            var(--chat-header-height) + env(safe-area-inset-top)
        );
    }

    .message-form {
        padding-bottom: max(
            12px,
            env(safe-area-inset-bottom)
        );
    }

    .message-area {
        padding: 16px 12px;
    }

    .message-bubble {
        max-width: 88%;
    }

    .dialog-backdrop {
        align-items: end;
        padding: 0;
    }

    .dialog {
        width: 100%;
        max-height: 90vh;

        border-radius: 18px 18px 0 0;
    }

    .chat-toast {
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 14px;

        max-width: none;
    }
}

/*
|--------------------------------------------------------------------------
| Sehr kleine Geräte
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {
    .sidebar-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .conversation-item {
        padding-left: 14px;
        padding-right: 14px;
    }

    .chat-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-header-title {
        font-size: 15px;
    }

    .avatar-large {
        width: 44px;
        height: 44px;
    }

    .message-form {
        gap: 7px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .composer-button,
    .send-message-button {
        width: 40px;
        height: 40px;
    }
}

/*
|--------------------------------------------------------------------------
| Antworten auf Nachrichten
|--------------------------------------------------------------------------
*/

.reply-preview {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 18px;
    background: #ffffff;
    border-top: 1px solid var(--chat-border);
}

.reply-preview-accent {
    align-self: stretch;
    width: 4px;
    min-height: 38px;
    background: var(--chat-primary);
    border-radius: 999px;
}

.reply-preview-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reply-preview-sender {
    overflow: hidden;
    font-size: 12px;
    color: var(--chat-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reply-preview-text {
    overflow: hidden;
    font-size: 12px;
    color: var(--chat-text-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reply-preview-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    color: var(--chat-text-soft);
    background: transparent;
    border-radius: 50%;
}

.reply-preview-close:hover {
    color: var(--chat-text);
    background: var(--chat-panel-soft);
}

.message-bubble {
    position: relative;
}

.message-reply-button {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transform: translateY(-50%) scale(0.92);
    color: var(--chat-text-soft);
    background: #ffffff;
    border: 1px solid var(--chat-border);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.message-row.is-own .message-reply-button {
    left: -40px;
}

.message-row.is-foreign .message-reply-button {
    right: -40px;
}

.message-row:hover .message-reply-button,
.message-row:focus-within .message-reply-button {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.message-reply-button:hover {
    color: var(--chat-primary);
}

.message-reply-quote {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 7px;
    padding: 7px 9px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    color: inherit;
    background: rgba(15, 23, 42, 0.06);
    border-left: 3px solid var(--chat-primary);
    border-radius: 8px;
}

.message-row.is-own .message-reply-quote {
    background: rgba(255, 255, 255, 0.16);
    border-left-color: rgba(255, 255, 255, 0.82);
}

.message-reply-sender,
.message-reply-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-reply-sender {
    font-size: 11px;
    font-weight: 800;
}

.message-reply-text {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.78;
}

.message-row.is-highlighted .message-bubble {
    animation: apom-message-highlight 1.6s ease;
}

@keyframes apom-message-highlight {
    0%, 100% {
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
    }
    20%, 70% {
        box-shadow: 0 0 0 4px rgba(161, 161, 161, 0.22);
    }
}

@media (hover: none), (max-width: 720px) {
    .message-reply-button {
        position: static;
        display: inline-grid;
        place-items: center;
        float: right;
        margin: 5px 0 0 8px;
        opacity: 0.72;
        pointer-events: auto;
        transform: none;
        color: inherit;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
}

/*
|--------------------------------------------------------------------------
| Nachrichtenaktionen: Antworten, Bearbeiten, Löschen
|--------------------------------------------------------------------------
*/

.message-bubble {
    position: relative;
}

.message-actions {
    position: absolute;
    top: 50%;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.96);

    background: #ffffff;
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);

    transition: opacity 0.16s ease, transform 0.16s ease;
}

.message-row.is-own .message-actions {
    right: calc(100% + 8px);
}

.message-row.is-foreign .message-actions {
    left: calc(100% + 8px);
}

.message-row:hover .message-actions,
.message-row:focus-within .message-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.message-action-button {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    padding: 0;

    cursor: pointer;
    color: var(--chat-text-soft);
    background: transparent;
    border-radius: 50%;

    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}


.message-action-reaction {
    display: none;
}

.message-action-button:hover {
    color: var(--chat-primary);
    background: var(--chat-primary-soft);
    transform: scale(1.06);
}

.message-action-button.is-danger:hover {
    color: var(--chat-danger);
    background: #ffebee;
}

.edit-preview .reply-preview-accent {
    background: var(--chat-success);
}

.message-text {
    min-width: 24px;
}

@media (hover: none), (pointer: coarse) {
    .message-row {
        -webkit-touch-callout: none;
    }

    .message-actions {
        position: absolute;
        top: auto;
        right: 8px !important;
        bottom: 8px;
        left: auto !important;
        z-index: 8;

        gap: 3px;
        margin: 0;
        padding: 4px;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px) scale(0.96);

        background: var(--theme-surface, #ffffff);
        border: 1px solid var(--theme-border, var(--chat-border));
        border-radius: 999px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
    }

    .message-row.is-actions-open .message-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .message-row.is-actions-open .message-bubble {
        padding-bottom: 49px;
    }

    .message-action-button {
        width: 34px;
        height: 34px;
    }

    .message-action-reaction {
        display: inline-grid;
    }

    .message-reaction-add {
        display: none;
    }

    .message-reactions.has-no-reactions {
        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| Externe Bilder per [img]URL[/img]
|--------------------------------------------------------------------------
*/

.message-image-button {
    position: relative;
    display: block;
    width: min(100%, 520px);
    min-height: 96px;
    margin: 7px 0;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    color: inherit;
    background: rgba(15, 23, 42, 0.08);
    border: 0;
    border-radius: 12px;
}

.message-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.message-image-button.is-loaded .message-image {
    opacity: 1;
}

.message-image-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14px;
    font-size: 12px;
    text-align: center;
    opacity: 0.76;
}

.message-image-button.is-loaded .message-image-loading {
    display: none;
}

.message-image-button.has-error {
    min-height: 72px;
    cursor: default;
}

.message-row.is-own .message-image-button {
    background: rgba(255, 255, 255, 0.13);
}

.chat-image-lightbox[hidden] {
    display: none;
}

.chat-image-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 52px 22px 22px;
    background: rgba(3, 7, 18, 0.9);
    backdrop-filter: blur(5px);
}

.chat-image-lightbox-link {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.chat-image-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.chat-image-lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    font-size: 29px;
    line-height: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

body.has-chat-image-lightbox {
    overflow: hidden;
}

/* BBCode, Emoji-Picker und Nachrichtenreaktionen */
.message-text strong { font-weight: 700; }
.message-text em { font-style: italic; }
.message-text u { text-decoration: underline; }
.message-text s { text-decoration: line-through; }
.bbcode-link { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.bbcode-quote { margin: .45rem 0; padding: .5rem .7rem; border-left: 3px solid currentColor; background: rgba(127,127,127,.12); border-radius: 0 .45rem .45rem 0; }
.bbcode-code { margin: .45rem 0; padding: .7rem; max-width: 100%; overflow: auto; border-radius: .55rem; background: rgba(20,20,24,.92); color: #f4f4f5; white-space: pre-wrap; word-break: break-word; }
.bbcode-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.bbcode-video { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 9; margin-top: .45rem; overflow: hidden; border-radius: .65rem; background: #111; }
.bbcode-video iframe { width: 100%; height: 100%; border: 0; }
.bbcode-native-video { display: block; width: min(100%, 520px); max-height: 420px; margin-top: .45rem; border-radius: .65rem; background: #111; }

.emoji-picker { position: fixed; z-index: 10020; width: 292px; max-width: calc(100vw - 16px); padding: .55rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; border: 1px solid rgba(127,127,127,.25); border-radius: .8rem; background: var(--chat-surface, #fff); box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.emoji-picker[hidden] { display: none !important; }
.emoji-picker-item { appearance: none; border: 0; border-radius: .45rem; background: transparent; min-width: 34px; min-height: 34px; font-size: 1.25rem; cursor: pointer; }
.emoji-picker-item:hover, .emoji-picker-item:focus-visible { background: rgba(127,127,127,.15); transform: scale(1.08); }

.message-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.message-reaction, .message-reaction-add { appearance: none; border: 1px solid rgba(127,127,127,.25); border-radius: 999px; background: rgba(255,255,255,.65); padding: .18rem .45rem; min-height: 26px; font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; }
.message-reaction span { font-size: .75rem; opacity: .8; }
.message-reaction.is-mine { border-color: currentColor; background: rgba(127,127,127,.18); font-weight: 700; }
.message-reaction:hover, .message-reaction-add:hover { transform: translateY(-1px); }
.message-row.is-own .message-reactions { justify-content: flex-end; }
.message-reaction-add { opacity: .65; }

@media (max-width: 640px) {
    .emoji-picker { grid-template-columns: repeat(7, 1fr); width: calc(100vw - 16px); }
    .bbcode-video, .bbcode-native-video { width: 100%; }
}

.presence-dot{width:9px;height:9px;border-radius:50%;background:#9ca3af;display:inline-block;margin-right:6px;vertical-align:middle}.presence-dot.is-online{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}.receipt{font-weight:700;letter-spacing:-2px}.receipt-read{color:#777777}.receipt-delivered{color:#64748b}.receipt-sent{color:#94a3b8}

.chat-header-tools{display:flex;gap:6px;margin-left:auto}.message-search-panel{padding:10px 14px;background:var(--panel-background,#fff);border-bottom:1px solid rgba(148,163,184,.25)}.message-search-panel input{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px}.message-search-results{max-height:240px;overflow:auto}.message-search-results button{display:flex;flex-direction:column;width:100%;padding:9px 4px;text-align:left;border:0;border-bottom:1px solid #e2e8f0;background:transparent;cursor:pointer}.message-search-results span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pinned-message-bar{display:flex;gap:10px;align-items:center;width:100%;padding:9px 16px;border:0;border-bottom:1px solid #e2e8f0;background:#fff7ed;text-align:left;cursor:pointer}.pinned-message-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-row.is-highlighted .message-bubble{animation:pinflash 1.8s ease}@keyframes pinflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(245,158,11,.35)}}

:root{--chat-custom-background:none;--surface:#ffffff;--surface-2:#f8fafc;--text:#0f172a;--muted:#64748b;--border:rgba(148,163,184,.24);--own:#a1a1a1;--foreign:#fff;--shadow:0 12px 34px rgba(15,23,42,.10)}:root[data-theme="dark"]{--surface:#111827;--surface-2:#0f172a;--text:#e5e7eb;--muted:#94a3b8;--border:rgba(148,163,184,.18);--own:#777777;--foreign:#1f2937;--shadow:0 16px 40px rgba(0,0,0,.35);color-scheme:dark}body,.chat-app{background:var(--surface-2);color:var(--text)}.conversation-sidebar,.chat-header,.message-form,.reply-preview,.dialog{background:var(--surface);color:var(--text);border-color:var(--border)}.message-area{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),var(--chat-custom-background);background-size:cover;background-position:center}.message-bubble{border-radius:18px 18px 18px 5px;background:var(--foreign);color:var(--text);box-shadow:0 4px 14px rgba(15,23,42,.07);transition:transform .16s ease,box-shadow .16s ease}.message-row.is-own .message-bubble{border-radius:18px 18px 5px 18px;background:var(--own)}.message-bubble:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.message-actions{opacity:0;transform:translateY(3px);transition:.16s}.message-bubble:hover .message-actions,.message-bubble:focus-within .message-actions{opacity:1;transform:none}.message-reaction{border-radius:999px}.message-input{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:18px}.send-message-button{border-radius:50%;box-shadow:0 5px 15px rgba(161,161,161,.28)}.theme-panel{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}.theme-panel button{padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);cursor:pointer}.theme-panel label{display:flex;align-items:center;gap:7px;margin-left:auto}.theme-panel input{min-width:230px;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text)}@media(max-width:720px){.theme-panel{flex-wrap:wrap}.theme-panel label{width:100%;margin-left:0}.theme-panel input{min-width:0;flex:1}}


/* Theme- und Hintergrund-Fix */
.theme-panel[hidden], .message-search-panel[hidden], .pinned-message-bar[hidden] { display: none !important; }
:root { --theme-page:#eef1f5;--theme-surface:#fff;--theme-surface-soft:#f7f9fc;--theme-surface-hover:#eef3f9;--theme-text:#101828;--theme-muted:#667085;--theme-border:#d9e0e8;--theme-own-bubble:#a1a1a1;--theme-own-text:#fff;--theme-other-bubble:#fff;--theme-other-text:#101828;--theme-input:#f7f9fc;--theme-chat-overlay:rgba(238,241,245,.80); }
:root[data-theme="dark"] { --theme-page:#0b1220;--theme-surface:#111b2d;--theme-surface-soft:#172338;--theme-surface-hover:#1d2b43;--theme-text:#edf2f7;--theme-muted:#9aa9bd;--theme-border:#27364c;--theme-own-bubble:#777777;--theme-own-text:#fff;--theme-other-bubble:#1a2940;--theme-other-text:#edf2f7;--theme-input:#172338;--theme-chat-overlay:rgba(11,18,32,.76);color-scheme:dark; }
html,body,.chat-app { background:var(--theme-page)!important;color:var(--theme-text)!important; }
.conversation-sidebar,.sidebar-header,.chat-panel,.chat-header,.message-form,.reply-preview,.dialog,.theme-panel,.message-search-panel { background-color:var(--theme-surface)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important; }
.conversation-item,.icon-button,.theme-panel button,.message-action-button,.emoji-button,.image-link-button { color:var(--theme-text); }
.conversation-item:hover,.icon-button:hover,.theme-panel button:hover,.theme-panel button.is-active { background-color:var(--theme-surface-hover)!important; }
.theme-panel button.is-active { border-color:var(--chat-primary,#a1a1a1)!important;box-shadow:0 0 0 2px rgba(161,161,161,.18); }
.conversation-search-input,.message-search-panel input,.theme-panel input,.message-input { background:var(--theme-input)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important; }
.conversation-search-input::placeholder,.message-search-panel input::placeholder,.theme-panel input::placeholder,.message-input::placeholder { color:var(--theme-muted)!important; }
.message-area { background-color:var(--theme-page)!important;background-image:linear-gradient(var(--theme-chat-overlay),var(--theme-chat-overlay)),var(--chat-custom-background)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;background-attachment:local!important; }
.message-row:not(.is-own) .message-bubble { background:var(--theme-other-bubble)!important;color:var(--theme-other-text)!important; }
.message-row.is-own .message-bubble { background:var(--theme-own-bubble)!important;color:var(--theme-own-text)!important; }
.message-time,.chat-header-status,.sidebar-subtitle,.conversation-preview,.conversation-time { color:var(--theme-muted)!important; }
.pinned-message-bar { background:var(--theme-surface-soft)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important; }


/*
|--------------------------------------------------------------------------
| Layout-Fix v2: Zusatzleisten dürfen Header und Composer nicht überdecken
|--------------------------------------------------------------------------
*/
.active-conversation {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-header,
.theme-panel,
.message-search-panel,
.pinned-message-bar,
.typing-indicator,
.reply-preview,
.message-form {
    flex: 0 0 auto;
}

.chat-header {
    position: relative;
    z-index: 20;
    min-height: var(--chat-header-height);
    height: auto;
}

.chat-header-tools {
    position: relative;
    z-index: 21;
    flex: 0 0 auto;
}

.chat-header-tools .icon-button {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.theme-panel,
.message-search-panel,
.pinned-message-bar {
    position: relative;
    z-index: 15;
}

.message-area {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.message-form {
    position: relative;
    z-index: 20;
}

@media (max-width: 720px) {
    .chat-header {
        min-height: calc(var(--chat-header-height) + env(safe-area-inset-top));
    }
}

/* APOM Chat 2.1 – Presence & Lesebestätigungen */
.chat-header-details {
    min-width: 0;
}

.chat-header-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.2em;
}

.presence-dot {
    flex: 0 0 auto;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.receipt {
    display: inline-block;
    min-width: 1.15em;
    margin-left: 2px;
    font-size: .92em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.receipt-read {
    color: #8a8a8a;
}

[data-theme="light"] .receipt-read {
    color: #777777;
}


/* APOM Chat 2.2 – Suche und Pins 2.0 */
.message-search-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 36px 36px 36px;
    gap: 7px;
    align-items: center;
}
.message-search-counter,
.pinned-message-counter {
    color: var(--theme-muted);
    font-size: .78rem;
    white-space: nowrap;
}
.message-search-nav,
.pinned-message-nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface-soft);
    color: var(--theme-text);
    cursor: pointer;
}
.message-search-nav:hover:not(:disabled),
.pinned-message-nav:hover:not(:disabled) {
    background: var(--theme-surface-hover);
}
.message-search-nav:disabled,
.pinned-message-nav:disabled {
    opacity: .42;
    cursor: default;
}
.message-search-results button.is-active {
    background: var(--theme-surface-hover);
    box-shadow: inset 3px 0 0 var(--chat-primary, #a1a1a1);
}
.message-search-results mark {
    padding: 0 .12em;
    border-radius: .2em;
    color: inherit;
    background: #fde68a;
}
.message-search-empty {
    margin: 12px 4px 4px;
    color: var(--theme-muted);
}
.pinned-message-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 36px 36px 36px;
    gap: 7px;
    align-items: center;
    padding: 7px 12px;
}
.pinned-message-main {
    display: flex;
    min-width: 0;
    gap: 10px;
    align-items: center;
    padding: 3px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pinned-message-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.pinned-message-sender {
    font-size: .76rem;
    font-weight: 700;
    color: var(--chat-primary, #a1a1a1);
}
#pinned-message-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pinned-message-nav.is-danger:hover {
    color: #b42318;
    background: rgba(180, 35, 24, .09);
}
@media (max-width: 640px) {
    .message-search-toolbar,
    .pinned-message-bar {
        grid-template-columns: minmax(0, 1fr) auto 34px 34px;
    }
    .message-search-nav,
    .pinned-message-nav {
        width: 34px;
        height: 34px;
    }
    #message-search-close,
    #pinned-message-remove {
        display: none;
    }
}


/* Release 2.3 – Live-Updates, Badges und lange Verläufe */
.message-row {
    content-visibility: auto;
    contain-intrinsic-size: 72px;
}
.message-list {
    contain: layout style;
}
.conversation-item-badge {
    box-shadow: 0 0 0 3px var(--chat-panel);
    animation: unread-badge-in 160ms ease-out;
}
@keyframes unread-badge-in {
    from { transform: scale(.72); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .conversation-item-badge { animation: none; }
}


/* Release 2.4.1 – Gruppeninformationen */
.group-info-dialog { width: min(520px, 100%); }
.group-info-preview { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px; background:var(--chat-panel-soft); border:1px solid var(--chat-border); border-radius:14px; }
.group-info-preview > div:last-child { display:flex; flex-direction:column; gap:4px; min-width:0; }
.group-info-preview strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-info-role { font-size:12px; color:var(--chat-text-soft); }
.group-info-dialog textarea { width:100%; min-height:100px; padding:10px 12px; resize:vertical; color:var(--chat-text); background:var(--chat-panel); border:1px solid var(--chat-border); border-radius:10px; }
.group-info-dialog textarea:focus { border-color:var(--chat-primary); }
.group-info-dialog label:not(:first-of-type) { margin-top:16px; }
.group-info-dialog input:disabled, .group-info-dialog textarea:disabled { opacity:.72; cursor:not-allowed; }


/* Release 2.4.1 – Gruppe direkt im Messenger erstellen */
.conversation-type-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:20px; padding:5px; background:var(--chat-panel-soft); border:1px solid var(--chat-border); border-radius:12px; }
.conversation-type-button { min-height:38px; padding:8px 12px; cursor:pointer; font-weight:700; color:var(--chat-text-soft); background:transparent; border-radius:9px; transition:background-color .18s ease,color .18s ease,box-shadow .18s ease; }
.conversation-type-button:hover { color:var(--chat-text); }
.conversation-type-button.is-active { color:var(--chat-primary); background:var(--chat-panel); box-shadow:0 2px 8px rgba(15,23,42,.08); }
#group-conversation-fields label:not(:first-child) { margin-top:16px; }
#group-conversation-fields textarea { width:100%; min-height:88px; padding:10px 12px; resize:vertical; color:var(--chat-text); background:var(--chat-panel); border:1px solid var(--chat-border); border-radius:10px; }
#group-conversation-fields textarea:focus { border-color:var(--chat-primary); }
.label-optional { font-size:11px; font-weight:500; color:var(--chat-text-soft); }


/* Release 2.4.3 – Gruppenmitglieder */
.group-members-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color,#dfe3ea)}
.group-members-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.group-members-heading h3{margin:0;font-size:1rem}.group-members-count{display:block;font-size:.78rem;opacity:.7}.compact-button{padding:.45rem .7rem;font-size:.82rem}.add-member-panel{padding:.75rem;margin-bottom:.75rem;border-radius:12px;background:rgba(127,127,127,.08)}.member-search-results,.group-members-list{display:grid;gap:.5rem;margin-top:.6rem}.group-member-row,.member-search-result{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem;border:1px solid var(--border-color,#dfe3ea);border-radius:12px;background:transparent;text-align:left}.member-search-result{cursor:pointer}.member-search-result>b{margin-left:auto}.member-search-result small{display:block;opacity:.65}.member-avatar{width:38px;height:38px;min-width:38px;overflow:hidden}.member-avatar img{width:100%;height:100%;object-fit:cover}.group-member-identity{display:flex;flex-direction:column;min-width:0;flex:1}.group-member-identity>span{font-size:.78rem;opacity:.7}.group-member-actions{display:flex;align-items:center;gap:.4rem}.member-role-select,.member-remove-button{font:inherit;font-size:.78rem;border:1px solid var(--border-color,#dfe3ea);border-radius:8px;padding:.35rem .45rem;background:var(--surface-color,#fff)}.member-remove-button{cursor:pointer}.member-role-badge{font-size:.74rem;padding:.25rem .45rem;border-radius:999px;background:rgba(127,127,127,.13)}.member-presence.is-online{font-weight:700}.member-presence.is-online::before{content:'● ';}.group-info-dialog{max-height:min(90vh,820px);overflow:auto}@media(max-width:620px){.group-member-row{align-items:flex-start;flex-wrap:wrap}.group-member-actions{width:100%;padding-left:46px}.group-members-heading{align-items:flex-start}}


/* APOM Chat 3.2: Benutzersuche für private Unterhaltungen */
.private-user-search-results{display:grid;gap:.55rem;margin-top:.75rem;max-height:260px;overflow:auto}
.private-user-search-result{display:flex;align-items:center;gap:.75rem;width:100%;padding:.7rem;border:1px solid var(--chat-border,#dfe3ea);border-radius:12px;background:var(--chat-panel,#fff);text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.private-user-search-result:hover,.private-user-search-result:focus-visible{border-color:var(--chat-primary,#a1a1a1);box-shadow:0 0 0 3px rgba(161,161,161,.20);outline:0}
.private-user-search-result:active{transform:scale(.99)}
.private-user-search-result.is-selected{border-color:var(--chat-primary,#a1a1a1);background:rgba(161,161,161,.10)}
.private-user-search-avatar{display:grid;place-items:center;width:42px;height:42px;min-width:42px;overflow:hidden;border-radius:50%;background:var(--chat-panel-soft,#eef2ff);font-weight:800}
.private-user-search-avatar img{width:100%;height:100%;object-fit:cover}
.private-user-search-identity{display:flex;min-width:0;flex:1;flex-direction:column}
.private-user-search-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.private-user-search-identity small{margin-top:.15rem;color:var(--chat-text-soft,#64748b)}
.private-user-search-action{font-size:1.6rem;color:var(--chat-primary,#a1a1a1)}

/* APOM 3.3: Mitglieder-Synchronisation */
.member-sync-panel{margin:.8rem 0;padding:.75rem;border:1px solid var(--chat-border,#dfe3ea);border-radius:12px;background:var(--chat-panel-soft,#f8fafc)}
.member-sync-progress{display:grid;gap:.4rem;margin-top:.65rem;font-size:.85rem;color:var(--chat-text-soft,#64748b)}
.member-sync-progress progress{width:100%;height:10px}


/* APOM Chat 3.3.1 – neutral gray accent theme */
:root {
    --chat-primary: #a1a1a1;
    --chat-primary-hover: #8f8f8f;
    --chat-primary-soft: #eeeeee;
    --theme-own-bubble: #a1a1a1;
    --theme-own-text: #ffffff;
    --own: #a1a1a1;
}
:root[data-theme="dark"] {
    --chat-primary: #a1a1a1;
    --chat-primary-hover: #b0b0b0;
    --chat-primary-soft: #333333;
    --theme-own-bubble: #777777;
    --theme-own-text: #ffffff;
    --own: #777777;
}


/* APOM Chat – eigene Nachrichten grau */
.message.own,
.message.mine,
.message.outgoing,
.message.sent,
.message--own,
.message--outgoing,
.chat-message.own,
.chat-message.mine,
.chat-message.outgoing,
.chat-message.sent,
.message-row.own .message-bubble,
.message-row.mine .message-bubble,
.message-row.outgoing .message-bubble,
.message-row.sent .message-bubble,
.bubble.own,
.bubble.mine,
.bubble.outgoing,
.bubble.sent {
    background: #a1a1a1 !important;
    background-color: #a1a1a1 !important;
}

/* ==========================================================================
   APOM Chat – finaler Grau-Fix 3.3.2
   ========================================================================== */
:root,
:root[data-theme="light"] {
    --chat-primary: #a1a1a1 !important;
    --chat-primary-hover: #8f8f8f !important;
    --chat-primary-soft: #eeeeee !important;
    --own: #a1a1a1 !important;
    --theme-own-bubble: #a1a1a1 !important;
}

.message-row.is-own .message-bubble {
    background: #a1a1a1 !important;
    background-color: #a1a1a1 !important;
    border-color: #a1a1a1 !important;
    color: #ffffff !important;
}

.send-message-button,
.primary-button,
.conversation-item-badge {
    background: #a1a1a1 !important;
    background-color: #a1a1a1 !important;
}

.send-message-button:hover:not(:disabled),
.primary-button:hover {
    background: #8f8f8f !important;
}

.conversation-search-input:focus,
.message-input-wrapper:focus-within,
.dialog-form input:focus,
.group-info-dialog textarea:focus {
    border-color: #a1a1a1 !important;
}

.reply-preview-accent { background: #a1a1a1 !important; }
.message-sender,
.reply-preview-sender,
.message-action-button:hover,
.message-reply-button:hover,
.pinned-message-sender,
.conversation-type-button.is-active { color: #a1a1a1 !important; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(161, 161, 161, 0.22) !important;
}

.conversation-item.is-active { border-bottom-color: #d7d7d7 !important; }

@keyframes apom-message-highlight {
    0%, 100% { box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04); }
    20%, 70% { box-shadow: 0 0 0 4px rgba(161, 161, 161, 0.22); }
}

\n\n/* ==========================================================================\n   APOM Chat 3.4 – Unterhaltung löschen + Smartphone-Anpassung\n   ========================================================================== */\n.delete-conversation-button { color:#9f3434 !important; }\n.delete-conversation-button:hover { color:#842626 !important; background:#fff0f0 !important; }\n.delete-conversation-button:disabled { opacity:.45; cursor:wait; }\n\n@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 980px)) {\n    html, body { width:100%; height:100%; min-height:100dvh; overflow:hidden; }\n    .chat-app { display:block !important; width:100% !important; height:100dvh !important; min-height:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }\n    .conversation-sidebar, .chat-panel { width:100% !important; height:100% !important; }\n    .conversation-sidebar { border-right:0 !important; }\n    .chat-panel { display:none; }\n    .chat-app.is-chat-open .conversation-sidebar { display:none; }\n    .chat-app.is-chat-open .chat-panel { display:block; }\n    .mobile-back-button { display:inline-grid !important; }\n    .chat-header { min-height:calc(var(--chat-header-height) + env(safe-area-inset-top)); padding-top:max(10px, env(safe-area-inset-top)); }\n    .message-area { padding:14px 10px; }\n    .message-bubble { max-width:90%; }\n    .message-form { gap:7px; padding-left:10px; padding-right:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }\n}\n

/* ==========================================================================
   APOM Chat 3.4.1 – komfortable Smartphone-Oberfläche
   ========================================================================== */

.delete-conversation-button {
    font-size: 18px !important;
    line-height: 1 !important;
}

@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 980px)) {
    :root {
        --chat-header-height: 72px;
        --chat-composer-height: 72px;
    }

    html,
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Beim Öffnen bleibt zuerst die Unterhaltungsliste sichtbar. */
    .chat-app:not(.is-chat-open) .conversation-sidebar {
        display: flex !important;
    }

    .chat-app:not(.is-chat-open) .chat-panel {
        display: none !important;
    }

    .sidebar-header {
        padding: max(18px, env(safe-area-inset-top)) 16px 16px !important;
    }

    .sidebar-brand {
        gap: 13px;
    }

    .sidebar-brand-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 24px;
        border-radius: 14px;
    }

    .sidebar-title {
        font-size: 21px !important;
        line-height: 1.2;
    }

    .sidebar-subtitle {
        margin-top: 3px;
        font-size: 14px !important;
    }

    .sidebar-title-row > .icon-button,
    .chat-header .icon-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        font-size: 24px !important;
    }

    .conversation-search {
        margin-top: 15px;
    }

    .conversation-search-input {
        min-height: 50px !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .sidebar-status {
        padding: 16px !important;
        font-size: 14px !important;
    }

    /* Größere, gut antippbare Unterhaltungskarten */
    .conversation-item {
        grid-template-columns: 58px minmax(0, 1fr) auto !important;
        min-height: 88px !important;
        padding: 14px 16px !important;
        gap: 13px !important;
    }

    .conversation-item .avatar {
        width: 58px !important;
        height: 58px !important;
        font-size: 22px !important;
    }

    .conversation-item-title {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .conversation-item-preview {
        margin-top: 6px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .conversation-item-time {
        font-size: 12px !important;
    }

    .conversation-item-badge {
        min-width: 25px !important;
        height: 25px !important;
        padding: 0 7px !important;
        font-size: 12px !important;
    }

    /* Geöffnete Unterhaltung */
    .chat-header {
        gap: 9px !important;
        padding: max(10px, env(safe-area-inset-top)) 10px 10px !important;
    }

    .chat-header-user {
        gap: 10px !important;
    }

    .chat-header .avatar-large {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
    }

    .chat-header-title {
        font-size: 17px !important;
    }

    .chat-header-status {
        font-size: 12px !important;
    }

    .chat-header-tools {
        gap: 1px !important;
    }

    .chat-header-tools .icon-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        font-size: 20px !important;
    }

    .delete-conversation-button {
        font-size: 18px !important;
    }

    .message-area {
        padding: 18px 12px !important;
    }

    .message-list {
        gap: 10px !important;
    }

    .message-bubble {
        max-width: 88% !important;
        padding: 11px 14px 9px !important;
        font-size: 15.5px !important;
        line-height: 1.48 !important;
    }

    .message-meta {
        font-size: 11px !important;
    }

    .typing-indicator {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .message-form {
        grid-template-columns: 44px 44px minmax(0, 1fr) 48px !important;
        gap: 8px !important;
        min-height: 72px !important;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .composer-button {
        width: 44px !important;
        height: 44px !important;
        font-size: 23px !important;
    }

    .send-message-button {
        width: 48px !important;
        height: 48px !important;
        font-size: 19px !important;
    }

    .message-input {
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 16px !important; /* verhindert iOS-Autozoom */
    }

    .message-input-wrapper {
        border-radius: 18px !important;
    }

    .dialog {
        font-size: 16px;
    }

    .dialog-header {
        padding: 17px 16px !important;
    }

    .dialog-header h2 {
        font-size: 20px !important;
    }

    .dialog-form {
        padding: 16px !important;
    }

    .dialog-form input,
    .dialog-form textarea {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .primary-button,
    .secondary-button {
        min-height: 46px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 390px) {
    .sidebar-title {
        font-size: 19px !important;
    }

    .conversation-item {
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .conversation-item .avatar {
        width: 54px !important;
        height: 54px !important;
    }

    .chat-header-tools .icon-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
    }
}

/* ==========================================================================
   APOM Chat 3.4.2 – Mobile Friendly
   ========================================================================== */

/* Mülltonne dezent halten */
.delete-conversation-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
}
.delete-conversation-icon {
    display: inline-block;
    font-size: 14px !important;
    line-height: 1 !important;
    transform: translateY(1px);
}

/* Smartphones und kleine Tablets: konsequent einspaltig */
@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        background: var(--theme-page, #eef1f5) !important;
    }

    .chat-app {
        display: block !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .conversation-sidebar,
    .chat-panel {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        border-right: 0 !important;
    }

    /* Startzustand: nur die Unterhaltungsliste */
    .chat-app:not(.is-chat-open) .conversation-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }

    .chat-app:not(.is-chat-open) .chat-panel {
        display: none !important;
    }

    /* Geöffneter Chat: nur der Chat */
    .chat-app.is-chat-open .conversation-sidebar {
        display: none !important;
    }

    .chat-app.is-chat-open .chat-panel {
        display: block !important;
    }

    .active-conversation {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Unterhaltungsübersicht */
    .sidebar-header {
        padding:
            max(18px, env(safe-area-inset-top))
            16px
            15px !important;
    }

    .sidebar-brand-icon {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
        font-size: 24px !important;
    }

    .sidebar-title {
        font-size: 22px !important;
    }

    .sidebar-subtitle {
        font-size: 14px !important;
    }

    .sidebar-title-row > .icon-button {
        width: 46px !important;
        height: 46px !important;
        font-size: 25px !important;
    }

    .conversation-search-input {
        min-height: 50px !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .sidebar-status {
        padding: 13px 16px !important;
        font-size: 14px !important;
    }

    .conversation-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .conversation-item {
        grid-template-columns: 60px minmax(0, 1fr) auto !important;
        min-height: 94px !important;
        padding: 15px 16px !important;
        gap: 14px !important;
    }

    .conversation-item .avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 23px !important;
    }

    .conversation-item-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .conversation-item-preview {
        margin-top: 6px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .conversation-item-time {
        font-size: 12px !important;
    }

    .conversation-item-badge {
        min-width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }

    /* Chatkopf */
    .chat-header {
        min-height: 70px !important;
        padding:
            max(9px, env(safe-area-inset-top))
            10px
            9px !important;
        gap: 8px !important;
    }

    .mobile-back-button {
        display: inline-grid !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 24px !important;
    }

    .chat-header-user {
        gap: 9px !important;
        min-width: 0 !important;
    }

    .chat-header .avatar-large {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .chat-header-title {
        font-size: 17px !important;
    }

    .chat-header-status {
        font-size: 12px !important;
    }

    .chat-header-tools {
        gap: 0 !important;
        flex: 0 0 auto !important;
    }

    .chat-header-tools .icon-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        font-size: 17px !important;
    }

    .chat-header-tools .delete-conversation-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .chat-header-tools .delete-conversation-icon {
        font-size: 13px !important;
    }

    /* Nachrichten */
    .message-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 16px 12px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .message-list {
        gap: 11px !important;
    }

    .message-bubble {
        max-width: 86% !important;
        padding: 11px 14px 9px !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
        border-radius: 18px 18px 18px 6px !important;
    }

    .message-row.is-own .message-bubble {
        border-radius: 18px 18px 6px 18px !important;
    }

    .message-meta {
        font-size: 11px !important;
    }

    .message-actions {
        gap: 2px !important;
    }

    .message-action-button {
        width: 32px !important;
        height: 32px !important;
    }

    /* Eingabe */
    .message-form {
        grid-template-columns: 42px 42px minmax(0, 1fr) 48px !important;
        gap: 7px !important;
        padding:
            9px
            10px
            max(9px, env(safe-area-inset-bottom)) !important;
        min-height: 70px !important;
    }

    .composer-button {
        width: 42px !important;
        height: 42px !important;
        font-size: 22px !important;
    }

    .send-message-button {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    .message-input-wrapper {
        min-width: 0 !important;
        border-radius: 18px !important;
    }

    .message-input {
        min-height: 48px !important;
        max-height: 112px !important;
        padding: 12px 13px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* Dialoge auf Handy als Bottom Sheet */
    .dialog-backdrop {
        align-items: end !important;
        padding: 0 !important;
    }

    .dialog {
        width: 100% !important;
        max-height: 88dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .dialog-header {
        padding: 17px 16px !important;
    }

    .dialog-header h2 {
        font-size: 20px !important;
    }

    .dialog-form {
        padding: 16px !important;
    }

    .dialog-form input,
    .dialog-form textarea {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .primary-button,
    .secondary-button {
        min-height: 46px !important;
        font-size: 15px !important;
    }

    .theme-panel {
        padding: 10px !important;
        gap: 7px !important;
        flex-wrap: wrap !important;
    }

    .theme-panel label {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .theme-panel input {
        min-width: 0 !important;
        flex: 1 !important;
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {
    .conversation-item {
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
        min-height: 88px !important;
        padding: 13px !important;
    }

    .conversation-item .avatar {
        width: 54px !important;
        height: 54px !important;
    }

    .chat-header .avatar-large {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .chat-header-tools .icon-button {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        font-size: 16px !important;
    }

    .message-form {
        grid-template-columns: 40px 40px minmax(0, 1fr) 46px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ==========================================================================
   APOM Chat 3.5.0 – Mobile Messenger Fullscreen UX
   ========================================================================== */

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .chat-app {
        display: block !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .conversation-sidebar,
    .chat-panel {
        width: 100% !important;
        height: 100% !important;
        border-right: 0 !important;
    }

    .chat-app:not(.is-chat-open) .conversation-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }

    .chat-app:not(.is-chat-open) .chat-panel {
        display: none !important;
    }

    .chat-app.is-chat-open .conversation-sidebar {
        display: none !important;
    }

    .chat-app.is-chat-open .chat-panel {
        display: block !important;
    }

    .mobile-back-button {
        display: inline-grid !important;
    }

    .conversation-item {
        min-height: 86px !important;
    }

    .conversation-item-title {
        font-size: 17px !important;
    }

    .conversation-item-preview {
        font-size: 14px !important;
    }

    .message-bubble {
        max-width: 88% !important;
        font-size: 16px !important;
    }

    .message-input {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   APOM Chat 3.5.1 – WhatsApp-artige mobile Navigation
   Der Mobilmodus wird durch .is-mobile-ui aus chat.js aktiviert.
   ========================================================================== */

.chat-app.is-mobile-ui {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.chat-app.is-mobile-ui .conversation-sidebar,
.chat-app.is-mobile-ui .chat-panel {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
}

/* Startansicht: ausschließlich die Chatliste. */
.chat-app.is-mobile-ui:not(.is-chat-open) .conversation-sidebar {
    display: flex !important;
    flex-direction: column !important;
}

.chat-app.is-mobile-ui:not(.is-chat-open) .chat-panel {
    display: none !important;
}

/* Nach Auswahl: ausschließlich die geöffnete Unterhaltung. */
.chat-app.is-mobile-ui.is-chat-open .conversation-sidebar {
    display: none !important;
}

.chat-app.is-mobile-ui.is-chat-open .chat-panel {
    display: block !important;
}

/* Kein leerer rechter Desktop-Bereich auf Mobilgeräten. */
.chat-app.is-mobile-ui .chat-empty-state {
    display: none !important;
}

/* Zurück-Button nur im mobilen geöffneten Chat sichtbar. */
.chat-app.is-mobile-ui .mobile-back-button {
    display: inline-grid !important;
}

/* Mobil etwas großzügigere Lesbarkeit / Touch-Ziele. */
.chat-app.is-mobile-ui .sidebar-header {
    padding: 18px 16px 15px !important;
}

.chat-app.is-mobile-ui .sidebar-title {
    font-size: 21px !important;
}

.chat-app.is-mobile-ui .conversation-search-input {
    min-height: 50px !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .conversation-item {
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    min-height: 90px !important;
    padding: 14px 16px !important;
    gap: 13px !important;
}

.chat-app.is-mobile-ui .conversation-item .avatar {
    width: 58px !important;
    height: 58px !important;
}

.chat-app.is-mobile-ui .conversation-item-title {
    font-size: 17px !important;
}

.chat-app.is-mobile-ui .conversation-item-preview {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .chat-header {
    min-height: 70px !important;
}

.chat-app.is-mobile-ui .message-area {
    padding: 16px 12px !important;
}

.chat-app.is-mobile-ui .message-bubble {
    max-width: 88% !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .message-input {
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .active-conversation {
    height: 100% !important;
    min-height: 0 !important;
}

/* ==========================================================================
   APOM Chat 3.5.2 – Mobile größer und besser lesbar
   Gilt nur für den per JavaScript erkannten Mobilmodus.
   ========================================================================== */

.chat-app.is-mobile-ui {
    font-size: 17px !important;
}

.chat-app.is-mobile-ui .sidebar-header {
    padding: 22px 18px 18px !important;
}

.chat-app.is-mobile-ui .sidebar-brand {
    gap: 14px !important;
}

.chat-app.is-mobile-ui .sidebar-brand-icon {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    font-size: 28px !important;
    border-radius: 16px !important;
}

.chat-app.is-mobile-ui .sidebar-title {
    font-size: 25px !important;
    line-height: 1.15 !important;
}

.chat-app.is-mobile-ui .sidebar-subtitle {
    margin-top: 5px !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .sidebar-title-row > .icon-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    font-size: 28px !important;
}

.chat-app.is-mobile-ui .conversation-search {
    margin-top: 18px !important;
}

.chat-app.is-mobile-ui .conversation-search-input {
    min-height: 58px !important;
    padding: 14px 17px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
}

.chat-app.is-mobile-ui .sidebar-status {
    padding: 15px 18px !important;
    font-size: 15px !important;
}

.chat-app.is-mobile-ui .conversation-item {
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    min-height: 112px !important;
    padding: 18px !important;
    gap: 16px !important;
}

.chat-app.is-mobile-ui .conversation-item .avatar {
    width: 70px !important;
    height: 70px !important;
    font-size: 28px !important;
}

.chat-app.is-mobile-ui .conversation-item-title {
    font-size: 21px !important;
    line-height: 1.2 !important;
}

.chat-app.is-mobile-ui .conversation-item-preview {
    margin-top: 7px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
}

.chat-app.is-mobile-ui .conversation-item-time {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .conversation-item-badge {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
}

.chat-app.is-mobile-ui .chat-header {
    min-height: 84px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
}

.chat-app.is-mobile-ui .mobile-back-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 28px !important;
}

.chat-app.is-mobile-ui .chat-header-user {
    gap: 12px !important;
}

.chat-app.is-mobile-ui .chat-header .avatar-large {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
}

.chat-app.is-mobile-ui .chat-header-title {
    font-size: 21px !important;
}

.chat-app.is-mobile-ui .chat-header-status {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .chat-header-tools {
    gap: 2px !important;
}

.chat-app.is-mobile-ui .chat-header-tools .icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 20px !important;
}

.chat-app.is-mobile-ui .message-area {
    padding: 20px 14px !important;
}

.chat-app.is-mobile-ui .message-list {
    gap: 13px !important;
}

.chat-app.is-mobile-ui .message-bubble {
    max-width: 90% !important;
    padding: 14px 16px 11px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    border-radius: 20px 20px 20px 7px !important;
}

.chat-app.is-mobile-ui .message-row.is-own .message-bubble {
    border-radius: 20px 20px 7px 20px !important;
}

.chat-app.is-mobile-ui .message-sender {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .message-meta {
    margin-top: 7px !important;
    font-size: 12px !important;
}

.chat-app.is-mobile-ui .typing-indicator {
    padding: 9px 16px !important;
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .message-form {
    grid-template-columns: 50px 50px minmax(0, 1fr) 56px !important;
    gap: 9px !important;
    min-height: 84px !important;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom)) !important;
}

.chat-app.is-mobile-ui .composer-button {
    width: 50px !important;
    height: 50px !important;
    font-size: 27px !important;
}

.chat-app.is-mobile-ui .send-message-button {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
}

.chat-app.is-mobile-ui .message-input-wrapper {
    border-radius: 20px !important;
}

.chat-app.is-mobile-ui .message-input {
    min-height: 56px !important;
    max-height: 140px !important;
    padding: 14px 15px !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
}

.chat-app.is-mobile-ui .reply-preview {
    padding: 12px 16px 12px 18px !important;
}

.chat-app.is-mobile-ui .reply-preview-sender,
.chat-app.is-mobile-ui .reply-preview-text {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .primary-button,
.chat-app.is-mobile-ui .secondary-button {
    min-height: 50px !important;
    padding: 11px 18px !important;
    font-size: 17px !important;
}

.chat-app.is-mobile-ui .dialog-header h2 {
    font-size: 22px !important;
}

.chat-app.is-mobile-ui .dialog-form label {
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .dialog-form input,
.chat-app.is-mobile-ui .dialog-form textarea {
    min-height: 52px !important;
    font-size: 17px !important;
}

@media (max-width: 390px) {
    .chat-app.is-mobile-ui .sidebar-title {
        font-size: 22px !important;
    }

    .chat-app.is-mobile-ui .conversation-item {
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        min-height: 102px !important;
        padding: 16px 14px !important;
    }

    .chat-app.is-mobile-ui .conversation-item .avatar {
        width: 62px !important;
        height: 62px !important;
    }

    .chat-app.is-mobile-ui .conversation-item-title {
        font-size: 19px !important;
    }

    .chat-app.is-mobile-ui .conversation-item-preview {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   APOM Chat 3.5.5 – stabiler mobiler Composer
   ========================================================================== */

.chat-app.is-mobile-ui .active-conversation {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.chat-app.is-mobile-ui .chat-header,
.chat-app.is-mobile-ui .typing-indicator,
.chat-app.is-mobile-ui .reply-preview,
.chat-app.is-mobile-ui .message-form {
    flex: 0 0 auto !important;
}

.chat-app.is-mobile-ui .message-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.chat-app.is-mobile-ui .message-form {
    grid-template-columns: 34px 34px minmax(0, 1fr) 50px !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom)) !important;
    background: var(--theme-surface, #fff) !important;
    border-top: 1px solid var(--theme-border, rgba(148,163,184,.24)) !important;
}

.chat-app.is-mobile-ui #attachment-button,
.chat-app.is-mobile-ui #emoji-button,
.chat-app.is-mobile-ui .composer-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 17px !important;
}

.chat-app.is-mobile-ui .message-input-wrapper {
    width: 100% !important;
    min-width: 0 !important;
}

.chat-app.is-mobile-ui .message-input {
    width: 100% !important;
    min-height: 50px !important;
    max-height: 116px !important;
    padding: 12px 13px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.chat-app.is-mobile-ui .send-message-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    font-size: 19px !important;
}

@media (max-width: 390px) {
    .chat-app.is-mobile-ui .message-form {
        grid-template-columns: 30px 30px minmax(0, 1fr) 46px !important;
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .chat-app.is-mobile-ui #attachment-button,
    .chat-app.is-mobile-ui #emoji-button,
    .chat-app.is-mobile-ui .composer-button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 15px !important;
    }

    .chat-app.is-mobile-ui .send-message-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }
}

/* ==========================================================================
   APOM Chat 3.5.7 – echte mobile Größe nach Counter-Scale
   ========================================================================== */

.chat-app.is-mobile-ui {
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .sidebar-header {
    padding: 18px 16px 14px !important;
}

.chat-app.is-mobile-ui .sidebar-brand-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 23px !important;
}

.chat-app.is-mobile-ui .sidebar-title {
    font-size: 22px !important;
}

.chat-app.is-mobile-ui .sidebar-subtitle {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .conversation-search-input {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .conversation-item {
    grid-template-columns: 58px minmax(0,1fr) auto !important;
    min-height: 88px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
}

.chat-app.is-mobile-ui .conversation-item .avatar {
    width: 58px !important;
    height: 58px !important;
}

.chat-app.is-mobile-ui .conversation-item-title {
    font-size: 18px !important;
}

.chat-app.is-mobile-ui .conversation-item-preview {
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .chat-header {
    min-height: 68px !important;
}

.chat-app.is-mobile-ui .message-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px 10px !important;
}

.chat-app.is-mobile-ui .message-bubble {
    max-width: 88% !important;
    padding: 10px 13px 8px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.chat-app.is-mobile-ui .active-conversation {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

.chat-app.is-mobile-ui .message-form {
    flex: 0 0 auto !important;
    grid-template-columns: 28px 28px minmax(0,1fr) 46px !important;
    gap: 6px !important;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
}

.chat-app.is-mobile-ui #attachment-button,
.chat-app.is-mobile-ui #emoji-button,
.chat-app.is-mobile-ui .composer-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
}

.chat-app.is-mobile-ui .message-input {
    min-height: 46px !important;
    max-height: 112px !important;
    padding: 11px 12px !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .send-message-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
}

/* ==========================================================================
   APOM Chat 3.5.8 – Gruppe löschen
   ========================================================================== */

.group-info-dialog-actions {
    align-items: center;
    flex-wrap: wrap;
}

.dialog-actions-spacer {
    flex: 1 1 auto;
}

.danger-button {
    min-height: 42px;
    padding: 9px 16px;
    cursor: pointer;
    font-weight: 700;
    color: #ffffff;
    background: #b42318;
    border: 0;
    border-radius: 10px;
    transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}

.danger-button:hover:not(:disabled) {
    background: #912018;
}

.danger-button:active:not(:disabled) {
    transform: scale(.98);
}

.danger-button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.group-delete-button[hidden] {
    display: none !important;
}

.chat-app.is-mobile-ui .group-info-dialog-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.chat-app.is-mobile-ui .group-info-dialog-actions .dialog-actions-spacer {
    display: none;
}

.chat-app.is-mobile-ui .group-delete-button {
    grid-column: 1 / -1;
    min-height: 48px !important;
    font-size: 16px !important;
}

/* ==========================================================================
   APOM Chat 3.6.2 – automatische Bildlinks ohne Plus-Button
   ========================================================================== */

.message-form {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.chat-app.is-mobile-ui .message-form {
    grid-template-columns: 30px minmax(0, 1fr) 46px !important;
    gap: 7px !important;
}

.chat-app.is-mobile-ui #emoji-button,
.chat-app.is-mobile-ui .emoji-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 16px !important;
}

.chat-app.is-mobile-ui .message-input-wrapper,
.chat-app.is-mobile-ui .message-input {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 390px) {
    .chat-app.is-mobile-ui .message-form {
        grid-template-columns: 28px minmax(0, 1fr) 44px !important;
        gap: 6px !important;
    }

    .chat-app.is-mobile-ui #emoji-button,
    .chat-app.is-mobile-ui .emoji-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 15px !important;
    }
}


/* --------------------------------------------------------------------------
   Kleine Desktop-Fenster: Aktionsleiste vollständig innerhalb des Chatbereichs
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
    .message-actions {
        top: auto;
        bottom: calc(100% + 6px);
        transform: translateY(4px) scale(0.96);
    }

    .message-row.is-own .message-actions {
        right: 0;
        left: auto;
    }

    .message-row.is-foreign .message-actions {
        right: auto;
        left: 0;
    }

    .message-row:hover .message-actions,
    .message-row:focus-within .message-actions {
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
   FIX: Kleine Desktop-Ansicht – Aktionen sicher oberhalb der Nachricht
   Die Breite entscheidet hier; Touch-Geräte bleiben über .is-mobile-ui
   bei der Long-Press-Darstellung.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .chat-app:not(.is-mobile-ui) .message-row,
    .chat-app:not(.is-mobile-ui) .message-bubble {
        overflow: visible !important;
    }

    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions {
        top: auto !important;
        bottom: calc(100% + 7px) !important;
        left: auto !important;
        right: 0 !important;
        z-index: 30 !important;
        max-width: min(100%, calc(100vw - 32px));
        transform: translateY(4px) scale(.96) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }
}


/* ==========================================================================
   Verlässliche Nachrichtenaktionen: Desktop-Hover vs. mobiles Long-Press
   Diese Regeln stehen bewusst am Dateiende und überschreiben ältere Fixes.
   ========================================================================== */

/* Desktop / Maus: innerhalb der Blase oberhalb positionieren, damit nichts
   am rechten Rand des Chatfensters abgeschnitten wird. */
.chat-app:not(.is-mobile-ui) .message-row,
.chat-app:not(.is-mobile-ui) .message-bubble {
    overflow: visible !important;
}

.chat-app:not(.is-mobile-ui) .message-bubble > .message-actions {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 7px) !important;
    z-index: 100 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) scale(.96) !important;
}

.chat-app:not(.is-mobile-ui) .message-row.is-own .message-bubble > .message-actions {
    right: 0 !important;
    left: auto !important;
}

.chat-app:not(.is-mobile-ui) .message-row.is-foreign .message-bubble > .message-actions {
    right: auto !important;
    left: 0 !important;
}

.chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
.chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
.chat-app:not(.is-mobile-ui) .message-row.is-desktop-actions-open .message-bubble > .message-actions {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Das Reaktionssymbol gehört auf dem Desktop zur gleichen Aktionsleiste. */
.chat-app:not(.is-mobile-ui) .message-action-reaction {
    display: grid !important;
}

/* Auf echten Mobilgeräten bleiben alle Aktionssymbole verborgen, bis die
   Nachricht per Long-Press geöffnet wurde. */
.chat-app.is-mobile-ui .message-bubble > .message-actions {
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.chat-app.is-mobile-ui .message-row.is-actions-open .message-bubble > .message-actions {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   FINALER DESKTOP-FIX: reale Maus hat immer Vorrang
   ========================================================================== */
.chat-app.has-mouse-input .message-row,
.chat-app.has-mouse-input .message-bubble {
    overflow: visible !important;
}

.chat-app.has-mouse-input .message-bubble > .message-actions {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 7px) !important;
    z-index: 9999 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) scale(.96) !important;
}

.chat-app.has-mouse-input .message-row.is-own .message-bubble > .message-actions {
    right: 0 !important;
    left: auto !important;
}

.chat-app.has-mouse-input .message-row.is-foreign .message-bubble > .message-actions {
    left: 0 !important;
    right: auto !important;
}

.chat-app.has-mouse-input .message-row:hover .message-bubble > .message-actions,
.chat-app.has-mouse-input .message-row:focus-within .message-bubble > .message-actions,
.chat-app.has-mouse-input .message-row.is-desktop-actions-open .message-bubble > .message-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

.chat-app.has-mouse-input .message-action-reaction {
    display: grid !important;
}

.chat-app.has-mouse-input .message-reaction-add {
    display: none !important;
}


/* ==========================================================================
   APOM: finale Bedienung der Nachrichtenaktionen
   - großer Desktop (> 900 px): ursprünglicher Hover seitlich an der Nachricht
   - kleiner Desktop (<= 900 px): Klick auf die Nachricht öffnet die Aktionen
   - Mobilgerät: Long-Press bleibt unverändert
   ========================================================================== */

@media (min-width: 901px) {
    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-bubble > .message-actions {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        z-index: 100 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-50%) scale(.96) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-own .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-own .message-bubble > .message-actions {
        right: calc(100% + 8px) !important;
        left: auto !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-foreign .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-foreign .message-bubble > .message-actions {
        right: auto !important;
        left: calc(100% + 8px) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row:hover .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row:focus-within .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-desktop-actions-open .message-bubble > .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) scale(1) !important;
    }
}

@media (max-width: 900px) {
    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions,
    .chat-app.has-mouse-input:not(.is-mobile-ui) .message-bubble > .message-actions {
        display: flex !important;
        position: absolute !important;
        top: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        left: auto !important;
        z-index: 100 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(5px) scale(.96) !important;
    }

    /* In der kleinen Desktop-Ansicht darf Hover die Leiste nicht öffnen. */
    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
    .chat-app.has-mouse-input:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app.has-mouse-input:not(.is-mobile-ui) .message-row.is-desktop-actions-open .message-bubble > .message-actions {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble > .message-actions,
    .chat-app.has-mouse-input:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble > .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble,
    .chat-app.has-mouse-input:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble {
        padding-bottom: 49px !important;
    }
}

/* APOM Fix: Mobile Long-Press hat Vorrang vor einer eventuell gesetzten Mausklasse. */
.chat-app.is-mobile-ui.has-mouse-input .message-bubble > .message-actions {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.chat-app.is-mobile-ui.has-mouse-input .message-row.is-actions-open .message-bubble > .message-actions {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* APOM TALK: Alle Profil- und Gesprächsbilder konsequent kreisrund darstellen. */
.avatar,
.avatar-large,
.member-avatar,
.private-user-search-avatar,
#active-conversation-avatar,
#group-info-avatar,
.conversation-item .avatar {
    overflow: hidden !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}

.avatar > img,
.avatar-large > img,
.member-avatar > img,
.private-user-search-avatar > img,
#active-conversation-avatar > img,
#group-info-avatar > img,
.conversation-item .avatar > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
}


/* Dark mode conversation hover fix */
:root[data-theme="dark"] .conversation-item,
:root[data-theme="dark"] .conversation-item:hover,
:root[data-theme="dark"] .conversation-item:focus-visible,
:root[data-theme="dark"] .conversation-item.is-active{
    background: var(--theme-surface) !important;
}
:root[data-theme="dark"] .conversation-item:hover{
    background: var(--theme-surface-hover) !important;
}

/* APOM Chat – lokale GIFs und Sticker */
.message-form {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
}
.media-button {
    font-size: 18px;
}

/* Zentriertes Medienfenster mit abgedunkeltem Hintergrund. */
.chat-media-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10050;
    width: min(680px, calc(100vw - 32px));
    max-height: min(680px, calc(100dvh - 48px));
    padding: 16px;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid var(--theme-border, rgba(127,127,127,.25));
    border-radius: 18px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text, #111);
    box-shadow:
        0 24px 70px rgba(0,0,0,.34),
        0 0 0 100vmax rgba(15,23,42,.42);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
.chat-media-picker[hidden] { display: none !important; }

.media-picker-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex: 0 0 auto;
    gap:12px;
    margin-bottom:12px;
}
.media-picker-head strong { font-size: 17px; }
.media-picker-close {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(127,127,127,.12);
    color:inherit;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.media-picker-close:hover { background:rgba(127,127,127,.22); }
.media-picker-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    flex: 0 0 auto;
    gap:8px;
    margin-bottom:12px;
}
.media-picker-tab {
    min-height:42px;
    padding:9px 12px;
    border:1px solid var(--theme-border, rgba(127,127,127,.25));
    border-radius:11px;
    background:transparent;
    color:inherit;
    cursor:pointer;
}
.media-picker-tab.is-active {
    background:rgba(127,127,127,.16);
    font-weight:700;
}
.media-picker-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    min-height:150px;
    max-height:420px;
    padding:2px 4px 8px 2px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.media-picker-item-wrap { position:relative; min-width:0; }
.media-picker-item {
    display:grid;
    place-items:center;
    width:100%;
    aspect-ratio:1;
    padding:6px;
    border:0;
    border-radius:12px;
    background:rgba(127,127,127,.1);
    overflow:hidden;
    cursor:pointer;
}
.media-picker-item:hover { background:rgba(127,127,127,.18); }
.media-picker-item img {
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.media-delete {
    position:absolute;
    top:-5px;
    right:-5px;
    width:26px;
    height:26px;
    border:2px solid var(--theme-surface, #fff);
    border-radius:50%;
    background:#9d2f2f;
    color:#fff;
    cursor:pointer;
}
.media-upload-label {
    display:block;
    flex: 0 0 auto;
    margin-top:12px;
    padding:11px;
    border:1px dashed currentColor;
    border-radius:11px;
    text-align:center;
    font-weight:700;
    cursor:pointer;
}
.media-picker-status,
.media-picker-empty {
    padding:28px 12px;
    text-align:center;
    line-height:1.5;
    opacity:.8;
}
.media-picker-empty { grid-column:1/-1; }

@media (max-width: 700px) {
    .chat-media-picker {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 32px);
        padding: 14px;
        border-radius: 16px;
    }
    .media-picker-grid {
        grid-template-columns:repeat(3, minmax(0,1fr));
        max-height: min(52dvh, 410px);
    }
}
@media (max-width: 520px) {
    .chat-app.is-mobile-ui .message-form {
        grid-template-columns:30px 30px minmax(0,1fr) 46px !important;
    }
    .chat-app.is-mobile-ui .media-button {
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        font-size:15px !important;
    }
    .chat-media-picker {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 20px);
        padding: 12px;
        border-radius: 14px;
    }
    .media-picker-grid {
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:8px;
        max-height: min(50dvh, 360px);
    }
    .media-picker-status,
    .media-picker-empty { padding:24px 8px; }
}



/* ==========================================================================
   APOM Chat – optimierte Desktop-Medienansicht
   ========================================================================== */
@media (min-width: 901px) {
    .message-list {
        width: min(100%, 920px);
        margin-inline: auto;
    }

    .message-bubble {
        max-width: min(70%, 600px);
    }

    .message-image-button.is-image,
    .message-image-button.is-gif {
        width: min(100%, 460px);
    }

    .message-image-button.is-image .message-image,
    .message-image-button.is-gif .message-image {
        max-height: min(52vh, 390px);
    }
}

/* Sticker sollen wie Sticker wirken und nicht wie übergroße Fotokarten. */
.message-image-button.is-sticker {
    width: auto;
    min-width: 96px;
    max-width: min(240px, 48vw);
    min-height: 0;
    margin: 6px 0 2px;
    overflow: visible;
    background: transparent !important;
    border-radius: 0;
}

.message-image-button.is-sticker .message-image {
    width: auto;
    max-width: 100%;
    max-height: 240px;
    margin-inline: auto;
    object-fit: contain;
}

.message-image-button.is-sticker .message-image-loading {
    position: static;
    min-width: 96px;
    min-height: 96px;
    border-radius: 14px;
    background: rgba(127,127,127,.10);
}

.message-image-button.is-sticker.is-loaded .message-image-loading {
    display: none;
}

/* Medienblasen sollen nur so breit wie ihr Inhalt werden. */
.message-bubble:has(.message-image-button.is-sticker) {
    width: fit-content;
    max-width: min(300px, 62vw);
    padding: 9px 11px 7px;
}

@media (max-width: 900px) {
    .message-image-button.is-image,
    .message-image-button.is-gif {
        width: min(100%, 420px);
    }

    .message-image-button.is-image .message-image,
    .message-image-button.is-gif .message-image {
        max-height: 52dvh;
    }

    .message-image-button.is-sticker {
        max-width: min(210px, 54vw);
    }

    .message-image-button.is-sticker .message-image {
        max-height: 210px;
    }
}

/* ========================================================================== 
   APOM FINAL: stabiler Desktop-Composer + inhaltsnahe Sticker
   ========================================================================== */
@media (min-width: 901px) {
    .chat-app {
        height: min(820px, calc(100dvh - 32px)) !important;
        min-height: 560px;
    }

    .chat-panel,
    .active-conversation {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .active-conversation {
        display: flex !important;
        flex-direction: column !important;
    }

    .chat-header,
    .theme-panel,
    .message-search-panel,
    .pinned-message-bar,
    .typing-indicator,
    .reply-preview {
        flex: 0 0 auto !important;
    }

    .message-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Die Eingabeleiste bleibt unabhängig von Nachrichtenhöhe und Scrollstand sichtbar. */
    .message-form {
        display: grid !important;
        flex: 0 0 auto !important;
        position: relative !important;
        inset: auto !important;
        z-index: 60 !important;
        width: 100% !important;
        min-height: var(--chat-composer-height) !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Aktionen oberhalb statt seitlich: kein Abschneiden am Fensterrand. */
    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-bubble > .message-actions {
        top: auto !important;
        bottom: calc(100% + 7px) !important;
        transform: translateY(4px) scale(.96) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-own .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-own .message-bubble > .message-actions {
        right: 0 !important;
        left: auto !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row.is-foreign .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-foreign .message-bubble > .message-actions {
        right: auto !important;
        left: 0 !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row:hover .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row:focus-within .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-row.is-desktop-actions-open .message-bubble > .message-actions {
        transform: translateY(0) scale(1) !important;
    }
}

/* Sticker übernehmen ausschließlich die tatsächliche Bildgröße. */
.message-text:has(.message-image-button.is-sticker) {
    line-height: 0 !important;
}

.message-image-button.is-sticker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: min(220px, 52vw) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.message-image-button.is-sticker .message-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

.message-bubble:has(.message-image-button.is-sticker) {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(260px, 62vw) !important;
    padding: 7px 8px 6px !important;
}

.message-bubble:has(.message-image-button.is-sticker) .message-meta {
    margin-top: 4px !important;
    line-height: 1.2 !important;
}

@media (max-width: 900px) {
    .message-image-button.is-sticker {
        max-width: min(190px, 56vw) !important;
    }

    .message-image-button.is-sticker .message-image {
        max-height: 190px !important;
    }
}


/* ========================================================================== 
   APOM Desktop Hotfix: Composer-Startzustand und Nachrichten-Hoveraktionen
   ========================================================================== */
@media (min-width: 901px) {
    /* Aktive Unterhaltung füllt zuverlässig die rechte Spalte. */
    .chat-panel {
        display: block !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .active-conversation:not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .active-conversation:not([hidden]) .message-form {
        display: grid !important;
        flex: 0 0 auto !important;
    }

    /* Die Aktionsleiste wird auf Desktop wieder per Hover/Fokus eingeblendet.
       Die Regeln überschreiben auch Touch-/Hybrid-Mediaqueries von Laptops. */
    .chat-app .message-row .message-actions {
        visibility: visible !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .chat-app .message-row:hover .message-actions,
    .chat-app .message-row:focus-within .message-actions,
    .chat-app .message-row.is-click-actions-open .message-actions,
    .chat-app .message-row.is-desktop-actions-open .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .chat-app .message-row:hover .message-actions {
        display: flex !important;
    }
}

/* ========================================================================== 
   APOM Desktop 3.5 – Composer garantiert sichtbar im Popup/Desktopfenster
   ========================================================================== */
@media (min-width: 901px) {
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .chat-app {
        height: calc(100dvh - 32px) !important;
        max-height: 820px !important;
        min-height: 0 !important;
    }

    .chat-panel,
    .active-conversation:not([hidden]) {
        position: relative !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .active-conversation:not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: var(--chat-composer-height) !important;
    }

    .active-conversation:not([hidden]) .message-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* Der Composer liegt fest innerhalb der rechten Chatspalte. */
    .active-conversation:not([hidden]) .message-form {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        display: grid !important;
        width: 100% !important;
        min-height: var(--chat-composer-height) !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, .06);
    }

    .active-conversation:not([hidden]) .reply-preview {
        position: absolute !important;
        right: 0 !important;
        bottom: var(--chat-composer-height) !important;
        left: 0 !important;
        z-index: 101 !important;
    }

    /* Hover-Werkzeuge wieder zuverlässig über der Nachricht anzeigen. */
    .chat-app .message-row .message-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .chat-app .message-row:hover .message-actions,
    .chat-app .message-row:focus-within .message-actions,
    .chat-app .message-row.is-desktop-actions-open .message-actions,
    .chat-app .message-row.is-click-actions-open .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }
}

/* ========================================================================== 
   APOM Desktop 4.0 – stabiles Chatlayout (finale, maßgebliche Regeln)
   ========================================================================== */
@media (min-width: 901px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .chat-app {
        flex: 0 1 1180px !important;
        width: min(1180px, calc(100% - 32px)) !important;
        height: calc(100dvh - 32px) !important;
        max-height: 820px !important;
        min-height: 520px !important;
        margin: 16px auto !important;
        overflow: hidden !important;
    }

    .conversation-sidebar,
    .chat-panel {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .chat-panel {
        position: relative !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .chat-empty-state,
    .active-conversation:not([hidden]) {
        grid-area: 1 / 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Jede sichtbare Leiste erhält eine eigene Rasterzeile. Der Verlauf ist
       die einzige flexible Zeile; der Composer bleibt deshalb immer sichtbar. */
    .active-conversation:not([hidden]) {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows:
            auto /* Kopf */
            auto /* Darstellung */
            auto /* Suche */
            auto /* Pins */
            minmax(0, 1fr) /* Nachrichten */
            auto /* schreibt ... */
            auto /* Bearbeiten */
            auto /* Antworten */
            auto /* Composer */ !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .active-conversation:not([hidden]) > .chat-header,
    .active-conversation:not([hidden]) > .theme-panel,
    .active-conversation:not([hidden]) > .message-search-panel,
    .active-conversation:not([hidden]) > .pinned-message-bar,
    .active-conversation:not([hidden]) > .typing-indicator,
    .active-conversation:not([hidden]) > .reply-preview,
    .active-conversation:not([hidden]) > .message-form {
        position: relative !important;
        inset: auto !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .active-conversation:not([hidden]) > .chat-header {
        grid-row: 1 !important;
        height: var(--chat-header-height) !important;
        min-height: var(--chat-header-height) !important;
        z-index: 30 !important;
    }

    .active-conversation:not([hidden]) > .theme-panel {
        grid-row: 2 !important;
    }

    .active-conversation:not([hidden]) > .message-search-panel {
        grid-row: 3 !important;
    }

    .active-conversation:not([hidden]) > .pinned-message-bar {
        grid-row: 4 !important;
    }

    .active-conversation:not([hidden]) > .message-area {
        grid-row: 5 !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 22px 28px 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }

    .active-conversation:not([hidden]) > .typing-indicator {
        grid-row: 6 !important;
    }

    .active-conversation:not([hidden]) > #edit-preview {
        grid-row: 7 !important;
    }

    .active-conversation:not([hidden]) > #reply-preview {
        grid-row: 8 !important;
    }

    .active-conversation:not([hidden]) > .message-form {
        grid-row: 9 !important;
        z-index: 40 !important;
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        align-items: end !important;
        min-height: var(--chat-composer-height) !important;
        max-height: 160px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        background: var(--theme-surface, #fff) !important;
        border-top: 1px solid var(--theme-border, var(--chat-border)) !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .055) !important;
    }

    .message-input-wrapper,
    .message-input {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .message-input {
        max-height: 112px !important;
        overflow-y: auto !important;
    }

    /* Picker schweben über dem Raster und erzeugen keine zusätzliche Zeile. */
    .active-conversation:not([hidden]) > .emoji-picker,
    .active-conversation:not([hidden]) > .chat-media-picker {
        position: fixed !important;
        z-index: 10000 !important;
    }

    /* Hover-Aktionen – zuverlässig sichtbar und nicht seitlich abgeschnitten. */
    .message-row {
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    .message-row:hover,
    .message-row:focus-within,
    .message-row.is-desktop-actions-open,
    .message-row.is-click-actions-open {
        z-index: 100 !important;
    }

    .message-bubble {
        position: relative !important;
        overflow: visible !important;
    }

    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions,
    .chat-app.has-mouse-input .message-bubble > .message-actions,
    .chat-app .message-row .message-actions {
        position: absolute !important;
        top: -46px !important;
        bottom: auto !important;
        z-index: 500 !important;
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(6px) scale(.96) !important;
    }

    .chat-app .message-row.is-own .message-actions {
        right: 0 !important;
        left: auto !important;
    }

    .chat-app .message-row.is-foreign .message-actions {
        right: auto !important;
        left: 0 !important;
    }

    .chat-app .message-row:hover .message-actions,
    .chat-app .message-row:focus-within .message-actions,
    .chat-app .message-row.is-desktop-actions-open .message-actions,
    .chat-app .message-row.is-click-actions-open .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .message-action-button {
        display: grid !important;
        visibility: visible !important;
    }
}

/* Niedrige Desktopfenster: keine Mindesthöhe erzwingen, damit der Composer
   auch in einem kleineren APOM-Popup vollständig innerhalb des Viewports bleibt. */
@media (min-width: 901px) and (max-height: 620px) {
    .chat-app {
        height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        margin: 8px auto !important;
    }

    .active-conversation:not([hidden]) > .message-area {
        padding-top: 14px !important;
        padding-bottom: 20px !important;
    }
}

/* ========================================================================== 
   APOM Desktop – Nachrichtenaktionen dauerhaft repariert
   Die Werkzeugleiste sitzt seitlich neben der Bubble, damit sie weder am
   oberen Rand noch durch den scrollbaren Nachrichtenbereich abgeschnitten wird.
   ========================================================================== */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .chat-app:not(.is-mobile-ui) .message-row,
    .chat-app:not(.is-mobile-ui) .message-bubble {
        overflow: visible !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row {
        position: relative !important;
        isolation: auto !important;
    }

    .chat-app:not(.is-mobile-ui) .message-bubble > .message-actions {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: max-content !important;
        min-width: max-content !important;
        padding: 5px 7px !important;
        border: 1px solid var(--theme-border, #d9e0e8) !important;
        border-radius: 999px !important;
        background: var(--theme-surface, #fff) !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .16) !important;
        z-index: 9999 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;
    }

    /* Eigene Nachrichten: Leiste links neben der Bubble. */
    .chat-app:not(.is-mobile-ui) .message-row.is-own .message-bubble > .message-actions {
        right: calc(100% + 10px) !important;
        left: auto !important;
        transform: translate(8px, -50%) scale(.96) !important;
    }

    /* Fremde Nachrichten: Leiste rechts neben der Bubble. */
    .chat-app:not(.is-mobile-ui) .message-row.is-foreign .message-bubble > .message-actions {
        left: calc(100% + 10px) !important;
        right: auto !important;
        transform: translate(-8px, -50%) scale(.96) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within,
    .chat-app:not(.is-mobile-ui) .message-row.is-desktop-actions-open,
    .chat-app:not(.is-mobile-ui) .message-row.is-click-actions-open {
        z-index: 5000 !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row.is-desktop-actions-open .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble > .message-actions {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate(0, -50%) scale(1) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-action-button {
        display: inline-grid !important;
        place-items: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        color: var(--theme-text, #101828) !important;
        cursor: pointer !important;
    }

    .chat-app:not(.is-mobile-ui) .message-action-button:hover,
    .chat-app:not(.is-mobile-ui) .message-action-button:focus-visible {
        background: var(--theme-surface-hover, #eef3f9) !important;
        outline: none !important;
    }

    .chat-app:not(.is-mobile-ui) .message-action-button.is-danger:hover {
        color: #b42318 !important;
        background: #fff0ee !important;
    }
}

/* In schmaleren Desktopfenstern per Klick öffnen, damit die Leiste nicht aus
   der Chatspalte herausragt. */
@media (min-width: 901px) and (max-width: 1120px) {
    .chat-app:not(.is-mobile-ui) .message-row.is-own .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row.is-foreign .message-bubble > .message-actions {
        top: -8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-100%) scale(.96) !important;
    }

    .chat-app:not(.is-mobile-ui) .message-row:hover .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row:focus-within .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row.is-desktop-actions-open .message-bubble > .message-actions,
    .chat-app:not(.is-mobile-ui) .message-row.is-click-actions-open .message-bubble > .message-actions {
        transform: translateY(-100%) scale(1) !important;
    }
}

/* APOM Chat – weichere Medien-Tabs und Picker-Übergänge */
.chat-media-picker {
    animation: mediaPickerOpen .18s cubic-bezier(.2,.75,.25,1) both;
}

.media-picker-tab {
    position: relative;
    overflow: hidden;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .16s ease;
}
.media-picker-tab:hover { transform: translateY(-1px); }
.media-picker-tab:active { transform: translateY(0) scale(.985); }
.media-picker-tab::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.media-picker-tab.is-active::after {
    opacity: .55;
    transform: scaleX(1);
}

.media-picker-content {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    opacity: 1;
    transform: translateX(0);
}
.media-picker-content.is-entering {
    animation: mediaContentEnter .2s cubic-bezier(.2,.75,.25,1) both;
}
.media-picker-content.is-loading .media-picker-grid {
    opacity: .72;
}
.media-picker-grid {
    transition: opacity .15s ease;
}
.media-picker-item-wrap {
    animation: mediaItemIn .2s ease both;
}
.media-picker-item-wrap:nth-child(2n) { animation-delay: 18ms; }
.media-picker-item-wrap:nth-child(3n) { animation-delay: 32ms; }
.media-picker-item {
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.media-picker-item:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 7px 18px rgba(0,0,0,.10);
}
.media-picker-item:active { transform: scale(.97); }
.media-upload-label {
    transition: background-color .16s ease, transform .16s ease, border-color .16s ease;
}
.media-upload-label:hover {
    background: rgba(127,127,127,.08);
    transform: translateY(-1px);
}
.media-picker-close {
    transition: background-color .16s ease, transform .16s ease;
}
.media-picker-close:hover { transform: rotate(5deg) scale(1.04); }
.media-picker-close:active { transform: scale(.94); }

.media-picker-loading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 12px);
    place-content: center;
    gap: 9px;
    min-height: 180px;
}
.media-picker-loading span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    animation: mediaLoadingPulse .9s ease-in-out infinite alternate;
}
.media-picker-loading span:nth-child(2) { animation-delay: .08s; }
.media-picker-loading span:nth-child(3) { animation-delay: .16s; }
.media-picker-loading span:nth-child(4) { animation-delay: .24s; }
.media-picker-loading span:nth-child(5) { animation-delay: .32s; }
.media-picker-loading span:nth-child(6) { animation-delay: .40s; }

@keyframes mediaPickerOpen {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mediaContentEnter {
    from { opacity: .3; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mediaItemIn {
    from { opacity: 0; transform: translateY(5px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mediaLoadingPulse {
    from { opacity: .12; transform: scale(.82); }
    to   { opacity: .48; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-media-picker,
    .media-picker-content,
    .media-picker-item-wrap,
    .media-picker-loading span {
        animation: none !important;
    }
    .media-picker-tab,
    .media-picker-item,
    .media-upload-label,
    .media-picker-close {
        transition: none !important;
    }
}

/* ========================================================================== 
   APOM Medien-Bubbles: GIFs und Sticker passen sich dem Inhalt an
   ========================================================================== */

/* Reine Mediennachrichten erzeugen keine breite Textzeile. */
.message-text:has(> .message-image-button.is-gif),
.message-text:has(> .message-image-button.is-sticker) {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 0 !important;
}

/* Die äußere Nachricht sitzt eng um Medium, Absender und Uhrzeit. */
.message-bubble:has(.message-image-button.is-gif),
.message-bubble:has(.message-image-button.is-sticker) {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(420px, 72vw) !important;
    padding: 8px 9px 6px !important;
}

/* Keine feste Kartenhöhe und kein grauer Leerraum um GIFs/Sticker. */
.message-image-button.is-gif,
.message-image-button.is-sticker {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 4px 0 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    vertical-align: top !important;
    line-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.message-image-button.is-gif {
    border-radius: 12px !important;
}

.message-image-button.is-sticker {
    border-radius: 8px !important;
}

/* Das Bild behält sein natürliches Seitenverhältnis. */
.message-image-button.is-gif .message-image,
.message-image-button.is-sticker .message-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

.message-image-button.is-gif .message-image {
    max-height: min(360px, 48dvh) !important;
}

.message-image-button.is-sticker .message-image {
    max-height: 220px !important;
}

/* Der Ladeplatzhalter ist kompakt; nach dem Laden verschwindet er komplett. */
.message-image-button.is-gif:not(.is-loaded),
.message-image-button.is-sticker:not(.is-loaded) {
    width: 112px !important;
    min-height: 84px !important;
    background: rgba(127, 127, 127, .09) !important;
    border-radius: 12px !important;
}

.message-image-button.is-gif.is-loaded,
.message-image-button.is-sticker.is-loaded {
    min-height: 0 !important;
    background: transparent !important;
}

.message-bubble:has(.message-image-button.is-gif) .message-meta,
.message-bubble:has(.message-image-button.is-sticker) .message-meta {
    width: 100% !important;
    margin-top: 4px !important;
    line-height: 1.15 !important;
}

@media (max-width: 900px) {
    .message-bubble:has(.message-image-button.is-gif),
    .message-bubble:has(.message-image-button.is-sticker) {
        max-width: min(340px, 78vw) !important;
    }

    .message-image-button.is-gif .message-image {
        max-height: min(310px, 44dvh) !important;
    }

    .message-image-button.is-sticker .message-image {
        max-height: 190px !important;
    }
}

/* ========================================================================== 
   APOM Medien-Bubbles: vollständige Darstellung ohne seitliches Abschneiden
   ========================================================================== */
.message-image-button.is-gif,
.message-image-button.is-sticker {
    width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
}

.message-image-button.is-gif .message-image,
.message-image-button.is-sticker .message-image {
    width: auto !important;
    height: auto !important;
    max-width: min(360px, 64vw) !important;
    object-fit: contain !important;
    border-radius: inherit !important;
}

.message-image-button.is-gif .message-image {
    max-height: min(360px, 48dvh) !important;
}

.message-image-button.is-sticker .message-image {
    max-width: min(240px, 52vw) !important;
    max-height: 240px !important;
}

.message-bubble:has(.message-image-button.is-gif),
.message-bubble:has(.message-image-button.is-sticker) {
    overflow: visible !important;
}

@media (max-width: 900px) {
    .message-image-button.is-gif .message-image {
        max-width: min(320px, 70vw) !important;
        max-height: min(310px, 44dvh) !important;
    }

    .message-image-button.is-sticker .message-image {
        max-width: min(210px, 58vw) !important;
        max-height: 210px !important;
    }
}


/* ==========================================================================
   Composer cleanup: Emoji-Schaltfläche entfernt, Medien-Stern ausgerichtet
   ========================================================================== */
.message-form,
.active-conversation:not([hidden]) > .message-form {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
}

#media-button.media-button {
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
}

.message-input-wrapper {
    align-self: center !important;
}

.send-message-button {
    align-self: center !important;
}

@media (max-width: 760px) {
    .message-form,
    .active-conversation:not([hidden]) > .message-form {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }
}
\n\n/* APOM Chat – Medien-Picker nach erfolgreichem Senden weich schließen */
.chat-media-picker.is-closing {
    pointer-events: none;
    animation: mediaPickerClose .17s ease-in both !important;
}
.media-picker-item.is-sending {
    pointer-events: none;
    transform: scale(.955) !important;
    box-shadow: 0 0 0 3px rgba(127,127,127,.20), 0 7px 18px rgba(0,0,0,.12) !important;
}
@keyframes mediaPickerClose {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-media-picker.is-closing { animation: none !important; }
}


/* Nachrichten-Avatare: Profilbilder direkt neben den Chat-Bubbles. */
.message-row {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
}

.message-row.is-foreign { justify-content: flex-start; }
.message-row.is-own { justify-content: flex-end; }

.message-row .message-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c8698, #a9b1bf);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    user-select: none;
}

.message-row .message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.message-row .message-bubble { min-width: 0; }
.chat-app:not(.is-mobile-ui) .message-row .message-bubble { max-width: min(72%, 760px); }

@media (max-width: 760px) {
    .message-row { gap: 0.4rem; }
    .message-row .message-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 0.6rem;
    }
    .message-row .message-bubble { max-width: calc(100% - 38px); }
}