/* ===== GrowNiti Floating Dock ===== */
.gn-dock {
  position: fixed;
  inset: auto var(--gn-right, 18px) var(--gn-bottom, 18px) auto;
  display: flex;
  gap: var(--gn-gap, 10px);
  z-index: var(--gn-z, 2147483000);
  align-items: center;
  pointer-events: none;                 /* container ignores clicks; buttons re-enable */
}

.gn-dock button {
  pointer-events: auto;                 /* clickable */
  border: 0;
  border-radius: 18px;
  padding: 10px 14px;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}

.gn-dock button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.gn-dock button:active { transform: translateY(0);    filter: brightness(.98); }

.gn-dock button[data-variant="secondary"] {
  background: rgba(59,130,246,.18);
  color: #dbeafe;
  box-shadow: 0 6px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.15);
}

/* Avoid the page footer overlap on laptops with low height */
@media (max-height: 720px) {
  .gn-dock { inset: auto var(--gn-right, 18px) 12px auto; }
}

/* Mobile: stack buttons so they don’t run off-screen */
@media (max-width: 480px) {
  .gn-dock {
    right: 12px !important;
    left: 12px;                 /* allow wrapping space */
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
  .gn-dock button { padding: 10px 12px; font-size: 13px; }
}









/* ===== Responsive layout for a 4-button right dock ===== */
/* If your dock element is #gnDock, replace .gn-dock with #gnDock below */

.gn-dock{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;                 /* allow wrapping when needed */
  max-width: 100%;                 /* don’t overflow on tiny screens */
  pointer-events: none;            /* container ignores clicks */
}
.gn-dock > *{ pointer-events:auto; }

/* Laptop/Desktop: keep in one tidy row */
@media (min-width: 841px){
  .gn-dock{ flex-wrap: nowrap; }
}

/* Tablet/Phone: allow wrapping and limit the dock width so it doesn't stretch too far */
@media (max-width: 840px){
  .gn-dock{
    max-width: min(92vw, 420px);   /* keep dock compact on smaller screens */
  }
}

/* Phones: 2×2 grid feel (two per row) */
@media (max-width: 560px){
  .gn-dock button{
    flex: 0 0 calc(50% - 6px);     /* two buttons per row */
    justify-content: center;
  }
}

/* Very small phones: switch to icon-only to save space */
@media (max-width: 380px){
  .gn-dock button .gn-label{ display:none; }
  .gn-dock button{ padding: 10px; border-radius: 14px; }
}

/* If your left-side install bubble overlaps, bump the dock up a bit */
@media (max-height: 680px){
  .gn-dock{ bottom: calc(26px + env(safe-area-inset-bottom)); }
}