:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #10131a;
  color: #e8eaf0;
}
#app { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
.hidden { display: none !important; }
.panel {
  background: #1a1f2b;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.videos {
  position: relative;
  margin: 8px 0;
}
video {
  width: 100%;
  background: #000;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Локальное видео — миниатюра в правом нижнем углу поверх удалённого
   (как в звонке приложения); скрывается классом .hidden при выключенной
   камере и в аудио-режиме */
#local {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 25%;
  max-width: 160px;
  min-width: 96px;
  border-radius: 8px;
  border: 1px solid #2c3444;
}
.controls { display: flex; gap: 8px; margin-top: 8px; }
.controls .off { background: #3a4152; border-color: #3a4152; }
#chat-log {
  height: 160px;
  overflow-y: auto;
  background: #10131a;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
input, button {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #2c3444;
  background: #10131a;
  color: inherit;
}
button { background: #2b6cff; border-color: #2b6cff; cursor: pointer; }
form { display: flex; gap: 8px; }
input { flex: 1; }
#hangup { background: #d64545; border-color: #d64545; }
#status { color: #aab3c5; }