/* Custom styles for iPhone 15 frame, soft pastel theme, subtle shadows, animations */

/* iPhone 15 device frame */
.device-iphone15 {
  position: relative;
  width: 390px; /* iPhone 15 logical width */
  height: 844px; /* iPhone 15 logical height */
  border-radius: 44px;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), inset 0 0 0 2px #e5e7eb;
  overflow: hidden;
}

.device-iphone15 .bezel {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

.device-iphone15 .screen {
  position: absolute;
  inset: 10px; /* bezel padding */
  border-radius: 36px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Dynamic island / notch */
.device-iphone15 .notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 35px;
  background: #0f172a;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 20;
}

/* Home indicator */
.device-iphone15 .home-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 999px;
  opacity: 0.25;
}

/* Pastel gradient helpers */
.bg-pastel-mint {
  background: linear-gradient(135deg, #B6E3C6 0%, #C9F0D8 100%);
}

.bg-pastel-peach {
  background: linear-gradient(135deg, #FFD3C4 0%, #FFE4DB 100%);
}

.bg-pastel-blue {
  background: linear-gradient(135deg, #C9E7FF 0%, #E3F2FF 100%);
}

.bg-pastel-cream {
  background: linear-gradient(135deg, #FFF1B6 0%, #FFF6D1 100%);
}

/* Card shadow */
.soft-shadow {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Press effect */
.pressable:active { transform: translateY(1px) scale(0.995); }

/* Pulse for recording button */
.pulse {
  position: relative;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(244, 63, 94, 0.45);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* iFrame preview grid scaling */
.preview-scale {
  transform-origin: top left;
}