/* ============================================================
   topdevphone — PHONE app styles (dialer, recents, voicemail,
   full-screen call overlay). Uses base.css vars so both themes
   render correctly.
   ============================================================ */

.ph-wrap { display: flex; flex-direction: column; height: 100%; position: relative; }
.ph-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- keypad ---------- */
.ph-keypad {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding-bottom: 104px;
}
.ph-dial-display {
  min-height: 46px; font-size: 32px; font-weight: 400; letter-spacing: 0.5px;
  color: var(--text-primary); margin-bottom: 14px;
  max-width: 92%; overflow: hidden; white-space: nowrap; text-align: center;
}
.ph-pad { display: grid; grid-template-columns: repeat(3, 74px); gap: 13px 22px; }
.ph-key {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--bg-secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background 0.12s, transform 0.1s;
}
.ph-key:active { background: var(--bg-tertiary); transform: scale(0.95); }
.ph-key .d { font-size: 29px; font-weight: 500; color: var(--text-primary); line-height: 1; }
.ph-key .l { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--text-secondary); margin-top: 3px; height: 10px; }
.ph-pad-bottom {
  display: grid; grid-template-columns: 74px 74px 74px; gap: 13px 22px;
  margin-top: 13px; align-items: center; justify-items: center;
}
.ph-call-btn {
  width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(140deg, #34d058, #1f9d40);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(48, 209, 88, 0.35);
  transition: transform 0.12s, filter 0.15s;
}
.ph-call-btn:active { transform: scale(0.93); filter: brightness(0.9); }
.ph-call-btn .ic { width: 30px; height: 30px; }
.ph-del-btn { font-size: 24px; color: var(--text-secondary); }
.ph-del-btn:active { color: var(--text-primary); }

/* ---------- recents / favorites ---------- */
.ph-av { width: 40px; height: 40px; font-size: 15px; }
.ph-av .ic { width: 19px; height: 19px; }
.ph-dir { display: inline-flex; vertical-align: -1px; }
.ph-dir .ic { width: 11px; height: 11px; }
.ph-dir.out .ic { transform: rotate(45deg); color: var(--accent-green); }
.ph-dir.in .ic { transform: rotate(45deg); color: var(--accent-blue); }
.lr-side .ph-cb { width: 17px; height: 17px; color: var(--accent-blue); }

/* ---------- voicemail ---------- */
.ph-vm + .ph-vm { border-top: 1px solid var(--separator); }
.ph-vm .list-row { gap: 10px; }
.ph-vm-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-blue); flex: 0 0 auto;
}
.ph-vm-dot.off { background: transparent; }
.ph-vm-body {
  padding: 2px 16px 12px 65px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
  user-select: text; -webkit-user-select: text;
}
.ph-vm-actions { display: flex; gap: 10px; padding: 0 16px 14px 65px; }
.ph-vm-actions button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  transition: filter 0.15s, transform 0.1s;
}
.ph-vm-actions button:active { transform: scale(0.97); filter: brightness(0.85); }
.ph-vm-actions .ic { width: 14px; height: 14px; }
.ph-vm-call { background: var(--accent-green); color: #fff; }
.ph-vm-del { background: var(--bg-tertiary); color: var(--accent-red); }

/* unread dot on the voicemail tab */
.tabbar .tb-item { position: relative; }
.ph-tab-dot {
  position: absolute; top: -1px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-red);
}

/* ---------- full-screen call overlay ----------
   Appended to #phone-screen, so it must sit above the lock screen
   (40), app container (30) and control/notif centers (70), but
   below the home indicator (80) and modal sheet (120) so the
   voicemail prompt can appear on top of it. */
#call-overlay {
  position: absolute; inset: 0; z-index: 75; display: none;
  background: linear-gradient(180deg, rgba(26, 28, 36, 0.94), rgba(9, 10, 14, 0.97));
  /* No backdrop-filter. This gradient is 94-97% opaque, so the blur behind
     it was never actually visible — but on a transparent NUI page it was
     enough to haze the player's whole screen during a call. Zero visual
     loss, one less way to break compositing. */
  color: #fff;
}
#call-overlay.show { display: flex; animation: coIn 0.3s cubic-bezier(0.32, 0.72, 0.35, 1); }
@keyframes coIn { from { opacity: 0; transform: scale(1.05); } }
.co-inner {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 92px 30px 72px;
}
.co-top { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.co-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(140deg, #5a5a63, #38383f);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; margin-bottom: 14px;
}
.co-avatar .ic { width: 44px; height: 44px; opacity: 0.85; }
#call-overlay.co-incoming .co-avatar,
#call-overlay.co-outgoing .co-avatar { animation: coPulse 1.7s ease-in-out infinite; }
@keyframes coPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.45); }
  50% { box-shadow: 0 0 0 16px rgba(48, 209, 88, 0); }
}
.co-name {
  font-size: 27px; font-weight: 700; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.co-state { font-size: 15px; color: rgba(255, 255, 255, 0.75); margin-top: 10px; min-height: 20px; }
#call-overlay.co-ended .co-state { color: var(--accent-red); }

.co-actions { display: flex; gap: 54px; align-items: flex-end; }
.co-act {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12px; color: rgba(255, 255, 255, 0.8);
}
.co-btn {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform 0.12s, background 0.15s, color 0.15s;
}
.co-btn:active { transform: scale(0.92); }
.co-btn .ic { width: 30px; height: 30px; }
.co-green { background: #30d158; box-shadow: 0 8px 22px rgba(48, 209, 88, 0.4); }
.co-red { background: #ff453a; box-shadow: 0 8px 22px rgba(255, 69, 58, 0.4); }
.co-ghost { background: rgba(255, 255, 255, 0.18); }
.co-ghost.on { background: #fff; color: #111; }