/* =====================================================================
   WhatsApp phone. A modern phone running a WhatsApp chat in dark mode,
   built in HTML and CSS only, so it stays crisp at any size. Everything
   inside scales with the phone's width (container units), so set the
   width on .waph (or its parent) and nothing else.

   Markup (copy as is; repeat .waph__m per message):

   <div class="waph" role="img" aria-label="Say what the chat shows, in full.">
     <div class="waph__body">
       <div class="waph__screen">
         <div class="waph__status"><span class="waph__clock">22:31</span><span class="waph__island"></span><span class="waph__sys"><i class="waph__sig"></i><i class="waph__wifi"></i><i class="waph__bat"></i></span></div>
         <div class="waph__head">
           <i class="waph__i waph__i--back"></i>
           <span class="waph__av"><img src="/assets/logo-mark.svg" alt="" width="40" height="40"></span>
           <span class="waph__who"><b>Big Dog</b><small>online</small></span>
           <i class="waph__i waph__i--video"></i><i class="waph__i waph__i--call"></i>
         </div>
         <div class="waph__chat">
           <p class="waph__day">Today</p>
           <p class="waph__m waph__m--out waph__m--tail">Night shift daily, Rig 4.<span class="waph__meta">22:14</span></p>
           <p class="waph__m waph__m--in waph__m--tail">Got it.<span class="waph__meta">22:15</span></p>
         </div>
         <div class="waph__bar"><span class="waph__field"><i class="waph__i waph__i--emoji"></i><span>Message</span><i class="waph__i waph__i--clip"></i><i class="waph__i waph__i--cam"></i></span><span class="waph__mic"><i class="waph__i waph__i--mic"></i></span></div>
       </div>
     </div>
   </div>

   Messages:
   - waph__m--out (sent, green, blue double ticks) or waph__m--in (received).
   - waph__m--tail on the first message of each run from one side.
   - A photo: <div class="waph__m waph__m--out waph__m--img waph__m--tail">
       <img src="..." alt=""><span class="waph__cap">Caption<span class="waph__meta">22:14</span></span></div>
   - A voice note (24 bars in the wave; the --v list sets each bar's height):
       <div class="waph__m waph__m--out waph__voice waph__m--tail"><i class="waph__play"></i>
         <span class="waph__wave"><i style="--v:.3"></i>...</span>
         <span class="waph__dur">0:24</span><span class="waph__meta">22:16</span></div>
   - Typing: <p class="waph__m waph__m--in waph__typing"><i></i><i></i><i></i></p>
   - Unread ticks (grey): add waph__m--sent.
   The newest message sits at the bottom; older ones scroll off the top,
   like the real app. Pages may hide or animate .waph__m freely.
   ===================================================================== */

