/* A one-time message over the page (shared/_in_app_message): a brand card on a dimmed
   backdrop, its CTA and a quiet "Agora não" below. */
.in_app_message {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--content-padding);
  background: rgba(0, 0, 0, 0.6);
  animation: in_app_message_fade 200ms ease-out;

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    padding: 32px var(--content-padding) var(--content-padding);
    background: var(--color-primary);
    color: var(--color-on-brand);
    border-radius: var(--radius-lg);
    text-align: center;
    animation: in_app_message_rise 250ms ease-out;
  }

  .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-on-brand) 18%, transparent);

    .glyph {
      width: 48px;
      height: 48px;
    }
  }

  /* A home screen's top half, the app's icon lifted among the placeholders, fading into the
     card (in_app_messages/_home_screen). */
  .home_screen {
    width: 168px;
    height: 150px;
    margin: -8px 0 4px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 70%, transparent);

    .phone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      height: 200px;
      padding: 10px 14px 0;
      border: 5px solid color-mix(in srgb, var(--color-on-brand) 85%, transparent);
      border-bottom: 0;
      border-radius: 30px 30px 0 0;
      background: color-mix(in srgb, var(--color-on-brand) 12%, transparent);
    }

    .island {
      width: 44px;
      height: 12px;
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--color-on-brand) 85%, transparent);
    }

    .apps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px 10px;
      width: 100%;
    }

    .app {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tile {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 9px;
      background: color-mix(in srgb, var(--color-on-brand) 22%, transparent);
    }

    .installed {
      position: relative;
      z-index: 1;

      .tile {
        background: none;
        box-shadow: 0 0 0 3px var(--color-on-brand), 0 6px 14px rgba(0, 0, 0, 0.35);
        transform: scale(1.18);
      }
    }

    .name {
      position: absolute;
      top: calc(100% + 6px);
      font-size: 0.625rem;
      font-weight: var(--font-weight-bold);
      line-height: 1;
    }
  }

  /* An incoming Novo pedido push, the Turn on message's picture (in_app_messages/_push_preview):
     a notification banner, light on the brand card in both themes like a phone draws one. */
  .push_preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-on-brand) 92%, transparent);
    color: var(--color-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    text-align: left;
    animation: in_app_message_drop 400ms 250ms ease-out backwards;

    .push_preview_icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 8px;
    }

    .push_preview_text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      font-size: var(--text-sm);
      line-height: 1.3;
    }

    .push_preview_header {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: var(--text-xs);
      color: var(--color-muted);
    }

    .push_preview_app {
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .push_preview_title {
      font-weight: var(--font-weight-semibold);
    }

    .push_preview_body {
      color: var(--color-text-light);
    }
  }

  .title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
  }

  .body {
    margin: 0 0 12px;
    font-size: var(--text-base);
    opacity: 0.9;
    text-wrap: pretty;
  }

  .cta {
    min-height: 48px;
    padding: 0 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-on-brand);
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
  }

  /* The install message after the browser's prompt was accepted (in_app_messages/_installing):
     it replaces a card already on screen, so it doesn't enter again, and each of its two states is
     laid out like the card itself. */
  &.install_progress {
    animation: none;

    .card {
      animation: none;
    }

    /* Fechar keeps its place while it waits, so the card doesn't jump when it appears. */
    .concealed {
      visibility: hidden;
    }
  }

  .install_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    &[hidden] {
      display: none;
    }
  }

  .dismiss {
    min-height: 48px;
    padding: 0 24px;
    border: none;
    background: none;
    color: white;
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    &,
    .card,
    .push_preview {
      animation: none;
    }
  }
}

@keyframes in_app_message_fade {
  from { opacity: 0; }
}

@keyframes in_app_message_rise {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
}

@keyframes in_app_message_drop {
  from { opacity: 0; transform: translateY(-12px); }
}