/* ============================================================
   iPhone SV style — calibrado al iPhone 13 Pro Max real
   Aspect ratio fijo 380:800. Todas las medidas en calc() sobre
   --ph-height para que escalen circulares (no elípticas).
   ============================================================ */

.ph {
  /* Altura controlada por JS (sync con laptop). Ancho derivado por aspect ratio. */
  height: var(--ph-height, 700px);
  width: auto;
  aspect-ratio: 380 / 800;
  flex: 0 0 auto;
  display: flex;
  background: #0b0b0c;
  /* radius circular ~ 6% del height (iPhone real ≈ 5.5%) */
  border-radius: calc(var(--ph-height, 700px) * 0.06);
  padding: calc(var(--ph-height, 700px) * 0.014);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.28),
    0 22px 48px -14px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.10),
    0 12px 28px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  position: relative;
  isolation: isolate;
}

/* Glass shine sobre el chamfer (sharp + ambient) */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 9;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.08) 30%,
      rgba(255,255,255,0) 30.5%),
    linear-gradient(135deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
}

/* Bisel metálico exterior */
.ph::after {
  content: "";
  position: absolute;
  inset: calc(var(--ph-height, 700px) * -0.0022);
  border-radius: calc(var(--ph-height, 700px) * 0.0622);
  background: linear-gradient(135deg,
    #4a4a4e 0%,
    #1a1a1c 30%,
    #0c0c0e 50%,
    #1a1a1c 70%,
    #4a4a4e 100%);
  z-index: -1;
}

.ph-screen {
  position: relative;
  flex: 1; min-height: 0;
  /* radius interior un poco más chico (iPhone real ≈ inner radius - bezel thickness) */
  border-radius: calc(var(--ph-height, 700px) * 0.0475);
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #E3DCD3;
}

/* Dynamic island — pill negra centrada arriba.
   Width ≈ 30% del width del screen, height fija proporcional. */
.ph-island {
  position: absolute;
  top: calc(var(--ph-height, 700px) * 0.013);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--ph-height, 700px) * 0.144);    /* ~115px @ 800 */
  height: calc(var(--ph-height, 700px) * 0.034);   /* ~27px @ 800 */
  background: #000;
  border-radius: 999px;
  z-index: 6;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.4);
}

/* Status bar (hora · señal · batería). Padding proporcional. */
.ph-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding:
    calc(var(--ph-height, 700px) * 0.018)
    calc(var(--ph-height, 700px) * 0.034)
    calc(var(--ph-height, 700px) * 0.009);
  font-size: calc(var(--ph-height, 700px) * 0.017);
  font-weight: 600;
  color: #0c1b14;
  background: #F5F1EB;
}
.ph-statusbar .sb-icons { display: flex; align-items: center; gap: 6px; }
.ph-statusbar svg {
  height: calc(var(--ph-height, 700px) * 0.014);
  width: auto;
  display: block;
}

.ph-header {
  display: flex; align-items: center;
  gap: calc(var(--ph-height, 700px) * 0.015);
  padding:
    calc(var(--ph-height, 700px) * 0.004)
    calc(var(--ph-height, 700px) * 0.0195)
    calc(var(--ph-height, 700px) * 0.013);
  background: #F5F1EB;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ph-avatar {
  width: calc(var(--ph-height, 700px) * 0.0475);
  height: calc(var(--ph-height, 700px) * 0.0475);
  border-radius: 50%;
  background: #0F3159;
  color: #fff;
  display: grid; place-items: center;
  font-size: calc(var(--ph-height, 700px) * 0.0175);
  font-weight: 700;
  flex-shrink: 0;
}
.ph-htext { flex: 1; min-width: 0; }
.ph-hname {
  font-size: calc(var(--ph-height, 700px) * 0.0195);
  font-weight: 600;
  color: #111b21; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.4px;
}
.ph-hstatus {
  font-size: calc(var(--ph-height, 700px) * 0.0148);
  color: #667781;
}
.ph-hback {
  display: flex; align-items: center;
  color: #54656f;
}
.ph-hback svg {
  width: calc(var(--ph-height, 700px) * 0.028);
  height: calc(var(--ph-height, 700px) * 0.028);
}

.ph-body {
  flex: 1; overflow-y: auto;
  padding:
    calc(var(--ph-height, 700px) * 0.018)
    calc(var(--ph-height, 700px) * 0.015)
    calc(var(--ph-height, 700px) * 0.02);
  display: flex; flex-direction: column;
  gap: calc(var(--ph-height, 700px) * 0.004);
  background-color: #E3DCD3;
  background-image:
    radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px);
  background-size: calc(var(--ph-height, 700px) * 0.028) calc(var(--ph-height, 700px) * 0.028);
}
.ph-body::-webkit-scrollbar { width: 0; }
.ph-body { scrollbar-width: none; }

.ph-datechip {
  align-self: center;
  background: #F4EEE3;
  color: #54656f;
  font-size: calc(var(--ph-height, 700px) * 0.0135);
  font-weight: 500;
  padding:
    calc(var(--ph-height, 700px) * 0.005)
    calc(var(--ph-height, 700px) * 0.014);
  border-radius: 8px;
  margin: 4px 0 8px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.08);
  text-transform: lowercase;
}

