:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", sans-serif;
}
body {
  margin: 0;
  background: #10131a;
  color: #e7ebf3;
}
.wrap {
  max-width: 760px;
  margin: 30px auto;
  padding: 0 16px;
}
.card {
  background: #1a2130;
  border: 1px solid #2e3b57;
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}
.row {
  display: flex;
  gap: 10px;
}
input, button, select {
  border-radius: 8px;
  border: 1px solid #3a4b6f;
  padding: 10px 12px;
  font-size: 14px;
}
input, select {
  flex: 1;
  background: #0f1624;
  color: #eef2ff;
}
button {
  background: #3d7dff;
  color: #fff;
  border: none;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: not-allowed; }
button.danger { background: #d04a4a; }

.hint { opacity: .75; font-size: 13px; }
.hidden { display: none; }
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}
.call-panel {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.messages {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  min-height: 260px;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid #2f3f60;
  border-radius: 8px;
  background: #0d1422;
}
.messages li {
  padding: 10px;
  border-bottom: 1px solid #253350;
  line-height: 1.4;
}
.messages li:last-child { border-bottom: none; }
.system { color: #9ab2da; }
.meta { opacity: .7; margin-right: 6px; }

.incoming {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.audioContainer { display: grid; gap: 8px; margin-top: 10px; }
.audioContainer audio { width: 100%; }

.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
}
.join-grid #roomInput {
  grid-column: 1 / span 2;
}
.join-grid #joinBtn {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media (max-width: 768px) {
  .wrap { margin: 12px auto; padding: 0 10px; }
  .card { padding: 12px; border-radius: 10px; }
  .top { flex-direction: column; gap: 6px; }
  .row, .call-panel, .incoming { flex-direction: column; align-items: stretch; }
  .join-grid {
    grid-template-columns: 1fr;
  }
  .join-grid #roomInput,
  .join-grid #joinBtn {
    grid-column: auto;
    grid-row: auto;
  }
  input, button, select { width: 100%; box-sizing: border-box; }
  .messages { min-height: 180px; max-height: 45vh; }
}