* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #f4f6f8; color: #333; height: 100vh; display: flex; flex-direction: column; }
button { padding: 8px 16px; background: #3182ce; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
button.danger { background: #e53e3e; }
button.back-button, button.secondary { background: #edf2f7; color: #333; }
input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; }
ul { list-style: none; margin: 0; padding: 0; }
h3, h4 { margin: 0; }
[hidden] { display: none !important; }

.header { display: flex; align-items: center; gap: 15px; padding: 10px 20px; background: white; border-bottom: 2px solid #eee; }
.header h2 { margin: 0; flex: 1; }
.badge { font-size: 13px; color: #555; }
.status { font-size: 13px; color: #e53e3e; }
.muted { color: #888; font-size: 13px; }
.row { display: flex; gap: 10px; }

.layout { flex: 1; display: flex; gap: 15px; padding: 15px; min-height: 0; }
.main { flex: 1; min-width: 0; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 15px; display: flex; }
.view { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.view-header { display: flex; align-items: center; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.view-header h3 { flex: 1; }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; align-content: start; overflow-y: auto; }
.room-card { background: #eef2f7; padding: 15px; border-radius: 6px; font-weight: bold; border: 1px solid #d0d7de; cursor: pointer; }
.room-card:hover { background: #e2e8f0; }

.room-body { flex: 1; display: flex; gap: 15px; min-height: 0; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.messages { flex: 1; overflow-y: auto; background: #f7fafc; border: 1px solid #edf2f7; border-radius: 6px; padding: 10px; }
.msg { margin-bottom: 8px; overflow-wrap: anywhere; }
.msg .sender { font-weight: bold; margin-right: 6px; }
.msg.mine .sender { color: #3182ce; }
.msg .time { color: #999; font-size: 11px; margin-right: 6px; }
.typing { height: 16px; font-size: 12px; color: #888; font-style: italic; }

.members { width: 180px; overflow-y: auto; border-left: 1px solid #eee; padding-left: 15px; }
.members li { padding: 4px 0; cursor: pointer; }
.members li:hover { color: #3182ce; }
.members li.me { cursor: default; color: #888; }

.directs { width: 240px; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 15px; overflow-y: auto; }
.directs h4 { margin-bottom: 10px; }
.directs li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; cursor: pointer; }
.directs li:hover { background: #f7fafc; }
.directs li.active { background: #ebf8ff; }
.directs .peer { flex: 1; min-width: 0; }
.directs .preview { display: block; color: #888; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directs .unread { background: #e53e3e; color: white; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: bold; }