/* [cinny #43] "Share your screen?" card, drawn inside the frame just above the
host's call bar (the frame's bottom edge). */
.prompt {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--cpd-space-4x));
  transform: translateX(-50%);
  z-index: 2;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100% - 2 * var(--cpd-space-2x)));
  padding: var(--cpd-space-4x);
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-2x);
  background: var(--cpd-color-bg-canvas-default);
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  border-radius: var(--cpd-space-3x);
  box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
  color: var(--cpd-color-text-primary);
}

.title {
  margin: 0;
}

.buttons {
  display: flex;
  gap: var(--cpd-space-2x);
}

/* The call's picture-in-picture window is only ~158px tall: keep the card to
the question and the two buttons. */
@media (max-height: 240px) {
  .prompt {
    bottom: var(--cpd-space-2x);
    padding: var(--cpd-space-2x) var(--cpd-space-3x);
    gap: var(--cpd-space-1-5x);
  }
  .description {
    display: none;
  }
}