* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; background: #1a1b26; color: #c0caf5; }
.container { max-width: 480px; margin: 2rem auto; padding: 1rem; }
h1 { color: #7aa2f7; }
input, button { padding: 0.5rem 0.75rem; margin: 0.25rem 0; border-radius: 6px; border: 1px solid #414868; }
input { background: #24283b; color: #c0caf5; width: 100%; }
button { background: #7aa2f7; color: #1a1b26; cursor: pointer; border: none; }
button:hover { background: #9ece6a; }
hr { border-color: #414868; margin: 1.5rem 0; }
.room-wrap { display: flex; flex-direction: column; height: 100vh; }
.toolbar { background: #24283b; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.toolbar button, .toolbar select, .toolbar a { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
#btn-leave { color: #f7768e; text-decoration: none; }
.videos { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #1a1b26; align-content: flex-start; }
.videos video { width: 240px; height: 180px; object-fit: cover; background: #24283b; border-radius: 8px; }
.chat-panel { height: 200px; display: flex; flex-direction: column; border-top: 1px solid #414868; }
#chat-messages { flex: 1; overflow-y: auto; padding: 0.5rem; font-size: 0.9rem; }
#chat-form { display: flex; padding: 0.5rem; gap: 0.5rem; }
#chat-input { flex: 1; }

.version-tag {
  position: fixed;
  left: 8px;
  bottom: 4px;
  font-size: 10px;
  color: #a9b1d6;
  opacity: 0.7;
  pointer-events: none;
}