/* Phone-Use: Q.'s own Galaxy Fold, opened flat. A graphite frame with thin
   bezels, a crease down the middle and a dusk wallpaper. Q.'s logo is the
   finger: big, on top of the glass, opening WhatsApp and texting Emma back. */
/* The page places the phone's middle at 380, high in the stage; it is moved
   down so it sits in the middle of the space between the top bar and the
   sentence. */
/* The frame is drawn by ::before so that, while the phone is folded (.folded),
   its left half can be hidden without hiding the half that swings round the hinge. */
.droid {
  position: relative;
  isolation: isolate;
  top: 76px;
  width: 500px;
  height: 580px;
  border-radius: 28px;
}
.droid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #2A282C, #3B393E 48%, #1B1A1D 50%, #3B393E 52%, #2A282C);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    inset 0 0 0 3px rgba(0, 0, 0, .4),
    0 2px 4px rgba(20, 18, 17, .12),
    0 30px 60px rgba(20, 18, 17, .22);
}
.droid-screen {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(90% 55% at 10% 105%, rgba(255, 179, 94, .9), transparent 60%),
    radial-gradient(80% 55% at 95% 95%, rgba(244, 115, 138, .85), transparent 62%),
    radial-gradient(100% 70% at 60% 30%, rgba(123, 100, 232, .75), transparent 70%),
    linear-gradient(#1E1B3A, #3A2E66 55%, #6B4C8C);
  color: #FFFFFF;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
}
/* the fold: a soft valley of light and shade down the middle of the glass */
.droid-crease {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 14px;
  margin-left: -7px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 30%, rgba(0, 0, 0, .14) 50%, rgba(255, 255, 255, .06) 70%, transparent);
}
.droid-camera {
  position: absolute;
  z-index: 2;
  left: 76%;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2C3140, #050506 70%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55);
}
.droid-status {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 20px;
  top: 8px;
  display: flex;
  align-items: center;
  height: 14px;
  font-size: 11px;
  font-weight: 650;
  color: #FFFFFF;
  transition: color .3s;
}
.on-light .droid-status { color: #141211; }
.on-light .droid-bar { background: rgba(20, 18, 17, .7); }
.droid-status .glyphs { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.droid-status svg { display: block; }
.droid-in-use {
  width: 5px;
  height: 5px;
  margin-right: 2px;
  border-radius: 50%;
  background: #3DDC84;
  box-shadow: 0 0 6px rgba(61, 220, 132, .8);
}
.droid-glance { position: absolute; left: 28px; top: 54px; }
.droid-glance .day { font-size: 26px; line-height: 32px; font-weight: 550; }
.droid-glance .using {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
  opacity: .85;
}
.droid-glance .using img { width: 17px; height: 17px; border-radius: 5px; }
.droid-apps {
  position: absolute;
  left: 28px;
  top: 300px;
  display: flex;
  gap: 30px;
}
.droid-app {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.droid-app .disc {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
}
/* the apps are the real App Store icons, whole and sharp, in One UI's rounded
   square rather than cut into a circle */
.droid-apps .droid-app .disc {
  border-radius: 30%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.droid-app .disc img { width: 100%; height: 100%; display: block; }
.droid-app .name {
  font-size: 11px;
  line-height: 14px;
  font-weight: 550;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.droid-row {
  position: absolute;
  display: flex;
  justify-content: space-between;
}
.droid-dock { bottom: 34px; left: 50%; width: 260px; margin-left: -130px; }
.droid-dock .droid-app { width: 46px; }
.droid-dock .disc {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .9);
  color: #3B3936;
}
.droid-dock svg { width: 22px; height: 22px; }

/* WhatsApp on the Fold: chats on the left half, the open chat on the right. */
.droid-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
}
.droid-chat { display: flex; flex-direction: column; background: #0B141A; }
.chat-panes { flex: 1; min-height: 0; display: flex; }
.chat-index {
  width: 50%;
  padding: 32px 0 0;
  background: #111B21;
  border-right: 1px solid #222D34;
}
.index-title { padding: 0 18px 10px; font-size: 20px; line-height: 24px; font-weight: 650; color: #E9EDEF; }
.index-search {
  margin: 0 14px 8px;
  padding: 8px 14px;
  border-radius: 18px;
  background: #202C33;
  font-size: 11px;
  font-weight: 550;
  color: #8696A0;
}
.index-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
}
.index-row.picked { background: #2A3942; }
.chat-index .avatar,
.chat-head .avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  color: #FFFFFF;
}
.index-text { flex: 1; min-width: 0; }
.index-text b { display: block; font-size: 12.5px; line-height: 16px; font-weight: 650; color: #E9EDEF; }
.index-text span { display: block; font-size: 11px; line-height: 15px; font-weight: 550; color: #8696A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-row .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #25D366;
  color: #0B141A;
  font-size: 10px;
  line-height: 18px;
  font-weight: 650;
  text-align: center;
}
.chat-pane { position: relative; width: 50%; }
.chat-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 550;
  color: #8696A0;
}
.chat-empty img { width: 44px; height: 44px; border-radius: 12px; opacity: .5; filter: grayscale(1); }
.chat-open { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 30px 14px 9px;
  background: #1F2C34;
}
.chat-head .who b { display: block; font-size: 13px; line-height: 16px; font-weight: 650; color: #E9EDEF; }
.chat-head .who span { display: block; font-size: 10.5px; line-height: 13px; font-weight: 550; color: #8696A0; }
.chat-body { position: relative; flex: 1; overflow: hidden; }
.chat-list { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 11px 6px; }
.chat-list .row { display: flex; padding-top: 6px; }
.chat-list .out { justify-content: flex-end; }
.chat-list .bubble {
  max-width: 80%;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
  color: #E9EDEF;
  background: #202C33;
}
.chat-list .in .bubble { border-top-left-radius: 3px; }
.chat-list .out .bubble { border-top-right-radius: 3px; background: #005C4B; }
.chat-list .bubble.photo { padding: 3px; }
.chat-list .bubble.photo img { display: block; width: 150px; height: 150px; border-radius: 9px; object-fit: cover; }
.chat-list .day { justify-content: center; padding-top: 10px; }
.chat-list .day span {
  padding: 3px 9px;
  border-radius: 7px;
  background: #182229;
  color: #8696A0;
  font-size: 10px;
  font-weight: 550;
}
.chat-compose { flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 6px 9px 22px; }
.chat-compose .field {
  flex: 1;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 17px;
  background: #2A3942;
  font-size: 12px;
  line-height: 15px;
  font-weight: 550;
  color: #E9EDEF;
}
.chat-compose .hint { color: #8696A0; }
.chat-compose .caret { width: 1.5px; height: 14px; margin: 0 1px; background: #00A884; }
.chat-compose .send {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00A884;
}
.chat-compose .send svg { width: 15px; height: 15px; }
.chat-keys { height: 0; flex-shrink: 0; overflow: hidden; background: #1B2328; }
/* WhatsApp's emoji, GIF and sticker panel, on its memes tab */
.chat-compose .sticker-button { margin-left: auto; display: flex; color: #8696A0; }
.chat-compose .sticker-button svg { width: 18px; height: 18px; }
.meme-tray { height: 0; flex-shrink: 0; overflow: hidden; background: #1B2328; }
.tray-inner { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 26px; }
.tray-tabs { display: flex; justify-content: center; gap: 6px; }
.tray-tabs span { padding: 3px 10px; border-radius: 10px; color: #8696A0; font-size: 10px; font-weight: 650; }
.tray-tabs .on { background: #2A3942; color: #E9EDEF; }
.tray-grid { display: flex; justify-content: center; gap: 8px; }
.tray-grid img { width: 104px; height: 104px; border-radius: 9px; object-fit: cover; transition: transform .2s ease, box-shadow .2s ease; }
.tray-grid img.chosen { transform: scale(.94); box-shadow: 0 0 0 3px #00A884; }
.keys-inner { display: flex; flex-direction: column; gap: 7px; padding: 10px 8px 26px; }
.key-row { display: flex; justify-content: center; gap: 5px; }
.key-row span {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3A4449;
  font-size: 14px;
  font-weight: 550;
  color: #E9EDEF;
}
.key-row .space { width: 200px; }

.droid-notice {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 30px;
  width: 300px;
  margin-left: -150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 22px;
  background: rgba(250, 248, 252, .94);
  color: #141211;
  box-shadow: 0 8px 20px rgba(10, 6, 30, .3);
  opacity: 0;
}
.droid-notice img { width: 30px; height: 30px; border-radius: 9px; }
.droid-notice b { display: block; font-size: 10.5px; line-height: 13px; font-weight: 650; color: #565350; }
.droid-notice span { display: block; font-size: 12.5px; line-height: 16px; font-weight: 550; }
.droid-bar {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 9px;
  width: 100px;
  height: 4px;
  margin-left: -50px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
}

/* Q.'s logo is the finger, big and on top of the phone. Its centre is the
   point that touches; --lift (1 hovering, 0 pressed) sets how far its shadow falls. */
.droid-touch {
  position: absolute;
  z-index: 5;
  width: 44px;
  height: 44px;
  left: 0;
  top: 0;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6);
  opacity: 0;
  pointer-events: none;
}
.droid-q {
  --lift: 1;
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  pointer-events: none;
  filter:
    drop-shadow(0 calc(4px + 14px * var(--lift)) calc(6px + 14px * var(--lift)) rgba(10, 6, 30, calc(.22 + .12 * var(--lift))))
    drop-shadow(0 1px 2px rgba(10, 6, 30, .3));
}
.droid-q img { width: 100%; height: 100%; display: block; border-radius: 24px; }
/* The twin Q. grows out from under the first one. */
.droid-q.twin { z-index: 5; opacity: 0; }

/* Instagram and Messenger share the Fold, one app on each half, each showing
   its whole inbox the way it looks on a phone. */
.droid-ig, .droid-ms { display: flex; flex-direction: column; background: #FFFFFF; color: #141211; }
.droid-ig { right: calc(50% + 2px); }
.droid-ms { left: calc(50% + 2px); }
.dm-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 30px 14px 8px;
  background: #FFFFFF;
}
.dm-top b { margin-right: auto; font-size: 17px; font-weight: 650; }
.droid-ms .dm-top b { font-size: 20px; font-weight: 700; }
.dm-line { width: 20px; height: 20px; fill: none; stroke: #141211; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dm-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 12px 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #EFEFEF;
  color: #737373;
  font-size: 12px;
}
.droid-ms .dm-search { border-radius: 999px; background: #F0F2F5; color: #65676B; }
.dm-search svg { width: 14px; height: 14px; fill: currentColor; }
.dm-heading { display: flex; align-items: baseline; padding: 4px 14px 6px; }
.dm-heading b { margin-right: auto; font-size: 13px; font-weight: 650; }
.dm-heading span { font-size: 11px; color: #737373; }
.ms-active { display: flex; gap: 10px; padding: 0 12px 8px; overflow: hidden; }
.ms-active div { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; color: #65676B; }
.ms-active span { position: relative; width: 44px; height: 44px; }
.ms-active img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.ms-active i { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #31A24C; border: 2px solid #FFFFFF; }
.dm-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; }
.dm-row img { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.dm-row div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-row b { font-size: 12.5px; font-weight: 550; }
.dm-row span { font-size: 11px; color: #737373; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row.unread b, .dm-row.unread span { font-weight: 650; color: #141211; }
.dm-row i { flex-shrink: 0; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; }
.droid-ig .dm-row.unread i { background: #0095F6; }
.droid-ms .dm-row.unread i { background: #0866FF; }

/* TikTok: one clip fills the screen, and a flick up brings the next. */
.droid-tt { background: #000000; color: #FFFFFF; }
.tt-stack { position: absolute; inset: 0; }
.tt-video { position: relative; height: 100%; overflow: hidden; }
.tt-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.tt-text {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 300px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.tt-text b { font-size: 14px; font-weight: 650; }
.tt-text span { font-size: 13px; line-height: 17px; font-weight: 550; }
.tt-text small { font-size: 11px; font-weight: 550; opacity: .85; }
.tt-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 650;
  color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.tt-tabs .on { color: #FFFFFF; box-shadow: 0 8px 0 -6px #FFFFFF; padding-bottom: 6px; }
.tt-side {
  position: absolute;
  right: 14px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tt-face { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #FFFFFF; overflow: hidden; }
.tt-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-act { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 650; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.tt-act svg { width: 30px; height: 30px; fill: #FFFFFF; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.tt-heart.liked { fill: #FE2C55; }
.tt-progress { position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: rgba(255, 255, 255, .25); }
.tt-progress div { height: 100%; width: 0; background: #FFFFFF; }

/* Above Q.'s finger while it reads. */
.droid-reading {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  max-width: 224px;
  padding: 11px 17px;
  border-radius: 22px;
  background: rgba(20, 18, 17, .9);
  color: #FFFFFF;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform-origin: 50% 100%;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(10, 6, 30, .25);
}

/* The left half of the Fold, which swings shut over the right half and open again
   round the hinge. Its inner face shows the home screen; its outer face is the
   cover screen. */
.droid-flap {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.flap-front, .flap-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.flap-front { border-radius: 28px 0 0 28px; }
.flap-phone { position: absolute; left: 0; top: 0; }
/* folded, only the right half of the frame and screen shows; the left half is the flap */
.droid.folded::before, .droid.folded > .droid-screen { clip-path: inset(-60px -60px -60px 50%); }
.flap-back {
  transform: rotateY(180deg);
  border-radius: 12px 28px 28px 12px;
  background: linear-gradient(90deg, #1B1A1D, #2A282C 8%, #3B393E);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    0 30px 60px rgba(20, 18, 17, .22);
}
.cover {
  position: absolute;
  inset: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
  border-radius: 8px 20px 20px 8px;
  background: radial-gradient(120% 60% at 50% 100%, rgba(123, 100, 232, .55), transparent 70%), #0E0C18;
  color: #FFFFFF;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
}
.cover .time { font-size: 54px; line-height: 60px; font-weight: 500; letter-spacing: -.02em; }
.cover .day { margin-top: 4px; font-size: 13px; font-weight: 500; opacity: .8; }
.cover-using {
  position: absolute;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 550;
  opacity: .85;
}
.cover-using img { width: 16px; height: 16px; border-radius: 5px; }
.flap-shade { position: absolute; inset: 0; background: #000; opacity: 0; }

/* A group chat's picture: two faces, one tucked behind the other. */
.dm-group { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.dm-row .dm-group img { position: absolute; width: 30px; height: 30px; border: 2px solid #FFFFFF; }
.dm-group img:first-child { right: 0; top: 0; }
.dm-group img:last-child { left: 0; bottom: 0; }