/* ==========================================================================
   fudidate — app screens
   Every screen is an SVG exported from the Figma file (text already outlined),
   so it stays sharp at any size. Nothing here redraws the app.
   ========================================================================== */

.screen {
  position: relative;
  margin: 0;
  flex: none;
}

/* The export already carries the device corners, the notch and its own drop
   shadow, so nothing is drawn around it — it is the whole picture. */
.screen picture { display: block; }

.screen__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Small shared bits used by the page itself (not app UI)
   ========================================================================== */

.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex: none;
}

.avatar--a { background: linear-gradient(140deg, #ff7a8f, #b4276a); }
.avatar--b { background: linear-gradient(140deg, #8b6bff, #3b1d7a); }
.avatar--c { background: linear-gradient(140deg, #ffb37a, #c9432f); }
.avatar--d { background: linear-gradient(140deg, #6ee7d5, #1f6f7a); }
.avatar--e { background: linear-gradient(140deg, #ff9ec4, #7b2d6b); }

/* decorative street grid behind the "venues from the map" cell */
.mini-map__streets { stroke: rgba(255, 255, 255, 0.17); fill: none; stroke-width: 1; }
.mini-map__streets--soft { stroke: rgba(255, 255, 255, 0.09); }

.map-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-coral);
  box-shadow: 0 6px 18px -4px rgba(255, 8, 62, 0.75);
  color: #fff;
}

.map-pin svg { width: 12px; height: 12px; }
.map-pin--violet { background: var(--grad-violet); box-shadow: 0 6px 18px -4px rgba(140, 114, 199, 0.8); }
.map-pin--ghost {
  width: 9px; height: 9px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

/* chat illustration in the "chat opens at match" cell */
.msg {
  width: fit-content;
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.msg + .msg { margin-top: 8px; }

.msg--in {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-1);
  border-bottom-left-radius: 6px;
}

.msg--out {
  margin-left: auto;
  background: var(--grad-coral);
  border-bottom-right-radius: 6px;
  color: #fff;
}