/* iPhone + Messages mockup, drawn at the phone's real size (393 x 852 points) and scaled down.
   Matches iOS 26/27 Messages: glass back and FaceTime buttons, avatar with a name capsule,
   blue bubbles that shade from #3FB0FC at the top of the screen to #0289FF at the bottom,
   gray #E9E9EB incoming bubbles, "Read" receipts, and the + / iMessage field at the bottom. */

.ipw { position: relative; overflow: hidden; margin: 0 auto; }
.ipw.fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ipw-fade, #FFFFFF));
  pointer-events: none;
}
.ip {
  position: absolute; left: 0; top: 0;
  width: 417px; height: 876px;
  transform-origin: 0 0;
  border-radius: 68px;
  background: #0B0B0C;
  box-shadow:
    0 0 0 2px #9EA2A8,
    0 0 0 4px #D6D8DC,
    0 0 0 5px #A9ADB3,
    0 30px 60px -20px rgba(30, 42, 71, 0.35);
}
.ip-btn-side { position: absolute; width: 4px; border-radius: 2px; background: #B7BAC0; }
.ip-screen {
  position: absolute; left: 12px; top: 12px; width: 393px; height: 852px;
  border-radius: 56px; overflow: hidden;
  background: #FFFFFF; color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px; line-height: 22px; letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.ip-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 18px; background: #000; z-index: 6; }
.ip-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 5; }
.ip-clock { position: absolute; left: 0; width: 140px; top: 17px; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; line-height: 22px; }
.ip-icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }

/* Header: floating glass controls over the conversation. */
.ip-head { position: absolute; left: 0; right: 0; top: 54px; height: 104px; z-index: 4;
  background: linear-gradient(to bottom, rgba(255,255,255,0.97) 74%, rgba(255,255,255,0)); }
