/* ================================================================
   真机感增强 — Phone Frame Enhancement
   给设备屏幕截图添加手机外壳效果
   ================================================================ */

/* 手机外壳容器 */
.phone-real-frame {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 36px;
  background: linear-gradient(145deg, #2a2a2e 0%, #1a1a1e 50%, #2a2a2e 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 2px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 20px 60px rgba(0,0,0,0.5),
    0 8px 20px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.2);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 手机内边框 — 金属质感 */
.phone-real-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 5;
}

/* 屏幕内嵌阴影 — 让屏幕看起来像是嵌入在手机壳中的 */
.phone-screen-inset {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.8),
    inset 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 10;
}

/* 灵动岛 / 刘海区域 */
.phone-dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #000;
  border-radius: 14px;
  z-index: 20;
  box-shadow:
    0 0 0 1px rgba(60,60,60,0.5),
    0 2px 8px rgba(0,0,0,0.4);
}

/* 灵动岛内的摄像头小圆点 */
.phone-dynamic-island::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a3a4a, #0a0a0e);
  box-shadow:
    inset 0 0 2px rgba(100,140,180,0.3),
    0 0 1px rgba(100,140,180,0.15);
}

/* 模拟状态栏覆盖层 */
.phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 0;
  z-index: 15;
  pointer-events: none;
}

.phone-status-time {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.2px;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.phone-status-icons svg {
  width: 16px;
  height: 16px;
  fill: rgba(255,255,255,0.9);
}

/* 底部横条 Home Indicator */
.phone-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  z-index: 20;
  pointer-events: none;
}

/* 屏幕高光反射效果 */
.phone-screen-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  background: linear-gradient(
    165deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.01) 30%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 12;
}

/* 手机底部反光 */
.phone-real-frame::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 40px;
  background: radial-gradient(ellipse at center bottom, rgba(255,255,255,0.02) 0%, transparent 70%);
  pointer-events: none;
}

/* 按键效果 — 侧边音量键（可选） */
.phone-btn-volume-up,
.phone-btn-volume-down,
.phone-btn-power {
  position: absolute;
  background: linear-gradient(to right, #333, #444, #333);
  border-radius: 1px;
  z-index: 2;
}

/* 音量+ */
.phone-btn-volume-up {
  right: -2px;
  top: 80px;
  width: 3px;
  height: 30px;
}

/* 音量- */
.phone-btn-volume-down {
  right: -2px;
  top: 120px;
  width: 3px;
  height: 30px;
}

/* 电源键 */
.phone-btn-power {
  left: -2px;
  top: 95px;
  width: 3px;
  height: 35px;
}

/* ===== 深色主题适配 ===== */
[data-theme="dark"] .phone-real-frame {
  background: linear-gradient(145deg, #1e1e22 0%, #121216 50%, #1e1e22 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 2px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 20px 60px rgba(0,0,0,0.7),
    0 8px 20px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.3);
}

/* ===== 响应式调整 ===== */
@media (max-width: 768px) {
  .phone-real-frame {
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 28px;
  }

  .phone-screen-inset {
    border-radius: 24px;
  }

  .phone-dynamic-island {
    width: 100px;
    height: 24px;
    top: 8px;
  }

  .phone-screen-reflection {
    border-radius: 24px;
  }

  .phone-home-indicator {
    width: 110px;
    bottom: 6px;
  }

  .phone-btn-volume-up,
  .phone-btn-volume-down,
  .phone-btn-power {
    display: none;
  }
}