:root{ --bg:#0b141a; --panel:#121b22; --panel-2:#0e171e; --text:#e9edef; --muted:#8696a0; --primary:#2a8cff; --bubble-me-2:#1f6fd6; --bubble-other:#202c33; --danger:#e74c3c; --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.25) }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:960px;margin:0 auto;padding:24px 16px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:20px;box-shadow:var(--shadow);padding:24px}
.header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel-2);border-radius:16px;border:1px solid rgba(255,255,255,.06);margin-bottom:16px}
.header .title{font-weight:600;font-size:18px}.header .spacer{flex:1}
.header .logout-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);padding:8px 12px;border-radius:12px}
.header .logout-btn:hover{border-color:rgba(255,255,255,.35)}
.input,input[type="text"],input[type="password"],input[type="file"]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0d151b;color:var(--text)}
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:13px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row .grow{flex:1}
.btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer;background:var(--primary);color:white}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text)}
.btn.danger{background:var(--danger)} .btn:hover{filter:brightness(1.05)}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.table th{color:var(--muted);font-weight:600}
.notice{color:var(--muted);font-size:13px}
.chat-wrap{display:flex;flex-direction:column;gap:12px}
.chat{border-radius:20px;background:var(--panel);border:1px solid rgba(255,255,255,.06);height:60vh;overflow:auto;padding:16px;scroll-behavior:smooth}
.message{max-width:70%;padding:10px 12px;border-radius:16px;margin:6px 0;white-space:pre-wrap;word-wrap:break-word}
.message.me{margin-left:auto;background:var(--bubble-me-2);color:#fff;border-bottom-right-radius:6px}
.message.other{margin-right:auto;background:var(--bubble-other);color:#fff;border-bottom-left-radius:6px}
.message .meta{display:block;margin-top:4px;font-size:11px;color:rgba(255,255,255,.75)}
.input-bar{display:flex;gap:10px;align-items:center;padding:12px;background:var(--panel-2);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.input-bar input{flex:1}
.form{display:grid;gap:12px}
.footer-hint{margin-top:8px;color:var(--muted);font-size:12px}
.flash{padding:10px 12px;border-radius:12px;background:#123;border:1px solid rgba(255,255,255,.15);margin-bottom:12px}
.flash.success{background:rgba(46,204,113,.15);border-color:rgba(46,204,113,.4)}
.flash.error{background:rgba(231,76,60,.15);border-color:rgba(231,76,60,.4)}

/* Avatar + Sprechblasen-Layout */
.message-row{display:flex;gap:8px;align-items:flex-end;margin:6px 0}
.message-row.me .col{order:1}
.message-row.me .avatar{order:2}
.message-row .avatar img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15)}
.message-row .avatar .initials{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:#333;color:#bbb;font-weight:600;font-size:12px;
  border:1px solid rgba(255,255,255,.15)
}

/* Neue Bubble-Klasse (wir lassen die alten .message-Styles bestehen) */
.bubble{max-width:70%;padding:10px 12px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.message-row.me .bubble{background:var(--bubble-me-2);color:#fff;border-bottom-right-radius:6px;margin-left:auto}
.message-row.other .bubble{background:var(--bubble-other);color:#fff;border-bottom-left-radius:6px;margin-right:auto}