/* ============================================================
   topdevphone — Photos app styles
   Yellow → pink gradient identity (#fdfc47 → #e0428f).
   Grid + viewer + multi-select + the system photo picker overlay
   used by Messages / Tweeder / Cloutgram. Colors come from the
   base.css vars so dark AND light themes both read correctly.
   ============================================================ */

/* ---------- header ---------- */
.ph-hbtn {
  font-size: 14px; font-weight: 600; color: var(--accent-blue);
  padding: 4px 2px; flex: 0 0 auto;
}

/* ---------- grid ---------- */
.ph-scroll { padding: 0 10px 96px; }
.ph-day { margin: 10px 4px 8px; }
.ph-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin-bottom: 14px;
}
.ph-tile {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden; padding: 0;
  background: var(--bg-secondary);
  transition: transform 0.12s, filter 0.12s;
}
.ph-tile:active { transform: scale(0.96); }
.ph-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-media.ph-unknown {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); color: var(--text-tertiary);
}
.ph-media.ph-unknown .ic { width: 40%; height: 40%; }

.ph-check {
  position: absolute; right: 5px; bottom: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
  display: none; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
}
.ph-check .ic { width: 12px; height: 12px; }
.ph-tile.sel .ph-check { display: flex; background: var(--accent-blue); border-color: #fff; }
.ph-tile.sel .ph-media { filter: brightness(0.68); }

.ph-more {
  display: block; width: 100%; padding: 12px; margin: 2px 0 8px;
  border-radius: 12px; background: var(--bg-secondary);
  color: var(--accent-blue); font-size: 13.5px; font-weight: 700;
}
.ph-foot {
  text-align: center; padding: 6px 0 4px;
  font-size: 11.5px; color: var(--text-tertiary);
}
.ph-cam-btn {
  max-width: 220px; margin: 0 auto;
  background: linear-gradient(140deg, #fdfc47, #e0428f); color: #2a0d1f;
}

/* ---------- multi-select action bar ---------- */
.ph-actionbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; padding: 10px 14px 22px;
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  backdrop-filter: blur(18px); border-top: 1px solid var(--separator);
}
.ph-abtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 12px;
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 13.5px; font-weight: 700;
  transition: filter 0.15s, transform 0.1s;
}
.ph-abtn .ic-wrap { display: flex; font-size: 15px; }
.ph-abtn:active { transform: scale(0.98); filter: brightness(0.9); }
.ph-abtn:disabled { opacity: 0.45; }
.ph-abtn.danger { color: var(--accent-red); }

/* ---------- full-screen viewer ---------- */
.ph-viewer {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column;
  background: rgba(6, 6, 9, 0.96); backdrop-filter: blur(20px); color: #fff;
  animation: phViewIn 0.22s cubic-bezier(0.32, 0.72, 0.35, 1);
}
@keyframes phViewIn { from { opacity: 0; transform: scale(0.94); } }
.ph-viewer .pv-top {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px;
}
.ph-viewer .pv-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  flex: 0 0 auto;
}
.ph-viewer .pv-icon.ghost { background: none; }
.ph-viewer .pv-meta { flex: 1; text-align: center; min-width: 0; }
.ph-viewer .pv-day { font-size: 13.5px; font-weight: 700; }
.ph-viewer .pv-sub { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 1px; }

.ph-viewer .pv-stage {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0 8px; touch-action: pan-y;
}
.ph-viewer .pv-frame {
  width: 100%; aspect-ratio: 3 / 4; max-height: 100%;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.ph-viewer .pv-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-viewer .pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: opacity 0.15s;
}
.ph-viewer .pv-nav.prev { left: 12px; }
.ph-viewer .pv-nav.next { right: 12px; }
.ph-viewer .pv-nav.off { opacity: 0.22; pointer-events: none; }

.ph-viewer .pv-bottom {
  display: flex; gap: 12px; padding: 14px 18px 26px;
}
.ph-viewer .pv-act {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.ph-viewer .pv-act .ic { width: 19px; height: 19px; }
.ph-viewer .pv-act:active { background: rgba(255, 255, 255, 0.2); }
.ph-viewer .pv-act.danger { color: #ff6b60; }

/* share sheet preview (inside Phone.modal) */
.ph-share-preview {
  width: 120px; height: 120px; margin: 0 auto 16px;
  border-radius: 14px; overflow: hidden; background: var(--bg-tertiary);
}
.ph-share-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- system photo picker (window.PhonePickPhoto) ---------- */
.ph-picker {
  position: absolute; inset: 0; z-index: 118;
  display: flex; flex-direction: column;
  background: var(--bg-primary); color: var(--text-primary);
  animation: phPickIn 0.24s cubic-bezier(0.32, 0.72, 0.35, 1);
}
@keyframes phPickIn { from { transform: translateY(24%); opacity: 0; } }
.ph-picker .ppk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 46px 14px 10px; border-bottom: 1px solid var(--separator);
}
.ph-picker .ppk-title { flex: 1; text-align: center; font-size: 15px; font-weight: 700; }
.ph-picker .ppk-cancel,
.ph-picker .ppk-done {
  font-size: 14px; font-weight: 600; color: var(--accent-blue);
  min-width: 60px; text-align: left;
}
.ph-picker .ppk-done { text-align: right; }
.ph-picker .ppk-body { flex: 1; overflow-y: auto; padding: 10px; }
.ph-picker .ppk-body::-webkit-scrollbar { width: 0; }
.ph-picker .ppk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ph-picker .ppk-tile {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden; padding: 0; background: var(--bg-secondary);
  transition: transform 0.12s;
}
.ph-picker .ppk-tile:active { transform: scale(0.96); }
.ph-picker .ppk-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-picker .ppk-check {
  position: absolute; right: 5px; bottom: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.28);
  display: none; align-items: center; justify-content: center; color: #fff;
}
.ph-picker .ppk-check .ic { width: 12px; height: 12px; }
.ph-picker .ppk-tile.sel .ppk-check { display: flex; background: var(--accent-blue); border-color: #fff; }
.ph-picker .ppk-tile.sel .ppk-img { filter: brightness(0.68); }
/* picker media falls back to the same placeholder treatment */
.ph-picker .ph-media.ph-unknown { background: var(--bg-tertiary); }

/* ---------- home-screen widget ---------- */
.ph-w { display: flex; gap: 6px; }
.ph-w-tile {
  flex: 1; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.ph-w-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-w-empty { font-size: 12px; opacity: 0.65; padding: 4px 0; }