.prop-desk {
  --ratio: 1.7778;
  --scale: 0.7;
  --desk-wall: #0b1830;
  --desk-accent: #1f4fa3;
  --desk-panel: 2rem;
  --desk-dock: 3.5rem;
  --win-bar: 2.4rem;
  --win-player: 2.75rem;
  background:
    radial-gradient(120% 90% at 50% 40%, rgb(255 255 255 / 0.09), rgb(0 0 0 / 0.45)),
    var(--desk-wall);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.prop-desk__wall {
  position: absolute;
  inset: var(--desk-panel) 0 0 var(--desk-dock);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  opacity: 0.85;
}

.prop-desk__shield {
  width: 8rem;
  height: 9.5rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 60%), var(--desk-accent);
  clip-path: polygon(50% 0, 100% 14%, 100% 55%, 50% 100%, 0 55%, 0 14%);
}

.prop-desk__emblem {
  display: none;
  max-width: 11rem;
  max-height: 11rem;
  margin-bottom: 0.75rem;
  object-fit: contain;
}

.has-emblem .prop-desk__emblem { display: block; }
.has-emblem .prop-desk__shield { display: none; }

.prop-desk__agency {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}

.prop-desk__unit {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

.prop-desk__panel {
  position: absolute;
  inset: 0 0 auto;
  height: var(--desk-panel);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 0.9rem;
  background: rgb(10 12 16 / 0.92);
  font-size: 0.8rem;
  font-weight: 600;
}

.prop-desk__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.prop-desk__signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75rem;
}

.prop-desk__signal i {
  width: 3px;
  background: currentColor;
}

.prop-desk__signal i:nth-child(1) { height: 40%; }
.prop-desk__signal i:nth-child(2) { height: 70%; }
.prop-desk__signal i:nth-child(3) { height: 100%; }

.prop-desk__dock {
  position: absolute;
  inset: var(--desk-panel) auto 0 0;
  width: var(--desk-dock);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.75rem;
  background: rgb(10 12 16 / 0.6);
}

.prop-desk__app {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 0.09);
  color: #fff;
}

button.prop-desk__app { background: var(--desk-accent); }

.prop-desk svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prop-win {
  position: absolute;
  top: calc(50% + var(--desk-panel) / 2);
  left: calc(50% + var(--desk-dock) / 2);
  translate: -50% -50%;
  width: min(
    calc((100vw - var(--desk-dock)) * var(--scale)),
    calc((100vh - var(--desk-panel) - var(--win-bar) - var(--win-player) - 2rem) * var(--ratio))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  border-radius: 9px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.prop-win[data-state="idle"] { display: none; }

.prop-win[data-desk-win="footage"] { translate: -47% -46%; }

.prop-win__bar {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--win-bar);
  background: #25282d;
  color: #eceef1;
  font-size: 0.8rem;
  font-weight: 700;
  user-select: none;
}

.prop-win__btns {
  position: absolute;
  right: 0.6rem;
  display: flex;
  gap: 0.5rem;
}

.prop-win__btn {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
}

.prop-win__btn::before,
.prop-win__btn--close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.prop-win__btn--min::before {
  width: 9px;
  border-top: 1px solid currentColor;
}

.prop-win__btn--max::before {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
}

.prop-win__btn--close::before,
.prop-win__btn--close::after {
  width: 12px;
  border-top: 1px solid currentColor;
  rotate: 45deg;
}

.prop-win__btn--close::after { rotate: -45deg; }

.prop-win__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.prop-view {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: #05070c;
  container-type: inline-size;
}

.prop-view > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: none;
}

.prop-view[data-source="video"].has-video > video { display: block; }

