/* ============================================================
   Phone App Styles
   Built on the shared .view / .nav / .scroll / .large-title / .search
   (css/components.css). Values come from the reference capture
   (docs/ref-shots/phone/*.nodes.json). The shell is OPAQUE (var(--bg)):
   never make #apps or .view transparent, or the home screen shows through.
   ============================================================ */

.phn-view {
  color: var(--label);
  font-family: var(--font);
}

.phn-pane {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.phn-pane.on { display: flex; }

.phn-pane .scroll { padding-bottom: 110px; }
.phn-pane[data-tab="keypad"] .scroll { padding-top: 110px; }

/* ---------- Tab bar ---------- */

.phn-tabbar {
  --bar-ink: #f9f9f9;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  box-sizing: border-box;
  padding: 6px 6px 0;
  display: flex;
  justify-content: space-around;
  background: var(--bar);
  border-top: 0.5px solid var(--sep);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 10;
}

:root[data-theme="dark"] .phn-tabbar { --bar-ink: #161618; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phn-tabbar { --bar-ink: #161618; }
}

.phn-tab {
  width: 70px;
  height: 77px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  border: 0;
  background: none;
  outline: none;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  color: var(--label2);
  -webkit-tap-highlight-color: transparent;
}
.phn-tab svg { width: 27px; height: 27px; display: block; }
.phn-tab span { font-size: 10px; font-weight: 500; line-height: 12px; }
.phn-tab.on { color: var(--blue); }
.phn-tab:active { opacity: 0.7; }

/* ---------- Rows (Favorites / Recents / Voicemail / Contacts) ---------- */

.phn-list { display: flex; flex-direction: column; }

.phn-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 0 0 0 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phn-row:active { background: var(--fill); }
.phn-row.tall { height: 68px; }

.phn-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px 0;
  border-bottom: 0.8px solid var(--sep);
  text-align: left;
}
.phn-row:last-child .phn-main { border-bottom: 0; }
/* Voicemail rows always keep the hairline under the header, even the last row.
   Runs from x=28 (name text start) to the screen's right edge. */
.phn-vm .phn-vmrow .phn-main { border-bottom: 0.8px solid var(--sep); padding-right: 0; }

