/* ───────────────────────────────────────────────────────────────────────────
   Caller — iOS. The system font stack resolves to the real SF Pro on Apple
   platforms, so the type is genuine rather than an approximation.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;

  --ios-blue:   #007aff;
  --ios-green:  #34c759;
  --ios-red:    #ff3b30;
  --ios-gray:   #8e8e93;

  --bubble-in:  #e9e9eb;
  --paper:      #ffffff;
  --ink:        #000000;
  --hair:       rgba(60, 60, 67, .18);

  --dark-hair:  rgba(255, 255, 255, .16);
  --glass:      rgba(255, 255, 255, .19);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  background: #0d0d0f radial-gradient(120% 90% at 50% -10%, #22222a 0%, #0a0a0c 60%);
  font-family: var(--sf);
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 34px);
  overflow: hidden;
}

/* ── the handset ───────────────────────────────────────────────────────── */
.iphone {
  position: relative;
  width: min(393px, 100%);
  height: min(852px, calc(100dvh - 60px));
  min-height: 560px;
  border-radius: 55px;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
  /* titanium band, then the shadow the device casts on the desk */
  box-shadow:
    0 0 0 2px #2f3033,
    0 0 0 5px #6d6f74,
    0 0 0 6px #34363a,
    0 34px 70px -14px rgba(0, 0, 0, .85),
    0 4px 14px rgba(0, 0, 0, .5);
}

/* Dynamic Island */
.island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 20px;
  background: #000; z-index: 40;
}

/* home indicator */
.home-bar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 138px; height: 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .32); z-index: 30;
}
.iphone[data-chrome="dark"] .home-bar { background: rgba(255, 255, 255, .4); }

