:root {
  color-scheme: dark;
  --page-background: #101318;
  --page-gradient: radial-gradient(ellipse at top, #202735, #101318 55%);
  --text: #edf0f5;
  --muted: #9ca8b8;
  --label: #c5ccd6;
  --panel: #191f29;
  --panel-border: #303947;
  --input-background: #10151d;
  --input-border: #3b4655;
  --button-background: #252d39;
  --button-border: #414b5c;
  --button-hover: #303b4a;
  --video-background: #080b10;
  --video-bars: #080b10;
  --message-background: #293445;
  --own-message-background: #284e91;
}

:root.light-theme {
  color-scheme: light;
  --page-background: #edf0f4;
  --page-gradient: radial-gradient(ellipse at top, #ffffff, #edf0f4 65%);
  --text: #202631;
  --muted: #687384;
  --label: #3e4857;
  --panel: #ffffff;
  --panel-border: #d5dbe3;
  --input-background: #f7f8fa;
  --input-border: #c6ced8;
  --button-background: #f2f4f7;
  --button-border: #c3cbd6;
  --button-hover: #e5e9ef;
  --video-background: #b8bec8;
  --video-bars: #b8bec8;
  --message-background: #e8edf3;
  --own-message-background: #d5e4ff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--page-gradient);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button {
  border: 1px solid var(--button-border);
  border-radius: 10px;
  padding: 11px 15px;
  color: var(--text);
  background: var(--button-background);
}
button:hover:not(:disabled) { background: var(--button-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: #3569d4; border-color: #3569d4; color: #fff; }
.primary:hover:not(:disabled) { background: #477ce8; }
.danger { background: #8e3440; border-color: #8e3440; color: #fff; }
.subtle { background: transparent; }
.shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0; }
.login-panel {
  width: min(420px, 100%);
  margin: 10vh auto 0;
  padding: 30px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 80px #0003;
}
.panel-heading, .topbar, .chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #3569d4;
  color: #fff;
  font-weight: 800;
}
h1 { margin: 14px 0 4px; font-size: 24px; }
h2 { margin: 0; font-size: 17px; }
p { line-height: 1.5; }
.muted { color: var(--muted); font-size: 13px; }
.login-panel form { display: grid; gap: 12px; margin-top: 25px; }
label { color: var(--label); font-size: 13px; }
input, select {
  min-width: 0;
  width: 100%;
  padding: 12px;
  color: var(--text);
  background: var(--input-background);
  border: 1px solid var(--input-border);
  border-radius: 9px;
}
.error { min-height: 20px; color: #d94b59; font-size: 13px; }
.chat-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: stretch;
  gap: 18px;
}
.chat-panel > .topbar { grid-column: 1 / -1; }
.chat-panel > .video-stage {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.chat-panel > .chat-box {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chat-panel > .chat-box .messages {
  flex: 1;
  min-height: 180px;
  height: auto;
}
.chat-panel > .chat-box .message-form { flex-shrink: 0; }
.topbar h1 { margin: 0; }
.topbar p { margin: 4px 0 0; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.theme-button { white-space: nowrap; }

.video-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.video-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--video-background);
}
.video-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 15px;
  background: var(--video-background);
}
.video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--video-bars);
}
.video-label {
  position: absolute;
  top: 12px;
  left: 13px;
  z-index: 4;
  padding: 5px 9px;
  border-radius: 7px;
  color: #fff;
  background: #0009;
  font-size: 12px;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}
.video-card.main-view {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  z-index: 1;
  border: 1px solid var(--panel-border);
  box-shadow: none;
}
.video-card.main-view video { object-fit: contain; }
.video-card.pip-view {
  inset: auto 16px 16px auto;
  width: 24%;
  height: auto;
  aspect-ratio: 16 / 9;
  z-index: 2;
  border: 2px solid var(--button-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px #0008;
}
.video-card.pip-view video { object-fit: contain; }
.video-stage.local-camera-hidden .local-card { display: none; }

.pip-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 7px 10px;
  color: #fff;
  background: #0008;
  border-color: #ffffff55;
}
.control-dock {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel);
}
.select-label { display: flex; align-items: center; gap: 8px; }
.select-label select { width: auto; max-width: 190px; padding: 10px; }
.controls-toggle {
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 5px #000b;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.controls-toggle:hover:not(:disabled) { background: transparent; }
.video-stage.controls-hidden .controls { display: none !important; }
@media (min-width: 961px) {
  .chat-panel > .video-stage.controls-hidden + .chat-box { margin-bottom: 41px; }
}

.chat-box {
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel);
}
.chat-heading { margin-bottom: 12px; }
.messages {
  height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: var(--input-background);
}
.message {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--message-background);
  overflow-wrap: anywhere;
}
.message.own { align-self: flex-end; background: var(--own-message-background); }
.message small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.message-form { display: flex; gap: 9px; margin-top: 10px; }
.message-form input { flex: 1; }