.phn-top {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.phn-top.has-info { min-height: 28px; }

.phn-top b {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phn-time {
  flex: none;
  font-size: 15px;
  line-height: 18px;
  color: var(--label2);
}

.phn-sub {
  font-size: 15px;
  line-height: 20px;
  color: var(--label2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phn-info {
  flex: none;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  color: var(--blue);
}
.phn-info svg { width: 24px; height: 24px; display: block; }

.phn-row.missed .phn-top b { color: var(--red); }

/* Avatars (neutral initials, no photos) */
.phn-av {
  flex: none;
  align-self: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.phn-av-lg { width: 58px; height: 58px; font-size: 22px; }
img.phn-av { display: block; object-fit: cover; }

/* ---------- Recents ---------- */

.phn-rec { padding-left: 40px; }

.phn-dir {
  position: absolute;
  left: 12px;
  top: 27px;
  width: 16px;
  height: 14px;
  color: var(--label2);
}
.phn-dir svg { width: 14px; height: 14px; display: block; }

.phn-segwrap {
  display: flex;
  justify-content: center;
  padding: 0 16px 10px;
}
.phn-seg {
  display: flex;
  box-sizing: border-box;
  width: 190px;
  height: 32px;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}
.phn-seg button {
  flex: 1;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--label);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.phn-seg button.on {
  background: var(--bg);
  font-weight: 600;
}

/* ---------- Contacts ---------- */

.phn-me {
  box-sizing: border-box;
  height: 76px;
  padding: 6px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.phn-me b { display: block; font-size: 20px; font-weight: 600; line-height: 24px; }

.phn-con { min-height: 44px; }
.phn-con .phn-main { justify-content: center; }
.phn-con .phn-top b { font-weight: 400; }

/* ---------- Voicemail ---------- */

.phn-vm { display: block; }
.phn-vmrow { padding-left: 28px; }
.phn-vmrow .phn-top { align-items: center; }

.phn-unread {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------- Keypad ---------- */

.phn-dial { height: 80px; }

.phn-keys {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  column-gap: 26px;
  row-gap: 15px;
  justify-content: center;
}

.phn-key {
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill2);
  color: var(--label);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phn-key b { font-size: 36px; font-weight: 400; line-height: 36px; }
.phn-key small {
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 1.8px;
}
.phn-key:active { opacity: 0.7; }
.phn-key.sym b { font-size: 36px; font-weight: 400; line-height: 36px; }
.phn-key.star b { font-size: 44px; line-height: 36px; padding-top: 14px; }
.phn-delete {
  grid-column: 3;
  width: 80px;
  height: 78px;
  margin: 3px 0 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--label2);
  display: grid;
  place-items: center;
  cursor: pointer;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.phn-delete svg { width: 32px; height: 24px; display: block; }

.phn-callbtn {
  grid-column: 2;
  justify-self: start;
  width: 78px;
  height: 78px;
  margin: 3px 0 0 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.phn-callbtn svg { width: 34px; height: 34px; display: block; }
.phn-callbtn:active { opacity: 0.8; }

/* ---------- Call screen (opened by tapping a Favorites / Recents row) ---------- */

.phn-call {
  color: #fff;
  font-family: var(--font);
  background: linear-gradient(180deg, #1e2543 0%, #2f3a5e 55%, #454e74 100%);
  z-index: 5;
}

.phn-call-av {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -42px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
}
.phn-call-name {
  position: absolute;
  top: 184px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 30px;
  line-height: 36px;
}
.phn-call-sub {
  position: absolute;
  top: 227px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 17px;
  line-height: 20px;
  color: rgba(235, 235, 245, 0.62);
}

.phn-call-grid {
  position: absolute;
  top: 472px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 76px);
  column-gap: 30px;
  row-gap: 18px;
  justify-content: center;
}
.phn-cb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.phn-cb span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
}
.phn-cb svg { width: 34px; height: 34px; display: block; color: #fff; }
.phn-cb em { font-style: normal; font-size: 15px; line-height: 18px; }

.phn-end {
  position: absolute;
  top: 716px;
  left: 50%;
  margin-left: -38px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff3b30;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.phn-end svg { width: 36px; height: 36px; display: block; }
.phn-end:active { opacity: 0.8; }

/* ---------- Call screen variants ---------- */

.phn-call.phn-call-dialed {
  background: linear-gradient(180deg, #555555 0%, #6a6a6a 55%, #8a8a8a 100%);
}
.phn-call.no-answer {
  background: linear-gradient(180deg, #8a6d6d 0%, #a67b7b 55%, #c48a8a 100%);
}

/* ---------- Call screen: fade in on dial, fade out on end ---------- */

@keyframes phnFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes phnFadeOut { from { opacity: 1; } to { opacity: 0; } }

.phn-call.fade-in { animation: phnFadeIn 0.35s ease both; }
.phn-call.fade-out { animation: phnFadeOut 0.35s ease both; }

/* ---------- Info page (pushed over the current tab) ---------- */

.phn-info-view {
  color: var(--label);
  font-family: var(--font);
  z-index: 5;
}
.phn-info-view .nav-row { align-items: center; }
.phn-info-view .back {
  display: flex; align-items: center; gap: 4px;
  height: 44px; padding: 0 6px;
  background: none; border: 0;
  color: var(--blue);
  font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 22px;
  white-space: nowrap;
}
.phn-info-view .back svg { width: 12px; height: 21px; display: block; flex: none; }
.phn-info-view .icon-btn {
  color: var(--blue);
  font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 22px;
}
.phn-info-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px 24px;
  text-align: center;
}
.phn-info-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
}
img.phn-info-avatar { display: block; width: 100px; height: 100px; object-fit: cover; }
.phn-info-name {
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  margin-top: 16px;
}
.phn-info-actions {
  display: flex;
  gap: 8px;
  margin: 30px 14px 0;
}
.phn-info-action {
  width: 84px;
  height: 56px;
  border-radius: 12px;
  background: var(--cell);
  border: 0;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}
.phn-info-action svg { width: 20px; height: 20px; display: block; flex: none; }
.phn-info-action:active { opacity: 0.7; }
.phn-info-card {
  margin-top: 24px;
  border-radius: 12px;
  border: 0.8px solid var(--sep);
  background: var(--cell);
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .phn-info-card {
    background: var(--bg2);
  }
  :root:not([data-theme="dark"]) .phn-info-action {
    background: #D9D9D9;
  }
}
.phn-info-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--label);
  text-align: left;
}
.phn-info-card-number {
  font-size: 17px;
  color: var(--blue);
  text-align: left;
  margin-top: 2px;
}

/* ---------- Keypad dial display ---------- */

.phn-dial-display {
  font-size: 34px;
  font-weight: 400;
  line-height: 36px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* ---------- Voicemail expanded block (always rendered, toggled in place) ---------- */

.phn-vm-expand {
  overflow: hidden;
  min-height: 0;
  box-sizing: border-box;
  height: 0;
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}
.phn-vm.open .phn-vm-expand {
  height: auto;
  max-height: 2000px;
  padding: 9px 16px 14px 16px;
  opacity: 1;
  pointer-events: auto;
}
.phn-vm-bar {
  display: flex;
  align-items: center;
  height: 32px;
  gap: 12px;
}
.phn-vm-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  border: 0;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  padding: 0;
}
.phn-vm-play:active { opacity: 0.8; }
.phn-vm-play svg { width: 14px; height: 14px; fill: #fff; display: block; }
.phn-vm-progress {
  flex: 1;
  height: 4px;
  background: var(--fill2);
  border-radius: 2px;
  overflow: hidden;
}
.phn-vm-fill {
  height: 100%;
  width: 0%;
  background: var(--label2);
  border-radius: 2px;
}
.phn-vm-dur {
  font-size: 15px;
  line-height: 18px;
  color: var(--label2);
  font-variant-numeric: tabular-nums;
  flex: none;
  text-align: right;
}
.phn-vm-label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--label2);
  margin-top: 12px;
  margin-bottom: 0;
}
.phn-vm-body {
  font-size: 15px;
  line-height: 22px;
  color: var(--label);
  margin-top: 2px;
  margin-bottom: 0;
}
/* ---------- Call screen on portrait phones: keep End Call + controls on screen ----------
   Same idea as the lock screen: anchor the bottom items to the BOTTOM of the
   visible area instead of fixed offsets from the 852px design. min() keeps the
   exact desktop values (grid top 472px, End Call top 716px) whenever the screen
   is tall enough, and only moves them up on shorter screens (Safari toolbars).
   Only applies at max-width 520px; desktop/tablet is untouched. */
@media (max-width: 520px) {
  .phn-end { top: min(716px, calc(100% - 118px)); }
  .phn-call-grid { top: min(472px, calc(100% - 362px)); }
}
/* Short screens (e.g. iPhone SE with toolbars): pull the header up a bit */
@media (max-width: 520px) and (max-height: 640px) {
  .phn-call-av { top: 28px; }
  .phn-call-name { top: 120px; }
  .phn-call-sub { top: 160px; }
  .phn-call-grid { row-gap: 12px; top: min(472px, calc(100% - 356px)); }
}
/* Very short screens: slightly smaller avatar and circles so nothing overlaps */
@media (max-width: 520px) and (max-height: 560px) {
  .phn-call-av { top: 20px; width: 64px; height: 64px; margin-left: -32px; font-size: 26px; }
  .phn-call-name { top: 92px; font-size: 26px; line-height: 30px; }
  .phn-call-sub { top: 126px; }
  .phn-call-grid { grid-template-columns: repeat(3, 64px); row-gap: 8px; top: min(472px, calc(100% - 316px)); }
  .phn-cb span { width: 64px; height: 64px; }
  .phn-end { width: 64px; height: 64px; margin-left: -32px; top: min(716px, calc(100% - 94px)); }
}

/* ---------- Keypad: fixed, never scrolls; shrinks to fit short phone screens ----------
   The keypad pane has no scrolling. On tall screens (and the desktop phone frame) it keeps its
   normal size. On shorter visible areas (e.g. iPhone Safari with toolbars) the keys, spacing and
   dial display shrink in steps so the Call button always stays above the tab bar. */
.phn-pane[data-tab="keypad"] .scroll { overflow: hidden; overscroll-behavior: none; }

@media (max-width: 520px) and (max-height: 749px) {
  .phn-pane[data-tab="keypad"] .scroll { padding-top: 62px; padding-bottom: 0; }
  .phn-dial { height: 56px; }
  .phn-keys { grid-template-columns: repeat(3, 72px); column-gap: 24px; row-gap: 12px; }
  .phn-key { width: 72px; height: 72px; }
  .phn-key b, .phn-key.sym b { font-size: 32px; line-height: 32px; }
  .phn-key.star b { font-size: 40px; line-height: 32px; padding-top: 12px; }
  .phn-callbtn { width: 70px; height: 70px; }
  .phn-callbtn svg { width: 30px; height: 30px; }
  .phn-delete { width: 72px; height: 70px; }
  .phn-delete svg { width: 28px; height: 21px; }
}
@media (max-width: 520px) and (max-height: 639px) {
  .phn-pane[data-tab="keypad"] .scroll { padding-top: 54px; }
  .phn-dial { height: 46px; }
  .phn-keys { grid-template-columns: repeat(3, 64px); column-gap: 22px; row-gap: 10px; }
  .phn-key { width: 64px; height: 64px; }
  .phn-key b, .phn-key.sym b { font-size: 29px; line-height: 29px; }
  .phn-key.star b { font-size: 36px; line-height: 29px; padding-top: 11px; }
  .phn-key small { font-size: 9px; line-height: 10px; letter-spacing: 1.6px; }
  .phn-callbtn { width: 62px; height: 62px; }
  .phn-callbtn svg { width: 27px; height: 27px; }
  .phn-delete { width: 64px; height: 62px; }
  .phn-delete svg { width: 25px; height: 19px; }
}
@media (max-width: 520px) and (max-height: 559px) {
  .phn-pane[data-tab="keypad"] .scroll { padding-top: 48px; }
  .phn-dial { height: 38px; }
  .phn-dial-display { font-size: 30px; line-height: 32px; }
  .phn-keys { grid-template-columns: repeat(3, 56px); column-gap: 20px; row-gap: 8px; }
  .phn-key { width: 56px; height: 56px; }
  .phn-key b, .phn-key.sym b { font-size: 25px; line-height: 25px; }
  .phn-key.star b { font-size: 31px; line-height: 25px; padding-top: 9px; }
  .phn-key small { font-size: 8px; line-height: 9px; letter-spacing: 1.4px; }
  .phn-callbtn { width: 54px; height: 54px; }
  .phn-callbtn svg { width: 24px; height: 24px; }
  .phn-delete { width: 56px; height: 54px; }
  .phn-delete svg { width: 22px; height: 17px; }
}
@media (max-width: 520px) and (max-height: 499px) {
  .phn-pane[data-tab="keypad"] .scroll { padding-top: 44px; }
  .phn-dial { height: 32px; }
  .phn-dial-display { font-size: 26px; line-height: 28px; }
  .phn-keys { grid-template-columns: repeat(3, 50px); column-gap: 18px; row-gap: 7px; }
  .phn-key { width: 50px; height: 50px; }
  .phn-key b, .phn-key.sym b { font-size: 22px; line-height: 22px; }
  .phn-key.star b { font-size: 28px; line-height: 22px; padding-top: 8px; }
  .phn-key small { font-size: 7px; line-height: 8px; letter-spacing: 1.2px; }
  .phn-callbtn { width: 48px; height: 48px; }
  .phn-callbtn svg { width: 21px; height: 21px; }
  .phn-delete { width: 50px; height: 48px; }
  .phn-delete svg { width: 20px; height: 15px; }
}