/* ── status bar ────────────────────────────────────────────────────────── */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px 0;
  z-index: 35; pointer-events: none;
  color: var(--ink);
}
.iphone[data-chrome="dark"] .statusbar { color: #fff; }
.sb-time { font-size: 15.5px; font-weight: 600; letter-spacing: .2px; }
.sb-right { display: flex; align-items: center; gap: 6px; }
.ic { height: 11px; fill: currentColor; }
.ic-batt { height: 12px; }

/* ── screens ───────────────────────────────────────────────────────────── */
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  padding: 58px 0 30px;
}
.screen.is-active { display: flex; }
.screen-dark {
  color: #fff;
  background:
    radial-gradient(90% 60% at 50% 0%, #3a3a45 0%, transparent 60%),
    linear-gradient(180deg, #1c1c22 0%, #0b0b0e 100%);
}

/* ══════════════════════════════  MESSAGES  ═══════════════════════════════ */
.msg-head {
  display: grid; grid-template-columns: 54px 1fr 44px;
  align-items: center;
  padding: 2px 12px 8px;
  border-bottom: .5px solid var(--hair);
  background: rgba(249, 249, 249, .88);
  backdrop-filter: saturate(180%) blur(20px);
}
.msg-back, .msg-info {
  background: none; border: 0; cursor: pointer;
  color: var(--ios-blue);
  display: flex; align-items: center; gap: 3px;
}
.msg-back svg { width: 11px; }
.msg-back em { font-style: normal; font-size: 17px; }
.msg-info { justify-self: end; }
.msg-info svg { width: 22px; }

.msg-who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(160deg, #b6b8bd, #86888e);
  color: #fff; font-size: 13px; font-weight: 500;
  display: grid; place-items: center; letter-spacing: .3px;
}
.msg-who span { font-size: 11px; font-weight: 500; color: #1c1c1e; }

.thread {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--paper);
}
.thread-stamp {
  text-align: center; font-size: 11px; color: var(--ios-gray);
  margin: 2px 0 12px;
}
.thread-stamp b { color: #3c3c43; font-weight: 600; }

.bubble { max-width: 78%; margin-bottom: 5px; animation: pop .32s cubic-bezier(.2,.9,.25,1) both; }
.bubble p {
  font-size: 16.5px; line-height: 1.32; letter-spacing: -.2px;
  padding: 9px 14px 10px; border-radius: 19px;
}
.bubble p b { font-weight: 600; }
.bubble.in { align-self: flex-start; }
.bubble.in p { background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.out { align-self: flex-end; }
.bubble.out p { background: var(--ios-blue); color: #fff; border-bottom-right-radius: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.94) } }

/* iOS QuickType — the three predictive slots above the keyboard, divided by hairlines */
.quicktype {
  display: flex; align-items: stretch;
  background: #d1d3d9;
  border-top: .5px solid rgba(0, 0, 0, .12);
}
.qt {
  flex: 1; background: none; border: 0; cursor: pointer;
  font-family: var(--sf); font-size: 16px; font-weight: 500;
  letter-spacing: -.2px; color: #000;
  padding: 12px 4px;
  transition: background .12s;
}
.qt + .qt { border-left: .5px solid rgba(0, 0, 0, .22); }
.qt:hover { background: rgba(255, 255, 255, .55); }
.qt:active { background: #fff; }

/* SMS from a business is green, not blue, and gets a delivery receipt */
.bubble.out p { background: var(--ios-green); }
.receipt {
  align-self: flex-end;
  font-size: 10.5px; color: var(--ios-gray);
  margin: -1px 4px 6px; letter-spacing: -.1px;
  animation: fade .4s ease both;
}

.msg-input {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 2px;
  border-top: .5px solid var(--hair);
}
.msg-input .plus {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e9e9eb; color: #6a6a6e;
  display: grid; place-items: center; flex: none;
}
.msg-input .plus svg { width: 18px; stroke: currentColor; fill: none; }
.msg-input .field {
  flex: 1; border: .5px solid var(--hair); border-radius: 17px;
  padding: 7px 14px; font-size: 16px; color: #b5b5ba;
}
.msg-input .field.typed { color: var(--ink); }
.msg-input .send {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: #d6d6db; color: #fff;
  display: grid; place-items: center;
  transition: background .18s;
}
.msg-input .send svg { width: 17px; }
.msg-input .send.armed { background: var(--ios-green); }

/* ══════════════════════════════  WAITING  ════════════════════════════════ */
#screen-wait { justify-content: center; align-items: center; }
.wait-box { text-align: center; animation: fade .5s ease both; }
.wait-lede {
  font-size: 15px; color: rgba(255, 255, 255, .55);
  letter-spacing: .4px; margin-bottom: 4px;
}
.wait-big { font-size: 40px; font-weight: 600; letter-spacing: -1px; }
.wait-dots { display: flex; gap: 7px; justify-content: center; margin-top: 26px; }
.wait-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  animation: bob 1.3s ease-in-out infinite;
}
.wait-dots i:nth-child(2) { animation-delay: .18s }
.wait-dots i:nth-child(3) { animation-delay: .36s }
@keyframes bob { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-5px) } }
@keyframes fade { from { opacity: 0 } }

/* ══════════════════════════════  INCOMING  ═══════════════════════════════ */
#screen-incoming { justify-content: flex-end; }
.call-actions {
  display: flex; justify-content: space-evenly; align-items: flex-start;
  padding: 0 26px 22px;
}
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.call-btn span { font-size: 14px; color: rgba(255, 255, 255, .92); }
.round {
  width: 76px; height: 76px; border-radius: 50%;
  border: 0; cursor: pointer; color: #fff;
  display: grid; place-items: center;
  transition: transform .16s cubic-bezier(.2,.9,.2,1), filter .2s;
}
.round svg { width: 32px; height: 32px; fill: currentColor; }
.round:active { transform: scale(.93); }
.decline { background: var(--ios-red); }
.decline svg { transform: rotate(133deg); }
.accept { background: var(--ios-green); animation: jiggle 1.6s ease-in-out infinite; }
.accept:hover, .decline:hover { filter: brightness(1.1); }
@keyframes jiggle {
  0%, 58%, 100% { transform: translateY(0) }
  66% { transform: translateY(-7px) }
  78% { transform: translateY(0) }
  86% { transform: translateY(-4px) }
}

/* ══════════════════════════════  IN CALL  ════════════════════════════════ */
.call-top { padding: 10px 26px 10px; text-align: center; }
.call-timer {
  font-size: 17px; font-weight: 400; letter-spacing: .4px;
  color: rgba(255, 255, 255, .68);
  font-variant-numeric: tabular-nums;
}
.wave { width: 100%; height: 54px; display: block; margin-top: 12px; }
.state {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-top: 4px;
  background: var(--ios-green); box-shadow: 0 0 10px currentColor;
  color: var(--ios-green); transition: background .25s, color .25s;
}
.state[data-s="thinking"] { background: #ff9f0a; color: #ff9f0a; }
.state[data-s="speaking"] { background: #64d2ff; color: #64d2ff; }
.state[data-s="ended"] { background: var(--ios-gray); color: var(--ios-gray); }

.transcript {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 10px;
  mask-image: linear-gradient(#0000 0, #000 20px);
  scrollbar-width: none;
}
.transcript::-webkit-scrollbar { display: none; }
.line { max-width: 82%; animation: pop .3s cubic-bezier(.2,.9,.25,1) both; margin-bottom: 4px; }
.line p {
  font-size: 16px; line-height: 1.34; letter-spacing: -.2px;
  padding: 9px 14px 10px; border-radius: 19px;
}
.line b { display: none; }                       /* iMessage shows no speaker labels */
.line.them { align-self: flex-start; }
.line.them p { background: rgba(255, 255, 255, .15); color: #fff; border-bottom-left-radius: 6px; }
.line.me { align-self: flex-end; }
.line.me p { background: var(--ios-blue); color: #fff; border-bottom-right-radius: 6px; }
.line.sys { align-self: center; max-width: 90%; }
.line.sys p {
  background: none; color: var(--ios-gray); font-size: 12.5px;
  text-align: center; padding: 4px 0;
}

.pad {
  display: flex; justify-content: space-evenly; align-items: flex-start;
  padding: 14px 20px 0;
}
.pad-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; }
.pad-btn span {
  font-size: 11.5px; color: rgba(255, 255, 255, .78);
  text-align: center; line-height: 1.25;
}
.glass {
  width: 66px; height: 66px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--glass); color: #fff;
  backdrop-filter: blur(14px);
  display: grid; place-items: center;
  transition: background .16s, transform .1s, color .16s;
}
.glass svg { width: 27px; height: 27px; fill: currentColor; }
.glass:hover { background: rgba(255, 255, 255, .27); }
.glass:active { transform: scale(.93); }
.glass.on { background: #fff; color: #000; }
.glass.held { background: var(--ios-green); }
.glass.end { background: var(--ios-red); }
.glass.end svg { transform: rotate(133deg); }
.glass.end:hover { background: #ff5346; }

/* ══════════════════════════════  ENDED  ══════════════════════════════════ */
#screen-ended, #screen-denied { justify-content: center; padding: 58px 20px 30px; }
#screen-denied { background: #f2f2f7; color: var(--ink); }
.card {
  background: rgba(255, 255, 255, .12);
  border: .5px solid var(--dark-hair);
  border-radius: 22px;
  padding: 22px 20px;
  backdrop-filter: blur(18px);
  animation: pop .4s cubic-bezier(.2,.9,.25,1) both;
}
.card-light { background: #fff; border: 0; box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
.card-head {
  font-size: 13px; font-weight: 600; letter-spacing: -.1px;
  color: var(--ios-gray);
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: .5px solid var(--dark-hair);
}
.card-light .card-head { border-bottom-color: var(--hair); }
.card-body { font-size: 15px; line-height: 1.45; color: #3c3c43; padding-top: 12px; }

.ledger { display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; align-items: baseline; }
.ledger dt {
  font-size: 12px; color: rgba(255, 255, 255, .5);
  text-transform: capitalize; letter-spacing: -.1px;
}
.ledger dd { font-size: 16px; letter-spacing: -.2px; }
.ledger dt.faint, .ledger dd.faint { color: rgba(255, 255, 255, .38); font-size: 12px; }

.pill {
  margin-top: 20px; width: 100%;
  background: var(--ios-blue); color: #fff;
  border: 0; border-radius: 15px; padding: 15px;
  font-family: var(--sf); font-size: 17px; font-weight: 500; letter-spacing: -.2px;
  cursor: pointer; transition: filter .16s, transform .1s;
}
.pill:hover { filter: brightness(1.08); }
.pill:active { transform: scale(.98); }
.pill-quiet { background: #e5e5ea; color: var(--ios-blue); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ───────────────────────────────────────────────────────────────────────────
   On a phone, drop the phone. The device frame, the Dynamic Island, our fake
   status bar and the home indicator are all props for showing this on a desktop
   — on real hardware the OS already draws its own, and ours would be a second,
   wrong one. So the screen goes full-bleed and the chrome comes off.
   `viewport-fit=cover` in the <head> is what makes env() insets resolve.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  body { padding: 0; background: #000; place-items: stretch; }

  .iphone {
    width: 100%; height: 100dvh; min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .island, .home-bar, .statusbar { display: none; }

  /* the 58px that used to be reserved for our status bar becomes the real inset */
  .screen { padding-top: env(safe-area-inset-top, 0px); }
  #screen-ended, #screen-denied {
    padding: env(safe-area-inset-top, 0px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  .screen:not(#screen-ended):not(#screen-denied) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* the message field and the call controls need to clear the home gesture area */
  .msg-input { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
  .pad { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .call-actions { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
}