.waph {
  --waph-bg: #0B141A; --waph-bar: #1F2C34; --waph-in: #202C33; --waph-out: #005C4B;
  --waph-ink: #E9EDEF; --waph-mute: #8696A0; --waph-icon: #AEBAC1; --waph-tick: #53BDEB; --waph-green: #00A884;
  container-type: inline-size;
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 19.3;
  padding: 1.1%; border-radius: 15% / 7%;
  background: linear-gradient(140deg, #5B5B5F 0%, #2A2A2D 18%, #1A1A1C 48%, #3A3A3E 78%, #1B1B1D 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 2px 0 rgba(255, 255, 255, .04),
    0 60px 120px -40px rgba(0, 0, 0, .95),
    0 30px 60px -30px rgba(0, 0, 0, .8);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left; line-height: 1.3; color: var(--waph-ink);
}
/* Side buttons: action and volume on the left, power on the right. */
.waph::before, .waph::after {
  content: ""; position: absolute; width: 1.1%; border-radius: 2px;
  background: linear-gradient(90deg, #1A1A1C, #4A4A4E);
}
.waph::before {
  left: -.9%; top: 16%; height: 21%;
  background: linear-gradient(#36363A 0 15%, transparent 15% 30%, #36363A 30% 62%, transparent 62% 68%, #36363A 68% 100%);
}
.waph::after { right: -.9%; top: 27%; height: 11%; background: linear-gradient(270deg, #1A1A1C, #4A4A4E); }

.waph__body {
  height: 100%; padding: 2.6%; border-radius: 13.6% / 6.3%; background: #050505;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9);
}
.waph__screen {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 11.4% / 5.3%;
  font-size: 4.15cqi;
  background-color: var(--waph-bg);
  /* WhatsApp's doodle wallpaper, drawn as a faint tile. */
  --waph-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22c0-5 6-7 9-3 3-4 9-2 9 3 0 6-9 11-9 11s-9-5-9-11z'/%3E%3Ccircle cx='62' cy='18' r='8'/%3E%3Cpath d='M58 16h.1M66 16h.1M58.5 21c2 2 5 2 7 0'/%3E%3Cpath d='M98 10l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Crect x='128' y='10' width='18' height='26' rx='3'/%3E%3Cpath d='M134 32h6'/%3E%3Cpath d='M12 64q8-10 16 0t16 0'/%3E%3Cpath d='M60 52v18M60 52l10-3v18'/%3E%3Ccircle cx='57' cy='70' r='3'/%3E%3Ccircle cx='67' cy='67' r='3'/%3E%3Cpath d='M92 70c-6 0-8-8-2-10 0-7 10-8 12-2 6-2 10 4 6 8-1 3-4 4-6 4z'/%3E%3Cpath d='M128 56h20v14h-20zM132 56l3-4h6l3 4'/%3E%3Ccircle cx='138' cy='63' r='4'/%3E%3Cpath d='M20 100l8 14H12z'/%3E%3Cpath d='M52 98h16v16H52zM52 106h16M60 98v16'/%3E%3Cpath d='M96 96c6 0 10 4 10 10s-10 14-10 14-10-8-10-14 4-10 10-10z'/%3E%3Ccircle cx='96' cy='106' r='3'/%3E%3Cpath d='M128 112c4-12 16-12 20 0M131 112h14'/%3E%3Cpath d='M138 100v-4'/%3E%3Cpath d='M16 140h18M25 131v18'/%3E%3Cpath d='M54 136a8 8 0 1 1 16 0v10H54z'/%3E%3Cpath d='M88 132l16 16M104 132l-16 16'/%3E%3Cpath d='M126 146c0-10 6-16 14-16 0 8-6 16-14 16zM126 146l8-8'/%3E%3C/svg%3E");
  background-image: var(--waph-doodle);
  background-size: 8.5em 8.5em;
}

/* Status bar, with the island floating in the middle. */
.waph__status {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 3em; padding: .55em 1.5em 0 1.95em; flex: none;
  background: var(--waph-bar); font-size: 1em;
}
.waph__clock { font-weight: 600; font-size: 1.02em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.waph__island {
  position: absolute; left: 50%; top: .62em; width: 7.8em; height: 2.2em; translate: -50% 0;
  border-radius: 99em; background: #000;
}
.waph__sys { display: flex; align-items: center; gap: .32em; }
.waph__sys i { display: block; background: var(--waph-ink); }
.waph__sig {
  width: 1.12em; height: .72em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect x='0' y='8' width='3.2' height='4' rx='.8'/%3E%3Crect x='4.9' y='5.5' width='3.2' height='6.5' rx='.8'/%3E%3Crect x='9.8' y='3' width='3.2' height='9' rx='.8'/%3E%3Crect x='14.7' y='0' width='3.2' height='12' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect x='0' y='8' width='3.2' height='4' rx='.8'/%3E%3Crect x='4.9' y='5.5' width='3.2' height='6.5' rx='.8'/%3E%3Crect x='9.8' y='3' width='3.2' height='9' rx='.8'/%3E%3Crect x='14.7' y='0' width='3.2' height='12' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.waph__wifi {
  width: 1.02em; height: .74em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 2.4c2.4 0 4.6.9 6.3 2.5l1.2-1.3A10.8 10.8 0 0 0 8 .6 10.8 10.8 0 0 0 .5 3.6l1.2 1.3A9 9 0 0 1 8 2.4zm0 3.6c1.4 0 2.7.5 3.7 1.4l1.2-1.3A7.2 7.2 0 0 0 8 4.2c-1.9 0-3.6.7-4.9 1.9l1.2 1.3c1-.9 2.3-1.4 3.7-1.4zm0 3.6c-.5 0-1 .2-1.3.5L8 11.6l1.3-1.5c-.3-.3-.8-.5-1.3-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 2.4c2.4 0 4.6.9 6.3 2.5l1.2-1.3A10.8 10.8 0 0 0 8 .6 10.8 10.8 0 0 0 .5 3.6l1.2 1.3A9 9 0 0 1 8 2.4zm0 3.6c1.4 0 2.7.5 3.7 1.4l1.2-1.3A7.2 7.2 0 0 0 8 4.2c-1.9 0-3.6.7-4.9 1.9l1.2 1.3c1-.9 2.3-1.4 3.7-1.4zm0 3.6c-.5 0-1 .2-1.3.5L8 11.6l1.3-1.5c-.3-.3-.8-.5-1.3-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.waph__bat {
  width: 1.65em; height: .8em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 13'%3E%3Crect x='.6' y='.6' width='22.8' height='11.8' rx='3.4' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='2.4' y='2.4' width='16.5' height='8.2' rx='1.8'/%3E%3Cpath d='M25 4.4v4.2c.9-.3 1.5-1.2 1.5-2.1s-.6-1.8-1.5-2.1z' fill-opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 13'%3E%3Crect x='.6' y='.6' width='22.8' height='11.8' rx='3.4' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='2.4' y='2.4' width='16.5' height='8.2' rx='1.8'/%3E%3Cpath d='M25 4.4v4.2c.9-.3 1.5-1.2 1.5-2.1s-.6-1.8-1.5-2.1z' fill-opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Chat header. */
.waph__head {
  display: flex; align-items: center; gap: .55em; flex: none;
  padding: .45em .9em .6em .45em; background: var(--waph-bar);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.waph__av {
  display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%;
  background: #141414; box-shadow: inset 0 0 0 1px rgba(232, 168, 68, .35); overflow: hidden;
}
.waph__av img { display: block; width: 66%; height: 66%; margin-top: -4%; }
.waph__who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.waph__who b { font-weight: 600; font-size: 1.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waph__who small { font-size: .8em; color: var(--waph-mute); }
.waph__head .waph__i--video { margin-right: .5em; }

/* Icons: one class each, drawn as masks so they take the color in place. */
.waph__i {
  display: block; flex: none; width: 1.45em; height: 1.45em; background: var(--waph-icon);
  -webkit-mask: var(--waph-svg) center / contain no-repeat; mask: var(--waph-svg) center / contain no-repeat;
}
.waph__i--back { width: 1.3em; --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z'/%3E%3C/svg%3E"); }
.waph__i--video { --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='13.5' height='12' rx='2.6'/%3E%3Cpath d='M16.8 10.4l4.3-3c.4-.3.9 0 .9.5v8.2c0 .5-.5.8-.9.5l-4.3-3z'/%3E%3C/svg%3E"); }
.waph__i--call { width: 1.3em; --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.waph__i--emoji { --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18.2a8.2 8.2 0 1 1 0-16.4 8.2 8.2 0 0 1 0 16.4z'/%3E%3Ccircle cx='8.8' cy='9.8' r='1.4'/%3E%3Ccircle cx='15.2' cy='9.8' r='1.4'/%3E%3Cpath d='M7.4 13.4h9.2c-.6 2.4-2.4 4-4.6 4s-4-1.6-4.6-4z'/%3E%3C/svg%3E"); }
.waph__i--clip { rotate: -45deg; --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6z'/%3E%3C/svg%3E"); }
.waph__i--cam { --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3Cpath d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E"); }
.waph__i--mic { --waph-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14.5c1.9 0 3.3-1.5 3.3-3.3V5.3a3.3 3.3 0 0 0-6.6 0v5.9c0 1.8 1.4 3.3 3.3 3.3zm5.6-3.3c0 3.2-2.6 5.5-5.6 5.5s-5.6-2.3-5.6-5.5H4.6c0 3.7 2.9 6.7 6.4 7.2V22h2v-3.6c3.5-.5 6.4-3.5 6.4-7.2z'/%3E%3C/svg%3E"); }

/* The conversation: newest at the bottom, older ones leave off the top. */
.waph__chat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .2em;
  flex: 1; min-height: 0; overflow: hidden; padding: .7em .85em .55em;
}
.waph__day {
  align-self: center; margin: 0 0 .55em; padding: .32em .75em; border-radius: .55em;
  background: #182229; color: var(--waph-mute); font-size: .76em; font-weight: 500;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .4);
}
.waph__m {
  position: relative; flex: none; max-width: 80%; margin: 0; padding: .38em .55em .42em .6em;
  border-radius: .58em; font-size: 1em; line-height: 1.32; color: var(--waph-ink);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .4);
  overflow-wrap: anywhere;
}
.waph__m--in { align-self: flex-start; background: var(--waph-in); }
.waph__m--out { align-self: flex-end; background: var(--waph-out); }
.waph__m--tail { margin-top: .45em; }
.waph__m--tail::before {
  content: ""; position: absolute; top: 0; width: .55em; height: .8em; background: inherit;
}
.waph__m--in.waph__m--tail { border-top-left-radius: 0; }
.waph__m--in.waph__m--tail::before { left: -.5em; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 28%, 0 8%); border-top-left-radius: .15em; }
.waph__m--out.waph__m--tail { border-top-right-radius: 0; }
.waph__m--out.waph__m--tail::before { right: -.5em; clip-path: polygon(0 0, 100% 0, 100% 8%, 60% 28%, 0 100%); border-top-right-radius: .15em; }

/* Time and ticks, tucked into the last line the way WhatsApp does it. */
.waph__meta {
  float: right; position: relative; top: .5em; display: inline-flex; align-items: center; gap: .25em;
  margin: 0 -.15em 0 .75em; font-size: .68em; line-height: 1; color: rgba(233, 237, 239, .62);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.waph__m--out .waph__meta::after {
  content: ""; display: block; width: 1.5em; height: 1.05em; background: var(--waph-tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M11.1.7 10.6.3a.4.4 0 0 0-.5.1L4.7 7.2 2.4 5.1a.4.4 0 0 0-.5 0l-.4.5a.4.4 0 0 0 0 .5l2.9 2.7c.2.2.4.1.5 0L11.2 1.2a.4.4 0 0 0-.1-.5zm4 0-.5-.4a.4.4 0 0 0-.5.1L8.7 7.2l-.6-.6-1 1.2 1.4 1.3c.2.2.4.1.5 0l6.3-7.6a.4.4 0 0 0-.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M11.1.7 10.6.3a.4.4 0 0 0-.5.1L4.7 7.2 2.4 5.1a.4.4 0 0 0-.5 0l-.4.5a.4.4 0 0 0 0 .5l2.9 2.7c.2.2.4.1.5 0L11.2 1.2a.4.4 0 0 0-.1-.5zm4 0-.5-.4a.4.4 0 0 0-.5.1L8.7 7.2l-.6-.6-1 1.2 1.4 1.3c.2.2.4.1.5 0l6.3-7.6a.4.4 0 0 0-.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.waph__m--sent .waph__meta::after { background: rgba(233, 237, 239, .62); }

/* A photo message, with its caption underneath. */
.waph__m--img { padding: .2em; width: 74%; }
.waph__m--img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .45em; }
.waph__cap { display: block; padding: .32em .35em .22em .4em; }
.waph__cap::after { content: ""; display: table; clear: both; }

/* A voice note: play, waveform, length. */
.waph__voice { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6em; width: 72%; padding: .5em .6em .35em .5em; }
.waph__play {
  display: block; width: 1.5em; height: 1.5em; background: var(--waph-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15c0 .8.9 1.3 1.6.8l11.5-7.5c.6-.4.6-1.2 0-1.6L8.6 3.7C7.9 3.2 7 3.7 7 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15c0 .8.9 1.3 1.6.8l11.5-7.5c.6-.4.6-1.2 0-1.6L8.6 3.7C7.9 3.2 7 3.7 7 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.waph__wave { position: relative; display: flex; align-items: center; gap: .14em; height: 1.7em; }
.waph__wave i { flex: 1; min-width: 1px; height: calc(var(--v, .4) * 100%); border-radius: 1em; background: rgba(233, 237, 239, .45); }
.waph__wave i:first-child { background: var(--waph-tick); }
.waph__wave::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .75em; height: .75em; translate: -30% -50%;
  border-radius: 50%; background: var(--waph-tick);
}
.waph__dur { grid-column: 2; font-size: .68em; color: rgba(233, 237, 239, .62); font-variant-numeric: tabular-nums; }
/* Brighter on the green out bubble so the time and duration clear 4.5:1 there. */
.waph__m--out :is(.waph__meta, .waph__dur) { color: rgba(233, 237, 239, .8); }
.waph__voice .waph__meta { position: absolute; right: .55em; bottom: .45em; top: auto; float: none; margin: 0; }

/* Typing dots. */
.waph__typing { display: flex; gap: .25em; padding: .62em .75em; }
.waph__typing i { width: .42em; height: .42em; border-radius: 50%; background: var(--waph-mute); animation: waph-dot 1.2s ease-in-out infinite; }
.waph__typing i:nth-child(2) { animation-delay: .15s; }
.waph__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes waph-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.18em); } }

/* Message box and the green mic, floating over the wallpaper. */
.waph__bar { display: flex; align-items: center; gap: .4em; flex: none; padding: .3em .5em 2.2em; }
.waph__field {
  display: flex; align-items: center; gap: .7em; flex: 1; min-width: 0;
  height: 2.75em; padding: 0 .85em; border-radius: 99em; background: var(--waph-bar);
}
.waph__field span { flex: 1; color: var(--waph-mute); font-size: 1.04em; }
.waph__field .waph__i { width: 1.4em; height: 1.4em; background: var(--waph-mute); }
.waph__mic {
  display: grid; place-items: center; flex: none; width: 2.75em; height: 2.75em; border-radius: 50%;
  background: var(--waph-green);
}
.waph__mic .waph__i { width: 1.35em; height: 1.35em; background: #111B21; }
/* The home indicator. */
.waph__screen::after {
  content: ""; position: absolute; left: 50%; bottom: .6em; width: 36%; height: .3em; translate: -50% 0;
  border-radius: 99em; background: rgba(233, 237, 239, .55);
}

@media (prefers-reduced-motion: reduce) {
  .waph__typing i { animation: none; opacity: .7; }
}