.chat-page { max-width: 480px; margin: 0 auto; padding: 20px 16px 16px; display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; }
.chat-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.chat-page-header h1 { color: var(--text-on-dark); font-size: 1.15rem; margin: 0; flex: 1; }
.chat-room-select {
    background: var(--surface); color: var(--text-on-dark); border: 1px solid var(--surface-border);
    border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 0.78rem;
}

.chat-messages {
    flex: 1; overflow-y: auto; margin: 12px 0; display: flex; flex-direction: column; gap: 8px;
    padding-right: 4px;
}
.chat-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 0.85rem; line-height: 1.4; }
.chat-msg-mine { align-self: flex-end; background: var(--lime); color: var(--dark-950); border-bottom-right-radius: 4px; }
.chat-msg-other { align-self: flex-start; background: var(--surface); color: var(--text-on-dark); border-bottom-left-radius: 4px; border: 1px solid var(--surface-border); }
.chat-msg-teacher { border: 1.5px solid var(--gold, #F5B301); }
.chat-msg-sender { font-size: 0.68rem; font-weight: 700; margin-bottom: 3px; opacity: 0.75; }
.chat-msg-time { font-size: 0.6rem; opacity: 0.55; margin-top: 3px; text-align: right; }
.chat-empty { text-align: center; color: var(--text-on-dark-soft); padding: 30px 0; font-size: 0.85rem; }

.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input {
    flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--surface-border);
    background: var(--bg-light); color: var(--ink); font-family: inherit; font-size: 0.88rem;
}

/* ---------- Mitgliederliste (Lehrer-Bereich, Räume bearbeiten) ---------- */
.member-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; border-radius: 8px; background: var(--bg-light);
    margin-bottom: 6px; font-size: 0.85rem;
}
.member-name { font-weight: 700; color: var(--ink); }
.member-meta { font-size: 0.72rem; color: var(--ink-soft); }
.member-badge {
    font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: rgba(59,130,196,0.15); color: #3B82C4;
}
.member-badge.teacher { background: rgba(245,179,1,0.18); color: #C8920A; }
.member-remove { color: #C0392B; cursor: pointer; font-size: 0.78rem; font-weight: 700; }
.member-remove.disabled { color: var(--ink-soft); cursor: default; }

/* ---------- Eigene Nachricht löschen ---------- */
.chat-msg-delete { cursor: pointer; margin-inline-start: 6px; opacity: 0.7; color: #C0392B; font-weight: 700; }
.chat-msg-delete:hover { opacity: 1; }


/* ===== Private Chats / Mobile Composer Fix ===== */
.chat-page {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.chat-back-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.chat-mode-bar {
    display: flex;
    gap: 8px;
    margin: 10px 0 8px;
}
.chat-mode-btn {
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    padding: 7px 13px;
    background: var(--surface);
    color: var(--text-on-dark-soft);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.chat-mode-btn.active {
    background: var(--lime);
    color: var(--dark-950);
    border-color: var(--lime);
}
.private-contacts {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 4px 1px 10px;
    scrollbar-width: thin;
}
.private-contact {
    min-width: 66px;
    max-width: 82px;
    border: 0;
    background: transparent;
    color: var(--text-on-dark);
    padding: 2px;
    font: inherit;
    cursor: pointer;
    text-align: center;
}
.private-contact-avatar-wrap {
    position: relative;
    display: inline-block;
}
.private-contact-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lime);
    background-size: cover;
    background-position: center;
    color: var(--dark-950);
    font-weight: 800;
    border: 2px solid rgba(255,255,255,.72);
}
.private-contact.active .private-contact-avatar {
    box-shadow: 0 0 0 3px var(--gold, #f5b301);
}
.private-contact-name {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.private-contact-role {
    display: block;
    font-size: .58rem;
    opacity: .7;
}
.private-contact-unread {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #e53935;
    color: white;
    display: grid;
    place-items: center;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 800;
}
.chat-input-row {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 8px 0 0;
    margin-bottom: 0;
    background: var(--bg-dark, #090a09);
}
.chat-messages {
    min-height: 0;
}
.private-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(198,239,55,.45);
    background: rgba(198,239,55,.10);
    color: var(--text-on-dark, #fff);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
@media (max-width: 560px) {
    .chat-page {
        height: 100dvh;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .chat-input-row input { min-width: 0; }
}


/* ===== Chat Layout Fix 2026-08-18 ===== */
.chat-back-btn { color:#f5f7f2 !important; opacity:1 !important; font-weight:800; text-decoration:none; }
.chat-input-row { align-items:flex-end; gap:8px; }
.chat-input-row textarea {
    flex:1 1 auto; min-width:0; min-height:74px; max-height:150px; resize:vertical;
    padding:11px 14px; border-radius:16px; border:1px solid var(--surface-border);
    background:var(--bg-light); color:var(--ink); font-family:inherit; font-size:.88rem; line-height:1.4;
}
.chat-input-row button[type="submit"] { flex:0 0 auto; width:auto !important; min-width:0; padding:11px 14px; white-space:nowrap; }
@media(max-width:560px){ .chat-input-row textarea{min-width:0;} }