.prop-view[data-source="green"] { background: #00b140; }
.prop-view[data-source="blue"] { background: #0047bb; }

.prop-view__empty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 1rem;
  color: rgb(255 255 255 / 0.55);
  font-size: max(0.7rem, 2.2cqw);
  text-align: center;
}

.prop-view[data-source="video"]:not(.has-video) > .prop-view__empty { display: grid; }

.prop-view.has-error > .prop-view__empty::after {
  content: " (that file could not be played)";
}

.prop-view__markers { display: none; }

.has-markers .prop-view:is([data-source="green"], [data-source="blue"]) > .prop-view__markers {
  display: block;
}

.prop-view__markers i {
  position: absolute;
  width: 4cqw;
  aspect-ratio: 1;
  background:
    linear-gradient(#fff, #fff) center / 100% 10% no-repeat,
    linear-gradient(#fff, #fff) center / 10% 100% no-repeat;
}

.prop-view__markers i:nth-child(1) { top: 8%; left: 6%; }
.prop-view__markers i:nth-child(2) { top: 8%; right: 6%; }
.prop-view__markers i:nth-child(3) { bottom: 8%; left: 6%; }
.prop-view__markers i:nth-child(4) { bottom: 8%; right: 6%; }

.prop-call__who,
.prop-call__time {
  position: absolute;
  top: 3%;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

.prop-call__who {
  left: 3%;
  display: flex;
  flex-direction: column;
  font-size: 1.5cqw;
}

.prop-call__who strong { font-size: 2.2cqw; }

.prop-call__time {
  right: 3%;
  font-size: 1.8cqw;
  font-variant-numeric: tabular-nums;
}

.prop-self {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 22%;
  border: 0.25cqw solid rgb(255 255 255 / 0.75);
  border-radius: 0.8cqw;
  box-shadow: 0 0.6cqw 2cqw rgb(0 0 0 / 0.5);
}

.prop-self[data-source="off"] { display: none; }

.prop-call__controls {
  position: absolute;
  left: 50%;
  bottom: 4%;
  translate: -50% 0;
  display: flex;
  gap: 2cqw;
}

.prop-call__ctl {
  display: grid;
  place-items: center;
  width: 5.5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(20 24 32 / 0.82);
  color: #fff;
}

.prop-call__ctl--end { background: #e5352b; }
.prop-call__ctl--go { background: #1faa59; }

.prop-call__ring {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  background: #0a0e17;
  font-size: 1.7cqw;
}

.prop-call__ring strong { font-size: 3cqw; }

.prop-win:is([data-state="incoming"], [data-state="ended"]) .prop-call__ring { display: flex; }

.prop-call__avatar {
  display: grid;
  place-items: center;
  width: 14cqw;
  aspect-ratio: 1;
  margin-bottom: 1.5cqw;
  border-radius: 50%;
  background: var(--desk-accent);
  font-size: 5cqw;
  font-weight: 700;
}

.prop-win[data-state="incoming"] .prop-call__avatar {
  animation: prop-ring 1.6s ease-out infinite;
}

@keyframes prop-ring {
  from { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.45); }
  to { box-shadow: 0 0 0 5cqw rgb(255 255 255 / 0); }
}

.prop-call__state { opacity: 0.7; }

.prop-call__choice {
  display: flex;
  gap: 6cqw;
  margin-top: 3cqw;
}

.prop-win[data-state="ended"] .prop-call__choice { display: none; }

.prop-cam {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 2cqw;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}

.has-overlay .prop-cam { display: block; }

.prop-cam span { position: absolute; }
.prop-cam__label { top: 4%; left: 3%; }
.prop-cam__stamp { bottom: 4%; left: 3%; }

.prop-cam__rec {
  top: 4%;
  right: 3%;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

.prop-cam__rec::before {
  content: "";
  width: 1.6cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff2d2d;
  animation: prop-rec 1.2s steps(1) infinite;
}

@keyframes prop-rec {
  50% { opacity: 0; }
}

.prop-player {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  height: var(--win-player);
  padding: 0 1rem;
  background: #1b1e24;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.prop-player__play {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  background: #fff;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

.is-playing .prop-player__play {
  clip-path: polygon(10% 0, 40% 0, 40% 100%, 60% 100%, 60% 0, 90% 0, 90% 100%, 10% 100%);
}

.prop-player__track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
}

.prop-player__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--desk-accent);
  filter: brightness(1.6);
}

.prop-desk[data-view="max"] .prop-win {
  inset: var(--desk-panel) 0 0 var(--desk-dock);
  translate: none;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

.prop-desk[data-view="max"] .prop-win__body { flex: 1; }

.prop-desk[data-view="max"] .prop-win__body > .prop-view {
  width: min(100%, calc((100vh - var(--desk-panel) - var(--win-bar) - var(--win-player)) * var(--ratio)));
}

.prop-desk[data-view="bare"] { background: #000; }

.prop-desk[data-view="bare"] :is(
  .prop-desk__wall, .prop-desk__panel, .prop-desk__dock,
  .prop-win__bar, .prop-player,
  .prop-call__who, .prop-call__time, .prop-call__controls
) {
  display: none;
}

.prop-desk[data-view="bare"] .prop-win {
  inset: 0;
  translate: none;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

.prop-desk[data-view="bare"] .prop-win__body { flex: 1; }

.prop-desk[data-view="bare"] .prop-win__body > .prop-view {
  width: min(100%, calc(100vh * var(--ratio)));
}

@media (prefers-reduced-motion: reduce) {
  .prop-call__avatar,
  .prop-cam__rec::before {
    animation: none !important;
  }
}