/* Main styles for Daily Meditation App */

/* Custom styles beyond Tailwind */
.iphone-frame {
  width: 375px;
  height: 812px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 12px solid #111;
  background-color: #000;
}

/* 响应式布局的缩放调整 */
.iphone-frame.scaled {
  transform: scale(0.6);
  transform-origin: top left;
  margin-bottom: -325px; /* 调整缩放后的负边距 */
  margin-right: -150px; /* 水平方向上的负边距 */
}

/* 网格布局容器 */
.screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 1rem;
  margin: 0 auto;
}

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

.status-bar {
  height: 44px;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.app-screen {
  height: calc(100% - 44px - 83px); /* Full height minus status bar and tab bar */
  overflow-y: auto;
  background-color: #f8f9fa;
}

.tab-bar {
  height: 83px; /* Standard iOS tab bar height */
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 30px; /* For home indicator area */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8e8e93;
  font-size: 10px;
}

.tab-item.active {
  color: #8A2BE2; /* Purple color for active tab */
}

/* Meditation session progress */
.progress-ring {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Animations */
.breathe-animation {
  animation: breathe 8s infinite ease-in-out;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.5); opacity: 1; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #8A2BE2;
  border-radius: 10px;
}

/* Common components */
.meditation-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.gradient-bg {
  background: linear-gradient(135deg, #8A2BE2, #4B0082);
}