/* /dart/public/assets/css/comm_chat.css (v2.1 - Button-Position angepasst) */

:root {
    --bg-dark: #0f172a; --bg-light: #1e293b; --card: #334155; --border: #475569;
    --text-main: #f8fafc; --text-muted: #94a3b8; --text-heading: #ffffff;
    --primary: #38bdf8; --primary-light: #7dd3fc;
    --accent-red: #fb7185; --radius: 16px;
}

/* Toggle-Button: Unten rechts, mit Badge für neue Nachrichten */
.comm-chat-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    background: var(--primary);
    color: var(--bg-dark);
    border: none;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
    z-index: 9998;
    cursor: pointer;
    /* GEÄNDERT: 'right' zur Transition hinzugefügt, damit die Bewegung animiert wird */
    transition: transform 0.2s, right 0.25s ease;
}
.comm-chat-toggle:hover {
    transform: scale(1.05);
}

/* HINZUGEFÜGT: Neue Regel für den Button, wenn der Chat offen ist */
.comm-chat-toggle.drawer-open {
    /* Drawer-Breite (380px) + gewünschter Abstand (24px) */
    right: calc(380px + 24px);
}

.comm-chat-badge {
    display: none;
    background: var(--accent-red);
    color: var(--text-main);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}
.comm-chat-toggle.has-unseen .comm-chat-badge {
    display: inline-block;
    animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Drawer */
.comm-chat-drawer {
    position:fixed; right:0; top:0; height:100%; width:380px; max-width:95vw; z-index:9999;
    background: var(--bg-light);
    color: var(--text-main);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 25px rgba(0,0,0,.35);
}
.comm-chat-drawer.open { transform:translateX(0); }

/* --- Restlicher CSS-Code bleibt unverändert --- */
.comm-chat-head {
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.comm-chat-head .ttl { font-weight: 700; font-size: 1.1rem; color: var(--text-heading); }
.comm-chat-head-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size: 1.2rem; }
.comm-chat-head-btn:hover { color: var(--text-main); }
.comm-chat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-dark);
    display:flex; flex-direction:column; gap:12px;
}
.comm-chat-msg {
    display: flex;
    max-width: 85%;
}
.comm-chat-msg .bubble { padding: 10px 14px; border-radius: 18px; line-height: 1.4; word-wrap: break-word; }
.comm-chat-msg.me { align-self: flex-end; }
.comm-chat-msg.me .bubble { background: #083344; color: var(--text-main); border-bottom-right-radius: 4px; }
.comm-chat-msg.other { align-self: flex-start; }
.comm-chat-msg.other .bubble { background: var(--card); color: var(--text-main); border-bottom-left-radius: 4px; }
.comm-chat-meta { font-size: 0.8rem; margin-bottom: 4px; display:flex; justify-content: space-between; gap: 8px; }
.comm-chat-meta .author { font-weight: 700; color: var(--text-main); }
.comm-chat-meta .timestamp { color: var(--text-muted); }
.comm-chat-text { white-space: pre-wrap; }
.comm-chat-text a { color: var(--primary-light); }
.comm-chat-actions { text-align: right; margin-top: 4px; }
.comm-chat-delete-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:0; }
.comm-chat-delete-btn:hover { color: var(--accent-red); }
.comm-chat-empty { color:var(--text-muted); text-align:center; margin:auto; }
.comm-chat-foot {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}
.comm-chat-foot input {
    flex-grow: 1;
    background: var(--bg-dark);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
    resize: none;
}
.comm-chat-foot input:focus { outline: none; border-color: var(--primary); }
.comm-chat-foot .btn { padding: 10px 16px; }
.comm-chat-foot .btn:disabled { background: var(--card); cursor: not-allowed; }