/* ==========================================================================
   Playground: document cards, thumbnails and the analysis controls.
   @layer pages: above the framework layers, below utilities.
   ========================================================================== */

@layer pages {
  .document-card {
    position: relative;
    transition: all 0.3s ease;
  }

  /* the analysis overlay is positioned against this wrapper */
  .playground-grid-wrap {
    position: relative;
  }

  /* Thumbnail frame: the skeleton and the tag overlay are positioned against it,
     and it holds the page ratio while the image is still loading. */
  .document-card__thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--zr-r-md);
    background: var(--zr-canvas);
  }
  .document-card__thumb .playground-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .star-rating {
    display: flex;
    justify-content: center;
    gap: var(--zr-2);
  }

  .saved-prompt-card__actions {
    position: absolute;
    top: var(--zr-2);
    right: var(--zr-2);
    display: flex;
    gap: var(--zr-2);
  }

  #messageArea {
    position: relative;
    z-index: 100;
  }

  #analysisPrompt {
    font-family: monospace;
    min-height: 128px;
    resize: vertical;
  }

  #analyzeButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .thumbnail-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zr-canvas);
    border-radius: 0.5rem;
  }

  .thumbnail-skeleton::after {
    content: '';
    width: 80%;
    height: 80%;
    border-radius: 0.5rem;
    background: linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.12) 25%,
      rgba(148, 163, 184, 0.25) 50%,
      rgba(148, 163, 184, 0.12) 75%
    );
    background-size: 200% 100%;
    animation: thumbShimmer 1.2s infinite;
  }

  @keyframes thumbShimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .playground-thumb {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .playground-thumb.is-ready {
    opacity: 1;
  }

  img {
    transition: filter 0.3s ease;
  }
}