.video-stage:fullscreen {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: var(--page-background);
}
.video-stage:fullscreen .video-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.video-stage:fullscreen .video-card.main-view { border-radius: 0; }
.video-stage:fullscreen .video-card.pip-view {
  inset: auto 24px calc(var(--control-dock-height, 0px) + 26px) auto;
  width: min(24vw, 360px);
  height: auto;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--button-border);
  border-radius: 12px;
}
.video-stage:fullscreen .control-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  width: 100%;
  pointer-events: none;
}
.video-stage:fullscreen .controls {
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 12px;
  border: 1px solid #ffffff35;
  border-radius: 14px;
  background: #10151ddd;
  box-shadow: 0 8px 28px #0008;
  pointer-events: auto;
}
.video-stage:fullscreen .controls button { color: #fff; }
.video-stage:fullscreen .controls-toggle {
  color: #fff;
  pointer-events: auto;
}
.video-stage:fullscreen.controls-hidden .controls { display: none !important; }
:root.light-theme .video-stage:fullscreen .controls {
  border-color: var(--panel-border);
  background: #fffffff0;
  box-shadow: 0 8px 28px #0003;
}
:root.light-theme .video-stage:fullscreen .controls button:not(.primary):not(.danger) {
  color: var(--text);
}
:root.light-theme .video-stage:fullscreen .controls-toggle {
  color: var(--text);
  text-shadow: 0 1px 5px #fff9;
}

[hidden] { display: none !important; }

@media (max-width: 960px) {
  .chat-panel { grid-template-columns: minmax(0, 1fr); }
  .chat-panel > .topbar,
  .chat-panel > .video-stage,
  .chat-panel > .chat-box {
    grid-column: 1;
    grid-row: auto;
  }
  .chat-panel > .chat-box .messages {
    flex: none;
    min-height: 0;
    height: 180px;
  }
}

@media (max-width: 700px) {
  .shell { width: calc(100% - 20px); padding: 16px 0; }
  .topbar { align-items: flex-start; }
  .topbar-actions { flex-direction: column; align-items: flex-end; }
  .video-grid { min-height: 190px; }
  .controls { justify-content: stretch; }
  .controls > button, .select-label { flex: 1 1 42%; }
  .select-label select { flex: 1; max-width: none; }
  .login-panel { padding: 24px; }
  .video-card.pip-view { width: 32%; inset: auto 8px 8px auto; }
  .video-stage:fullscreen .video-card.pip-view {
    width: 34vw;
    inset: auto 10px calc(var(--control-dock-height, 0px) + 22px) auto;
  }
  .video-stage:fullscreen .control-dock { bottom: 10px; }
  .video-stage:fullscreen .controls {
    width: calc(100% - 16px);
    max-width: none;
    gap: 6px;
    padding: 8px;
  }
}

:root.light-theme #controls-toggle { color: #fff; }

:root.light-theme #controls-toggle { color: #fff; }