/* ============================= */
/* ====== Apps Manager  ======== */
/* ============================= */

/* ---- Jiggle Mode (iOS-style) ---- */

/* Wobble / jiggle keyframes — staggered for natural feel */
@keyframes jiggle1 {
  0%, 100% { transform: rotate(-1.2deg) scale(1); }
  25%      { transform: rotate(1.5deg) scale(1.01); }
  50%      { transform: rotate(-1.8deg) scale(1); }
  75%      { transform: rotate(1deg) scale(0.99); }
}

@keyframes jiggle2 {
  0%, 100% { transform: rotate(1.5deg) scale(1); }
  25%      { transform: rotate(-1.2deg) scale(0.99); }
  50%      { transform: rotate(1.8deg) scale(1.01); }
  75%      { transform: rotate(-1deg) scale(1); }
}

@keyframes jiggle3 {
  0%, 100% { transform: rotate(-0.8deg) scale(1.01); }
  25%      { transform: rotate(1.8deg) scale(1); }
  50%      { transform: rotate(-1.5deg) scale(0.99); }
  75%      { transform: rotate(1.2deg) scale(1); }
}

/* Apply jiggle to apps when grid is in edit mode */
.grid-container.jiggle-mode .app-square {
  animation: jiggle1 0.35s ease-in-out infinite;
  will-change: transform;
}

.grid-container.jiggle-mode .app-square:nth-child(2n) {
  animation-name: jiggle2;
  animation-duration: 0.38s;
}

.grid-container.jiggle-mode .app-square:nth-child(3n) {
  animation-name: jiggle3;
  animation-duration: 0.32s;
}

/* Slight delay stagger */
.grid-container.jiggle-mode .app-square:nth-child(2) { animation-delay: 0.04s; }
.grid-container.jiggle-mode .app-square:nth-child(3) { animation-delay: 0.08s; }
.grid-container.jiggle-mode .app-square:nth-child(4) { animation-delay: 0.02s; }
.grid-container.jiggle-mode .app-square:nth-child(5) { animation-delay: 0.06s; }
.grid-container.jiggle-mode .app-square:nth-child(6) { animation-delay: 0.1s; }
.grid-container.jiggle-mode .app-square:nth-child(7) { animation-delay: 0.03s; }
.grid-container.jiggle-mode .app-square:nth-child(8) { animation-delay: 0.07s; }
.grid-container.jiggle-mode .app-square:nth-child(9) { animation-delay: 0.05s; }
.grid-container.jiggle-mode .app-square:nth-child(10) { animation-delay: 0.09s; }

/* ---- Delete/Hide badge (top-left "−" like iOS) ---- */

.app-remove-badge {
  display: none;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 25;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  /* Stop the jiggle on the badge itself */
  animation: none !important;
}

.app-remove-badge:hover {
  background: rgba(255, 59, 48, 0.9);
  transform: scale(1.15);
}

.app-remove-badge:active {
  transform: scale(0.9);
}

/* Show badges only in jiggle mode */
.grid-container.jiggle-mode .app-remove-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- "Concluir" floating button (appears during jiggle mode) ---- */

.jiggle-done-btn {
  display: none;
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.65rem 1.8rem;
  border: none;
  border-radius: 24px;
  background: rgba(50, 50, 50, 0.88);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}

.jiggle-done-btn.visible {
  display: block;
  animation: fadeSlideUp 0.25s ease forwards;
}

.jiggle-done-btn:hover {
  background: rgba(70, 70, 70, 0.95);
}

.jiggle-done-btn:active {
  transform: translateX(-50%) scale(0.95);
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---- Hidden app styles ---- */

/* Outside jiggle mode: hidden apps are display:none */
.app-square.app-hidden {
  display: none !important;
}

/* Inside jiggle mode: hidden apps are shown with reduced opacity */
.grid-container.jiggle-mode .app-square.app-hidden {
  display: flex !important;
  opacity: 0.3;
}

/* Badge for hidden apps: show a "+" instead of "−" */
.grid-container.jiggle-mode .app-square.app-hidden .app-remove-badge {
  background: rgba(52, 199, 89, 0.85);
}

/* ---- Dragging styles ---- */

/* Original element while being dragged — invisible but keeps its space */
.app-square.is-dragging {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none;
}

/* Floating clone that follows finger */
.drag-clone {
  background-color: var(--app-square);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--app-square-icon);
  text-align: center;
  font-size: 0.7rem;
  line-height: 1;
  overflow: hidden;
}

.drag-clone .app-remove-badge {
  display: none !important;
}

/* ---- Disable normal hover effects in jiggle mode ---- */

/* Kill hover transform/shadow so jiggle animation isn't disrupted */
.grid-container.jiggle-mode .app-square:hover,
.grid-container.jiggle-mode .app-square:focus {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Keep icon ALWAYS visible in jiggle mode — override the hover hide */
.grid-container.jiggle-mode .app-square .app-icon,
.grid-container.jiggle-mode .app-square:hover .app-icon,
.grid-container.jiggle-mode .app-square:focus .app-icon,
.grid-container.jiggle-mode .app-square .material-icons,
.grid-container.jiggle-mode .app-square:hover .material-icons,
.grid-container.jiggle-mode .app-square:focus .material-icons {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep title/subtitle ALWAYS hidden in jiggle mode — override the hover show */
.grid-container.jiggle-mode .app-square .app-title,
.grid-container.jiggle-mode .app-square:hover .app-title,
.grid-container.jiggle-mode .app-square:focus .app-title,
.grid-container.jiggle-mode .app-square .app-sub-title,
.grid-container.jiggle-mode .app-square:hover .app-sub-title,
.grid-container.jiggle-mode .app-square:focus .app-sub-title {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ---- Long-press visual feedback ---- */

.app-square.long-press-active {
  transform: scale(0.92) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* ---- Toast / feedback ---- */

.apps-manager-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(33, 33, 33, 0.92);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.85rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
}

.apps-manager-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Smooth reorder transition ---- */

.grid-container .app-square {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.25s ease;
}

/* Relative positioning needed for the remove badge */
.app-square {
  position: relative;
  overflow: visible !important; /* badge peeks outside */
}

/* ---- Onboarding hint (one-time) ---- */

.apps-onboarding-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 3.5rem auto 0;
  padding: 0.6rem 1.4rem;
  width: fit-content;
  background: rgba(1, 230, 205, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(1, 230, 205, 0.15);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: hintFloat 3s ease-in-out infinite 0.5s;
  animation-play-state: paused;
}

.apps-onboarding-hint.visible {
  opacity: 1;
  transform: translateY(0);
  animation-play-state: running;
}

.apps-onboarding-hint.dismissing {
  opacity: 0;
  transform: translateY(-6px);
  animation-play-state: paused;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes hintFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}