/* Heylu — Start a Vibe responsive modal polish
   Scoped to the StartAVibeSheet z-[80] container so the rest of the app is untouched.
*/

/* Mobile keeps the existing bottom-sheet interaction. */
div[class*="z-[80]"] {
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);
}

/* Type-selection cards: neutral until the user actually chooses one. */
div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button {
  min-height: 132px;
  border-color: hsl(var(--border)) !important;
  background: hsl(var(--muted) / 0.18) !important;
  box-shadow: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button:hover {
  border-color: hsl(var(--primary) / 0.45) !important;
  background: hsl(var(--primary) / 0.055) !important;
  box-shadow: 0 12px 28px hsl(var(--primary) / 0.08);
  transform: translateY(-2px);
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.7);
  outline-offset: 2px;
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button > div:first-child {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: hsl(var(--muted) / 0.42) !important;
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button:hover > div:first-child {
  background: hsl(var(--primary) / 0.15) !important;
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button p:first-child {
  color: hsl(var(--foreground)) !important;
}

div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button:hover p:first-child {
  color: hsl(var(--primary)) !important;
}

@media (min-width: 768px) {
  /* Turn the mobile sheet into a centered desktop/tablet dialog. */
  div[class*="z-[80]"][class*="fixed"] {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(860px, calc(100vw - 48px)) !important;
    max-height: min(82dvh, 760px) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 28px !important;
    overflow: hidden;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px hsl(var(--primary) / 0.04);
  }

  /* The grabber is a mobile affordance and is not needed on desktop. */
  div[class*="z-[80]"][class*="fixed"] > div:first-child {
    display: none;
  }

  /* More deliberate desktop header spacing. */
  div[class*="z-[80]"][class*="fixed"] > div:nth-child(2) {
    padding: 18px 24px;
  }

  /* Type screen becomes a compact 3-column chooser instead of oversized 2-column rows. */
  div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 {
    padding: 24px;
  }

  div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > p {
    margin-bottom: 18px;
    font-size: 14px;
  }

  div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  div[class*="z-[80]"] > div.flex-1.overflow-y-auto.px-5.py-5 > div.grid.grid-cols-2.gap-3 > button {
    min-height: 150px;
    padding: 18px;
    justify-content: space-between;
  }
}

@media (min-width: 1100px) {
  div[class*="z-[80]"][class*="fixed"] {
    width: min(900px, calc(100vw - 80px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  div[class*="z-[80]"],
  div[class*="z-[80]"] * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}