:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f7fb;
  color: #1d2939;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.page-shell { max-width: 1100px; margin: 0 auto; padding: 16px; }
header { margin-bottom: 20px; }
header h1 { margin: 0 0 6px; font-size: 1.8rem; }
header p { margin: 0; color: #475569; }
.room-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.room-form, .room-info { background: #fff; border: 1px solid #d2d6dc; border-radius: 14px; padding: 16px; }
.room-form label { display: block; margin: 10px 0 6px; font-weight: 600; }
.room-input-row { display: flex; gap: 10px; }
.room-input-row input { flex: 1; }
.join-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.join-mode label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
input[type="text"], input[type="tel"], input[type="number"], input[type="radio"] {
  width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid #cbd5e1; font-size: 1rem;
}
.control-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.control-buttons button { width: 100%; }
button { background: #2563eb; border: 0; color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 1rem; cursor: pointer; }
button:hover { background: #1d4ed8; }
.status { margin-top: 12px; font-size: 0.95rem; color: #0f172a; }
.status.error { color: #b91c1c; }
.room-info div { margin-bottom: 8px; }
.media-grid { display: grid; gap: 16px; grid-template-columns: 1.8fr 1fr; }
.video-panel { display: grid; gap: 16px; }
.video-wrapper { position: relative; background: #000; border-radius: 16px; overflow: hidden; min-height: 220px; }
.video-wrapper video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-label { position: absolute; left: 0; bottom: 0; right: 0; padding: 8px 12px; background: rgba(15, 23, 42, 0.7); color: #fff; font-size: 0.95rem; }
.remote-videos { display: grid; gap: 12px; }
.remote-wrapper { min-height: 180px; }
.chat-panel { background: #fff; border: 1px solid #d2d6dc; border-radius: 14px; display: flex; flex-direction: column; padding: 16px; min-height: 420px; }
.panel-header { font-weight: 700; margin-bottom: 12px; }
.chat-log { flex: 1; overflow-y: auto; padding-right: 4px; }
.chat-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.chat-row.own { justify-content: flex-end; }
.chat-sender { font-weight: 700; color: #0f172a; }
.chat-text { background: #e2e8f0; border-radius: 12px; padding: 10px 14px; max-width: 85%; word-break: break-word; }
.chat-row.own .chat-text { background: #2563eb; color: #fff; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
.chat-form input { padding: 12px 14px; border-radius: 12px; border: 1px solid #cbd5e1; }
@media (max-width: 900px) {
  .media-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .room-panel { grid-template-columns: 1fr; }
}