/* Only loaded on the phone page, so the desktop window is never affected. */

/* The desktop window supplies its own backdrop. A web page has to paint one. */
html.phone-web {
  --phone-page-bg: black;
  color-scheme: dark;
}

html.phone-web.light-mode {
  --phone-page-bg: white;
  color-scheme: light;
}

html.phone-web,
html.phone-web body {
  height: 100%;
  background: var(--phone-page-bg);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

html.phone-web .app {
  height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 64px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 72px) calc(env(safe-area-inset-left) + 16px);
  overflow-y: auto;
  -webkit-app-region: none;
}

html.phone-web .sticker {
  width: clamp(110px, 30dvh, 220px);
  height: clamp(110px, 30dvh, 220px);
  flex-shrink: 0;
}

html.phone-web .url-row,
html.phone-web .controls-row,
html.phone-web .video-card {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

html.phone-web .controls-row {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  gap: var(--gap);
}

html.phone-web .clip-range,
html.phone-web .quality-anchor {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}

html.phone-web .video-card.visible {
  flex-wrap: wrap;
}

html.phone-web .video-card__action {
  width: 100%;
}

html.phone-web .video-card__action .btn-download {
  width: 100%;
  min-height: 48px;
}

html.phone-web .carousel-card {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

html.phone-web .time-input-wrap {
  flex: 1;
  width: auto;
  min-width: 0;
  max-width: none;
}

html.phone-web .settings-popover,
html.phone-web .queue-panel {
  width: min(320px, calc(100vw - 32px));
}

html.phone-web .logo-anchor {
  bottom: calc(env(safe-area-inset-bottom) + 24px);
}

html.phone-web .help-anchor {
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  left: calc(env(safe-area-inset-left) + 16px);
}

/* Desktop-only controls: phones save to the phone and each person's data stays on their phone. */
html.phone-web #phoneAccessBtn,
html.phone-web .project-anchor,
html.phone-web #pathDisplay,
html.phone-web .history-entry__add-project,
html.phone-web .history-entry__project,
html.phone-web .history-project-filter,
html.phone-web .settings-about,
html.phone-web .settings-row:has(#autoPasteToggle),
html.phone-web .settings-row:has(#showInFinderToggle) {
  display: none !important;
}

html.phone-web .settings-divider:has(+ .settings-about) {
  display: none;
}

/* iOS zooms the page when a focused field is under 16px, and can't type if selection is off. */
html.phone-web input {
  font-size: 16px;
  user-select: text;
  -webkit-user-select: text;
}

.phone-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  background: rgba(0, 0, 0, 0.6);
}

.phone-sheet-overlay--login {
  align-items: center;
  background: var(--phone-page-bg, canvas);
}

.phone-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--red-dark);
  color: var(--white);
  animation: phone-sheet-in 240ms var(--spring);
}

@keyframes phone-sheet-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

.phone-sheet__logo {
  height: 32px;
  margin: 4px auto 8px;
}

.phone-sheet__title {
  font-size: 18px;
}

.phone-sheet__file,
.phone-sheet__text {
  font-size: 13px;
  color: var(--grey-muted);
  overflow-wrap: anywhere;
}

.phone-sheet__error {
  font-size: 13px;
  color: var(--color-error);
}

.phone-sheet__error:empty {
  display: none;
}

.phone-sheet__input {
  padding: 14px 16px;
  border: 2px solid var(--grey-muted);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-weight: inherit;
  text-align: center;
  letter-spacing: 1px;
  outline: none;
}

.phone-sheet__input:focus {
  border-color: var(--red-bright);
}

.phone-sheet__primary,
.phone-sheet__secondary {
  min-height: 48px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: scale 150ms var(--ease), opacity 150ms var(--ease);
}

.phone-sheet__primary {
  background: var(--red-bright);
  color: var(--white);
}

.phone-sheet__primary:disabled {
  opacity: 0.6;
}

.phone-sheet__primary:active,
.phone-sheet__secondary:active {
  scale: 0.97;
}

.phone-sheet__secondary {
  background: transparent;
  color: var(--grey-muted);
}

html.light-mode .phone-sheet,
html.light-mode .phone-sheet__input {
  color: var(--red-bright);
}

html.light-mode .phone-sheet__primary {
  color: var(--white);
}