* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif; background: #0b0f17; color: #e6e8ee; }
.hidden { display: none; }

.panel { max-width: 420px; margin: 10vh auto; padding: 20px; background: #121a2a; border: 1px solid #1e2a44; border-radius: 12px; }
.panel h1 { margin: 0 0 8px 0; font-size: 20px; }
.muted { color: #98a2b3; font-size: 13px; margin-bottom: 14px; }
form { display: flex; gap: 10px; flex-direction: column; }
input, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #24324f; background: #0d1424; color: #e6e8ee; }
button { padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3c61; background: #1c2b4a; color: #fff; font-weight: 600; }
button:active { transform: translateY(1px); }
.err { margin-top: 10px; color: #ff6b6b; font-size: 13px; white-space: pre-wrap; }

.layout { display: flex; height: 100vh; }
.sidebar { width: 280px; background: #0f1626; border-right: 1px solid #1e2a44; display: flex; flex-direction: column; }
.me { padding: 10px 12px; border-bottom: 1px solid #1e2a44; color: #cbd5e1; font-size: 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.logout { padding: 6px 10px; border-radius: 10px; border: 1px solid #2a3c61; background: transparent; color: #cbd5e1; font-weight: 600; }
.rooms { padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.roomBtn { padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; text-align: left; color: #e6e8ee; }
.roomBtn.active { background: #16223a; border-color: #2a3c61; }

.main { flex: 1; display: flex; flex-direction: column; }
.roomTitle { padding: 12px 14px; border-bottom: 1px solid #1e2a44; color: #cbd5e1; }
.messages { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 10px 12px; border-radius: 12px; border: 1px solid #22314f; background: #0d1424; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: #14304a; border-color: #2a5a7a; }
.msg.assistant { align-self: flex-start; }
.author { font-size: 11px; color: #98a2b3; margin: 0 0 4px 4px; }
.meta { font-size: 11px; color: #98a2b3; margin-top: 4px; }

.composer { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid #1e2a44; flex-direction: row; }
.composer textarea { flex: 1; resize: none; }

@media (max-width: 820px) {
  .sidebar { width: 140px; }
  .msg { max-width: 92%; }
}