.prompt-input-container::before {
  position: absolute;
  left: var(--side-padding);
}

body:not(.is-phone) {
  .modal-container:has(.prompt):not(:last-child) {
    opacity: 0;
  }

  .prompt {
    backdrop-filter: var(--blur-m);
    border: none;
    background-color: var(--modal-background);
    animation: var(--anim-duration-slow) bounceInScale var(--anim-motion-cupertino);
  }

  .prompt-input-container {
    --search-clear-button-size: var(--search-icon-size);
    border: none;
    align-items: center;

    &::before {
      width: var(--icon-l);
      height: var(--icon-l);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0 var(--side-padding);
      border-bottom: var(--border-width) solid var(--background-modifier-border);
      pointer-events: none;
    }
  }

  .prompt-input {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent;
    height: 56px !important;
    font-size: var(--font-ui-large);
    margin-left: 24px;
  }

  .prompt-results {
    padding: calc(var(--side-padding) / 2);
  }

  .prompt-instructions {
    border: none;
    color: var(--text-faint);
  }

  .prompt .suggestion-item {
    padding: 12px var(--side-padding);
    border-radius: var(--radius-m);
  }
}

body.is-mobile {
  .prompt-input-container::before {
    width: var(--icon-m);
    height: var(--icon-m);
  }

  .prompt-input {
    margin-left: 32px;
  }
}

body.is-phone {
  .prompt {
    --prompt-top: 0;
    --prompt-bottom: 0;
    border-radius: 0;
    background: var(--background-secondary) !important;
    height: 100%;
    justify-content: space-between;
  }

  .prompt-input-container {
    --search-clear-button-size: var(--icon-s);
    margin: 0 var(--side-padding) var(--side-padding);
    border: none;
    align-items: center;
    gap: 8px;
    position: absolute;
    inset: auto 0 var(--safe-area-inset-bottom);
    z-index: 1;
  }

  .prompt-input-container::before {
    left: 16px;
    z-index: 1;
  }

  .prompt-input {
    padding-left: 48px !important;
  }

  .prompt-input,
  .prompt-input-container .search-input-clear-button {
    border-radius: var(--clickable-icon-radius);
    box-shadow: var(--shadow-xs) !important;
    backdrop-filter: var(--blur-s);
    background-color: var(--modal-background) !important;
    margin: 0;
  }

  .prompt-input-container .search-input-clear-button {
    position: relative;
    inset-inline-end: 0;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .prompt-input-container .search-input-clear-button:after {
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 100% 100%;

    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M13.993.26.253 14a.875.875 0 0 0 0 1.23.896.896 0 0 0 1.24 0l13.74-13.74a.875.875 0 0 0 0-1.23.87.87 0 0 0-1.24 0ZM15.233 14 1.493.26a.87.87 0 0 0-1.24 0 .884.884 0 0 0 0 1.23l13.74 13.74c.332.333.908.342 1.24 0a.884.884 0 0 0 0-1.23Z'/%3e%3c/svg%3e");
  }

  .prompt-results {
    mask: linear-gradient(to bottom, transparent, black calc(var(--safe-area-inset-top) + 16px), black calc(100vh - var(--safe-area-inset-bottom) - var(--input-height) - 16px), transparent calc(100vh - var(--safe-area-inset-bottom)));
    padding: calc(var(--safe-area-inset-top) + 16px) var(--side-padding) 128px;
  }

  .prompt .suggestion-item {
    padding: var(--nav-item-padding);
  }

  .suggestion-item {
    gap: 8px;
  }

  .suggestion-flair {
    margin: 0 !important;
  }
}

body.is-tablet {
  .prompt {
    --prompt-bottom: 0;

    animation: var(--anim-duration-slow) bounceInScale var(--anim-motion-cupertino);
    outline: var(--prompt-border-width) solid var(--background-modifier-hover);
    background-color: var(--modal-background) !important;
  }

  .prompt-input {
    border: none;
    background-color: transparent !important;
  }

  .prompt-input-container {
    display: flex;
    align-items: center;
  }
}