.ip-glass {
  position: absolute; top: 8px; width: 44px; height: 44px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 4px 14px rgba(0, 0, 0, 0.10), inset 0 0 0 0.5px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.ip-back { left: 16px; }
.ip-video { right: 16px; }
.ip-avatar { position: absolute; left: 50%; top: 4px; width: 56px; height: 56px; margin-left: -28px; border-radius: 28px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.ip-avatar.od { background: #F4C95D; }
.ip-avatar.unknown { background: linear-gradient(#A6ACB8, #868C99); }
.ip-name {
  position: absolute; left: 50%; top: 54px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
  padding: 5px 11px 5px 13px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), inset 0 0 0 0.5px rgba(0,0,0,0.06);
  font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px;
}

/* Conversation. */
.ip-thread { position: absolute; left: 0; right: 0; top: 158px; bottom: 96px; padding: 0 16px; display: flex; flex-direction: column; overflow: hidden; }
.ip-thread.end { justify-content: flex-end; top: 104px; } /* a long thread scrolls under the header */
.ip-label { align-self: center; text-align: center; color: #8E8E93; font-size: 12px; line-height: 16px; margin: 4px 0 2px; }
.ip-stamp { align-self: center; text-align: center; color: #8E8E93; font-size: 12px; line-height: 16px; margin: 12px 0 6px; }
.ip-stamp b { font-weight: 600; }
.ip-b {
  position: relative; max-width: 283px; box-sizing: border-box;
  padding: 7px 13px 8px; border-radius: 19px; margin-top: 10px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ip-b.g { margin-top: 2px; }
.ip-them { align-self: flex-start; background: #E9E9EB; color: #000; --tail: #E9E9EB; }
.ip-me { align-self: flex-end; background: #0289FF; color: #FFFFFF; --tail: #0289FF; }
.ip-b.t::before, .ip-b.t::after { content: ""; position: absolute; bottom: 0; height: 18px; }
.ip-them.t::before { left: -7px; width: 20px; background: var(--tail); border-bottom-right-radius: 15px; }
.ip-them.t::after { left: -10px; width: 10px; background: var(--ip-bg, #FFFFFF); border-bottom-right-radius: 10px; }
.ip-me.t::before { right: -7px; width: 20px; background: var(--tail); border-bottom-left-radius: 15px; }
.ip-me.t::after { right: -10px; width: 10px; background: var(--ip-bg, #FFFFFF); border-bottom-left-radius: 10px; }
.ip-receipt { align-self: flex-end; color: #8E8E93; font-size: 12px; line-height: 16px; margin: 3px 4px 0 0; }
.ip-receipt b { font-weight: 600; }

/* Tapback on a bubble (for example, a heart on her message). */
.ip-tap { position: absolute; top: -20px; width: 34px; height: 30px; border-radius: 16px; background: #E9E9EB;
  box-shadow: 0 0 0 2px var(--ip-bg, #FFFFFF); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.ip-me > .ip-tap { left: -22px; }
.ip-them > .ip-tap { right: -22px; }
.ip-tap::after { content: ""; position: absolute; bottom: -3px; width: 8px; height: 8px; border-radius: 4px; background: #E9E9EB; box-shadow: 0 0 0 2px var(--ip-bg, #FFFFFF); }
.ip-me > .ip-tap::after { right: 2px; }
.ip-them > .ip-tap::after { left: 2px; }

/* Typing indicator. */
.ip-typing { align-self: flex-start; position: relative; margin-top: 10px; width: 62px; height: 38px; border-radius: 19px; background: #E9E9EB;
  display: flex; align-items: center; justify-content: center; gap: 5px; }
.ip-typing i { width: 8px; height: 8px; border-radius: 4px; background: #8E8E93; display: block; }
.ip-typing i:nth-child(2) { opacity: 0.7; }
.ip-typing i:nth-child(3) { opacity: 0.45; }
.ip-typing::before { content: ""; position: absolute; left: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 7px; background: #E9E9EB; }
.ip-typing::after { content: ""; position: absolute; left: -7px; bottom: -7px; width: 6px; height: 6px; border-radius: 3px; background: #E9E9EB; }

/* Shared contact card. */
.ip-card { align-self: flex-start; margin-top: 10px; width: 250px; box-sizing: border-box; border-radius: 18px; background: #E9E9EB;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ip-card .ip-cav { width: 40px; height: 40px; border-radius: 20px; background: #F4C95D; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ip-card .ip-cnm { flex: 1 1 auto; font-weight: 600; }

/* Footer under an unknown sender's messages. */
.ip-junk { align-self: center; text-align: center; color: #8E8E93; font-size: 12px; line-height: 16px; margin-top: 14px; }
.ip-junk span { display: block; color: #0088FF; font-weight: 600; margin-top: 2px; }

/* Compose bar. */
.ip-compose { position: absolute; left: 0; right: 0; bottom: 34px; height: 52px; z-index: 4; }
.ip-plus { position: absolute; left: 16px; top: 8px; width: 38px; height: 38px; border-radius: 19px; background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08), inset 0 0 0 0.5px rgba(0,0,0,0.10); display: flex; align-items: center; justify-content: center; }
.ip-field { position: absolute; left: 62px; right: 16px; top: 8px; height: 38px; border-radius: 19px; background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 0 0 0.5px rgba(0,0,0,0.14); display: flex; align-items: center; padding: 0 12px 0 15px; box-sizing: border-box; }
.ip-field span { flex: 1 1 auto; color: #B0B0B6; font-size: 17px; }
.ip-home { position: absolute; left: 50%; bottom: 8px; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: #000; z-index: 5; }

/* Dark mode screen. */
.ip-screen.dark { background: #000000; color: #FFFFFF; --ip-bg: #000000; }
.ip-screen.dark .ip-head { background: linear-gradient(to bottom, rgba(0,0,0,0.97) 74%, rgba(0,0,0,0)); }
.ip-screen.dark .ip-glass, .ip-screen.dark .ip-name, .ip-screen.dark .ip-plus, .ip-screen.dark .ip-field {
  background: rgba(44, 44, 46, 0.86); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.10); }
.ip-screen.dark .ip-them, .ip-screen.dark .ip-typing, .ip-screen.dark .ip-typing::before, .ip-screen.dark .ip-typing::after,
.ip-screen.dark .ip-card, .ip-screen.dark .ip-tap, .ip-screen.dark .ip-tap::after { background: #262628; color: #FFFFFF; --tail: #262628; }
.ip-screen.dark .ip-field span { color: #6C6C70; }
.ip-screen.dark .ip-home { background: #FFFFFF; }