:root{font-family:system-ui,sans-serif;color-scheme:dark;background:#101318;color:#eef2f7}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}.shell{max-width:1280px;margin:0 auto;padding:24px}.hidden{display:none!important}.card{background:#181d25;border:1px solid #303846;border-radius:14px;padding:18px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.layout{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:16px}.chat{height:68vh;min-height:520px;display:flex;flex-direction:column}.chat>h2{margin-top:0}#messages{flex:1;overflow:auto;min-height:0;scrollbar-gutter:stable}.msg{padding:12px 4px;border-bottom:1px solid #29313e}.msg-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.msg-head>div:first-child{display:flex;flex-direction:column}.msg-text{margin-top:8px;overflow-wrap:anywhere;white-space:normal}.meta{font-size:.8rem;color:#aeb8c6}.msg-actions{display:flex;gap:6px}.msg-actions button{padding:6px 8px;font-size:.82rem}.error{color:#ffb4b4}.ok{color:#a6f3c0}form{display:grid;gap:10px}input,textarea,button{border-radius:9px;border:1px solid #3a4657;padding:10px;background:#11161d;color:inherit}textarea{min-height:90px;resize:vertical}button{cursor:pointer;background:#2d6cdf;border:0;font-weight:650}button.secondary{background:#303846}.danger{background:#8b3038}.seed{font-family:ui-monospace,monospace;word-break:break-all;background:#0f1318;padding:12px;border-radius:8px}.row,.composer-tools{display:flex;gap:8px;flex-wrap:wrap}.composer{position:relative}.composer textarea{width:100%}.composer-tools{align-items:center}.composer-tools input{flex:1}.emoji-picker{position:absolute;bottom:52px;left:0;z-index:10;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px;background:#202733;border:1px solid #455064;border-radius:10px;box-shadow:0 10px 30px #0008}.emoji-picker button{padding:6px;background:transparent}.rooms h2{margin-top:0}.room-button{display:block;width:100%;text-align:left;margin-bottom:7px}.room-button.active{background:#2d6cdf}.member-list{display:grid;gap:6px;max-height:220px;overflow:auto}.member-list label{display:flex;gap:8px;align-items:center}.key-panel{margin-bottom:16px;border:2px solid #5d8df0;background:#182238}.key-panel h2{margin-top:0}.key-panel input{min-width:min(100%,420px);flex:1}.key-state{font-weight:650}.seed-warning{margin-top:14px;padding:14px;border:2px solid #f0c75e;border-radius:10px;background:#2b2516}.file-button{margin-top:10px}.attention{animation:keyPulse .6s ease-in-out 3}@keyframes keyPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 6px rgba(93,141,240,.35)}}@media(max-width:1000px){.layout{grid-template-columns:190px minmax(0,1fr)}#adminPanel{grid-column:1/-1}}@media(max-width:700px){.shell{padding:10px}.layout{grid-template-columns:1fr}.chat{height:70vh;min-height:480px}.rooms{padding:12px}#roomList{display:flex;overflow:auto;gap:8px}.room-button{width:auto;white-space:nowrap;margin:0}.msg-head{align-items:flex-start}.msg-actions{flex-direction:column}}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:#000b;display:grid;place-items:center;padding:16px}.modal{width:min(680px,100%)}.modal textarea{width:100%;min-height:220px}

/* Räume: Liste stabil halten, Erstellen unten fixieren */
.rooms{height:68vh;min-height:520px;display:flex;flex-direction:column;overflow:hidden}
.rooms-head{flex:0 0 auto}
#roomList{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
.room-row{display:flex;align-items:stretch;gap:6px;margin-bottom:7px}
.room-row .room-button{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-delete{flex:0 0 34px;width:34px;padding:0;font-size:1.35rem;line-height:1;font-weight:700;display:grid;place-items:center}
#roomAdmin{flex:0 0 auto;margin-top:auto;padding-top:12px;border-top:1px solid #303846;background:#181d25}
.room-create summary{cursor:pointer;font-weight:700;padding:9px 10px;border-radius:9px;background:#2d6cdf;list-style:none;text-align:center}
.room-create summary::-webkit-details-marker{display:none}
.room-create[open] summary{margin-bottom:10px}
.room-create form{max-height:330px;overflow-y:auto;padding-right:2px}
@media(max-width:700px){.rooms{height:auto;min-height:0;overflow:visible}#roomList{display:flex;overflow-x:auto;overflow-y:hidden;gap:8px;padding-bottom:8px}.room-row{flex:0 0 auto;margin:0}.room-row .room-button{width:auto;max-width:180px}.room-delete{padding:7px}#roomAdmin{position:static;margin-top:12px}}

.room-create .create-room-submit{width:100%;margin:0;justify-self:stretch}
.room-create form{align-items:stretch}

/* Korrektur: Formular zum Anlegen darf die Raumleiste nicht verbreitern */
.room-create,
.room-create form,
.room-create form > * {
  min-width: 0;
  max-width: 100%;
}
.room-create {
  width: 100%;
  overflow: hidden;
}
.room-create form {
  width: 100%;
}
.room-create input:not([type="checkbox"]),
.room-create textarea,
.room-create .create-room-submit {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.room-create input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
}
.room-create .member-list,
.room-create .member-list label {
  min-width: 0;
  max-width: 100%;
}
.room-create .member-list label {
  overflow-wrap: anywhere;
}

.chat-title,.between{display:flex;justify-content:space-between;align-items:center;gap:10px}.chat-title h2{margin:0}.reply-bar,.pinned{padding:8px 10px;margin-bottom:8px;border-radius:9px;background:#202a39;border:1px solid #40506a}.reply-bar{display:flex;justify-content:space-between;align-items:center}.reply-quote{margin-top:8px;padding:7px 9px;border-left:3px solid #5d8df0;background:#121923;font-size:.88rem}.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.reaction{padding:4px 8px;background:#303846;font-size:.85rem}.reaction.mine{outline:2px solid #5d8df0}.pinned-msg{border-left:3px solid #f0c75e;padding-left:10px}.search-hidden{display:none!important}.image-preview{display:block;max-width:min(420px,100%);max-height:320px;object-fit:contain;margin-top:10px;border-radius:10px;cursor:zoom-in}.gallery{max-height:90vh;overflow:auto}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.gallery-grid img{width:100%;height:150px;object-fit:cover;border-radius:9px;cursor:zoom-in}.device-list{display:grid;gap:8px}.device{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px;background:#11161d;border-radius:9px}.device small{display:block;color:#aeb8c6;margin-top:4px}.rooms-head input{width:100%;margin-bottom:10px}select{font:inherit;border-radius:9px;border:1px solid #3a4657;padding:10px;background:#11161d;color:inherit;width:100%}code{overflow-wrap:anywhere}.pinned button{padding:4px 7px;margin:3px}.msg-actions{flex-wrap:wrap}@media(max-width:700px){.msg-actions button{font-size:.75rem;padding:5px}.gallery-grid{grid-template-columns:repeat(2,1fr)}}


/* Reaktionsauswahl */
.reaction-menu-wrap{position:relative;display:inline-flex}
.reaction-menu{position:absolute;z-index:20;right:0;top:calc(100% + .35rem);display:flex;gap:.25rem;padding:.4rem;border:1px solid #3b4657;border-radius:.7rem;background:#171d26;box-shadow:0 .5rem 1.4rem rgba(0,0,0,.35);white-space:nowrap}
.reaction-menu.hidden{display:none}
.reaction-choice{min-width:2.2rem;padding:.35rem .45rem;font-size:1.15rem;background:#242d3a;border:1px solid #3b4657;border-radius:.55rem}
.reaction-choice:hover,.reaction-choice:focus-visible{background:#33415a}
.reaction.mine{outline:2px solid #4d8cff;background:#263d68}


/* Inline-Bearbeitung des Gruppennamens */
.room-title-editor{display:flex;align-items:center;gap:.65rem;min-width:0;flex:1}
#roomTitle{margin:0;min-width:0;max-width:100%;overflow-wrap:anywhere;border:1px solid transparent;border-radius:.55rem;padding:.22rem .4rem;cursor:pointer}
#roomTitle:hover{border-color:var(--line,#364152)}
#roomTitle.editing{cursor:text;border-color:var(--accent,#3778e8);background:rgba(255,255,255,.04);outline:none}
#roomTitleSave{width:auto;flex:0 0 auto;padding:.55rem .8rem}
.chat-title{gap:.75rem}