.ph-bubble {
  max-width: 82%;
  padding:
    calc(var(--ph-height, 700px) * 0.0078)
    calc(var(--ph-height, 700px) * 0.0115)
    calc(var(--ph-height, 700px) * 0.0105);
  font-size: calc(var(--ph-height, 700px) * 0.0175);
  line-height: 1.42;
  color: #111b21;
  box-shadow: 0 1px 0.6px rgba(0,0,0,0.16);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s, transform 0.28s;
  margin-bottom: 3px;
  letter-spacing: -0.36px;
}
.ph-bubble.show { opacity: 1; transform: none; }
.ph-bubble.inc {
  align-self: flex-start;
  background: #FFFFFF;
  border-radius: 9px 9px 9px 2px;
}
.ph-bubble.out {
  align-self: flex-end;
  background: #D9FDD3;
  border-radius: 9px 9px 2px 9px;
}
.ph-time {
  float: right;
  font-size: calc(var(--ph-height, 700px) * 0.0128);
  color: #8696a0;
  margin: 7px 0 -3px 12px;
  font-variant-numeric: tabular-nums;
}
.ph-bubble.out .ph-time { color: #5a9e6c; }
.ph-tick { margin-left: 2px; color: #53bdeb; }

.ph-text { white-space: pre-wrap; }

.ph-filecard {
  display: flex; align-items: center;
  gap: calc(var(--ph-height, 700px) * 0.0115);
  width: 100%;
  max-width: calc(var(--ph-height, 700px) * 0.308);
  margin: 1px 0 4px;
  padding:
    calc(var(--ph-height, 700px) * 0.0115)
    calc(var(--ph-height, 700px) * 0.014);
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
}
.ph-bubble.out .ph-filecard { background: rgba(0,0,0,0.05); }
.ph-filecard-ic {
  flex: 0 0 auto;
  width: calc(var(--ph-height, 700px) * 0.0425);
  height: calc(var(--ph-height, 700px) * 0.0425);
  border-radius: 7px;
  display: grid; place-items: center;
  background: #fff;
  color: #d12f2f;
  font-size: calc(var(--ph-height, 700px) * 0.012);
  font-weight: 800;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  letter-spacing: 0.5px;
}
.ph-filecard-meta { display: flex; flex-direction: column; min-width: 0; }
.ph-filecard-name {
  font-size: calc(var(--ph-height, 700px) * 0.0158);
  font-weight: 500;
  color: #111b21;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-filecard-type {
  font-size: calc(var(--ph-height, 700px) * 0.0134);
  color: #667781;
  margin-top: 1px;
}

.ph-footer {
  display: flex; align-items: center;
  gap: calc(var(--ph-height, 700px) * 0.01);
  padding:
    calc(var(--ph-height, 700px) * 0.011)
    calc(var(--ph-height, 700px) * 0.014);
  background: #F5F1EB;
}
.ph-footer .ph-foot-ic {
  width: calc(var(--ph-height, 700px) * 0.028);
  height: calc(var(--ph-height, 700px) * 0.028);
  color: #54656f;
  display: grid; place-items: center;
}
.ph-footer .ph-foot-ic svg { width: 100%; height: 100%; }
.ph-inputbox {
  flex: 1;
  background: #fff;
  border-radius: 999px;
  padding:
    calc(var(--ph-height, 700px) * 0.012)
    calc(var(--ph-height, 700px) * 0.0175);
  font-size: calc(var(--ph-height, 700px) * 0.0158);
  color: #8696a0;
}
.ph-sendbtn {
  width: calc(var(--ph-height, 700px) * 0.046);
  height: calc(var(--ph-height, 700px) * 0.046);
  border-radius: 50%;
  background: #128C7E;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff;
}
.ph-sendbtn svg {
  width: calc(var(--ph-height, 700px) * 0.0225);
  height: calc(var(--ph-height, 700px) * 0.0225);
  fill: #fff;
}
.ph-home {
  height: calc(var(--ph-height, 700px) * 0.026);
  background: #E3DCD3;
  display: grid; place-items: center;
}
.ph-home::after {
  content: '';
  width: calc(var(--ph-height, 700px) * 0.155);
  height: calc(var(--ph-height, 700px) * 0.006);
  background: #000;
  border-radius: 3px;
  opacity: 0.82;
}

/* Botones laterales (chamfer físico) — scale with phone */
.ph-side-btn {
  position: absolute;
  background: linear-gradient(to right, #2a2a2e, #5a5a5e 50%, #1a1a1c);
  z-index: 7;
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  width: calc(var(--ph-height, 700px) * 0.0045);
}
.ph-side-silencer {
  left: calc(var(--ph-height, 700px) * -0.003);
  top: 18%;
  height: calc(var(--ph-height, 700px) * 0.036);
}
.ph-side-vup {
  left: calc(var(--ph-height, 700px) * -0.003);
  top: 27%;
  height: calc(var(--ph-height, 700px) * 0.056);
}
.ph-side-vdown {
  left: calc(var(--ph-height, 700px) * -0.003);
  top: 36%;
  height: calc(var(--ph-height, 700px) * 0.056);
}
.ph-side-power {
  right: calc(var(--ph-height, 700px) * -0.003);
  top: 28%;
  width: calc(var(--ph-height, 700px) * 0.0045);
  height: calc(var(--ph-height, 700px) * 0.08);
  background: linear-gradient(to left, #2a2a2e, #5a5a5e 50%, #1a1a1c);
}